From f65135cb5e6599cbbdebbd805e3bbf807c7131af Mon Sep 17 00:00:00 2001
From: Stan Grams <sjg@haxx.space>
Date: Sat, 28 Feb 2026 02:04:51 +0100
Subject: [PATCH] [feat](trx-frontend-http): display RDS PS name overlay on
 overview strip
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

When a WFM/SDR spectrum stream carries RDS data, show the Program
Service name (8-char station name) centered on the visible waveform
area in DSEG14 monospace — the same font as the frequency display.

- Add #rds-ps-overlay div inside .overview-strip (pointer-events: none,
  z-index: 2, absolutely positioned at the center of the visible canvas)
- updateRdsPsOverlay(rds) shows/hides and updates text on every spectrum
  frame; trims trailing spaces common in RDS PS strings
- Overlay cleared on spectrum disconnect / null frame
- text-shadow uses CSS color-mix against --bg for legibility across all
  style/theme combinations

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Signed-off-by: Stan Grams <sjg@haxx.space>
---
 .../trx-frontend-http/assets/web/app.js          | 15 +++++++++++++++
 .../trx-frontend-http/assets/web/index.html      |  1 +
 .../trx-frontend-http/assets/web/style.css       | 16 ++++++++++++++++
 3 files changed, 32 insertions(+)

diff --git a/src/trx-client/trx-frontend/trx-frontend-http/assets/web/app.js b/src/trx-client/trx-frontend/trx-frontend-http/assets/web/app.js
index a3d9bfa..b09d77e 100644
--- a/src/trx-client/trx-frontend/trx-frontend-http/assets/web/app.js
+++ b/src/trx-client/trx-frontend/trx-frontend-http/assets/web/app.js
@@ -330,6 +330,7 @@ const overviewPeakHoldEl = document.getElementById("overview-peak-hold");
 const themeToggleBtn = document.getElementById("theme-toggle");
 const headerRigSwitchSelect = document.getElementById("header-rig-switch-select");
 const headerStylePickSelect = document.getElementById("header-style-pick-select");
+const rdsPsOverlay = document.getElementById("rds-ps-overlay");
 let overviewPeakHoldMs = Number(loadSetting("overviewPeakHoldMs", 2000));
 
 let overviewDrawPending = false;
@@ -2793,6 +2794,7 @@ function startSpectrumStreaming() {
       overviewWaterfallRows = [];
       scheduleOverviewDraw();
       clearSpectrumCanvas();
+      updateRdsPsOverlay(null);
       return;
     }
     try {
@@ -2800,6 +2802,7 @@ function startSpectrumStreaming() {
       pushOverviewWaterfallFrame(lastSpectrumData);
       refreshCenterFreqDisplay();
       scheduleSpectrumDraw();
+      updateRdsPsOverlay(lastSpectrumData.rds);
     } catch (_) {}
   };
   spectrumSource.onerror = () => {
@@ -2824,6 +2827,7 @@ function stopSpectrumStreaming() {
   lastSpectrumData = null;
   overviewWaterfallRows = [];
   scheduleOverviewDraw();
+  updateRdsPsOverlay(null);
   clearSpectrumCanvas();
 }
 
@@ -2835,6 +2839,17 @@ function clearSpectrumCanvas() {
   ctx.fillRect(0, 0, spectrumCanvas.width, spectrumCanvas.height);
 }
 
+function updateRdsPsOverlay(rds) {
+  if (!rdsPsOverlay) return;
+  const ps = rds?.program_service?.trim();
+  if (ps) {
+    rdsPsOverlay.textContent = ps;
+    rdsPsOverlay.style.display = "";
+  } else {
+    rdsPsOverlay.style.display = "none";
+  }
+}
+
 function scheduleSpectrumDraw() {
   if (spectrumDrawPending) return;
   spectrumDrawPending = true;
diff --git a/src/trx-client/trx-frontend/trx-frontend-http/assets/web/index.html b/src/trx-client/trx-frontend/trx-frontend-http/assets/web/index.html
index 5d9072b..b9e92cf 100644
--- a/src/trx-client/trx-frontend/trx-frontend-http/assets/web/index.html
+++ b/src/trx-client/trx-frontend/trx-frontend-http/assets/web/index.html
@@ -48,6 +48,7 @@
     </div>
     <div class="overview-strip">
       <canvas id="overview-canvas" aria-hidden="true"></canvas>
+      <div id="rds-ps-overlay" aria-live="polite" aria-label="RDS station name"></div>
     </div>
     <!-- Auth gate (hidden by default, shown if auth is required) -->
     <div id="auth-gate" style="display:none; max-width: 30rem; margin: 0 auto 0.9rem; padding: 1.25rem 0 1.5rem; text-align: center;">
diff --git a/src/trx-client/trx-frontend/trx-frontend-http/assets/web/style.css b/src/trx-client/trx-frontend/trx-frontend-http/assets/web/style.css
index e225ab5..4d61d4f 100644
--- a/src/trx-client/trx-frontend/trx-frontend-http/assets/web/style.css
+++ b/src/trx-client/trx-frontend/trx-frontend-http/assets/web/style.css
@@ -411,6 +411,22 @@ small { color: var(--text-muted); }
   position: relative;
   z-index: 1;
 }
+#rds-ps-overlay {
+  display: none;
+  position: absolute;
+  top: calc(var(--header-waterfall-overlap) + clamp(4.2rem, 11vh, 6.25rem) / 2);
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 2;
+  pointer-events: none;
+  font-family: 'DSEG14 Classic', monospace;
+  font-size: 2rem;
+  letter-spacing: 0.05em;
+  color: var(--text-heading);
+  opacity: 0.88;
+  text-shadow: 0 1px 8px color-mix(in srgb, var(--bg) 60%, transparent);
+  white-space: nowrap;
+}
 .overview-toolbar {
   display: flex;
   align-items: center;