v1.3 release

core/constants.py

@@ -4,7 +4,7 @@ from data.sig import SIG
 
 # General software
 SOFTWARE_NAME = "Spothole by M0TRT"
-SOFTWARE_VERSION = "1.3-pre"
+SOFTWARE_VERSION = "1.3"
 
 # HTTP headers used for spot providers that use HTTP
 HTTP_HEADERS = {"User-Agent": SOFTWARE_NAME + ", v" + SOFTWARE_VERSION + " (operated by " + SERVER_OWNER_CALLSIGN + ")"}
@@ -62,17 +62,17 @@ MODE_ALIASES = {
 BANDS = [
     Band(name="2200m", start_freq=135700, end_freq=137800),
     Band(name="600m", start_freq=472000, end_freq=479000),
-    Band(name="160m", start_freq=1800000, end_freq=2000000),
+    Band(name="160m", start_freq=1800000, end_freq=2000000, is_ham_hf=True),
-    Band(name="80m", start_freq=3500000, end_freq=4000000),
+    Band(name="80m", start_freq=3500000, end_freq=4000000, is_ham_hf=True),
-    Band(name="60m", start_freq=5250000, end_freq=5410000),
+    Band(name="60m", start_freq=5250000, end_freq=5410000, is_ham_hf=True),
-    Band(name="40m", start_freq=7000000, end_freq=7300000),
+    Band(name="40m", start_freq=7000000, end_freq=7300000, is_ham_hf=True),
-    Band(name="30m", start_freq=10100000, end_freq=10150000),
+    Band(name="30m", start_freq=10100000, end_freq=10150000, is_ham_hf=True),
-    Band(name="20m", start_freq=14000000, end_freq=14350000),
+    Band(name="20m", start_freq=14000000, end_freq=14350000, is_ham_hf=True),
-    Band(name="17m", start_freq=18068000, end_freq=18168000),
+    Band(name="17m", start_freq=18068000, end_freq=18168000, is_ham_hf=True),
-    Band(name="15m", start_freq=21000000, end_freq=21450000),
+    Band(name="15m", start_freq=21000000, end_freq=21450000, is_ham_hf=True),
-    Band(name="12m", start_freq=24890000, end_freq=24990000),
+    Band(name="12m", start_freq=24890000, end_freq=24990000, is_ham_hf=True),
     Band(name="11m", start_freq=26965000, end_freq=27405000),
-    Band(name="10m", start_freq=28000000, end_freq=29700000),
+    Band(name="10m", start_freq=28000000, end_freq=29700000, is_ham_hf=True),
     Band(name="6m", start_freq=50000000, end_freq=54000000),
     Band(name="5m", start_freq=56000000, end_freq=60500000),
     Band(name="4m", start_freq=70000000, end_freq=70500000),

data/band.py

@@ -11,3 +11,5 @@ class Band:
     start_freq: float
     # Stop frequency, in Hz
     end_freq: float
+    # Whether this is an HF amateur radio band
+    is_ham_hf: bool = False

data/solar_conditions.py

@@ -161,8 +161,9 @@ class SolarConditions:
     blackout_forecast_r1r2: dict = None
     # NOAA Radio Blackout (R3 or greater) probability forecast, keyed by UNIX timestamp of start of day UTC
     blackout_forecast_r3_or_greater: dict = None
-    # Ionosonde measurements from LGDC, list of dicts with keys: ursi, name, fof2, muf
+    # Ionosonde measurements from LGDC, dict keyed by URSI code, values are dicts with keys: ursi, name, fof2, muf, luf,
-    ionosonde_data: list = None
+    # band_states
+    ionosonde_data: dict = None
 
     # Derived values (populated by infer_descriptions())
     # HF radio blackout risk description, derived from xray
@@ -196,6 +197,7 @@ class SolarConditions:
         self.electron_flux_desc = _lookup_by_threshold(self.electron_flux, ELECTRON_FLUX_DESCRIPTIONS)
 
     def to_json(self):
-        """JSON serialise"""
+        """JSON serialise. Dict key order is insertion order (Python 3.7+ guarantee), so callers receive
+        fields in a predictable, logical sequence without relying on sort_keys."""
 
-        return json.dumps(self, default=lambda o: o.__dict__, sort_keys=True)
+        return json.dumps(self, default=lambda o: o.__dict__)

solarconditionsproviders/giroionosonde.py

@@ -6,18 +6,19 @@ from threading import Thread, Event
 import pytz
 import requests
 
-from core.constants import HTTP_HEADERS
+from core.constants import HTTP_HEADERS, BANDS
 from solarconditionsproviders.solar_conditions_provider import SolarConditionsProvider
 
 POLL_INTERVAL = 3600  # 1 hour
 STATIONS_INDEX = "datafiles/didbase-stations.csv"
 LGDC_URL = "https://lgdc.uml.edu/common/DIDBGetValues"
 HISTORY_HOURS = 24
+HF_BANDS = [b for b in BANDS if b.is_ham_hf]
 
 
 class GIROIonosonde(SolarConditionsProvider):
     """Solar conditions provider using ionosonde data from the GIRO Data Center.
-    Queries foF2 and MUF measurements for all stations in datafiles/didbase-stations.csv."""
+    Queries foF2, MUF, and LUF measurements for all stations in datafiles/didbase-stations.csv."""
 
     def __init__(self, provider_config):
         super().__init__(provider_config)
@@ -35,6 +36,17 @@ class GIROIonosonde(SolarConditionsProvider):
                     stations.append({"ursi": row[0].strip(), "name": row[1].strip()})
         return stations
 
+    def setup(self, solar_conditions, solar_conditions_cache):
+        """Prepopulate the ionosonde_data map with known URSI and station names, so that the API exposes this structure
+        even before we actually have any data in it."""
+
+        super().setup(solar_conditions, solar_conditions_cache)
+        self.update_data({"ionosonde_data": {
+            s["ursi"]: {"ursi": s["ursi"], "name": s["name"], "fof2": None, "muf": None, "luf": None,
+                        "band_states": None}
+            for s in self._stations
+        }})
+
     def start(self):
         logging.info(f"Set up query of GIRO ionosonde data API every {POLL_INTERVAL} seconds.")
         self._thread = Thread(target=self._run, daemon=True)
@@ -51,63 +63,98 @@ class GIROIonosonde(SolarConditionsProvider):
 
     def _poll(self):
         try:
-            logging.debug(f"Polling {self.name} ionosonde data...")
+            logging.debug(f"Polling GIRO ionosonde data...")
             now = datetime.now(timezone.utc)
             from_time = now - timedelta(hours=HISTORY_HOURS)
-            results = []
+            ionosonde_data = dict(self._solar_conditions.ionosonde_data or {})
+            updated_count = 0
 
             for station in self._stations:
                 if self._stop_event.is_set():
                     break
                 ursi = station["ursi"]
                 name = station["name"]
-                entry = {"ursi": ursi, "name": name, "fof2": None, "muf": None}
                 try:
-                    fof2, muf = self._fetch_station_data(ursi, from_time, now)
+                    fof2, muf, luf = self._fetch_station_data(ursi, from_time, now)
-                    entry["fof2"] = fof2
-                    entry["muf"] = muf
                     if fof2 and muf:
-                        results.append(entry)
+                        band_states = self._compute_band_statess(fof2, muf, luf or {})
+                        ionosonde_data[ursi] = {"ursi": ursi, "name": name, "fof2": fof2, "muf": muf,
+                                                "luf": luf or None, "band_states": band_states}
+                        updated_count += 1
                 except Exception:
-                    logging.debug(f"Could not fetch ionosonde data for {ursi} ({name})")
+                    logging.warning(f"Could not fetch ionosonde data for {ursi} ({name})")
 
-            self.update_data({"ionosonde_data": results})
+            self.update_data({"ionosonde_data": ionosonde_data})
             self.status = "OK"
             self.last_update_time = datetime.now(pytz.UTC)
-            logging.debug(f"Received ionosonde data for {len(results)} stations from {self.name}.")
+            logging.debug(f"Updated ionosonde data for {updated_count} stations.")
 
         except Exception:
             self.status = "Error"
-            logging.exception(f"Exception in GIRO Ionosonde data provider ({self.name})")
+            logging.exception(f"Exception in GIRO Ionosonde data provider")
             self._stop_event.wait(timeout=1)
 
     def _fetch_station_data(self, ursi, from_time, to_time):
-        """Fetch foF2 and MUF readings for a station. Returns (fof2_dict, muf_dict) keyed by UNIX timestamp."""
+        """Fetch foF2, MUF and LUF readings for a station. Returns (fof2_dict, muf_dict, luf_dict) keyed by UNIX timestamp."""
 
         from_str = from_time.strftime("%Y.%m.%d+%H:%M:%S")
         to_str = to_time.strftime("%Y.%m.%d+%H:%M:%S")
-        url = (
+        url = f"{LGDC_URL}?ursiCode={ursi}&charName=foF2,MUFD,fmin&DMUF=3000&fromDate={from_str}&toDate={to_str}"
-            f"{LGDC_URL}?ursiCode={ursi}&charName=foF2,MUFD&DMUF=3000&fromDate={from_str}&toDate={to_str}"
-        )
         response = requests.get(url, headers=HTTP_HEADERS, timeout=(5, 15))
         if response.status_code != 200:
-            return None, None
+            return None, None, None
         return self._parse_all(response.text)
 
+    @staticmethod
+    def _latest(d):
+        """Return the value with the highest timestamp key, or None if the dict is empty."""
+        return d[max(d.keys())] if d else None
+
+    @staticmethod
+    def _compute_band_statess(fof2_dict, muf_dict, luf_dict):
+        """Compute HF band states from the latest foF2, MUF and LUF values.
+
+        States:
+          Closed if band frequency is below LUF (if known) or above MUF
+          Short if band frequency is >= LUF and < foF2 (good for NVIS)
+          Long if band frequency is >= foF2 and < MUF (good for DX)
+        """
+
+        # We have a list of timestamped data for each value, but for this we only want the latest value
+        fof2 = GIROIonosonde._latest(fof2_dict)
+        muf = GIROIonosonde._latest(muf_dict)
+        luf = GIROIonosonde._latest(luf_dict)
+        if fof2 is None or muf is None:
+            return {}
+        band_states = {}
+
+        # Iterate over all ham HF bands, we don't care about the others at this point
+        for band in HF_BANDS:
+            freq = band.start_freq / 1000000
+            if freq > muf or (luf is not None and freq < luf):
+                band_states[band.name] = "Closed"
+            elif freq < fof2:
+                band_states[band.name] = "Short"
+            else:
+                band_states[band.name] = "Long"
+        return band_states
+
     @staticmethod
     def _parse_all(text):
-        """Parse web server response and return (fof2_dict, muf_dict) keyed by UNIX timestamp."""
+        """Parse web server response and return (fof2_dict, muf_dict, luf_dict) keyed by UNIX timestamp."""
 
         fof2_data = {}
         muf_data = {}
+        luf_data = {}
         for line in text.splitlines():
             line = line.strip()
             if not line or line.startswith('#'):
                 continue
-            # Data rows: timestamp CS foF2 QD MUFD QD
+            # Data rows have the following format: timestamp CS foF2 QD MUFD QD fmin QD
             parts = line.split()
             if len(parts) >= 5:
                 try:
+                    # Python 3.8 TZ parsing fudge
                     ts = datetime.fromisoformat(parts[0].replace('Z', '+00:00')).timestamp()
                 except ValueError:
                     continue
@@ -119,4 +166,9 @@ class GIROIonosonde(SolarConditionsProvider):
                     muf_data[ts] = float(parts[4])
                 except ValueError:
                     pass
-        return fof2_data, muf_data
+                if len(parts) >= 7:
+                    try:
+                        luf_data[ts] = float(parts[6])
+                    except ValueError:
+                        pass
+        return fof2_data, muf_data, luf_data

solarconditionsproviders/solar_conditions_provider.py

@@ -16,10 +16,11 @@ class SolarConditionsProvider:
         self.status = "Not Started" if self.enabled else "Disabled"
         self._solar_conditions = None
 
-    def setup(self, solar_conditions):
+    def setup(self, solar_conditions, solar_conditions_cache):
-        """Set up the provider, giving it the solar conditions dict to update"""
+        """Set up the provider, giving it the solar conditions object and its backing cache"""
 
         self._solar_conditions = solar_conditions
+        self._solar_conditions_cache = solar_conditions_cache
 
     def start(self):
         """Start the provider. This should return immediately after spawning threads to access the remote resources"""
@@ -39,3 +40,4 @@ class SolarConditionsProvider:
                 if hasattr(self._solar_conditions, key):
                     setattr(self._solar_conditions, key, value)
             self._solar_conditions.infer_descriptions()
+            self._solar_conditions_cache['solar_conditions'] = self._solar_conditions

spothole.py

@@ -18,7 +18,8 @@ from server.webserver import WebServer
 # Globals
 spots = Cache('cache/spots_cache')
 alerts = Cache('cache/alerts_cache')
-solar_conditions = SolarConditions()
+solar_conditions_cache = Cache('cache/solar_conditions_cache')
+solar_conditions = solar_conditions_cache.get('solar_conditions', SolarConditions())
 web_server = None
 status_data = {}
 spot_providers = []
@@ -48,6 +49,7 @@ def shutdown(sig, frame):
     lookup_helper.stop()
     spots.close()
     alerts.close()
+    solar_conditions_cache.close()
     os._exit(0)
 
 
@@ -120,7 +122,7 @@ if __name__ == '__main__':
     for entry in config.get("solar-condition-providers", []):
         solar_condition_providers.append(get_solar_conditions_provider_from_config(entry))
     for p in solar_condition_providers:
-        p.setup(solar_conditions=solar_conditions)
+        p.setup(solar_conditions=solar_conditions, solar_conditions_cache=solar_conditions_cache)
         if p.enabled:
             p.start()
 

templates/about.html

@@ -69,7 +69,7 @@
     <p>This software is dedicated to the memory of Tom G1PJB, SK, a friend and colleague who sadly passed away around the time I started writing it in Autumn 2025. I was looking forward to showing it to you when it was done.</p>
 </div>
 
-<script src="/js/common.js?v=1778868536"></script>
+<script src="/js/common.js?v=1780424170"></script>
 <script>$(document).ready(function() { $("#nav-link-about").addClass("active"); }); <!-- highlight active page in nav --></script>
 
 {% end %}

templates/add_spot.html

@@ -21,11 +21,11 @@
             <form class="row g-3">
                 <div class="col-auto">
                     <label for="dx-call" class="form-label">DX Call *</label>
-                    <input type="text" class="form-control" id="dx-call" placeholder="N0CALL" style="max-width: 8em;">
+                    <input type="text" class="form-control input-narrow" id="dx-call" placeholder="N0CALL">
                 </div>
                 <div class="col-auto">
                     <label for="freq" class="form-label">Frequency (kHz) *</label>
-                    <input type="text" class="form-control" id="freq" placeholder="e.g. 14100" style="max-width: 8em;">
+                    <input type="text" class="form-control input-narrow" id="freq" placeholder="e.g. 14100">
                 </div>
                 <div class="col-auto">
                     <label for="mode" class="form-label">Mode</label>
@@ -41,22 +41,22 @@
                 </div>
                 <div class="col-auto">
                     <label for="sig-ref" class="form-label">SIG Reference</label>
-                    <input type="text" class="form-control" id="sig-ref" placeholder="e.g. GB-0001" style="max-width: 8em;">
+                    <input type="text" class="form-control input-narrow" id="sig-ref" placeholder="e.g. GB-0001">
                 </div>
                 <div class="col-auto">
                     <label for="dx-grid" class="form-label">DX Grid</label>
-                    <input type="text" class="form-control" id="dx-grid" placeholder="e.g. AA00aa" style="max-width: 8em;">
+                    <input type="text" class="form-control input-narrow" id="dx-grid" placeholder="e.g. AA00aa">
                 </div>
                 <div class="col-auto">
                     <label for="comment" class="form-label">Comment</label>
-                    <input type="text" class="form-control" id="comment" placeholder="e.g. 59 TNX QSO 73" style="max-width: 12em;">
+                    <input type="text" class="form-control input-medium" id="comment" placeholder="e.g. 59 TNX QSO 73">
                 </div>
                 <div class="col-auto">
                     <label for="de-call" class="form-label">Your Call *</label>
-                    <input type="text" class="form-control storeable-text" id="de-call" placeholder="N0CALL" style="max-width: 8em;">
+                    <input type="text" class="form-control storeable-text input-narrow" id="de-call" placeholder="N0CALL">
                 </div>
                 <div class="col-auto">
-                    <button type="button" class="btn btn-primary" style="margin-top: 2em;" onclick="addSpot();">Spot</button>
+                    <button type="button" class="btn btn-primary mt-2em" onclick="addSpot();">Spot</button>
                 </div>
             </form>
 
@@ -69,8 +69,8 @@
 
 </div>
 
-<script src="/js/common.js?v=1778868536"></script>
+<script src="/js/common.js?v=1780424170"></script>
-<script src="/js/add-spot.js?v=1778868536"></script>
+<script src="/js/add-spot.js?v=1780424170"></script>
 <script>$(document).ready(function() { $("#nav-link-add-spot").addClass("active"); }); <!-- highlight active page in nav --></script>
 
 {% end %}

templates/alerts.html

@@ -70,8 +70,8 @@
 
 </div>
 
-<script src="/js/common.js?v=1778868536"></script>
+<script src="/js/common.js?v=1780424170"></script>
-<script src="/js/alerts.js?v=1778868536"></script>
+<script src="/js/alerts.js?v=1780424170"></script>
 <script>$(document).ready(function() { $("#nav-link-alerts").addClass("active"); }); <!-- highlight active page in nav --></script>
 
 {% end %}

templates/apidocs.html

@@ -1,8 +1,5 @@
-{% extends "base.html" %}
+{% extends "skeleton.html" %}
-{% block content %}
+{% block body %}
-
 <redoc spec-url="/apidocs/openapi.yml"></redoc>
 <script src="https://cdn.redoc.ly/redoc/latest/bundles/redoc.standalone.js"> </script>
-<script>$(document).ready(function() { $("#nav-link-api").addClass("active"); }); <!-- highlight active page in nav --></script>
-
 {% end %}

templates/bands.html

@@ -76,9 +76,9 @@
 <script>
     let spotProvidersEnabledByDefault = {% raw json_encode(web_ui_options["spot-providers-enabled-by-default"]) %};
 </script>
-<script src="/js/common.js?v=1778868536"></script>
+<script src="/js/common.js?v=1780424170"></script>
-<script src="/js/spotsbandsandmap.js?v=1778868536"></script>
+<script src="/js/spotsbandsandmap.js?v=1780424170"></script>
-<script src="/js/bands.js?v=1778868536"></script>
+<script src="/js/bands.js?v=1780424170"></script>
 <script>$(document).ready(function() { $("#nav-link-bands").addClass("active"); }); <!-- highlight active page in nav --></script>
 
 {% end %}

templates/base.html

@@ -1,44 +1,11 @@
-<!DOCTYPE html>
+{% extends "skeleton.html" %}
-<html lang="en">
+{% block head_extra %}
-<head>
+    <link rel="stylesheet" href="/css/style.css?v=1780424170" type="text/css">
-    <meta charset="utf-8"/>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
-    <meta name="color-scheme" content="light dark">
-    <meta name="theme-color" content="white"/>
-    <meta name="mobile-web-app-capable" content="yes">
-    <meta name="apple-mobile-web-app-capable" content="yes">
-    <meta name="apple-mobile-web-app-status-bar-style" content="white-translucent">
-
-    <meta property="og:title" content="Spothole"/>
-    <meta property="twitter:title" content="Spothole"/>
-    <meta name="description" content="An Amateur Radio spotting tool bringing together DX clusters and outdoor programmes, providing a universal JSON API and web interface."/>
-    <meta property="og:description" content="An Amateur Radio spotting tool bringing together DX clusters and outdoor programmes, providing a universal JSON API and web interface."/>
-    <link rel="canonical" href="https://spothole.app/"/>
-    <meta property="og:url" content="https://spothole.app/"/>
-    <meta property="og:image" content="https://spothole.app/img/banner.png"/>
-    <meta property="twitter:image" content="https://spothole.app/img/banner.png"/>
-    <meta name="twitter:card" content="summary_large_image"/>
-    <meta name="author" content="Ian Renton"/>
-    <meta property="og:locale" content="en_GB"/>
-    <meta property="og:type" content="website"/>
-
-    <title>Spothole</title>
-
-    <link rel="stylesheet" href="/css/style.css?v=1778868536" type="text/css">
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet"
           integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
     <link href="/fa/css/fontawesome.min.css" rel="stylesheet" />
     <link href="/fa/css/solid.min.css" rel="stylesheet" />
 
-    <link rel="icon" type="image/png" href="/img/icon-512.png">
-    <link rel="apple-touch-icon" href="img/icon-512-pwa.png">
-    <link rel="alternate icon" type="image/png" href="/img/icon-192.png">
-    <link rel="alternate icon" type="image/png" href="/img/icon-32.png">
-    <link rel="alternate icon" type="image/png" href="/img/icon-16.png">
-    <link rel="alternate icon" type="image/x-icon" href="/favicon.ico">
-
-    <link rel="manifest" href="manifest.webmanifest">
-
     <script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"
             integrity="sha384-1H217gwSVyLSIfaLxHbE7dRb3v4mYCKbpQvzx0cegeju1MVsGrX5xXxAvs/HgeFs"
             crossorigin="anonymous"></script>
@@ -52,12 +19,11 @@
             integrity="sha384-L1eE4eD41kpBIWe2I0eHy+GnEUC4RIpcvibVW2JCminuPlTl+2Bc528iPdVMg5Dn"
             crossorigin="anonymous"></script>
 
-    <script src="https://misc.ianrenton.com/jsutils/utils.js?v=1778868536"></script>
+    <script src="https://misc.ianrenton.com/jsutils/utils.js?v=1780424170"></script>
-    <script src="https://misc.ianrenton.com/jsutils/ui-ham.js?v=1778868536"></script>
+    <script src="https://misc.ianrenton.com/jsutils/ui-ham.js?v=1780424170"></script>
-    <script src="https://misc.ianrenton.com/jsutils/geo.js?v=1778868536"></script>
+    <script src="https://misc.ianrenton.com/jsutils/geo.js?v=1780424170"></script>
-
+{% end %}
-</head>
+{% block body %}
-<body>
 <div class="container">
     <nav id="header" class="navbar navbar-expand-lg bg-body p-0 border-bottom">
         <div class="container-fluid p-0">
@@ -96,7 +62,7 @@
     <div id="footer" class="hideonmobile hideonmap">
         <footer class="d-flex flex-wrap justify-content-between align-items-center py-3 my-4 border-top">
             <p class="col-md-4 mb-0 text-body-secondary">Made with love by <a href="https://ianrenton.com" class="text-body-secondary">Ian, MØTRT</a> and other contributors.</p>
-            <p class="col-md-4 mb-0 justify-content-center text-body-secondary" style="text-align: center;">Spothole v{{software_version}}</p>
+            <p class="col-md-4 mb-0 justify-content-center text-body-secondary text-center">Spothole v{{software_version}}</p>
             <ul class="nav col-md-4 justify-content-end">
                 <li class="nav-item">
                     <a href="/about#faq" class="nav-link px-3 text-body-secondary">FAQ</a>
@@ -117,5 +83,4 @@
 
 <div id="embeddedModeFooter" class="text-body-secondary pt-2 px-3 pb-1">Powered by <img src="/img/logo.png" class="logo" width="96" height="30" alt="Spothole"></div>
 
-</body>
+{% end %}
-</html>

templates/conditions.html

@@ -176,17 +176,39 @@
 {% if has_giro_ionosonde %}
 <div class="card mt-5">
     <div class="card-header">
-        Critical & Maximum Usable Frequencies
+        Ionosonde Data
     </div>
     <div class="card-body">
         <div class="mb-3">
             <label for="ionosonde-station" class="form-label">Ionosonde station:</label>
-            <select id="ionosonde-station" class="form-select storeable-select d-inline-block ms-2"
+            <select id="ionosonde-station" class="form-select storeable-select d-inline-block ms-2 w-auto"
-                    style="width: auto;" oninput="ionosondeStationChanged();">
+                    oninput="ionosondeStationChanged();">
             </select>
         </div>
-        <div id="ionosonde-latest" class="mb-3"></div>
+        <div id="ionosonde-latest" class="mb-3">
-        <canvas id="ionosonde-chart" class="mt-3 mb-3 d-none d-md-block"></canvas>
+            <div id="ionosonde-no-data" class="alert alert-warning mt-2 mb-0 py-2 js-hidden">No data available for this station.</div>
+            <div id="ionosonde-data-rows" class="js-hidden">
+                <div class="row align-items-center me-0">
+                    <div class="col-12 py-2 text-muted">Latest values as of <span id="ionosonde-latest-time"></span></div>
+                </div>
+                <div class="row align-items-center me-0">
+                    <div class="col-12 col-md-4 py-2">LUF: <strong id="ionosonde-latest-luf"></strong></div>
+                    <div class="col-12 col-md-4 py-2">foF2: <strong id="ionosonde-latest-fof2"></strong></div>
+                    <div class="col-12 col-md-4 py-2">MUF (3000 km): <strong id="ionosonde-latest-muf"></strong></div>
+                </div>
+                <div id="ionosonde-stale-warning" class="alert alert-warning mt-2 mb-0 py-2 js-hidden">Data is more than 12 hours old!</div>
+            </div>
+        </div>
+        <div id="ionosonde-band-state" class="mb-3 js-hidden">
+            <table class="table table-sm table-bordered mb-0 d-none d-md-table table-fixed-on-desktop">
+                <thead><tr id="ionosonde-band-state-head"></tr></thead>
+                <tbody><tr id="ionosonde-band-state-row"></tr></tbody>
+            </table>
+            <table class="table table-sm table-bordered mb-0 d-md-none">
+                <tbody id="ionosonde-band-state-body"></tbody>
+            </table>
+        </div>
+        <canvas id="ionosonde-chart" class="mt-3 mb-3 hideonmobile"></canvas>
         <div class="form-text mt-2">Data from the <a href="https://lgdc.uml.edu/">Lowell GIRO Data Center</a>.</div>
     </div>
 </div>
@@ -199,8 +221,8 @@
     <div class="card-body">
         <div class="mb-3">
             <label for="dxstats-de-continent" class="form-label">Your continent:</label>
-            <select id="dxstats-de-continent" class="form-select storeable-select d-inline-block ms-2"
+            <select id="dxstats-de-continent" class="form-select storeable-select d-inline-block ms-2 w-auto"
-                    style="width: auto;" oninput="dxStatsContientChanged();">
+                    oninput="dxStatsContientChanged();">
                 <option value="EU">Europe</option>
                 <option value="NA">North America</option>
                 <option value="SA">South America</option>
@@ -211,7 +233,7 @@
             </select>
         </div>
         <div class="table-responsive">
-            <table class="table table-sm table-bordered mb-0">
+            <table class="table table-sm table-bordered mb-0 table-fixed-on-desktop">
                 <thead>
                 <tr>
                     <th></th>
@@ -249,8 +271,8 @@
 </div>
 
 <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.9/dist/chart.umd.min.js"></script>
-<script src="/js/common.js?v=1778868536"></script>
+<script src="/js/common.js?v=1780424170"></script>
-<script src="/js/conditions.js?v=1778868536"></script>
+<script src="/js/conditions.js?v=1780424170"></script>
 <script>$(document).ready(function () {
     $("#nav-link-conditions").addClass("active");
 }); <!-- highlight active page in nav --></script>

templates/map.html

@@ -2,7 +2,7 @@
 {% block content %}
 
 <div id="map">
-    <div id="settingsButtonRowMap" class="mt-3 px-3" style="z-index: 1002; position: relative;">
+    <div id="settingsButtonRowMap" class="mt-3 px-3">
         <div class="row mb-3">
             <div class="col-auto me-auto pt-3"></div>
             <div class="col-auto">
@@ -94,9 +94,9 @@
 <script>
     let spotProvidersEnabledByDefault = {% raw json_encode(web_ui_options["spot-providers-enabled-by-default"]) %};
 </script>
-<script src="/js/common.js?v=1778868536"></script>
+<script src="/js/common.js?v=1780424170"></script>
-<script src="/js/spotsbandsandmap.js?v=1778868536"></script>
+<script src="/js/spotsbandsandmap.js?v=1780424170"></script>
-<script src="/js/map.js?v=1778868536"></script>
+<script src="/js/map.js?v=1780424170"></script>
 <script>$(document).ready(function() { $("#nav-link-map").addClass("active"); }); <!-- highlight active page in nav --></script>
 
 {% end %}

templates/skeleton.html

@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
+    <meta name="color-scheme" content="light dark">
+    <meta name="theme-color" content="white"/>
+    <meta name="mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-status-bar-style" content="white-translucent">
+
+    <meta property="og:title" content="Spothole"/>
+    <meta property="twitter:title" content="Spothole"/>
+    <meta name="description" content="An Amateur Radio spotting tool bringing together DX clusters and outdoor programmes, providing a universal JSON API and web interface."/>
+    <meta property="og:description" content="An Amateur Radio spotting tool bringing together DX clusters and outdoor programmes, providing a universal JSON API and web interface."/>
+    <link rel="canonical" href="https://spothole.app/"/>
+    <meta property="og:url" content="https://spothole.app/"/>
+    <meta property="og:image" content="https://spothole.app/img/banner.png"/>
+    <meta property="twitter:image" content="https://spothole.app/img/banner.png"/>
+    <meta name="twitter:card" content="summary_large_image"/>
+    <meta name="author" content="Ian Renton"/>
+    <meta property="og:locale" content="en_GB"/>
+    <meta property="og:type" content="website"/>
+
+    <title>Spothole</title>
+
+    <link rel="icon" type="image/png" href="/img/icon-512.png">
+    <link rel="apple-touch-icon" href="img/icon-512-pwa.png">
+    <link rel="alternate icon" type="image/png" href="/img/icon-192.png">
+    <link rel="alternate icon" type="image/png" href="/img/icon-32.png">
+    <link rel="alternate icon" type="image/png" href="/img/icon-16.png">
+    <link rel="alternate icon" type="image/x-icon" href="/favicon.ico">
+
+    <link rel="manifest" href="manifest.webmanifest">
+
+    {% block head_extra %}{% end %}
+</head>
+<body>
+{% block body %}{% end %}
+</body>
+</html>

templates/spots.html

@@ -104,9 +104,9 @@
 <script>
     let spotProvidersEnabledByDefault = {% raw json_encode(web_ui_options["spot-providers-enabled-by-default"]) %};
 </script>
-<script src="/js/common.js?v=1778868536"></script>
+<script src="/js/common.js?v=1780424170"></script>
-<script src="/js/spotsbandsandmap.js?v=1778868536"></script>
+<script src="/js/spotsbandsandmap.js?v=1780424170"></script>
-<script src="/js/spots.js?v=1778868536"></script>
+<script src="/js/spots.js?v=1780424170"></script>
 <script>$(document).ready(function() { $("#nav-link-spots").addClass("active"); }); <!-- highlight active page in nav --></script>
 
 {% end %}

templates/status.html

@@ -59,8 +59,8 @@
     </div>
 </div>
 
-<script src="/js/common.js?v=1778868536"></script>
+<script src="/js/common.js?v=1780424170"></script>
-<script src="/js/status.js?v=1778868536"></script>
+<script src="/js/status.js?v=1780424170"></script>
 <script>
     $(document).ready(function() { $("#nav-link-status").addClass("active"); }); <!-- highlight active page in nav -->
 </script>

webassets/css/style.css

@@ -211,6 +211,11 @@ div#map {
     font-size: 16px;
 }
 
+#settingsButtonRowMap {
+    position: relative;
+    z-index: 1002;
+}
+
 .leaflet-container {
     font-family: var(--bs-body-font-family) !important;
 }
@@ -323,6 +328,31 @@ div.band-spot:hover span.band-spot-info {
 }
 
 
+/* UTILITY CLASSES */
+
+/* For elements initially hidden and shown/hidden by JS. Unlike Bootstrap's d-none this has no !important,
+   so jQuery's .show() / .hide() / .toggle() can override it with an inline style as expected. */
+.js-hidden {
+    display: none;
+}
+
+.table-fixed-on-desktop {
+    table-layout: fixed;
+}
+
+.input-narrow {
+    max-width: 8em;
+}
+.input-medium {
+    max-width: 12em;
+}
+
+/* Pushes a submit button down to align with labelled inputs in a flex row */
+.mt-2em {
+    margin-top: 2em;
+}
+
+
 /* GENERAL MOBILE SUPPORT */
 
 @media (max-width: 991.99px) {
@@ -346,6 +376,9 @@ div.band-spot:hover span.band-spot-info {
     input#search {
         max-width: 7em;
     }
+    .table-fixed-on-desktop {
+        table-layout: auto !important;
+    }
 }
 
 @media (min-width: 992px) {

webassets/js/conditions.js

@@ -115,7 +115,7 @@ function loadSolarConditions() {
 
         // Ionosonde
 
-        if (jsonData.ionosonde_data && jsonData.ionosonde_data.length > 0) {
+        if (jsonData.ionosonde_data && Object.keys(jsonData.ionosonde_data).length > 0) {
             ionosondeData = jsonData.ionosonde_data;
             populateIonosondeDropdown(ionosondeData);
             renderIonosondeData();
@@ -366,9 +366,12 @@ function populateIonosondeDropdown(data) {
     const savedUrsi = localStorage.getItem('#ionosonde-station:value');
     const savedValue = savedUrsi ? JSON.parse(savedUrsi) : null;
     select.empty();
-    data.forEach(function (station) {
+    // Sort by station name rather than URSI because station name is what's displayed, and any out-of-order names might
+    // confuse the user
+    Object.values(data).sort((a, b) => a.name.localeCompare(b.name)).forEach(function (station) {
         select.append($('<option>', {value: station.ursi, text: station.name}));
     });
+    // Select one by default if the user's localStorage has an existing selection for this
     if (savedValue && select.find('option[value="' + savedValue + '"]').length) {
         select.val(savedValue);
     }
@@ -376,20 +379,26 @@ function populateIonosondeDropdown(data) {
 
 // Render the foF2/MUF data and line chart for the currently selected station
 function renderIonosondeData() {
+    // First make sure that we have some data, that a station entry is selected in the drop-down box, and that the
+    // data contains an entry for that station. If not, this represents an odd state (over and above just "no data for
+    // this station", so bail out at this point. The user will have to reselect something from the list, or wait until
+    // the API is behaving itself again.
     if (!ionosondeData) return;
     const ursi = $('#ionosonde-station').val();
     if (!ursi) return;
-    const station = ionosondeData.find(function (s) {
+    const station = ionosondeData[ursi];
-        return s.ursi === ursi;
-    });
     if (!station) return;
 
+    // Set up some styles, matching the k-index chart. We use Bootstrap's "primary", "danger", and "success" colours
+    // not for any real reason but just to get a suitable blue, red, and green that match the other colours Spothole uses
     const style = getComputedStyle(document.documentElement);
     const fof2Color = style.getPropertyValue('--bs-primary').trim();
-    const mufColor = style.getPropertyValue('--bs-danger').trim();
+    const mufColor = style.getPropertyValue('--bs-success').trim();
+    const lufColor = style.getPropertyValue('--bs-danger').trim();
     const textColor = style.getPropertyValue('--bs-body-color').trim() || '#666';
     const gridColor = style.getPropertyValue('--bs-border-color').trim() || 'rgba(128,128,128,0.3)';
 
+    // Utility function to convert the dict of timestamp-to-value into just a value array in timestamp key order
     function toSeries(dict) {
         if (!dict) return [];
         return Object.entries(dict)
@@ -399,34 +408,57 @@ function renderIonosondeData() {
 
     const fof2Entries = toSeries(station.fof2);
     const mufEntries = toSeries(station.muf);
-    const allTs = [...fof2Entries, ...mufEntries].map(e => e.ts);
+    const lufEntries = toSeries(station.luf);
-    if (allTs.length === 0) return;
+    const allTs = [...fof2Entries, ...mufEntries, ...lufEntries].map(e => e.ts);
+    if (allTs.length === 0) {
+        $('#ionosonde-no-data').show();
+        $('#ionosonde-data-rows').hide();
+        $('#ionosonde-band-state').hide();
+        $('#ionosonde-chart').hide();
+        if (ionosondeChart) { ionosondeChart.destroy(); ionosondeChart = null; }
+        return;
+    }
+    $('#ionosonde-no-data').hide();
+    $('#ionosonde-data-rows').show();
 
     // Populate latest values summary (visible on all screen sizes)
     const latestFof2 = fof2Entries.length ? fof2Entries[fof2Entries.length - 1].val : null;
     const latestMuf = mufEntries.length ? mufEntries[mufEntries.length - 1].val : null;
-    const latestTs = allTs.length ? Math.max(...allTs) : null;
+    const latestLuf = lufEntries.length ? lufEntries[lufEntries.length - 1].val : null;
-    var latestTimeStr = '';
+    const minTs = allTs.length ? Math.min(...allTs) : null;
-    if (latestTs != null) {
+    const maxTs = allTs.length ? Math.max(...allTs) : null;
-        const latestDate = moment.utc(latestTs * 1000);
+    if (maxTs != null) {
-        latestTimeStr = latestDate.format('DD MMM YYYY HH:mm [UTC]') + ' (' + latestDate.fromNow() + ')';
+        const latestDate = moment.utc(maxTs * 1000);
+        $('#ionosonde-latest-time').text(latestDate.format('DD MMM YYYY HH:mm [UTC]') + ' (' + latestDate.fromNow() + ')');
+    }
+    $('#ionosonde-latest-luf').text(latestLuf !== null ? latestLuf.toFixed(2) + ' MHz' : 'N/A');
+    $('#ionosonde-latest-fof2').text(latestFof2 !== null ? latestFof2.toFixed(2) + ' MHz' : 'N/A');
+    $('#ionosonde-latest-muf').text(latestMuf !== null ? latestMuf.toFixed(2) + ' MHz' : 'N/A');
+    $('#ionosonde-stale-warning').toggle(maxTs !== null && (Date.now() / 1000 - maxTs) > 12 * 3600);
+
+    // Populate band state tables. There are actually two tables to populate, which is pretty janky, but allows us to
+    // display horizontally on desktop but flip it around to become a vertical list on mobile.
+    const bandStateClass = {'Closed': 'bg-danger-subtle', 'Short': 'bg-primary-subtle', 'Long': 'bg-success-subtle'};
+    const bandStates = station.band_states;
+    if (bandStates && Object.keys(bandStates).length > 0) {
+        const headRow = $('#ionosonde-band-state-head').empty();
+        const dataRow = $('#ionosonde-band-state-row').empty();
+        const vBody = $('#ionosonde-band-state-body').empty();
+        Object.entries(bandStates).forEach(([band, state]) => {
+            const cls = bandStateClass[state] || '';
+            headRow.append($('<th>').addClass('text-center').text(band));
+            dataRow.append($('<td>').addClass('text-center ' + cls).text(state));
+            vBody.append($('<tr>').append($('<td>').addClass('fw-bold').text(band)).append($('<td>').addClass(cls).text(state)));
+        });
+        $('#ionosonde-band-state').show();
+    } else {
+        $('#ionosonde-band-state').hide();
     }
-    $('#ionosonde-latest').html(
-        '<div class="row border-bottom align-items-center me-0">' +
-        '<div class="col-12 col-md-6 py-2 text-muted">Latest values as of ' + latestTimeStr + '</div>' +
-        '<div class="col-12 col-md-2 py-2">foF2: <strong>' + (latestFof2 !== null ? latestFof2.toFixed(2) + ' MHz' : 'N/A') + '</strong></div>' +
-        '<div class="col-12 col-md-4 py-2">MUF (3000 km): <strong>' + (latestMuf !== null ? latestMuf.toFixed(2) + ' MHz' : 'N/A') + '</strong></div>' +
-        '</div>' +
-        '</div>'
-    );
 
     if (ionosondeChart) {
         ionosondeChart.destroy();
     }
 
-    const minTs = Math.min(...allTs);
-    const maxTs = Math.max(...allTs);
-
     // Compute tick positions at 3-hour UTC boundaries so midnight always lands on a tick, which triggers the date being
     // printed, and in general looks nicer than arbitrary ticks based on min & max timestamp
     const tickStep = 3 * 3600;
@@ -437,6 +469,7 @@ function renderIonosondeData() {
     }
     tickValues.push(maxTs);
 
+    // Build time axis
     const timeAxis = {
         type: 'linear',
         min: minTs,
@@ -450,6 +483,8 @@ function renderIonosondeData() {
             maxRotation: 45,
             minRotation: 0,
             callback(value) {
+                // Use the same type of display as in the k-index chart, where the labels on the axis are just HH:mm
+                // unless that's 00:00, in which case add the short date as well.
                 const dt = new Date(value * 1000);
                 const h = dt.getUTCHours();
                 const m = dt.getUTCMinutes();
@@ -463,6 +498,8 @@ function renderIonosondeData() {
         grid: {color: gridColor},
     };
 
+    // Build frequency axis. This is pretty normal except there's no grid, because we draw extra horizontal lines for
+    // the amateur radio bands which function as grid lines for the frequency axis.
     const freqAxis = {
         min: 0,
         title: {display: true, text: 'Frequency (MHz)', color: textColor},
@@ -470,6 +507,7 @@ function renderIonosondeData() {
         grid: {display: false},
     };
 
+    // List of ham bands for drawing horizontal lines
     const AMATEUR_BANDS = [
         {label: '160m', freq: 1.8},
         {label: '80m', freq: 3.5},
@@ -483,6 +521,7 @@ function renderIonosondeData() {
         {label: '10m', freq: 28.0},
     ];
 
+    // Build the horizontal lines for each ham band, including a label on the right-hand side.
     const bandLinesPlugin = {
         id: 'bandLines',
         beforeDatasetsDraw(chart) {
@@ -492,6 +531,8 @@ function renderIonosondeData() {
             ctx.strokeStyle = gridColor;
             ctx.lineWidth = 1;
             ctx.setLineDash([]);
+            // Add an extra vertical line for 30MHz, which should correspond to the top of the chart and avoid having
+            // no top "border" gridline
             const y30 = scales.y.getPixelForValue(30);
             if (y30 >= chartArea.top && y30 <= chartArea.bottom) {
                 ctx.beginPath();
@@ -501,6 +542,7 @@ function renderIonosondeData() {
             }
             ctx.font = '10px sans-serif';
             ctx.fillStyle = textColor;
+            // Add the ham band "grid lines"
             AMATEUR_BANDS.forEach(({label, freq}) => {
                 const y = scales.y.getPixelForValue(freq);
                 if (y < chartArea.top || y > chartArea.bottom) return;
@@ -516,10 +558,19 @@ function renderIonosondeData() {
         }
     };
 
+    // Create the chart itself
     ionosondeChart = new Chart(document.getElementById('ionosonde-chart'), {
         type: 'line',
         data: {
             datasets: [
+                {
+                    label: 'LUF',
+                    data: lufEntries.map(e => ({x: e.ts, y: e.val})),
+                    borderColor: lufColor,
+                    backgroundColor: 'transparent',
+                    pointRadius: 0,
+                    tension: 0.2,
+                },
                 {
                     label: 'foF2',
                     data: fof2Entries.map(e => ({x: e.ts, y: e.val})),
@@ -549,6 +600,9 @@ function renderIonosondeData() {
         },
         plugins: [bandLinesPlugin],
     });
+
+    // Chart canvas is normally hidden until we get here with some definitely good data. Now we have that so show it
+    $('#ionosonde-chart').show();
 }
 
 // Called when the ionosonde station select changes