w1cdn/spothole
1
0
Fork 0
mirror of https://git.ianrenton.com/ian/spothole.git synced 2026-06-24 05:35:10 +00:00
Code Issues 13 Packages Projects Releases Wiki Activity

Improve comments

Browse Source
This commit is contained in:
Ian Renton
2026-05-16 10:37:13 +01:00
parent 0edd844db3
commit 3e7d2c2bc2
10 changed files with 43 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
templates/about.html
View File

@@ -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> <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> </div>
<script src="/js/common.js?v=1778868536"></script> <script src="/js/common.js?v=1778924234"></script>
<script>$(document).ready(function() { $("#nav-link-about").addClass("active"); }); <!-- highlight active page in nav --></script> <script>$(document).ready(function() { $("#nav-link-about").addClass("active"); }); <!-- highlight active page in nav --></script>
{% end %} {% end %}

4
templates/add_spot.html
View File

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

4
templates/alerts.html
View File

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

6
templates/bands.html
View File

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

8
templates/base.html
View File

@@ -24,7 +24,7 @@
<title>Spothole</title> <title>Spothole</title>
<link rel="stylesheet" href="/css/style.css?v=1778868536" type="text/css"> <link rel="stylesheet" href="/css/style.css?v=1778924234" type="text/css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous"> integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
<link href="/fa/css/fontawesome.min.css" rel="stylesheet" /> <link href="/fa/css/fontawesome.min.css" rel="stylesheet" />
@@ -52,9 +52,9 @@
integrity="sha384-L1eE4eD41kpBIWe2I0eHy+GnEUC4RIpcvibVW2JCminuPlTl+2Bc528iPdVMg5Dn" integrity="sha384-L1eE4eD41kpBIWe2I0eHy+GnEUC4RIpcvibVW2JCminuPlTl+2Bc528iPdVMg5Dn"
crossorigin="anonymous"></script> 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=1778924234"></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=1778924234"></script>
<script src="https://misc.ianrenton.com/jsutils/geo.js?v=1778868536"></script> <script src="https://misc.ianrenton.com/jsutils/geo.js?v=1778924234"></script>
</head> </head>
<body> <body>

4
templates/conditions.html
View File

@@ -249,8 +249,8 @@
</div> </div>
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.9/dist/chart.umd.min.js"></script> <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=1778924234"></script>
<script src="/js/conditions.js?v=1778868536"></script> <script src="/js/conditions.js?v=1778924234"></script>
<script>$(document).ready(function () { <script>$(document).ready(function () {
$("#nav-link-conditions").addClass("active"); $("#nav-link-conditions").addClass("active");
}); <!-- highlight active page in nav --></script> }); <!-- highlight active page in nav --></script>

6
templates/map.html
View File

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

6
templates/spots.html
View File

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

4
templates/status.html
View File

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

28
webassets/js/conditions.js
View File

