[feat](trx-rs): receive SSTV pictures end to end

Wires the SSTV decoder into the stack, from the audio the server already
has to a panel in the browser that shows the picture arriving.

Server: a decoder task alongside the WEFAX one, running whenever the
decoder is enabled and the rig is in a mode SSTV is sent in.  A finished
picture is written to the cache as a PNG and sent on as a message; the
rows are sent as they decode, so a client can watch two minutes of
Martin M1 fill in rather than waiting for it.  Pictures join the decode
history, are replayed to a client that connects later, and survive a
restart.

Protocol: SetSstvDecodeEnabled and ResetSstvDecoder, a sstv_decode
_enabled flag in the rig state, two audio message types, and Sstv and
SstvProgress on DecodedMessage.  The history stores the message without
its base64 payload -- the picture is already on disk, and a megabyte per
entry is not what a history is for.

Client: pictures land in their own history, and the PNG the server sent
is written to the local cache so /sstv-images/ can serve it back.  That
endpoint and the WEFAX one now share their filename checks rather than
each carrying a copy: no separators, no parent references, .png only.

Web UI: an SSTV sub-tab beside WEFAX, with a live canvas the rows paint
into at the line number they carry, a card for the last picture, and a
filterable history with links to the files.  Rows below the one arriving
are grey rather than black -- not yet received is a different thing from
received as black.  A picture is not a spot, so neither pictures nor
their progress updates reach the decode statistics; that exclusion list
had grown by hand for LRPT and WEFAX and is now one named set.

The decoder crate gains what the server needed to hand a picture on:
to_png, to_png_base64 and save_png, with file names stamped in UTC so
they sort.

Panel behaviour is tested with the plugin runtime: rows painting at
their own line numbers rather than in arrival order, a completed picture
linked by file name alone with no server path in the page, a cut-off
picture reported as partial, clearing, and the toggle following the rig
state.

Signed-off-by: Stan Grams <sjg@haxx.space>

src/trx-client/trx-frontend/trx-frontend-http/assets/web/generated/app.js

