diff --git a/templates/about.html b/templates/about.html index ed34c2c..4ca9205 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 77ab339..1878dd2 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 020d48d..c8737a5 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 f3882a9..28c036e 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 1761767..5e2fd39 100644 --- a/templates/base.html +++ b/templates/base.html @@ -47,10 +47,10 @@ - - - - + + + + diff --git a/templates/conditions.html b/templates/conditions.html index ad7a7f2..592ca66 100644 --- a/templates/conditions.html +++ b/templates/conditions.html @@ -155,7 +155,7 @@
-
Blackout Forecast
+
Radio Blackout Forecast
@@ -227,8 +227,8 @@ - - + + diff --git a/templates/map.html b/templates/map.html index 8476368..709c7cb 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 2250615..d568258 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 997c997..8b06b5d 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 99e1072..b235b85 100644 --- a/webassets/js/conditions.js +++ b/webassets/js/conditions.js @@ -6,14 +6,14 @@ let kpChart = null; // Load solar conditions function loadSolarConditions() { - $.getJSON('/api/v1/solar', function(jsonData) { + $.getJSON('/api/v1/solar', function (jsonData) { // HF - const hfConditionClass = { 'Good': 'bg-success-subtle', 'Fair': 'bg-warning-subtle', 'Poor': 'bg-danger-subtle' }; + const hfConditionClass = {'Good': 'bg-success-subtle', 'Fair': 'bg-warning-subtle', 'Poor': 'bg-danger-subtle'}; if (jsonData.hf_conditions) { - Object.entries(jsonData.hf_conditions).forEach(function([key, condition]) { + Object.entries(jsonData.hf_conditions).forEach(function ([key, condition]) { const cell = $('#hf-conditions-' + key); cell.text(condition); cell.addClass(hfConditionClass[condition]); @@ -23,7 +23,7 @@ function loadSolarConditions() { // VHF if (jsonData.vhf_conditions) { - Object.entries(jsonData.vhf_conditions).forEach(function([key, condition]) { + Object.entries(jsonData.vhf_conditions).forEach(function ([key, condition]) { const cell = $('#vhf-conditions-' + key); cell.text(condition); let vhfClass; @@ -44,24 +44,24 @@ function loadSolarConditions() { // Solar Weather const swFields = { - 'sfi': 'sw-sfi', - 'sunspots': 'sw-sunspots', + 'sfi': 'sw-sfi', + 'sunspots': 'sw-sunspots', 'band_conditions_desc': 'sw-solar-flux-desc', - 'k_index': 'sw-k-index', - 'a_index': 'sw-a-index', - 'geomag_field': 'sw-geomag-field', - 'geomag_storm_scale': 'sw-geomag-storm-scale', - 'geomag_storm_desc': 'sw-geomag-storm-desc', - 'geomag_noise': 'sw-geomag-noise', - 'x_ray': 'sw-x-ray', - 'blackout_desc': 'sw-xray-desc', - 'proton_flux': 'sw-proton-flux', - 'solar_storm_scale': 'sw-solar-storm-scale', - 'proton_flux_desc': 'sw-proton-desc', - 'electron_flux': 'sw-electron-flux', - 'electron_flux_desc': 'sw-electron-desc', + 'k_index': 'sw-k-index', + 'a_index': 'sw-a-index', + 'geomag_field': 'sw-geomag-field', + 'geomag_storm_scale': 'sw-geomag-storm-scale', + 'geomag_storm_desc': 'sw-geomag-storm-desc', + 'geomag_noise': 'sw-geomag-noise', + 'x_ray': 'sw-x-ray', + 'blackout_desc': 'sw-xray-desc', + 'proton_flux': 'sw-proton-flux', + 'solar_storm_scale': 'sw-solar-storm-scale', + 'proton_flux_desc': 'sw-proton-desc', + 'electron_flux': 'sw-electron-flux', + 'electron_flux_desc': 'sw-electron-desc', }; - Object.entries(swFields).forEach(function([field, id]) { + Object.entries(swFields).forEach(function ([field, id]) { const val = jsonData[field]; if (val !== null && val !== undefined) { $('#' + id).text(val); @@ -91,8 +91,8 @@ function loadSolarConditions() { if (xRay) { const letter = xRay[0].toUpperCase(); const xRayClass = (letter === 'X') ? 'bg-danger-subtle' - : (letter === 'M') ? 'bg-warning-subtle' - : 'bg-success-subtle'; + : (letter === 'M') ? 'bg-warning-subtle' + : 'bg-success-subtle'; applySwClass('sw-xray-vals', 'sw-xray-desc', xRayClass); } @@ -121,19 +121,16 @@ function renderKIndexForecast(data) { if (!data) return; const entries = Object.entries(data) - .map(([tsStr, kp]) => ({ ts: parseFloat(tsStr), kp })) + .map(([tsStr, kp]) => ({ts: parseFloat(tsStr), kp})) .sort((a, b) => a.ts - b.ts); if (entries.length === 0) return; - // x-axis labels. Show date only on the first bar of each day, time on all bars - const labels = entries.map((e, i) => { - const dt = new Date(e.ts * 1000); - const timeStr = String(dt.getUTCHours()).padStart(2, '0') + ':00'; - const dateStr = dt.toLocaleDateString('en-GB', { day: '2-digit', month: 'short', timeZone: 'UTC' }); - const prev = i > 0 ? new Date(entries[i - 1].ts * 1000) : null; - const newDay = !prev || prev.toISOString().slice(0, 10) !== dt.toISOString().slice(0, 10); - return newDay ? [timeStr, dateStr] : timeStr; - }); + // Use a simple integer index axis: ticks at 0, 1, 2, ..., N (period boundaries) and bars + // centred at 0.5, 1.5, ..., N-0.5 (midpoints). This guarantees tick marks fall exactly on + // bar edges regardless of how Chart.js rounds large timestamp values. + // "axisMin = 0" is the left/top edge of bar 0; "axisMax = N" is the right/bottom edge of bar N-1. + const N = entries.length; + const periodSecs = 3 * 3600; // Inherit colours from Bootstrap CSS variables so that dark mode inherently works. We want bar colours that are not // quite as saturated as the Bootstrap success/warning/danger colours but not as desaturated as the "subtle" @@ -142,13 +139,15 @@ function renderKIndexForecast(data) { const withAlpha = hex => tinycolor(hex).setAlpha(0.8).toRgbString(); const colors = entries.map(e => e.kp < 4.5 ? withAlpha(style.getPropertyValue('--bs-success').trim()) - : e.kp < 5.5 ? withAlpha(style.getPropertyValue('--bs-warning').trim()) - : withAlpha(style.getPropertyValue('--bs-danger').trim()) + : e.kp < 5.5 ? withAlpha(style.getPropertyValue('--bs-warning').trim()) + : withAlpha(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)'; - if (kpChart) { kpChart.destroy(); } + if (kpChart) { + kpChart.destroy(); + } const isMobile = window.innerWidth < 768; const kpAxisTicks = { @@ -160,14 +159,38 @@ function renderKIndexForecast(data) { const kpAxis = { min: 0, max: 9, - title: { display: true, text: 'Kp', color: textColor }, + title: {display: true, text: 'Kp', color: textColor}, ticks: kpAxisTicks, - grid: { color: gridColor }, + grid: {color: gridColor}, }; + // Linear scale using integer indices. Ticks at 0..N (period boundary indices); + // the callback converts each integer index back to a UTC time string. + // On mobile the time axis is vertical, so reverse it to keep time running top-to-bottom. const timeAxis = { - title: { display: true, text: 'Time (UTC)', color: textColor }, - ticks: { color: textColor, maxRotation: 45, minRotation: 0 }, - grid: { color: gridColor }, + type: 'linear', + min: 0, + max: N, + offset: false, + reverse: isMobile, + title: {display: true, text: 'Time (UTC)', color: textColor}, + ticks: { + stepSize: 1, + color: textColor, + maxRotation: 45, + minRotation: 0, + callback(value) { + if (!Number.isInteger(value) || value < 0 || value > N) return null; + const ts = value < N ? entries[value].ts : entries[N - 1].ts + periodSecs; + const dt = new Date(ts * 1000); + const h = dt.getUTCHours(), m = dt.getUTCMinutes(); + const timeStr = String(h).padStart(2, '0') + ':' + String(m).padStart(2, '0'); + if (h === 0 && m === 0) { + return [timeStr, dt.toLocaleDateString('en-GB', {day: '2-digit', month: 'short', timeZone: 'UTC'})]; + } + return timeStr; + }, + }, + grid: {color: gridColor}, }; // Draw a "now" line at the current time position @@ -175,17 +198,13 @@ function renderKIndexForecast(data) { 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 + // Find which bar (if any) the current time falls in and compute a fractional index + const firstTs = entries[0].ts; + const lastTs = entries[N - 1].ts + periodSecs; + if (nowTs < firstTs || nowTs > lastTs) return; + const fracIndex = (nowTs - firstTs) / periodSecs; - const { ctx, chartArea } = chart; + const {ctx, chartArea} = chart; const scale = isMobile ? chart.scales.y : chart.scales.x; const pos = scale.getPixelForValue(fracIndex); @@ -218,15 +237,22 @@ function renderKIndexForecast(data) { } }; + // Bars centred at i+0.5 (midpoint between tick i and tick i+1) so each bar spans + // exactly from tick i to tick i+1 with barPercentage/categoryPercentage = 1.0. + const chartData = isMobile + ? entries.map((e, i) => ({x: e.kp, y: i + 0.5})) + : entries.map((e, i) => ({x: i + 0.5, y: e.kp})); + kpChart = new Chart(document.getElementById('forecast-kp-chart'), { type: 'bar', data: { - labels, datasets: [{ - data: entries.map(e => e.kp), + data: chartData, backgroundColor: colors, hoverBackgroundColor: colors, borderWidth: 0, + barPercentage: 1.0, + categoryPercentage: 1.0, }] }, options: { @@ -256,20 +282,20 @@ function renderSolarStormForecast(data) { if (!data) return; const entries = Object.entries(data) - .map(([tsStr, pct]) => ({ ts: parseFloat(tsStr), pct })) + .map(([tsStr, pct]) => ({ts: parseFloat(tsStr), pct})) .sort((a, b) => a.ts - b.ts); // Header const headRow = $('#forecast-solar-storm-head').empty().append(''); - entries.forEach(({ ts }) => { + entries.forEach(({ts}) => { const label = new Date(ts * 1000) - .toLocaleDateString('en-US', { day: '2-digit', month: 'short', timeZone: 'UTC' }); + .toLocaleDateString('en-GB', {day: '2-digit', month: 'short', timeZone: 'UTC'}); headRow.append(``); }); // Single data row: "S1 or greater" label + one cell per date const tr = $('').append(''); - entries.forEach(({ pct }) => { + entries.forEach(({pct}) => { const td = $(''); - entries.forEach(({ ts }) => { + entries.forEach(({ts}) => { const label = new Date(ts * 1000) - .toLocaleDateString('en-GB', { day: '2-digit', month: 'short', timeZone: 'UTC' }); + .toLocaleDateString('en-GB', {day: '2-digit', month: 'short', timeZone: 'UTC'}); headRow.append(``); }); @@ -317,31 +343,37 @@ function renderBlackoutForecast(r1r2Data, r3Data) { } $('#forecast-blackout-tbody').empty() - .append(makeRow('R1-R2', e => e.r1r2)) + .append(makeRow('R1-R2', e => e.r1r2)) .append(makeRow('R3 or greater', e => e.r3)); } // Render the DX stats table for the currently selected DE continent function renderDxStats() { - if (!dxStatsData) { return; } + if (!dxStatsData) { + return; + } const deContinent = $('#dxstats-de-continent').val(); const deData = dxStatsData[deContinent]; - if (!deData) { return; } + if (!deData) { + return; + } const cells = []; - Object.entries(deData).forEach(function([dxContinent, bands]) { - Object.entries(bands).forEach(function([band, count]) { + Object.entries(deData).forEach(function ([dxContinent, bands]) { + Object.entries(bands).forEach(function ([band, count]) { const cell = $('#dxstats-' + dxContinent + '-' + band); cell.text(count); - cells.push({ cell, count }); + cells.push({cell, count}); }); }); - const counts = cells.map(function(c) { return c.count; }); + const counts = cells.map(function (c) { + return c.count; + }); const min = Math.min(...counts); const max = Math.max(...counts); const range = max - min; - cells.forEach(function({ cell, count }) { + cells.forEach(function ({cell, count}) { const t = range > 0 ? (count - min) / range : 0; const cls = t === 0 ? 'bg-danger-subtle' : t < 0.05 ? 'bg-warning-subtle' : 'bg-success-subtle'; cell.removeClass('bg-danger-subtle bg-warning-subtle bg-success-subtle').addClass(cls); @@ -356,14 +388,14 @@ function dxStatsContientChanged() { // Fetch DX stats from the API and render function loadDxStats() { - $.getJSON('/api/v1/dxstats', function(jsonData) { + $.getJSON('/api/v1/dxstats', function (jsonData) { dxStatsData = jsonData; renderDxStats(); }); } // Startup -$(document).ready(function() { +$(document).ready(function () { loadSettings(); loadSolarConditions(); loadDxStats();
${label}
S1 or greater').text(pct + '%'); td.addClass(pct < 50 ? 'bg-success-subtle' : pct < 75 ? 'bg-warning-subtle' : 'bg-danger-subtle'); tr.append(td); @@ -289,15 +315,15 @@ function renderBlackoutForecast(r1r2Data, r3Data) { .map(tsStr => ({ ts: parseFloat(tsStr), r1r2: r1r2Data ? r1r2Data[tsStr] : undefined, - r3: r3Data ? r3Data[tsStr] : undefined + r3: r3Data ? r3Data[tsStr] : undefined })) .sort((a, b) => a.ts - b.ts); // Header const headRow = $('#forecast-blackout-head').empty().append('${label}