Add fetching of NOAA 3-day forecast

This commit is contained in:
Ian Renton
2026-04-03 18:11:45 +01:00
parent 4a6d9da031
commit c10b5e4947
11 changed files with 96 additions and 70 deletions

View File

@@ -4,7 +4,7 @@ from datetime import datetime, timezone
from solarconditionsproviders.http_solar_conditions_provider import HTTPSolarConditionsProvider
POLL_INTERVAL = 3600
POLL_INTERVAL = 10800 # Every 3 hours
URL = "https://services.swpc.noaa.gov/text/3-day-forecast.txt"
@@ -132,17 +132,16 @@ class NOAA3dayForecast(HTTPSolarConditionsProvider):
continue
start_hour = int(time_match.group(1))
raw_values = time_match.group(3).split()
# Split on 2 or more spaces so that e.g. "5.67 (G2)" stays as one token per column
raw_values = re.split(r' {2,}', time_match.group(3).strip())
for i, val in enumerate(raw_values):
if i >= len(column_dates):
break
# Discard bracketed values
if val.startswith('(') and val.endswith(')'):
continue
# Take only the leading numeric part, discarding any bracketed section
try:
kp = float(val)
except ValueError:
kp = float(val.split()[0])
except (ValueError, IndexError):
continue
date = column_dates[i]

View File

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

View File

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

View File

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

View File

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

View File

@@ -45,11 +45,12 @@
integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/tinycolor2@1.6.0/cjs/tinycolor.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.9/dist/chart.umd.min.js"></script>
<script src="https://misc.ianrenton.com/jsutils/utils.js?v=1775234400"></script>
<script src="https://misc.ianrenton.com/jsutils/storage.js?v=1775234400"></script>
<script src="https://misc.ianrenton.com/jsutils/ui-ham.js?v=1775234400"></script>
<script src="https://misc.ianrenton.com/jsutils/geo.js?v=1775234400"></script>
<script src="https://misc.ianrenton.com/jsutils/utils.js?v=1775236305"></script>
<script src="https://misc.ianrenton.com/jsutils/storage.js?v=1775236305"></script>
<script src="https://misc.ianrenton.com/jsutils/ui-ham.js?v=1775236305"></script>
<script src="https://misc.ianrenton.com/jsutils/geo.js?v=1775236305"></script>
</head>
<body>

View File

@@ -136,16 +136,9 @@
</div>
<div class="card-body">
<div class="row mb-4">
<div class="col mt-3 px-3">
<div class="col px-3">
<h5>K-index Forecast</h5>
<div class="table-responsive">
<table id="forecast-kp-table" class="table table-sm mt-2">
<thead>
<tr></tr>
</thead>
<tbody></tbody>
</table>
</div>
<canvas id="forecast-kp-chart" class="mt-3 mb-3"></canvas>
</div>
</div>
<div class="row row-cols-1 row-cols-md-2 g-3">
@@ -230,8 +223,8 @@
</div>
</div>
<script src="/js/common.js?v=1775234400"></script>
<script src="/js/conditions.js?v=1775234400"></script>
<script src="/js/common.js?v=1775236305"></script>
<script src="/js/conditions.js?v=1775236305"></script>
<script>$(document).ready(function () {
$("#nav-link-conditions").addClass("active");
}); <!-- highlight active page in nav --></script>

View File

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

View File

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

View File

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

View File

@@ -1,6 +1,8 @@
// Cache for the full dxstats API response, so we can reload on the fly if the user changes the value of their continent
// in the select box
let dxStatsData = null;
// Forecast chart
let kpChart = null;
// Load solar conditions
function loadSolarConditions() {
@@ -114,7 +116,7 @@ function loadSolarConditions() {
});
}
// Render the K-index forecast table (rows = 3-hour UTC time slots, columns = forecast dates)
// Render the K-index forecast as a Chart.js bar chart, one bar per 3-hour UTC period
function renderKIndexForecast(data) {
if (!data) return;
@@ -123,40 +125,71 @@ function renderKIndexForecast(data) {
.sort((a, b) => a.ts - b.ts);
if (entries.length === 0) return;
// Derive the unique UTC dates from sorted entries
const dateSet = new Set();
entries.forEach(e => dateSet.add(new Date(e.ts * 1000).toISOString().slice(0, 10)));
const dates = [...dateSet];
const kpByTs = {};
entries.forEach(e => { kpByTs[e.ts] = e.kp; });
// Header row
const headRow = $('#forecast-kp-table thead tr').empty().append('<th>Time (UTC)</th>');
dates.forEach(dateStr => {
const label = new Date(dateStr + 'T00:00:00Z')
.toLocaleDateString('en-GB', { day: '2-digit', month: 'short', timeZone: 'UTC' });
headRow.append(`<th>${label}</th>`);
// 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;
});
// Data rows: one per 3-hour slot
const tbody = $('#forecast-kp-table tbody').empty();
[0, 3, 6, 9, 12, 15, 18, 21].forEach(startHour => {
const endHour = (startHour + 3) % 24;
const timeLabel = String(startHour).padStart(2, '0') + '-' + String(endHour).padStart(2, '0') + 'UT';
const tr = $('<tr>').append(`<td>${timeLabel}</td>`);
dates.forEach(dateStr => {
const [y, m, d] = dateStr.split('-').map(Number);
const slotTs = Date.UTC(y, m - 1, d, startHour, 0, 0) / 1000;
const td = $('<td>');
const kp = kpByTs[slotTs];
if (kp !== undefined) {
td.text(kp.toFixed(2));
td.addClass(kp < 5 ? 'bg-success-subtle' : kp < 7 ? 'bg-warning-subtle' : 'bg-danger-subtle');
// 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"
// versions, so use tinycolor to apply some transparency.
const style = getComputedStyle(document.documentElement);
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 < 6.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(); }
kpChart = new Chart(document.getElementById('forecast-kp-chart'), {
type: 'bar',
data: {
labels,
datasets: [{
data: entries.map(e => e.kp),
backgroundColor: colors,
borderWidth: 0,
}]
},
options: {
responsive: true,
aspectRatio: 3,
plugins: {
legend: {
display: false
},
tooltip: {
enabled: false
}
},
scales: {
x: {
ticks: { color: textColor, maxRotation: 45, minRotation: 0 },
grid: { color: gridColor },
},
y: {
min: 0,
max: 9,
title: { display: true, text: 'Kp', color: textColor },
// Include geomagnetic storm levels (Gx) on the y-axis as well as the Kp index
ticks: {
stepSize: 1,
color: textColor,
callback: v => v > 4 ? `(G${v - 4}) ${v}` : String(v),
},
grid: { color: gridColor },
}
}
}
tr.append(td);
});
tbody.append(tr);
});
}