diff --git a/README.md b/README.md index daf2caa..97ebe1e 100644 --- a/README.md +++ b/README.md @@ -4,6 +4,8 @@ (S)pothole is a utility to aggregate "spots" from amateur radio DX clusters and xOTA spotting sites, and provide an open JSON API as well as a website to browse the data. +![Screenshot](/images/screenshot.png) + While there are several other web-based interfaces to DX clusters, and sites that aggregate spots from various outfoor activity programmes for amateur radio, (S)pothole differentiates itself by supporting a large number of data sources, and by being "API first" rather than just providing a web front-end. This allows other software to be built on top of it. The API is deliberately well-defined with an OpenAPI specification and auto-generated API documentation. The API delivers spots in a consistent format regardless of the data source, freeing developers from needing to know how each individual data source presents its data. @@ -22,7 +24,11 @@ TODO The software can take a few seconds to start up, mostly because it is downloading an updated file to match callsigns to countries. This is normal, don't panic! -### Writing your own Providers +### Writing your own client + +TODO + +### Extending the server (S)pothole is designed to be easily extensible. If you want to write your own provider, simply add a module to the `providers` package containing your class. (Currently, in order to be loaded correctly, the module (file) name should be the same as the class name, but lower case.) diff --git a/core/constants.py b/core/constants.py index bed3313..774809d 100644 --- a/core/constants.py +++ b/core/constants.py @@ -16,6 +16,8 @@ MODE_TYPES = ["CW", "PHONE", "DATA"] # Band definitions BANDS = [ + Band(name="2200m", start_freq=135700, end_freq=137800, color="#ff4500", contrast_color="white"), + Band(name="600m", start_freq=472000, end_freq=479000, color="#1e90ff", contrast_color="white"), Band(name="160m", start_freq=1800000, end_freq=2000000, color="#7cfc00", contrast_color="black"), Band(name="80m", start_freq=3500000, end_freq=4000000, color="#e550e5", contrast_color="black"), Band(name="60m", start_freq=5250000, end_freq=5410000, color="#00008b", contrast_color="white"), @@ -25,13 +27,21 @@ BANDS = [ Band(name="17m", start_freq=18068000, end_freq=18168000, color="#f2f261", contrast_color="black"), Band(name="15m", start_freq=21000000, end_freq=21450000, color="#cca166", contrast_color="black"), Band(name="12m", start_freq=24890000, end_freq=24990000, color="#b22222", contrast_color="white"), + Band(name="11m", start_freq=26965000, end_freq=27405000, color="#00ff00", contrast_color="black"), Band(name="10m", start_freq=28000000, end_freq=29700000, color="#ff69b4", contrast_color="black"), Band(name="6m", start_freq=50000000, end_freq=54000000, color="#FF0000", contrast_color="white"), + Band(name="5m", start_freq=56000000, end_freq=60500000, color="#e0e0e0", contrast_color="black"), Band(name="4m", start_freq=70000000, end_freq=70500000, color="#cc0044", contrast_color="white"), Band(name="2m", start_freq=144000000, end_freq=148000000, color="#FF1493", contrast_color="black"), + Band(name="1.25m", start_freq=219000000, end_freq=225000000, color="#CCFF00", contrast_color="black"), Band(name="70cm", start_freq=420000000, end_freq=450000000, color="#999900", contrast_color="white"), Band(name="23cm", start_freq=1240000000, end_freq=1325000000, color="#5AB8C7", contrast_color="black"), - Band(name="13cm", start_freq=2300000000, end_freq=2450000000, color="#FF7F50", contrast_color="black")] + Band(name="2.4GHz", start_freq=2300000000, end_freq=2450000000, color="#FF7F50", contrast_color="black"), + Band(name="5.8GHz", start_freq=5725000000, end_freq=5850000000, color="#cc0099", contrast_color="white"), + Band(name="10GHz", start_freq=10000000000, end_freq=10500000000, color="#696969", contrast_color="white"), + Band(name="24GHz", start_freq=24000000000, end_freq=24050000000, color="#f3edc6", contrast_color="black"), + Band(name="47GHz", start_freq=47000000000, end_freq=47200000000, color="#ffe786", contrast_color="black"), + Band(name="76GHz", start_freq=75500000000, end_freq=81500000000, color="#baf9d8", contrast_color="black")] UNKNOWN_BAND = Band(name="Unknown", start_freq=0, end_freq=0, color="black", contrast_color="white") # Continents diff --git a/images/screenshot-filters.png b/images/screenshot-filters.png new file mode 100644 index 0000000..3620b64 Binary files /dev/null and b/images/screenshot-filters.png differ diff --git a/images/screenshot.png b/images/screenshot.png new file mode 100644 index 0000000..bf48986 Binary files /dev/null and b/images/screenshot.png differ diff --git a/views/webpage_home.tpl b/views/webpage_home.tpl index 507c5c9..393dff2 100644 --- a/views/webpage_home.tpl +++ b/views/webpage_home.tpl @@ -43,7 +43,8 @@
-
+
+
diff --git a/webassets/css/style.css b/webassets/css/style.css index bed8e5b..a82d4ec 100644 --- a/webassets/css/style.css +++ b/webassets/css/style.css @@ -16,6 +16,11 @@ span.flag-wrapper { cursor: default; } +span.band-bullet { + display: inline-block; + cursor: default; +} + span.icon-wrapper { display: inline-block; width: 1.5em; @@ -25,7 +30,7 @@ span.icon-wrapper { span.freq-mhz { display: inline-block; - min-width: 1.5em; + min-width: 1.7em; text-align: right; font-weight: bold; } @@ -53,10 +58,6 @@ div.appearing-panel { display: none; } -div.status-card { - max-width: 18rem; -} - p.filter-card-text { line-height: 2.5em !important; } \ No newline at end of file diff --git a/webassets/js/code.js b/webassets/js/code.js index a451715..8304e8c 100644 --- a/webassets/js/code.js +++ b/webassets/js/code.js @@ -7,8 +7,6 @@ var spots = [] var options = {}; // Last time we updated the spots list on display. var lastUpdateTime; -// Options-based lookups for band colours -band_colors = {} // Load spots and populate the table. function loadSpots() { @@ -65,12 +63,6 @@ function updateTable() { mode_string = mode_string + "" } - // Band-based colour - var band_dot_style = "" - if (band_colors[s["band"]]) { - band_dot_style = `color: ${band_colors[s["band"]]}; ` - } - // Format sig_refs var sig_refs = "" if (s["sig_refs"]) { @@ -89,10 +81,15 @@ function updateTable() { de_country = "Unknown or not a country" } + // CSS doesn't like classes with decimal points in, so we need to replace that in the same way as when we originally + // queried the options endpoint and set our CSS. + var cssFormattedBandName = s['band'] ? s['band'].replace('.', 'p') : "unknown"; + var bandFullName = s['band'] ? s['band'] + " band": "Unknown band"; + // Populate the row $tr.append(`${time_formatted}`); $tr.append(`${s["dx_flag"]}${s["dx_call"]}`); - $tr.append(`■${freq_string}`); + $tr.append(`■${freq_string}`); $tr.append(`${mode_string}`); $tr.append('' + escapeHtml(`${s["comment"]}`) + ''); $tr.append(` ${s["source"]}`); @@ -137,7 +134,7 @@ function loadStatus() { // Generate a status card function generateStatusCard(title, textLines) { let $col = $("
") - let $card = $("
"); + let $card = $("
"); let $card_body = $("
"); $card_body.append(`
${title}
`); $card_body.append(`

${textLines.join("
")}

`); @@ -153,20 +150,15 @@ function loadOptions() { // Store options options = jsonData; - // Separately store colour lookups for bands - options["bands"].forEach(b => { - band_colors[b["name"]] = b["color"]; - }); - - // Add CSS for band toggle buttons - addBandToggleButtonCSS(options["bands"]); + // Add CSS for band bullets and band toggle buttons + addBandColourCSS(options["bands"]); // Populate the filters panel - $("#filters-container").append(generateFilterCard("DX Continent", "dx_continent", options["continents"])); - $("#filters-container").append(generateFilterCard("DE Continent", "de_continent", options["continents"])); - $("#filters-container").append(generateFilterCard("Modes", "mode_type", options["mode_types"])); - $("#filters-container").append(generateFilterCard("Sources", "source", options["sources"])); - $("#filters-container").append(generateBandsFilterCard("Bands", "band", options["bands"])); + $("#filters-container-1").append(generateBandsFilterCard("Bands", "band", options["bands"])); + $("#filters-container-2").append(generateFilterCard("DX Continent", "dx_continent", options["continents"])); + $("#filters-container-2").append(generateFilterCard("DE Continent", "de_continent", options["continents"])); + $("#filters-container-2").append(generateFilterCard("Modes", "mode_type", options["mode_types"])); + $("#filters-container-2").append(generateFilterCard("Sources", "source", options["sources"])); // Load spots and set up the timer loadSpots(); @@ -174,20 +166,24 @@ function loadOptions() { }); } -// Dynamically add CSS code for the band toggle buttons to be in the appropriate colour -function addBandToggleButtonCSS(band_options) { +// Dynamically add CSS code for the band bullets and band toggle buttons to be in the appropriate colour. +// Some band names contain decimal points which are not allowed in CSS classes, so we text-replace them to "p". +function addBandColourCSS(band_options) { var $style = $('