Files
trx-rs/src/trx-client/trx-frontend/trx-frontend-http/assets/web/generated/sstv.js
T
sjgandClaude Opus 5 bf3bcc8a84
CI / lint (pull_request) Successful in 2m24s
CI / test (pull_request) Successful in 8m34s
CI / test (push) Successful in 7m47s
CI / frontend (pull_request) Successful in 4m28s
CI / reuse (pull_request) Successful in 5s
CI / lint (push) Successful in 2m21s
CI / frontend (push) Successful in 3m37s
CI / reuse (push) Successful in 6s
[fix](trx-frontend-http): show one rig at a time on the digital modes page
A client connected to several rigs decodes all of them at once, and the
decode stream carries every rig's traffic to every browser.  The decoder
panels listed all of it: a station a background rig copied on another band
appeared in the APRS list next to the selected rig's, the vessel counts and
the "latest seen" lines counted both, the status lines said "Receiving"
because some other rig was, and the CW pane interleaved two rigs into one
stream of text that read as neither.

The page is about the rig the operator selected — the one whose spectrum is
on screen and whose audio is playing — so each panel now shows what that rig
heard: rows, counts, latest-seen, status, the live picture a WEFAX or SSTV
frame is painting, and the CW pane.

Nothing is dropped on the way in.  The map is the whole station's view, has
its own rig filter, and would empty out if the plugins stopped feeding it, so
the histories still hold every rig and the map still plots them.  That also
means a switch loses nothing: the runtime gained a rerender hook, which the
rig switch calls, and switching back brings the other rig's traffic up again.
The CW pane is the exception — a running stream of text cannot be unpicked
after the fact — so it starts empty on the rig switched to.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01SyX26FCpMQxiBoC7r5K1A7
Signed-off-by: Stan Grams <sjg@haxx.space>
2026-08-07 08:11:13 +02:00

