w1cdn/spothole
1
0
Fork 0
mirror of https://git.ianrenton.com/ian/spothole.git synced 2026-04-29 18:25:58 +00:00
Code Issues 13 Packages Projects Releases Wiki Activity

Add fetching of NOAA 3-day forecast

Browse Source
This commit is contained in:
Ian Renton
2026-04-03 17:40:00 +01:00
parent 9d04f8ea38
commit 4a6d9da031
10 changed files with 289 additions and 124 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

4
templates/add_spot.html
View File

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

4
templates/alerts.html
View File

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

6
templates/bands.html
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=1775233379"></script>
<script src="/js/spotsbandsandmap.js?v=1775233379"></script>
<script src="/js/bands.js?v=1775233379"></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>$(document).ready(function() { $("#nav-link-bands").addClass("active"); }); <!-- highlight active page in nav --></script>
{% end %}

8
templates/base.html
View File

@@ -46,10 +46,10 @@
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/tinycolor2@1.6.0/cjs/tinycolor.min.js"></script>
<script src="https://misc.ianrenton.com/jsutils/utils.js?v=1775233379"></script>
<script src="https://misc.ianrenton.com/jsutils/storage.js?v=1775233379"></script>
<script src="https://misc.ianrenton.com/jsutils/ui-ham.js?v=1775233379"></script>
<script src="https://misc.ianrenton.com/jsutils/geo.js?v=1775233379"></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>
</head>
<body>

251
templates/conditions.html
View File

