diff --git a/templates/about.html b/templates/about.html index e2eec27..6e89918 100644 --- a/templates/about.html +++ b/templates/about.html @@ -67,7 +67,7 @@
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.
- + {% end %} \ No newline at end of file diff --git a/templates/add_spot.html b/templates/add_spot.html index 2a4872e..90c6ff8 100644 --- a/templates/add_spot.html +++ b/templates/add_spot.html @@ -69,8 +69,8 @@ - - + + {% end %} \ No newline at end of file diff --git a/templates/alerts.html b/templates/alerts.html index f45cd27..0782e4b 100644 --- a/templates/alerts.html +++ b/templates/alerts.html @@ -56,8 +56,8 @@ - - + + {% end %} \ No newline at end of file diff --git a/templates/bands.html b/templates/bands.html index f549a54..62be938 100644 --- a/templates/bands.html +++ b/templates/bands.html @@ -62,9 +62,9 @@ - - - + + + {% end %} \ No newline at end of file diff --git a/templates/base.html b/templates/base.html index e86c057..091f2fc 100644 --- a/templates/base.html +++ b/templates/base.html @@ -47,10 +47,10 @@ - - - - + + + + diff --git a/templates/conditions.html b/templates/conditions.html index 6b9d211..ef08d66 100644 --- a/templates/conditions.html +++ b/templates/conditions.html @@ -223,8 +223,8 @@ - - + + diff --git a/templates/map.html b/templates/map.html index 6d12600..49737a2 100644 --- a/templates/map.html +++ b/templates/map.html @@ -70,9 +70,9 @@ - - - + + + {% end %} \ No newline at end of file diff --git a/templates/spots.html b/templates/spots.html index f8a37e8..63e1574 100644 --- a/templates/spots.html +++ b/templates/spots.html @@ -87,9 +87,9 @@ - - - + + + {% end %} \ No newline at end of file diff --git a/templates/status.html b/templates/status.html index 89a1337..d37c08a 100644 --- a/templates/status.html +++ b/templates/status.html @@ -59,8 +59,8 @@ - - + + diff --git a/webassets/js/conditions.js b/webassets/js/conditions.js index 7638ac5..eecd1bc 100644 --- a/webassets/js/conditions.js +++ b/webassets/js/conditions.js @@ -165,10 +165,59 @@ function renderKIndexForecast(data) { grid: { color: gridColor }, }; const timeAxis = { + title: { display: true, text: 'Time (UTC)', color: textColor }, ticks: { color: textColor, maxRotation: 45, minRotation: 0 }, grid: { color: gridColor }, }; + // Draw a "now" line at the current time position + const nowLinePlugin = { + id: 'nowLine', + afterDraw(chart) { + const nowTs = Date.now() / 1000; + // Find the fractional bar index for the current time + let fracIndex = null; + for (let i = 0; i < entries.length - 1; i++) { + if (nowTs >= entries[i].ts && nowTs < entries[i + 1].ts) { + fracIndex = i + (nowTs - entries[i].ts) / (entries[i + 1].ts - entries[i].ts); + break; + } + } + if (fracIndex === null) return; // now is outside the chart range + + const { ctx, chartArea } = chart; + const scale = isMobile ? chart.scales.y : chart.scales.x; + const pos = scale.getPixelForValue(fracIndex); + + ctx.save(); + ctx.strokeStyle = textColor; + ctx.lineWidth = 2; + ctx.setLineDash([5, 4]); + ctx.beginPath(); + if (isMobile) { + ctx.moveTo(chartArea.left, pos); + ctx.lineTo(chartArea.right, pos); + } else { + ctx.moveTo(pos, chartArea.top); + ctx.lineTo(pos, chartArea.bottom); + } + ctx.stroke(); + ctx.setLineDash([]); + ctx.fillStyle = textColor; + ctx.font = '11px sans-serif'; + if (isMobile) { + ctx.textAlign = 'right'; + ctx.textBaseline = 'bottom'; + ctx.fillText('Now', chartArea.right, pos - 3); + } else { + ctx.textAlign = 'left'; + ctx.textBaseline = 'top'; + ctx.fillText(' Now', pos, chartArea.top + 3); + } + ctx.restore(); + } + }; + kpChart = new Chart(document.getElementById('forecast-kp-chart'), { type: 'bar', data: { @@ -181,6 +230,7 @@ function renderKIndexForecast(data) { }, options: { responsive: true, + // Swap axes on mobile, and change the aspect ratio aspectRatio: isMobile ? 0.4 : 3, indexAxis: isMobile ? 'y' : 'x', plugins: { @@ -195,7 +245,8 @@ function renderKIndexForecast(data) { x: isMobile ? kpAxis : timeAxis, y: isMobile ? timeAxis : kpAxis, } - } + }, + plugins: [nowLinePlugin], }); }