265 lines
9.6 KiB
JavaScript
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
import {
forActiveRig,
isActiveRigDecode
} from "./chunk-S57W63QN.js";
import {
hostCore
} from "./chunk-KL66PICH.js";
// src/plugins/sstv.ts
var sstvWindow = window;
var sstvDom = {
status: document.getElementById("sstv-status"),
liveView: document.getElementById("sstv-live-view"),
historyView: document.getElementById("sstv-history-view"),
liveContainer: document.getElementById("sstv-live-container"),
liveInfo: document.getElementById("sstv-live-info"),
liveCanvas: document.getElementById("sstv-live-canvas"),
liveLatest: document.getElementById("sstv-live-latest"),
historyList: document.getElementById("sstv-history-list"),
historyCount: document.getElementById("sstv-history-count"),
filterInput: document.getElementById("sstv-filter"),
sortSelect: document.getElementById("sstv-sort"),
toggleBtn: document.getElementById("sstv-decode-toggle-btn"),
clearBtn: document.getElementById("sstv-clear-btn"),
viewLiveBtn: document.getElementById("sstv-view-live"),
viewHistoryBtn: document.getElementById("sstv-view-history")
};
var SSTV_MAX_IMAGES = 100;
var sstvHistory = [];
var liveCtx = null;
var liveMode = "";
var liveHeight = 0;
var liveRows = 0;
var activeView = "live";
var filterText = "";
function retentionMs() {
return sstvWindow.getDecodeHistoryRetentionMs?.() ?? 24 * 60 * 60 * 1e3;
}
function pruneHistory() {
const cutoff = Date.now() - retentionMs();
sstvHistory = sstvHistory.filter((image) => (image._tsMs || 0) > cutoff);
}
function escapeHtml(value) {
return String(value).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
}
function scheduleUi(key, job) {
if (typeof sstvWindow.trxScheduleUiFrameJob === "function") {
sstvWindow.trxScheduleUiFrameJob(key, job);
return;
}
job();
}
function imageUrl(image) {
if (!image.path) return null;
const filename = image.path.split(/[\\/]/).pop();
return filename ? `/sstv-images/${encodeURIComponent(filename)}` : null;
}
function decodeBase64(data) {
const binary = atob(data);
const bytes = new Uint8Array(binary.length);
for (let i = 0; i < binary.length; i += 1) bytes[i] = binary.charCodeAt(i);
return bytes;
}
function switchView(view) {
activeView = view;
if (sstvDom.liveView) sstvDom.liveView.style.display = view === "live" ? "" : "none";
if (sstvDom.historyView) sstvDom.historyView.style.display = view === "history" ? "" : "none";
for (const button of [sstvDom.viewLiveBtn, sstvDom.viewHistoryBtn]) {
button?.classList.remove("sat-view-active");
}
if (view === "live") sstvDom.viewLiveBtn?.classList.add("sat-view-active");
else sstvDom.viewHistoryBtn?.classList.add("sat-view-active");
if (view === "history") renderHistoryTable();
}
sstvDom.viewLiveBtn?.addEventListener("click", () => {
switchView("live");
});
sstvDom.viewHistoryBtn?.addEventListener("click", () => {
switchView("history");
});
function beginPicture(mode, width, height) {
const canvas = sstvDom.liveCanvas;
if (!canvas || width <= 0 || height <= 0) return;
liveMode = mode;
liveHeight = height;
liveRows = 0;
canvas.width = width;
canvas.height = height;
liveCtx = canvas.getContext("2d");
if (!liveCtx) return;
liveCtx.fillStyle = "#606060";
liveCtx.fillRect(0, 0, width, height);
if (sstvDom.liveContainer) sstvDom.liveContainer.style.display = "";
updateLiveInfo();
}
function updateLiveInfo() {
if (!sstvDom.liveInfo) return;
const canvas = sstvDom.liveCanvas;
const size = canvas ? `${canvas.width}×${canvas.height}` : "";
sstvDom.liveInfo.textContent = liveMode ? `${liveMode} · ${size} · line ${liveRows}${liveHeight ? ` of ${liveHeight}` : ""}` : "";
}
function paintRow(line, rgb) {
const canvas = sstvDom.liveCanvas;
if (!liveCtx || !canvas) return;
const width = canvas.width;
if (line < 0 || line >= canvas.height || rgb.length < width * 3) return;
const row = liveCtx.createImageData(width, 1);
for (let x = 0; x < width; x += 1) {
row.data[x * 4] = rgb[x * 3] ?? 0;
row.data[x * 4 + 1] = rgb[x * 3 + 1] ?? 0;
row.data[x * 4 + 2] = rgb[x * 3 + 2] ?? 0;
row.data[x * 4 + 3] = 255;
}
liveCtx.putImageData(row, 0, line);
liveRows = Math.max(liveRows, line + 1);
}
function onProgress(msg) {
if (!isActiveRigDecode(msg.rig_id)) return;
if (msg.state) {
if (sstvDom.status) sstvDom.status.textContent = msg.state;
beginPicture(msg.mode || "", msg.width || 0, msg.height || 0);
return;
}
if (typeof msg.line !== "number" || !msg.line_data) return;
const line = msg.line;
const rgb = decodeBase64(msg.line_data);
scheduleUi(`sstv-row-${line}`, () => {
paintRow(line, rgb);
updateLiveInfo();
});
}
function onImage(msg) {
const image = { ...msg };
image._tsMs = typeof msg.ts_ms === "number" ? msg.ts_ms : Date.now();
image._ts = new Date(image._tsMs).toLocaleTimeString();
sstvHistory.push(image);
if (sstvHistory.length > SSTV_MAX_IMAGES) sstvHistory.shift();
pruneHistory();
if (!isActiveRigDecode(image.rig_id)) return;
if (sstvDom.status) {
sstvDom.status.textContent = image.complete ? `Received ${image.mode ?? "picture"}` : `Partial ${image.mode ?? "picture"}${image.lines ?? 0} lines`;
}
scheduleUi("sstv-latest", renderLatestCard);
if (activeView === "history") scheduleUi("sstv-history", renderHistoryTable);
}
function sstvRigImages() {
return forActiveRig(sstvHistory);
}
function renderLatestCard() {
if (!sstvDom.liveLatest) return;
const rigImages = sstvRigImages();
const latest = rigImages[rigImages.length - 1];
if (!latest) {
sstvDom.liveLatest.innerHTML = "";
return;
}
const url = imageUrl(latest);
const lines = `${latest.lines ?? 0}${latest.height ? ` of ${latest.height}` : ""} lines`;
const state = latest.complete ? "complete" : "partial";
sstvDom.liveLatest.innerHTML = `
<div class="sat-latest-card">
<div style="display:flex; align-items:baseline; gap:0.5rem; flex-wrap:wrap;">
<strong>${escapeHtml(latest.mode ?? "SSTV")}</strong>
<small style="color:var(--text-muted);">${escapeHtml(latest._ts ?? "")} · ${lines} · ${state}</small>
</div>
${url ? `<a href="${escapeHtml(url)}" target="_blank" rel="noopener">
<img src="${escapeHtml(url)}" alt="Received ${escapeHtml(latest.mode ?? "SSTV")} picture"
style="margin-top:0.4rem; width:100%; max-width:640px; image-rendering:pixelated;" />
</a>` : ""}
</div>`;
}
function filteredHistory() {
const rigImages = sstvRigImages();
const text = filterText.trim().toLowerCase();
const matching = text ? rigImages.filter((image) => (image.mode ?? "").toLowerCase().includes(text)) : rigImages;
const newestFirst = (sstvDom.sortSelect?.value ?? "newest") === "newest";
matching.sort((a, b) => (newestFirst ? 1 : -1) * ((b._tsMs ?? 0) - (a._tsMs ?? 0)));
return matching;
}
function renderHistoryTable() {
if (!sstvDom.historyList) return;
pruneHistory();
const rows = filteredHistory();
sstvDom.historyList.innerHTML = rows.map((image) => {
const url = imageUrl(image);
const size = image.width && image.height ? `${image.width}×${image.height}` : "--";
const lines = image.complete ? String(image.lines ?? 0) : `${image.lines ?? 0} (partial)`;
return `<div class="sat-history-row">
<span class="sat-col-time">${escapeHtml(image._ts ?? "")}</span>
<span class="sat-col-type">${escapeHtml(image.mode ?? "--")}</span>
<span class="sat-col-sat">${escapeHtml(size)}</span>
<span class="sat-col-lines">${escapeHtml(lines)}</span>
<span class="sat-col-link">${url ? `<a href="${escapeHtml(url)}" target="_blank" rel="noopener">View</a>` : "--"}</span>
</div>`;
}).join("");
if (sstvDom.historyCount) {
sstvDom.historyCount.textContent = rows.length ? `${rows.length} picture${rows.length === 1 ? "" : "s"}` : "No pictures yet";
}
}
sstvDom.filterInput?.addEventListener("input", () => {
filterText = sstvDom.filterInput?.value ?? "";
renderHistoryTable();
});
sstvDom.sortSelect?.addEventListener("change", () => {
renderHistoryTable();
});
function restoreHistory(entries) {
if (!Array.isArray(entries)) return;
for (const entry of entries) onImage(entry);
}
function resetHistoryView() {
sstvHistory = [];
liveRows = 0;
liveMode = "";
if (sstvDom.liveContainer) sstvDom.liveContainer.style.display = "none";
if (sstvDom.status) sstvDom.status.textContent = "Idle";
renderLatestCard();
renderHistoryTable();
}
sstvWindow.syncSstvToggle = function syncSstvToggle(enabled) {
const button = sstvDom.toggleBtn;
if (!button) return;
button.textContent = enabled ? "Disable SSTV" : "Enable SSTV";
button.setAttribute("aria-pressed", String(enabled));
button.classList.toggle("is-active", enabled);
};
sstvDom.toggleBtn?.addEventListener("click", () => {
void (async () => {
try {
if (sstvDom.toggleBtn) {
await sstvWindow.takeSchedulerControlForDecoderDisable?.(sstvDom.toggleBtn);
}
await hostCore.postPath("/toggle_sstv_decode");
} catch (e) {
console.error("SSTV toggle failed", e);
}
})();
});
sstvDom.clearBtn?.addEventListener("click", () => {
void (async () => {
try {
await hostCore.postPath("/clear_sstv_decode");
resetHistoryView();
} catch (e) {
console.error("SSTV clear failed", e);
}
})();
});
renderLatestCard();
sstvWindow.trxPluginRuntime.registerDecoder({
id: "sstv",
onMessage: onImage,
restore: restoreHistory,
prune: renderHistoryTable,
reset: resetHistoryView,
rerender: () => {
renderLatestCard();
renderHistoryTable();
}
});
sstvWindow.trxPluginRuntime.registerDecoder({
id: "sstv_progress",
onMessage: onProgress
});