@@ -7,84 +7,76 @@
</div>
<div class="card-body">
<div class="row row-cols-1 row-cols-md-2 g-3">
<div class="col">
<div class="card h-100">
<div class="card-body">
<h5 class="card-title">HF</h5>
<table class="table table-sm mt-2">
<thead>
<tr>
<th>Band</th>
<th>Day</th>
<th>Night</th>
</tr>
</thead>
<tbody>
<tr>
<td>80-40m</td>
<td id="hf-conditions-80m-40m-day"></td>
<td id="hf-conditions-80m-40m-night"></td>
</tr>
<tr>
<td>30-20m</td>
<td id="hf-conditions-30m-20m-day"></td>
<td id="hf-conditions-30m-20m-night"></td>
</tr>
<tr>
<td>17-15m</td>
<td id="hf-conditions-17m-15m-day"></td>
<td id="hf-conditions-17m-15m-night"></td>
</tr>
<tr>
<td>12-10m</td>
<td id="hf-conditions-12m-10m-day"></td>
<td id="hf-conditions-12m-10m-night"></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="col mt-3 px-3">
<h5>HF</h5>
<table class="table table-sm mt-2">
<thead>
<tr>
<th>Band</th>
<th>Day</th>
<th>Night</th>
</tr>
</thead>
<tbody>
<tr>
<td>80-40m</td>
<td id="hf-conditions-80m-40m-day"></td>
<td id="hf-conditions-80m-40m-night"></td>
</tr>
<tr>
<td>30-20m</td>
<td id="hf-conditions-30m-20m-day"></td>
<td id="hf-conditions-30m-20m-night"></td>
</tr>
<tr>
<td>17-15m</td>
<td id="hf-conditions-17m-15m-day"></td>
<td id="hf-conditions-17m-15m-night"></td>
</tr>
<tr>
<td>12-10m</td>
<td id="hf-conditions-12m-10m-day"></td>
<td id="hf-conditions-12m-10m-night"></td>
</tr>
</tbody>
</table>
</div>
<div class="col">
<div class="card h-100">
<div class="card-body">
<h5 class="card-title">VHF</h5>
<table class="table table-sm mt-2">
<thead>
<tr>
<th>Propagation Mode</th>
<th>Condition</th>
</tr>
</thead>
<tbody>
<tr>
<td>Sporadic-E 6m (Europe)</td>
<td id="vhf-conditions-es_6m_europe"></td>
</tr>
<tr>
<td>Sporadic-E 4m (Europe)</td>
<td id="vhf-conditions-es_4m_europe"></td>
</tr>
<tr>
<td>Sporadic-E 2m (Europe)</td>
<td id="vhf-conditions-es_2m_europe"></td>
</tr>
<tr>
<td>Sporadic-E 2m (North America)</td>
<td id="vhf-conditions-es_2m_na"></td>
</tr>
<tr>
<td>Aurora (Northern Hemisphere)</td>
<td id="vhf-conditions-vhf_aurora_northern_hemi"></td>
</tr>
<tr>
<td>Aurora Minimum Latitude</td>
<td id="vhf-conditions-aurora-lat"></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="col mt-3 px-3">
<h5>VHF</h5>
<table class="table table-sm mt-2">
<thead>
<tr>
<th>Propagation Mode</th>
<th>Condition</th>
</tr>
</thead>
<tbody>
<tr>
<td>Sporadic-E 6m (Europe)</td>
<td id="vhf-conditions-es_6m_europe"></td>
</tr>
<tr>
<td>Sporadic-E 4m (Europe)</td>
<td id="vhf-conditions-es_4m_europe"></td>
</tr>
<tr>
<td>Sporadic-E 2m (Europe)</td>
<td id="vhf-conditions-es_2m_europe"></td>
</tr>
<tr>
<td>Sporadic-E 2m (North America)</td>
<td id="vhf-conditions-es_2m_na"></td>
</tr>
<tr>
<td>Aurora (Northern Hemisphere)</td>
<td id="vhf-conditions-vhf_aurora_northern_hemi"></td>
</tr>
<tr>
<td>Aurora Minimum Latitude</td>
<td id="vhf-conditions-aurora-lat"></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="form-text mt-3">Data from <a href="https://hamqsl.com">HamQSL.com</a>.</div>
@@ -95,7 +87,7 @@
<div class="card-header">
Solar Weather
</div>
<div class="card-body">
<div class="card-body px-3">
<div class="row border-bottom align-items-start me-0">
<div class="col-12 col-md-2 py-2 fw-bold">Solar Flux</div>
<div id="sw-solar-flux-vals" class="col-12 col-md-3 py-2">
@@ -138,6 +130,50 @@
</div>
</div>
<div class="card mt-5">
<div class="card-header">
Forecast
</div>
<div class="card-body">
<div class="row mb-4">
<div class="col mt-3 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>
</div>
</div>
<div class="row row-cols-1 row-cols-md-2 g-3">
<div class="col mt-3 px-3">
<h5>Solar Storm Forecast</h5>
<table id="forecast-solar-storm-table" class="table table-sm mt-2">
<thead>
<tr id="forecast-solar-storm-head"></tr>
</thead>
<tbody id="forecast-solar-storm-tbody"></tbody>
</table>
</div>
<div class="col mt-3 px-3">
<h5>Blackout Forecast</h5>
<table id="forecast-blackout-table" class="table table-sm mt-2">
<thead>
<tr id="forecast-blackout-head"></tr>
</thead>
<tbody id="forecast-blackout-tbody"></tbody>
</table>
</div>
</div>
<div class="form-text mt-3">Data from <a href="https://www.swpc.noaa.gov/">NOAA Space Weather Prediction
Center</a>.
</div>
</div>
</div>
<div class="card mt-5">
<div class="card-header">
DX Opportunities
@@ -145,7 +181,8 @@
<div class="card-body">
<div class="mb-3">
<label for="dxstats-de-continent" class="form-label">Your continent:</label>
<select id="dxstats-de-continent" class="form-select storeable-select d-inline-block ms-2" style="width: auto;" oninput="dxStatsContientChanged();">
<select id="dxstats-de-continent" class="form-select storeable-select d-inline-block ms-2"
style="width: auto;" oninput="dxStatsContientChanged();">
<option value="EU">Europe</option>
<option value="NA">North America</option>
<option value="SA">South America</option>
@@ -158,39 +195,45 @@
<div class="table-responsive">
<table class="table table-sm table-bordered mb-0">
<thead>
<tr>
<th></th>
<th>160m</th>
<th>80m</th>
<th>60m</th>
<th>40m</th>
<th>30m</th>
<th>20m</th>
<th>17m</th>
<th>15m</th>
<th>12m</th>
<th>10m</th>
<th>6m</th>
</tr>
<tr>
<th></th>
<th>160m</th>
<th>80m</th>
<th>60m</th>
<th>40m</th>
<th>30m</th>
<th>20m</th>
<th>17m</th>
<th>15m</th>
<th>12m</th>
<th>10m</th>
<th>6m</th>
</tr>
</thead>
<tbody>
{% for continent in ["EU", "NA", "SA", "AS", "AF", "OC", "AN"] %}
<tr>
<td class="fw-bold">{{ continent }}</td>
{% for band in ["160m", "80m", "60m", "40m", "30m", "20m", "17m", "15m", "12m", "10m", "6m"] %}
<td id="dxstats-{{ continent }}-{{ band }}"></td>
{% end %}
</tr>
{% for continent in ["EU", "NA", "SA", "AS", "AF", "OC", "AN"] %}
<tr>
<td class="fw-bold">{{ continent }}</td>
{% for band in ["160m", "80m", "60m", "40m", "30m", "20m", "17m", "15m", "12m", "10m", "6m"] %}
<td id="dxstats-{{ continent }}-{{ band }}"></td>
{% end %}
</tr>
{% end %}
</tbody>
</table>
</div>
<div class="form-text mt-2">This table shows the number of spots in the past hour received in your continent, where the DX continent and band are as shown in the table. Bands with high numbers of spots are likely to be the best ones for making contact with the continent you want right now. Bear in mind that some bands and some continents are inherently much rarer than others.</div>
<div class="form-text mt-2">This table shows the number of spots in the past hour received in your continent,
where the DX continent and band are as shown in the table. Bands with high numbers of spots are likely to be
the best ones for making contact with the continent you want right now. Bear in mind that some bands and
some continents are inherently much rarer than others.
</div>
</div>
</div>
<script src="/js/common.js?v=1775233379"></script>
<script src="/js/conditions.js?v=1775233379"></script>
<script>$(document).ready(function() { $("#nav-link-conditions").addClass("active"); }); <!-- highlight active page in nav --></script>
<script src="/js/common.js?v=1775234400"></script>
<script src="/js/conditions.js?v=1775234400"></script>
<script>$(document).ready(function () {
$("#nav-link-conditions").addClass("active");
}); <!-- highlight active page in nav --></script>
{% end %}

