refactor: convert VDES plugin to TypeScript

This commit is contained in:
sjg
2026-08-01 12:30:17 +02:00
parent 2cbcc23fec
commit 0ab0f80986
6 changed files with 409 additions and 365 deletions
@@ -31,7 +31,6 @@ await build({
"sat-scheduler": path.join(sourceDir, "plugins", "sat-scheduler.js"),
scheduler: path.join(sourceDir, "plugins", "scheduler.js"),
vchan: path.join(sourceDir, "plugins", "vchan.js"),
vdes: path.join(sourceDir, "plugins", "vdes.js"),
wefax: path.join(sourceDir, "plugins", "wefax.js"),
},
outdir: outputDir,
@@ -51,6 +50,7 @@ await build({
cw: path.join(sourceDir, "plugins", "cw.ts"),
ft8: path.join(sourceDir, "plugins", "ft8.ts"),
"leaflet-ais-tracksymbol": path.join(sourceDir, "leaflet-ais-tracksymbol.ts"),
vdes: path.join(sourceDir, "plugins", "vdes.ts"),
},
outdir: outputDir,
bundle: true,
@@ -16,7 +16,7 @@ const pluginGroups: Readonly<Record<PluginGroup, readonly string[]>> = {
const loaded = new Set<string>();
const loading = new Map<string, Promise<void>>();
const modulePlugins = new Set(["/ft8.js", "/ft4.js", "/ft2.js", "/wspr.js", "/cw.js"]);
const modulePlugins = new Set(["/ft8.js", "/ft4.js", "/ft2.js", "/wspr.js", "/cw.js", "/vdes.js"]);
function loadLegacyScript(path: string): Promise<void> {
return new Promise((resolve, reject) => {
@@ -2,54 +2,107 @@
//
// SPDX-License-Identifier: GPL-2.0-or-later
export {};
interface VdesMessage {
rig_id?: string | null;
message_type?: number;
bit_len?: number;
raw_bytes?: number[];
lat?: number | null;
lon?: number | null;
vessel_name?: string | null;
callsign?: string | null;
destination?: string | null;
message_label?: string | null;
session_id?: number | null;
source_id?: number | null;
destination_id?: number | null;
data_count?: number | null;
asm_identifier?: number | null;
ack_nack_mask?: number | null;
channel_quality?: number | null;
payload_preview?: string | null;
link_id?: number | null;
sync_score?: number | null;
sync_errors?: number | null;
phase_rotation?: number | null;
fec_state?: string | null;
ts_ms?: number | null;
_tsMs?: number;
_ts?: string;
}
interface VdesBridge {
getDecodeHistoryRetentionMs?: () => number;
trxScheduleUiFrameJob?: (key: string, job: () => void) => void;
escapeMapHtml?: (input: string) => string;
postPath?: (path: string) => Promise<unknown>;
trxUi: { confirm(options: { title: string; message: string; confirmLabel: string }): Promise<boolean> };
vdesMapAddPoint?: (message: VdesMessage) => void;
updateVdesBar?: () => void;
clearVdesBar?: () => void;
resetVdesHistoryView?: () => void;
onServerVdesBatch?: (messages: VdesMessage[]) => void;
restoreVdesHistory?: (messages: VdesMessage[]) => void;
onServerVdes?: (message: VdesMessage) => void;
pruneVdesHistoryView?: () => void;
_trxDrainPendingDecode?: (decoder: string) => void;
}
const vdesWindow = window as unknown as VdesBridge;
const escapeVdesHtml = (input: string): string => vdesWindow.escapeMapHtml?.(input) ?? input
.replaceAll("&", "&amp;").replaceAll("<", "&lt;")
.replaceAll(">", "&gt;").replaceAll('"', "&quot;");
// --- VDES Decoder Plugin (server-side decode) ---
const vdesStatus = document.getElementById("vdes-status");
const vdesMessagesEl = document.getElementById("vdes-messages");
const vdesFilterInput = document.getElementById("vdes-filter");
const vdesFilterInput = document.getElementById("vdes-filter") as HTMLInputElement | null;
const vdesBarOverlay = document.getElementById("vdes-bar-overlay");
const vdesChannelSummaryEl = document.getElementById("vdes-channel-summary");
const vdesFrameCountEl = document.getElementById("vdes-frame-count");
const vdesLatestSeenEl = document.getElementById("vdes-latest-seen");
const VDES_BAR_WINDOW_MS = 15 * 60 * 1000;
let vdesFilterText = "";
let vdesMessageHistory = [];
let vdesMessageHistory: VdesMessage[] = [];
function currentVdesHistoryRetentionMs() {
return typeof window.getDecodeHistoryRetentionMs === "function"
? window.getDecodeHistoryRetentionMs()
function currentVdesHistoryRetentionMs(): number {
return typeof vdesWindow.getDecodeHistoryRetentionMs === "function"
? vdesWindow.getDecodeHistoryRetentionMs()
: 24 * 60 * 60 * 1000;
}
function pruneVdesMessageHistory() {
const cutoffMs = Date.now() - currentVdesHistoryRetentionMs();
vdesMessageHistory = vdesMessageHistory.filter((msg) => Number(msg?._tsMs) >= cutoffMs);
vdesMessageHistory = vdesMessageHistory.filter((msg) => (msg._tsMs ?? 0) >= cutoffMs);
}
function scheduleVdesUi(key, job) {
if (typeof window.trxScheduleUiFrameJob === "function") {
window.trxScheduleUiFrameJob(key, job);
function scheduleVdesUi(key: string, job: () => void): void {
if (typeof vdesWindow.trxScheduleUiFrameJob === "function") {
vdesWindow.trxScheduleUiFrameJob(key, job);
return;
}
job();
}
function scheduleVdesHistoryRender() {
scheduleVdesUi("vdes-history", () => renderVdesHistory());
scheduleVdesUi("vdes-history", () => { renderVdesHistory(); });
}
function scheduleVdesBarUpdate() {
scheduleVdesUi("vdes-bar", () => updateVdesBar());
scheduleVdesUi("vdes-bar", () => { updateVdesBar(); });
}
function currentVdesCenterText() {
const raw = (document.getElementById("freq")?.value || "").replace(/[^\d]/g, "");
const raw = ((document.getElementById("freq") as HTMLInputElement | null)?.value || "").replace(/[^\d]/g, "");
const hz = raw ? Number(raw) : 0;
if (!Number.isFinite(hz) || hz <= 0) return "100 kHz centered on tuned frequency";
return `100 kHz @ ${(hz / 1_000_000).toFixed(3)} MHz`;
}
function vdesAgeText(tsMs) {
if (!Number.isFinite(tsMs)) return "just now";
function vdesAgeText(tsMs: number | undefined): string {
if (typeof tsMs !== "number" || !Number.isFinite(tsMs)) return "just now";
const deltaMs = Math.max(0, Date.now() - tsMs);
const seconds = Math.round(deltaMs / 1000);
if (seconds < 5) return "just now";
@@ -60,11 +113,11 @@ function vdesAgeText(tsMs) {
return `${hours}h ago`;
}
function vdesHexPreview(rawBytes) {
function vdesHexPreview(rawBytes: number[] | undefined): string {
if (!Array.isArray(rawBytes) || rawBytes.length === 0) return "--";
return rawBytes
.slice(0, 20)
.map((value) => Number(value).toString(16).padStart(2, "0"))
.map((value) => value.toString(16).padStart(2, "0"))
.join(" ")
.toUpperCase();
}
@@ -84,7 +137,7 @@ function updateVdesSummary() {
}
}
function applyVdesFilterToRow(row) {
function applyVdesFilterToRow(row: HTMLElement): void {
if (!vdesFilterText) {
row.style.display = "";
return;
@@ -93,12 +146,7 @@ function applyVdesFilterToRow(row) {
row.style.display = text.includes(vdesFilterText) ? "" : "none";
}
function applyVdesFilterToAll() {
if (!vdesMessagesEl) return;
vdesMessagesEl.querySelectorAll(".vdes-message").forEach((row) => applyVdesFilterToRow(row));
}
function renderVdesRow(msg) {
function renderVdesRow(msg: VdesMessage): HTMLElement {
const row = document.createElement("div");
row.className = "vdes-message";
const ts = msg._ts || new Date().toLocaleTimeString([], {
@@ -150,32 +198,32 @@ function renderVdesRow(msg) {
row.innerHTML =
`<div class="vdes-row-head">` +
`<span class="vdes-time">${ts}</span>` +
`<span class="vdes-call">${escapeMapHtml(title)}</span>` +
`<span class="vdes-badge">${escapeMapHtml(label)}</span>` +
(labelText ? `<span class="vdes-badge">${escapeMapHtml(labelText)}</span>` : "") +
(linkText ? `<span class="vdes-badge">${escapeMapHtml(linkText)}</span>` : "") +
(srcText ? `<span class="vdes-badge">${escapeMapHtml(srcText)}</span>` : "") +
(dstText ? `<span class="vdes-badge">${escapeMapHtml(dstText)}</span>` : "") +
(syncText ? `<span class="vdes-badge">${escapeMapHtml(syncText)}</span>` : "") +
(phaseText ? `<span class="vdes-badge">${escapeMapHtml(phaseText)}</span>` : "") +
`<span class="vdes-badge">T${escapeMapHtml(String(msg.message_type ?? "--"))}</span>` +
`<span class="vdes-call">${escapeVdesHtml(title)}</span>` +
`<span class="vdes-badge">${escapeVdesHtml(label)}</span>` +
(labelText ? `<span class="vdes-badge">${escapeVdesHtml(labelText)}</span>` : "") +
(linkText ? `<span class="vdes-badge">${escapeVdesHtml(linkText)}</span>` : "") +
(srcText ? `<span class="vdes-badge">${escapeVdesHtml(srcText)}</span>` : "") +
(dstText ? `<span class="vdes-badge">${escapeVdesHtml(dstText)}</span>` : "") +
(syncText ? `<span class="vdes-badge">${escapeVdesHtml(syncText)}</span>` : "") +
(phaseText ? `<span class="vdes-badge">${escapeVdesHtml(phaseText)}</span>` : "") +
`<span class="vdes-badge">T${escapeVdesHtml(String(msg.message_type ?? "--"))}</span>` +
`</div>` +
`<div class="vdes-row-meta">` +
`<span>${escapeMapHtml(currentVdesCenterText())}</span>` +
`<span>${escapeMapHtml(`${msg.bit_len || 0} bits`)}</span>` +
(sessionText ? `<span>${escapeMapHtml(sessionText)}</span>` : "") +
(asmText ? `<span>${escapeMapHtml(asmText)}</span>` : "") +
(countText ? `<span>${escapeMapHtml(countText)}</span>` : "") +
(ackText ? `<span>${escapeMapHtml(ackText)}</span>` : "") +
(cqiText ? `<span>${escapeMapHtml(cqiText)}</span>` : "") +
(info ? `<span>${escapeMapHtml(info)}</span>` : "") +
(fecText ? `<span>${escapeMapHtml(fecText)}</span>` : "") +
`<span>${escapeMapHtml(vdesAgeText(msg._tsMs))}</span>` +
`<span>${escapeVdesHtml(currentVdesCenterText())}</span>` +
`<span>${escapeVdesHtml(`${msg.bit_len || 0} bits`)}</span>` +
(sessionText ? `<span>${escapeVdesHtml(sessionText)}</span>` : "") +
(asmText ? `<span>${escapeVdesHtml(asmText)}</span>` : "") +
(countText ? `<span>${escapeVdesHtml(countText)}</span>` : "") +
(ackText ? `<span>${escapeVdesHtml(ackText)}</span>` : "") +
(cqiText ? `<span>${escapeVdesHtml(cqiText)}</span>` : "") +
(info ? `<span>${escapeVdesHtml(info)}</span>` : "") +
(fecText ? `<span>${escapeVdesHtml(fecText)}</span>` : "") +
`<span>${escapeVdesHtml(vdesAgeText(msg._tsMs))}</span>` +
`</div>` +
`<div class="vdes-row-detail">` +
(previewText ? `<span>${escapeMapHtml(previewText)}</span>` : "") +
(previewText ? `<span>${escapeVdesHtml(previewText)}</span>` : "") +
(previewText ? `<span>·</span>` : "") +
`<span class="vdes-raw">${escapeMapHtml(rawHex)}</span>` +
`<span class="vdes-raw">${escapeVdesHtml(rawHex)}</span>` +
`</div>`;
applyVdesFilterToRow(row);
return row;
@@ -184,9 +232,9 @@ function renderVdesRow(msg) {
function updateVdesBar() {
if (!vdesBarOverlay) return;
updateVdesSummary();
const isVdes = (document.getElementById("mode")?.value || "").toUpperCase() === "VDES";
const isVdes = ((document.getElementById("mode") as HTMLSelectElement | null)?.value || "").toUpperCase() === "VDES";
const cutoffMs = Date.now() - VDES_BAR_WINDOW_MS;
const messages = vdesMessageHistory.filter((msg) => msg._tsMs >= cutoffMs).slice(0, 6);
const messages = vdesMessageHistory.filter((msg) => (msg._tsMs ?? 0) >= cutoffMs).slice(0, 6);
if (!isVdes || messages.length === 0) {
vdesBarOverlay.style.display = "none";
vdesBarOverlay.innerHTML = "";
@@ -196,19 +244,19 @@ function updateVdesBar() {
let html = '<div class="aprs-bar-header"><span class="aprs-bar-title"><span class="aprs-bar-title-word">VDES</span><span class="aprs-bar-title-word">Live</span></span><span class="aprs-bar-clear-wrap"><span class="aprs-bar-clear" role="button" tabindex="0" onclick="window.clearVdesBar()" onkeydown="if(event.key===\'Enter\'||event.key===\' \'){event.preventDefault();window.clearVdesBar();}" aria-label="Clear VDES overlay">Clear</span></span><span class="aprs-bar-window">Last 15 minutes</span></div>';
for (const msg of messages) {
const ts = msg._ts ? `<span class="aprs-bar-time">${msg._ts}</span>` : "";
const label = escapeMapHtml(msg.callsign || "VDES");
const title = escapeMapHtml(msg.vessel_name || "Burst");
const label = escapeVdesHtml(msg.callsign || "VDES");
const title = escapeVdesHtml(msg.vessel_name || "Burst");
const detail = [
`${msg.bit_len || 0} bits`,
msg.message_label ? escapeMapHtml(msg.message_label) : null,
msg.message_label ? escapeVdesHtml(msg.message_label) : null,
Number.isFinite(msg.source_id) ? `src ${Number(msg.source_id)}` : null,
Number.isFinite(msg.destination_id) ? `dst ${Number(msg.destination_id)}` : null,
Number.isFinite(msg.link_id) ? `LID ${Number(msg.link_id)}` : null,
Number.isFinite(msg.asm_identifier) ? `ASM ${Number(msg.asm_identifier)}` : null,
Number.isFinite(msg.sync_score) ? `sync ${(Number(msg.sync_score) * 100).toFixed(0)}%` : null,
Number.isFinite(msg.phase_rotation) ? `rot ${Number(msg.phase_rotation)}` : null,
msg.destination ? escapeMapHtml(msg.destination) : null,
escapeMapHtml(vdesAgeText(msg._tsMs)),
msg.destination ? escapeVdesHtml(msg.destination) : null,
escapeVdesHtml(vdesAgeText(msg._tsMs)),
]
.filter(Boolean)
.join(" · ");
@@ -217,12 +265,12 @@ function updateVdesBar() {
vdesBarOverlay.innerHTML = html;
vdesBarOverlay.style.display = "flex";
}
window.updateVdesBar = updateVdesBar;
window.clearVdesBar = function() {
window.resetVdesHistoryView();
vdesWindow.updateVdesBar = updateVdesBar;
vdesWindow.clearVdesBar = function() {
vdesWindow.resetVdesHistoryView?.();
};
window.resetVdesHistoryView = function() {
vdesWindow.resetVdesHistoryView = function() {
if (vdesMessagesEl) vdesMessagesEl.innerHTML = "";
vdesMessageHistory = [];
updateVdesBar();
@@ -236,14 +284,14 @@ function renderVdesHistory() {
return;
}
const fragment = document.createDocumentFragment();
for (let i = 0; i < vdesMessageHistory.length; i += 1) {
fragment.appendChild(renderVdesRow(vdesMessageHistory[i]));
for (const message of vdesMessageHistory) {
fragment.appendChild(renderVdesRow(message));
}
vdesMessagesEl.replaceChildren(fragment);
updateVdesSummary();
}
function addVdesMessage(msg) {
function addVdesMessage(msg: VdesMessage): void {
const tsMs = Number.isFinite(msg.ts_ms) ? Number(msg.ts_ms) : Date.now();
msg._tsMs = tsMs;
msg._ts = new Date(tsMs).toLocaleTimeString([], {
@@ -258,39 +306,17 @@ function addVdesMessage(msg) {
scheduleVdesHistoryRender();
}
function normalizeServerVdesMessage(msg) {
function normalizeServerVdesMessage(msg: VdesMessage): VdesMessage {
return {
...msg,
rig_id: msg.rig_id || null,
message_type: msg.message_type,
bit_len: msg.bit_len,
raw_bytes: msg.raw_bytes,
lat: msg.lat,
lon: msg.lon,
vessel_name: msg.vessel_name,
callsign: msg.callsign,
destination: msg.destination,
message_label: msg.message_label,
session_id: msg.session_id,
source_id: msg.source_id,
destination_id: msg.destination_id,
data_count: msg.data_count,
asm_identifier: msg.asm_identifier,
ack_nack_mask: msg.ack_nack_mask,
channel_quality: msg.channel_quality,
payload_preview: msg.payload_preview,
link_id: msg.link_id,
sync_score: msg.sync_score,
sync_errors: msg.sync_errors,
phase_rotation: msg.phase_rotation,
fec_state: msg.fec_state,
ts_ms: msg.ts_ms,
};
}
window.onServerVdesBatch = function(messages) {
vdesWindow.onServerVdesBatch = function(messages: VdesMessage[]) {
if (!Array.isArray(messages) || messages.length === 0) return;
if (vdesStatus) vdesStatus.textContent = "Receiving";
const normalized = [];
const normalized: VdesMessage[] = [];
for (const msg of messages) {
const next = normalizeServerVdesMessage(msg);
const tsMs = Number.isFinite(next.ts_ms) ? Number(next.ts_ms) : Date.now();
@@ -300,8 +326,8 @@ window.onServerVdesBatch = function(messages) {
minute: "2-digit",
second: "2-digit",
});
if (next.lat != null && next.lon != null && window.vdesMapAddPoint) {
window.vdesMapAddPoint(next);
if (next.lat != null && next.lon != null && vdesWindow.vdesMapAddPoint) {
vdesWindow.vdesMapAddPoint(next);
}
normalized.push(next);
}
@@ -312,19 +338,19 @@ window.onServerVdesBatch = function(messages) {
scheduleVdesHistoryRender();
};
window.restoreVdesHistory = function(messages) {
window.onServerVdesBatch(messages);
vdesWindow.restoreVdesHistory = function(messages: VdesMessage[]) {
vdesWindow.onServerVdesBatch?.(messages);
};
document.getElementById("settings-clear-vdes-history")?.addEventListener("click", async () => {
if (!await window.trxUi.confirm({ title: "Clear VDES history?", message: "All stored VDES decodes will be permanently removed.", confirmLabel: "Clear history" })) return;
document.getElementById("settings-clear-vdes-history")?.addEventListener("click", () => { void (async () => {
if (!await vdesWindow.trxUi.confirm({ title: "Clear VDES history?", message: "All stored VDES decodes will be permanently removed.", confirmLabel: "Clear history" })) return;
try {
await postPath("/clear_vdes_decode");
window.resetVdesHistoryView();
await vdesWindow.postPath?.("/clear_vdes_decode");
vdesWindow.resetVdesHistoryView?.();
} catch (e) {
console.error("VDES history clear failed", e);
}
});
})(); });
if (vdesFilterInput) {
vdesFilterInput.addEventListener("input", () => {
@@ -333,20 +359,20 @@ if (vdesFilterInput) {
});
}
window.onServerVdes = function(msg) {
vdesWindow.onServerVdes = function(msg: VdesMessage) {
if (vdesStatus) vdesStatus.textContent = "Receiving";
const next = normalizeServerVdesMessage(msg);
addVdesMessage(next);
if (next.lat != null && next.lon != null && window.vdesMapAddPoint) {
window.vdesMapAddPoint(next);
if (next.lat != null && next.lon != null && vdesWindow.vdesMapAddPoint) {
vdesWindow.vdesMapAddPoint(next);
}
};
window.pruneVdesHistoryView = function() {
vdesWindow.pruneVdesHistoryView = function() {
pruneVdesMessageHistory();
updateVdesBar();
renderVdesHistory();
};
updateVdesSummary();
if (window._trxDrainPendingDecode) window._trxDrainPendingDecode("vdes");
vdesWindow._trxDrainPendingDecode?.("vdes");
@@ -0,0 +1,33 @@
// SPDX-FileCopyrightText: 2026 Stan Grams <sjg@haxx.space>
//
// SPDX-License-Identifier: GPL-2.0-or-later
import assert from "node:assert/strict";
import { readFile } from "node:fs/promises";
import test from "node:test";
import vm from "node:vm";
test("VDES entry normalizes and forwards positioned server messages", async () => {
const forwarded = [];
const window = {
trxUi: { confirm: async () => true },
vdesMapAddPoint: (message) => { forwarded.push(message); },
};
const context = vm.createContext({
window,
document: { getElementById: () => null },
Date,
Number,
String,
Array,
console,
});
const source = await readFile(new URL("../../assets/web/generated/vdes.js", import.meta.url), "utf8");
new vm.Script(source).runInContext(context);
window.onServerVdes({ callsign: "SP0ABC", lat: 54.5, lon: 18.5, bit_len: 120, ts_ms: Date.now() });
assert.equal(forwarded.length, 1);
assert.equal(forwarded[0].callsign, "SP0ABC");
assert.equal(forwarded[0].rig_id, null);
assert.equal(typeof forwarded[0]._tsMs, "number");
});