@@ -932,7 +932,7 @@ function elementById(id) {
       ["Overview", ["overview"]],
       ["Marine & packet", ["ais", "vdes", "aprs", "hf-aprs"]],
       ["Weak signal", ["cw", "ft8", "ft4", "ft2", "wspr"]],
-      ["Broadcast & images", ["rds", "sat", "wefax"]]
+      ["Broadcast & images", ["rds", "sat", "wefax", "sstv"]]
     ];
     groups.forEach(([label, ids]) => {
       const group = document.createElement("optgroup");
@@ -1748,6 +1748,7 @@ var pluginGroups = {
     "/background-decode.js",
     "/sat.js",
     "/wefax.js",
+    "/sstv.js",
     "/ais.js",
     "/vdes.js",
     "/aprs.js",
@@ -2240,7 +2241,7 @@ function currentDecodeHistoryRetentionMs() {
 }
 window.getDecodeHistoryRetentionMs = currentDecodeHistoryRetentionMs;
 window.applyDecodeHistoryRetention = function() {
-  for (const decoder of ["aprs", "hf_aprs", "ais", "vdes", "ft8", "ft4", "ft2", "wspr", "wefax"]) {
+  for (const decoder of ["aprs", "hf_aprs", "ais", "vdes", "ft8", "ft4", "ft2", "wspr", "wefax", "sstv"]) {
     window.trxPluginRuntime.prune(decoder);
   }
 };
@@ -4820,6 +4821,9 @@ function render(update) {
   for (const [key, entry] of Object.entries(_decoderToggles)) {
     syncDecoderToggle(entry, !!update[key], entry.label);
   }
+  if (typeof update.sstv_decode_enabled === "boolean" && window.syncSstvToggle) {
+    window.syncSstvToggle(update.sstv_decode_enabled);
+  }
   if (typeof update.wefax_decode_enabled === "boolean" && window.syncWefaxToggle) {
     window.syncWefaxToggle(update.wefax_decode_enabled);
   }
@@ -7594,9 +7598,17 @@ function updateDecodeStatus(text) {
     if (el && el.textContent !== "Receiving") el.textContent = text;
   }
 }
+var IMAGE_DECODE_KINDS = /* @__PURE__ */ new Set([
+  "lrpt_image",
+  "lrpt_progress",
+  "wefax",
+  "wefax_progress",
+  "sstv",
+  "sstv_progress"
+]);
 function dispatchDecodeMessage(msg, skipStats = false) {
   if (msg.type) window.trxPluginRuntime.dispatch(msg.type, msg);
-  if (!skipStats && msg.type && msg.type !== "lrpt_image" && msg.type !== "lrpt_progress" && msg.type !== "wefax" && msg.type !== "wefax_progress") {
+  if (!skipStats && msg.type && !IMAGE_DECODE_KINDS.has(msg.type)) {
     window.trx.modules.map?.statsRecordDecode(msg.type, msg.rig_id || msg.remote || null);
     window.trx.modules.map?.scheduleStatsRender();
   }
@@ -7642,7 +7654,7 @@ function loadDecodeHistoryOnMainThread(onReady, onError) {
 }
 function restoreDecodeHistoryGroup(kind, messages) {
   if (!Array.isArray(messages) || messages.length === 0) return;
-  if (kind !== "lrpt_image" && kind !== "lrpt_progress" && kind !== "wefax" && kind !== "wefax_progress") {
+  if (!IMAGE_DECODE_KINDS.has(kind)) {
     for (const msg of messages) {
       window.trx.modules.map?.statsRecordDecode(kind, msg.rig_id || msg.remote || null, msg.ts_ms || void 0);
     }

src/trx-client/trx-frontend/trx-frontend-http/assets/web/generated/decode-history-worker.js

@@ -2,7 +2,7 @@
 (() => {
   // src/decode-history-worker.ts
   var textDecoder = typeof TextDecoder === "function" ? new TextDecoder() : null;
-  var HISTORY_GROUP_KEYS = ["ais", "vdes", "aprs", "hf_aprs", "cw", "ft8", "ft4", "ft2", "wspr", "wefax"];
+  var HISTORY_GROUP_KEYS = ["ais", "vdes", "aprs", "hf_aprs", "cw", "ft8", "ft4", "ft2", "wspr", "wefax", "sstv"];
   var workerScope = self;
   function decodeCborUint(view, bytes, state, additional) {
     const offset = state.offset;

src/trx-client/trx-frontend/trx-frontend-http/assets/web/generated/sstv.js

@@ -0,0 +1,249 @@
+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 (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 (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 renderLatestCard() {
+  if (!sstvDom.liveLatest) return;
+  const latest = sstvHistory[sstvHistory.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 text = filterText.trim().toLowerCase();
+  const matching = text ? sstvHistory.filter((image) => (image.mode ?? "").toLowerCase().includes(text)) : sstvHistory.slice();
+  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
+});
+sstvWindow.trxPluginRuntime.registerDecoder({
+  id: "sstv_progress",
+  onMessage: onProgress
+});

src/trx-client/trx-frontend/trx-frontend-http/assets/web/index.html

@@ -584,6 +584,7 @@ SPDX-License-Identifier: GPL-2.0-or-later
         <button class="sub-tab" data-subtab="rds">RDS</button>
         <button class="sub-tab" data-subtab="sat">SAT</button>
         <button class="sub-tab" data-subtab="wefax">WEFAX</button>
+        <button class="sub-tab" data-subtab="sstv">SSTV</button>
       </div>
       <div id="subtab-overview" class="sub-tab-panel">
         <div class="plugin-item" data-decoder="ais">
@@ -646,6 +647,12 @@ SPDX-License-Identifier: GPL-2.0-or-later
             Decodes Meteor-M LRPT (137 MHz QPSK) weather satellite imagery.
           </div>
         </div>
+        <div class="plugin-item" data-decoder="sstv">
+          <strong>SSTV Decoder</strong>
+          <div style="color:var(--text-muted); font-size:0.85rem; margin-top:0.2rem;">
+            Slow-Scan Television &mdash; pictures in Martin, Scottie, Robot, PD and Wraase modes
+          </div>
+        </div>
         <div class="plugin-item" data-decoder="wefax">
           <strong>WEFAX Decoder</strong>
           <div style="color:var(--text-muted); font-size:0.85rem; margin-top:0.2rem;">
@@ -653,6 +660,56 @@ SPDX-License-Identifier: GPL-2.0-or-later
           </div>
         </div>
       </div>
+      <div id="subtab-sstv" class="sub-tab-panel" style="display:none;">
+        <div class="ft8-controls">
+          <button id="sstv-decode-toggle-btn" type="button">Enable SSTV</button>
+          <small id="sstv-status" style="color:var(--text-muted);">Idle</small>
+        </div>
+        <!-- View selector -->
+        <div class="sat-view-bar">
+          <button id="sstv-view-live" class="sat-view-btn sat-view-active" type="button">Live</button>
+          <button id="sstv-view-history" class="sat-view-btn" type="button">History</button>
+        </div>
+        <!-- Live view -->
+        <div id="sstv-live-view">
+          <div style="margin:0 0 0.5rem;">
+            <div style="color:var(--text-muted); font-size:0.82rem; line-height:1.5;">
+              <strong>Slow-Scan Television</strong> &mdash; pictures sent as tones, in Martin,
+              Scottie, Robot, PD and Wraase modes. Tune a sideband or FM signal and enable the
+              decoder; the mode is read from the header the sender opens with.
+            </div>
+          </div>
+          <div id="sstv-live-container" style="display:none; margin:0.5rem 0;">
+            <div style="display:flex; align-items:center; gap:0.5rem; margin-bottom:0.3rem;">
+              <strong>Receiving</strong>
+              <small id="sstv-live-info" style="color:var(--text-muted);"></small>
+            </div>
+            <canvas id="sstv-live-canvas" width="320" height="256"
+                    style="width:100%; max-width:640px; image-rendering:pixelated; background:#111;"></canvas>
+          </div>
+          <div id="sstv-live-latest" style="margin-top:0.5rem;"></div>
+        </div>
+        <!-- History view -->
+        <div id="sstv-history-view" style="display:none;">
+          <div class="sat-history-controls">
+            <input id="sstv-filter" class="ft8-filter" type="text" placeholder="Filter (e.g. Martin, PD120)" />
+            <select id="sstv-sort" class="sat-sort-select">
+              <option value="newest">Newest first</option>
+              <option value="oldest">Oldest first</option>
+            </select>
+            <button id="sstv-clear-btn" type="button" style="font-size:0.8rem;">Clear All</button>
+          </div>
+          <div class="sat-history-header">
+            <span class="sat-col-time">Time</span>
+            <span class="sat-col-type">Mode</span>
+            <span class="sat-col-sat">Size</span>
+            <span class="sat-col-lines">Lines</span>
+            <span class="sat-col-link">Image</span>
+          </div>
+          <div id="sstv-history-list"></div>
+          <small id="sstv-history-count" style="color:var(--text-muted);font-size:0.75rem;">No pictures yet</small>
+        </div>
+      </div>
       <div id="subtab-rds" class="sub-tab-panel" style="display:none;">
         <div class="rds-grid">
           <div class="rds-field"><span class="rds-label">Status</span><span id="rds-status" class="rds-value rds-no-signal">No signal</span></div>