6
templates/map.html
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=1775233379"></script>
<script src="/js/spotsbandsandmap.js?v=1775233379"></script>
<script src="/js/map.js?v=1775233379"></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>$(document).ready(function() { $("#nav-link-map").addClass("active"); }); <!-- highlight active page in nav --></script>
{% end %}

6
templates/spots.html
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=1775233379"></script>
<script src="/js/spotsbandsandmap.js?v=1775233379"></script>
<script src="/js/spots.js?v=1775233379"></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>$(document).ready(function() { $("#nav-link-spots").addClass("active"); }); <!-- highlight active page in nav --></script>
{% end %}

4
templates/status.html
View File

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

122
webassets/js/conditions.js
View File

@@ -105,9 +105,131 @@ function loadSolarConditions() {
applySwClass('sw-electron-vals', 'sw-electron-desc',
electronFlux <= 100 ? 'bg-success-subtle' : electronFlux <= 1000 ? 'bg-warning-subtle' : 'bg-danger-subtle');
}
// Forecast
renderKIndexForecast(jsonData.k_index_forecast);
renderSolarStormForecast(jsonData.solar_storm_forecast);
renderBlackoutForecast(jsonData.blackout_forecast_r1r2, jsonData.blackout_forecast_r3_or_greater);
});
}
// Render the K-index forecast table (rows = 3-hour UTC time slots, columns = forecast dates)
function renderKIndexForecast(data) {
if (!data) return;
const entries = Object.entries(data)
.map(([tsStr, kp]) => ({ ts: parseFloat(tsStr), kp }))
.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>`);
});
// 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');
}
tr.append(td);
});
tbody.append(tr);
});
}
// Render the solar storm forecast table
function renderSolarStormForecast(data) {
if (!data) return;
const entries = Object.entries(data)
.map(([tsStr, pct]) => ({ ts: parseFloat(tsStr), pct }))
.sort((a, b) => a.ts - b.ts);
// Header
const headRow = $('#forecast-solar-storm-head').empty().append('<th></th>');
entries.forEach(({ ts }) => {
const label = new Date(ts * 1000)
.toLocaleDateString('en-US', { day: '2-digit', month: 'short', timeZone: 'UTC' });
headRow.append(`<th>${label}</th>`);
});
// Single data row: "S1 or greater" label + one cell per date
const tr = $('<tr>').append('<td>S1 or greater</td>');
entries.forEach(({ pct }) => {
const td = $('<td>').text(pct + '%');
td.addClass(pct < 50 ? 'bg-success-subtle' : pct < 75 ? 'bg-warning-subtle' : 'bg-danger-subtle');
tr.append(td);
});
$('#forecast-solar-storm-tbody').empty().append(tr);
}
// Render the radio blackout forecast table
function renderBlackoutForecast(r1r2Data, r3Data) {
if (!r1r2Data && !r3Data) return;
const tsSet = new Set([
...Object.keys(r1r2Data || {}),
...Object.keys(r3Data || {})
]);
const entries = [...tsSet]
.map(tsStr => ({
ts: parseFloat(tsStr),
r1r2: r1r2Data ? r1r2Data[tsStr] : undefined,
r3: r3Data ? r3Data[tsStr] : undefined
}))
.sort((a, b) => a.ts - b.ts);
// Header
const headRow = $('#forecast-blackout-head').empty().append('<th></th>');
entries.forEach(({ ts }) => {
const label = new Date(ts * 1000)
.toLocaleDateString('en-GB', { day: '2-digit', month: 'short', timeZone: 'UTC' });
headRow.append(`<th>${label}</th>`);
});
// Two data rows: R1-R2 and R3+
function makeRow(rowLabel, getValue) {
const tr = $('<tr>').append(`<td>${rowLabel}</td>`);
entries.forEach(entry => {
const pct = getValue(entry);
const td = $('<td>');
if (pct !== undefined) {
td.text(pct + '%');
td.addClass(pct < 50 ? 'bg-success-subtle' : pct < 75 ? 'bg-warning-subtle' : 'bg-danger-subtle');
}
tr.append(td);
});
return tr;
}
$('#forecast-blackout-tbody').empty()
.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; }