@@ -376,6 +376,8 @@ function populateIonosondeDropdown(data) {
// Render the foF2/MUF data and line chart for the currently selected station // Render the foF2/MUF data and line chart for the currently selected station
function renderIonosondeData() { 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, bail out at this point.
if (!ionosondeData) return; if (!ionosondeData) return;
const ursi = $('#ionosonde-station').val(); const ursi = $('#ionosonde-station').val();
if (!ursi) return; if (!ursi) return;
@@ -384,12 +386,15 @@ function renderIonosondeData() {
}); });
if (!station) return; if (!station) return;
// Set up some styles, matching the k-index chart. We use Bootstrap's "primary" and "danger" colours not for any
// real reason but just to get a suitable blue and red that match the other colours Spothole uses
const style = getComputedStyle(document.documentElement); const style = getComputedStyle(document.documentElement);
const fof2Color = style.getPropertyValue('--bs-primary').trim(); const fof2Color = style.getPropertyValue('--bs-primary').trim();
const mufColor = style.getPropertyValue('--bs-danger').trim(); const mufColor = style.getPropertyValue('--bs-danger').trim();
const textColor = style.getPropertyValue('--bs-body-color').trim() || '#666'; const textColor = style.getPropertyValue('--bs-body-color').trim() || '#666';
const gridColor = style.getPropertyValue('--bs-border-color').trim() || 'rgba(128,128,128,0.3)'; 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) { function toSeries(dict) {
if (!dict) return []; if (!dict) return [];
return Object.entries(dict) return Object.entries(dict)
@@ -405,10 +410,11 @@ function renderIonosondeData() {
// Populate latest values summary (visible on all screen sizes) // Populate latest values summary (visible on all screen sizes)
const latestFof2 = fof2Entries.length ? fof2Entries[fof2Entries.length - 1].val : null; const latestFof2 = fof2Entries.length ? fof2Entries[fof2Entries.length - 1].val : null;
const latestMuf = mufEntries.length ? mufEntries[mufEntries.length - 1].val : null; const latestMuf = mufEntries.length ? mufEntries[mufEntries.length - 1].val : null;
const latestTs = allTs.length ? Math.max(...allTs) : null; const minTs = allTs.length ? Math.min(...allTs) : null;
var latestTimeStr = ''; const maxTs = allTs.length ? Math.max(...allTs) : null;
if (latestTs != null) { let latestTimeStr = '';
const latestDate = moment.utc(latestTs * 1000); if (maxTs != null) {
const latestDate = moment.utc(maxTs * 1000);
latestTimeStr = latestDate.format('DD MMM YYYY HH:mm [UTC]') + ' (' + latestDate.fromNow() + ')'; latestTimeStr = latestDate.format('DD MMM YYYY HH:mm [UTC]') + ' (' + latestDate.fromNow() + ')';
} }
$('#ionosonde-latest').html( $('#ionosonde-latest').html(
@@ -424,9 +430,6 @@ function renderIonosondeData() {
ionosondeChart.destroy(); 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 // 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 // printed, and in general looks nicer than arbitrary ticks based on min & max timestamp
const tickStep = 3 * 3600; const tickStep = 3 * 3600;
@@ -437,6 +440,7 @@ function renderIonosondeData() {
} }
tickValues.push(maxTs); tickValues.push(maxTs);
// Build time axis
const timeAxis = { const timeAxis = {
type: 'linear', type: 'linear',
min: minTs, min: minTs,
@@ -450,6 +454,8 @@ function renderIonosondeData() {
maxRotation: 45, maxRotation: 45,
minRotation: 0, minRotation: 0,
callback(value) { 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 dt = new Date(value * 1000);
const h = dt.getUTCHours(); const h = dt.getUTCHours();
const m = dt.getUTCMinutes(); const m = dt.getUTCMinutes();
@@ -463,6 +469,8 @@ function renderIonosondeData() {
grid: {color: gridColor}, 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 = { const freqAxis = {
min: 0, min: 0,
title: {display: true, text: 'Frequency (MHz)', color: textColor}, title: {display: true, text: 'Frequency (MHz)', color: textColor},
@@ -470,6 +478,7 @@ function renderIonosondeData() {
grid: {display: false}, grid: {display: false},
}; };
// List of ham bands for drawing horizontal lines
const AMATEUR_BANDS = [ const AMATEUR_BANDS = [
{label: '160m', freq: 1.8}, {label: '160m', freq: 1.8},
{label: '80m', freq: 3.5}, {label: '80m', freq: 3.5},
@@ -483,6 +492,7 @@ function renderIonosondeData() {
{label: '10m', freq: 28.0}, {label: '10m', freq: 28.0},
]; ];
// Build the horizontal lines for each ham band, including a label on the right-hand side.
const bandLinesPlugin = { const bandLinesPlugin = {
id: 'bandLines', id: 'bandLines',
beforeDatasetsDraw(chart) { beforeDatasetsDraw(chart) {
@@ -492,6 +502,8 @@ function renderIonosondeData() {
ctx.strokeStyle = gridColor; ctx.strokeStyle = gridColor;
ctx.lineWidth = 1; ctx.lineWidth = 1;
ctx.setLineDash([]); 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); const y30 = scales.y.getPixelForValue(30);
if (y30 >= chartArea.top && y30 <= chartArea.bottom) { if (y30 >= chartArea.top && y30 <= chartArea.bottom) {
ctx.beginPath(); ctx.beginPath();
@@ -501,6 +513,7 @@ function renderIonosondeData() {
} }
ctx.font = '10px sans-serif'; ctx.font = '10px sans-serif';
ctx.fillStyle = textColor; ctx.fillStyle = textColor;
// Add the ham band "grid lines"
AMATEUR_BANDS.forEach(({label, freq}) => { AMATEUR_BANDS.forEach(({label, freq}) => {
const y = scales.y.getPixelForValue(freq); const y = scales.y.getPixelForValue(freq);
if (y < chartArea.top || y > chartArea.bottom) return; if (y < chartArea.top || y > chartArea.bottom) return;
@@ -516,6 +529,7 @@ function renderIonosondeData() {
} }
}; };
// Create the chart itself
ionosondeChart = new Chart(document.getElementById('ionosonde-chart'), { ionosondeChart = new Chart(document.getElementById('ionosonde-chart'), {
type: 'line', type: 'line',
data: { data: {