[feat](trx-frontend-http): enhance header telemetry and responsive UX
Implement UI refinements for the HTTP frontend main and plugin views.\n\n- add dimmed header signal graph with live rendering and scale\n- make graph responsive, colorized by signal strength, and keep last 10s only\n- add APRS and WSPR text filtering, matching FT8 behavior\n- refine responsive layout for controls/map/header behavior\n- tune jog wheel/button sizing and mode selector height alignment\n\nCo-authored-by: OpenAI Codex <codex@openai.com> Signed-off-by: Stanislaw Grams <stanislawgrams@gmail.com>
This commit is contained in:
@@ -33,6 +33,7 @@ const contentEl = document.getElementById("content");
|
||||
const serverSubtitle = document.getElementById("server-subtitle");
|
||||
const loadingTitle = document.getElementById("loading-title");
|
||||
const loadingSub = document.getElementById("loading-sub");
|
||||
const headerSigCanvas = document.getElementById("header-sig-canvas");
|
||||
|
||||
let lastControl;
|
||||
let lastTxEn = null;
|
||||
@@ -78,6 +79,127 @@ let lastEventAt = Date.now();
|
||||
let es;
|
||||
let esHeartbeat;
|
||||
let reconnectTimer = null;
|
||||
let headerSigSamples = [];
|
||||
let headerSigTimer = null;
|
||||
const HEADER_SIG_WINDOW_MS = 10_000;
|
||||
|
||||
function resizeHeaderSignalCanvas() {
|
||||
if (!headerSigCanvas) return;
|
||||
const cssW = Math.floor(headerSigCanvas.clientWidth);
|
||||
const cssH = Math.floor(headerSigCanvas.clientHeight);
|
||||
if (cssW <= 0 || cssH <= 0) return;
|
||||
const dpr = window.devicePixelRatio || 1;
|
||||
const nextW = Math.floor(cssW * dpr);
|
||||
const nextH = Math.floor(cssH * dpr);
|
||||
if (headerSigCanvas.width !== nextW || headerSigCanvas.height !== nextH) {
|
||||
headerSigCanvas.width = nextW;
|
||||
headerSigCanvas.height = nextH;
|
||||
}
|
||||
drawHeaderSignalGraph();
|
||||
}
|
||||
|
||||
function pushHeaderSignalSample(sUnits) {
|
||||
if (!headerSigCanvas) return;
|
||||
const now = Date.now();
|
||||
const sample = Number.isFinite(sUnits) ? Math.max(0, Math.min(20, sUnits)) : 0;
|
||||
headerSigSamples.push({ t: now, v: sample });
|
||||
while (headerSigSamples.length && now - headerSigSamples[0].t > HEADER_SIG_WINDOW_MS) {
|
||||
headerSigSamples.shift();
|
||||
}
|
||||
drawHeaderSignalGraph();
|
||||
}
|
||||
|
||||
function startHeaderSignalSampling() {
|
||||
if (!headerSigCanvas || headerSigTimer) return;
|
||||
headerSigTimer = setInterval(() => {
|
||||
pushHeaderSignalSample(Number.isFinite(sigLastSUnits) ? sigLastSUnits : 0);
|
||||
}, 120);
|
||||
}
|
||||
|
||||
function drawHeaderSignalGraph() {
|
||||
if (!headerSigCanvas) return;
|
||||
const ctx = headerSigCanvas.getContext("2d");
|
||||
if (!ctx) return;
|
||||
const dpr = window.devicePixelRatio || 1;
|
||||
const w = headerSigCanvas.width / dpr;
|
||||
const h = headerSigCanvas.height / dpr;
|
||||
if (w <= 0 || h <= 0) return;
|
||||
|
||||
ctx.save();
|
||||
ctx.scale(dpr, dpr);
|
||||
ctx.clearRect(0, 0, w, h);
|
||||
|
||||
// Soft horizontal guides for readability.
|
||||
ctx.strokeStyle = "rgba(148, 163, 184, 0.16)";
|
||||
ctx.lineWidth = 1;
|
||||
for (let i = 1; i <= 3; i++) {
|
||||
const y = Math.round((h * i) / 4) + 0.5;
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(0, y);
|
||||
ctx.lineTo(w, y);
|
||||
ctx.stroke();
|
||||
}
|
||||
|
||||
// Minimal S-unit scale markers.
|
||||
const yFor = (v) => h - (Math.max(0, Math.min(20, v)) / 20) * (h - 2) - 1;
|
||||
ctx.fillStyle = "rgba(154, 164, 181, 0.55)";
|
||||
ctx.font = "10px sans-serif";
|
||||
ctx.textAlign = "right";
|
||||
ctx.textBaseline = "middle";
|
||||
[["S9+", 18], ["S9", 9], ["S0", 0]].forEach(([label, val]) => {
|
||||
const y = yFor(val);
|
||||
ctx.fillText(label, w - 4, y);
|
||||
ctx.strokeStyle = "rgba(154, 164, 181, 0.22)";
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(2, y + 0.5);
|
||||
ctx.lineTo(w - 36, y + 0.5);
|
||||
ctx.stroke();
|
||||
});
|
||||
|
||||
if (headerSigSamples.length > 1) {
|
||||
const maxVal = 20; // includes S9+ scale overshoot.
|
||||
const toY = (v) => h - (Math.max(0, Math.min(maxVal, v)) / maxVal) * (h - 2) - 1;
|
||||
const now = Date.now();
|
||||
const windowStart = now - HEADER_SIG_WINDOW_MS;
|
||||
const toX = (t) => ((t - windowStart) / HEADER_SIG_WINDOW_MS) * w;
|
||||
const strengthGrad = ctx.createLinearGradient(0, h, 0, 0);
|
||||
strengthGrad.addColorStop(0.0, "rgba(64, 120, 255, 0.88)"); // weak: blue
|
||||
strengthGrad.addColorStop(0.5, "rgba(106, 186, 255, 0.9)");
|
||||
strengthGrad.addColorStop(0.8, "rgba(255, 166, 77, 0.9)");
|
||||
strengthGrad.addColorStop(1.0, "rgba(255, 78, 78, 0.92)"); // strong: red
|
||||
const fillGrad = ctx.createLinearGradient(0, h, 0, 0);
|
||||
fillGrad.addColorStop(0.0, "rgba(64, 120, 255, 0.12)");
|
||||
fillGrad.addColorStop(0.5, "rgba(106, 186, 255, 0.16)");
|
||||
fillGrad.addColorStop(0.8, "rgba(255, 166, 77, 0.18)");
|
||||
fillGrad.addColorStop(1.0, "rgba(255, 78, 78, 0.2)");
|
||||
|
||||
ctx.beginPath();
|
||||
headerSigSamples.forEach((sample, i) => {
|
||||
const x = toX(sample.t);
|
||||
const y = toY(sample.v);
|
||||
if (i === 0) ctx.moveTo(x, y);
|
||||
else ctx.lineTo(x, y);
|
||||
});
|
||||
ctx.lineTo(w, h);
|
||||
ctx.lineTo(0, h);
|
||||
ctx.closePath();
|
||||
ctx.fillStyle = fillGrad;
|
||||
ctx.fill();
|
||||
|
||||
ctx.beginPath();
|
||||
headerSigSamples.forEach((sample, i) => {
|
||||
const x = toX(sample.t);
|
||||
const y = toY(sample.v);
|
||||
if (i === 0) ctx.moveTo(x, y);
|
||||
else ctx.lineTo(x, y);
|
||||
});
|
||||
ctx.strokeStyle = strengthGrad;
|
||||
ctx.lineWidth = 1.25;
|
||||
ctx.stroke();
|
||||
}
|
||||
|
||||
ctx.restore();
|
||||
}
|
||||
|
||||
function formatFreq(hz) {
|
||||
if (!Number.isFinite(hz)) return "--";
|
||||
@@ -242,10 +364,8 @@ let serverLat = null;
|
||||
let serverLon = null;
|
||||
|
||||
function updateTitle() {
|
||||
let title = "trx-rs";
|
||||
if (serverVersion) title += ` v${serverVersion}`;
|
||||
if (serverCallsign) title += ` @ ${serverCallsign}'s`;
|
||||
title += ` ${rigName}`;
|
||||
let title = rigName || "Rig";
|
||||
if (serverCallsign) title = `${serverCallsign}'s ${title}`;
|
||||
document.getElementById("rig-title").textContent = title;
|
||||
}
|
||||
|
||||
@@ -830,6 +950,9 @@ document.querySelector(".tab-bar").addEventListener("click", (e) => {
|
||||
});
|
||||
|
||||
connect();
|
||||
resizeHeaderSignalCanvas();
|
||||
startHeaderSignalSampling();
|
||||
window.addEventListener("resize", resizeHeaderSignalCanvas);
|
||||
|
||||
// --- Leaflet Map (lazy-initialized) ---
|
||||
let aprsMap = null;
|
||||
|
||||
@@ -12,11 +12,14 @@
|
||||
<body>
|
||||
<div class="card" id="card">
|
||||
<div class="header">
|
||||
<div>
|
||||
<div class="header-text">
|
||||
<div class="title"><span id="rig-title">trx-rs</span></div>
|
||||
<div class="subtitle" id="server-subtitle"></div>
|
||||
<div class="subtitle">{pkg} v{ver}</div>
|
||||
</div>
|
||||
<div class="header-signal-wrap" aria-hidden="true">
|
||||
<canvas id="header-sig-canvas"></canvas>
|
||||
</div>
|
||||
<img id="logo" class="header-logo" src="/logo.png?v=1" alt="trx logo" onerror="this.style.display='none'" />
|
||||
</div>
|
||||
<div class="tab-bar">
|
||||
@@ -165,6 +168,7 @@
|
||||
<div id="subtab-aprs" class="sub-tab-panel" style="display:none;">
|
||||
<div class="aprs-controls">
|
||||
<button id="aprs-clear-btn" type="button">Clear</button>
|
||||
<input id="aprs-filter" class="ft8-filter" type="text" placeholder="Filter (e.g. SP2, beacon)" />
|
||||
<small id="aprs-status" style="color:var(--text-muted);">Waiting for server decode</small>
|
||||
</div>
|
||||
<div id="aprs-packets"></div>
|
||||
@@ -190,6 +194,7 @@
|
||||
<div class="ft8-controls">
|
||||
<button id="wspr-decode-toggle-btn" type="button">Enable WSPR</button>
|
||||
<button id="wspr-clear-btn" type="button">Clear</button>
|
||||
<input id="wspr-filter" class="ft8-filter" type="text" placeholder="Filter (e.g. K1ABC, FN31)" />
|
||||
<small id="wspr-status" style="color:var(--text-muted);">Waiting for server decode</small>
|
||||
<small id="wspr-period" style="color:var(--text-muted);">Next slot --:--</small>
|
||||
</div>
|
||||
|
||||
@@ -1,7 +1,9 @@
|
||||
// --- APRS Decoder Plugin (server-side decode) ---
|
||||
const aprsStatus = document.getElementById("aprs-status");
|
||||
const aprsPacketsEl = document.getElementById("aprs-packets");
|
||||
const aprsFilterInput = document.getElementById("aprs-filter");
|
||||
const APRS_MAX_PACKETS = 100;
|
||||
let aprsFilterText = "";
|
||||
|
||||
// Persistent packet history
|
||||
let aprsPacketHistory = loadSetting("aprsPackets", []);
|
||||
@@ -66,10 +68,37 @@ function renderAprsRow(pkt) {
|
||||
const osmUrl = `https://www.openstreetmap.org/?mlat=${pkt.lat}&mlon=${pkt.lon}#map=15/${pkt.lat}/${pkt.lon}`;
|
||||
posHtml = ` <a class="aprs-pos" href="${osmUrl}" target="_blank">${pkt.lat.toFixed(4)}, ${pkt.lon.toFixed(4)}</a>`;
|
||||
}
|
||||
row.dataset.filterText = [
|
||||
pkt.srcCall,
|
||||
pkt.destCall,
|
||||
pkt.path,
|
||||
pkt.info,
|
||||
pkt.type,
|
||||
pkt.lat != null ? pkt.lat.toFixed(4) : "",
|
||||
pkt.lon != null ? pkt.lon.toFixed(4) : "",
|
||||
]
|
||||
.filter(Boolean)
|
||||
.join(" ")
|
||||
.toUpperCase();
|
||||
row.innerHTML = `<span class="aprs-time">${ts}</span>${symbolHtml}<span class="aprs-call">${pkt.srcCall}</span>>${pkt.destCall}${pkt.path ? "," + pkt.path : ""}: <span title="${pkt.type}">${renderAprsInfo(pkt)}</span>${posHtml}${crcTag}`;
|
||||
applyAprsFilterToRow(row);
|
||||
return row;
|
||||
}
|
||||
|
||||
function applyAprsFilterToRow(row) {
|
||||
if (!aprsFilterText) {
|
||||
row.style.display = "";
|
||||
return;
|
||||
}
|
||||
const message = row.dataset.filterText || "";
|
||||
row.style.display = message.includes(aprsFilterText) ? "" : "none";
|
||||
}
|
||||
|
||||
function applyAprsFilterToAll() {
|
||||
const rows = aprsPacketsEl.querySelectorAll(".aprs-packet");
|
||||
rows.forEach((row) => applyAprsFilterToRow(row));
|
||||
}
|
||||
|
||||
function addAprsPacket(pkt) {
|
||||
const tag = pkt.crcOk ? "[APRS]" : "[APRS-CRC-FAIL]";
|
||||
console.log(tag, `${pkt.srcCall}>${pkt.destCall}${pkt.path ? "," + pkt.path : ""}: ${pkt.info}`, pkt);
|
||||
@@ -108,6 +137,13 @@ for (let i = aprsPacketHistory.length - 1; i >= 0; i--) {
|
||||
}
|
||||
}
|
||||
|
||||
if (aprsFilterInput) {
|
||||
aprsFilterInput.addEventListener("input", () => {
|
||||
aprsFilterText = aprsFilterInput.value.trim().toUpperCase();
|
||||
applyAprsFilterToAll();
|
||||
});
|
||||
}
|
||||
|
||||
// --- Server-side APRS decode handler ---
|
||||
window.onServerAprs = function(pkt) {
|
||||
aprsStatus.textContent = "Receiving";
|
||||
|
||||
@@ -2,8 +2,10 @@
|
||||
const wsprStatus = document.getElementById("wspr-status");
|
||||
const wsprPeriodEl = document.getElementById("wspr-period");
|
||||
const wsprMessagesEl = document.getElementById("wspr-messages");
|
||||
const wsprFilterInput = document.getElementById("wspr-filter");
|
||||
const WSPR_MAX_MESSAGES = 200;
|
||||
const WSPR_PERIOD_SECONDS = 120;
|
||||
let wsprFilterText = "";
|
||||
|
||||
function fmtWsprTime(tsMs) {
|
||||
if (!tsMs) return "--:--:--";
|
||||
@@ -31,7 +33,9 @@ function renderWsprRow(msg) {
|
||||
const rfHz = Number.isFinite(msg.freq_hz) && Number.isFinite(baseHz) ? (baseHz + msg.freq_hz) : null;
|
||||
const freq = Number.isFinite(rfHz) ? rfHz.toFixed(0) : "--";
|
||||
const message = (msg.message || "").toString();
|
||||
row.dataset.message = message.toUpperCase();
|
||||
row.innerHTML = `<span class="ft8-time">${fmtWsprTime(msg.ts_ms)}</span><span class="ft8-snr">${snr}</span><span class="ft8-dt">${dt}</span><span class="ft8-freq">${freq}</span><span class="ft8-msg">${escapeWsprHtml(message)}</span>`;
|
||||
applyWsprFilterToRow(row);
|
||||
return row;
|
||||
}
|
||||
|
||||
@@ -50,6 +54,27 @@ function escapeWsprHtml(input) {
|
||||
.replaceAll("\"", """);
|
||||
}
|
||||
|
||||
function applyWsprFilterToRow(row) {
|
||||
if (!wsprFilterText) {
|
||||
row.style.display = "";
|
||||
return;
|
||||
}
|
||||
const message = row.dataset.message || "";
|
||||
row.style.display = message.includes(wsprFilterText) ? "" : "none";
|
||||
}
|
||||
|
||||
function applyWsprFilterToAll() {
|
||||
const rows = wsprMessagesEl.querySelectorAll(".ft8-row");
|
||||
rows.forEach((row) => applyWsprFilterToRow(row));
|
||||
}
|
||||
|
||||
if (wsprFilterInput) {
|
||||
wsprFilterInput.addEventListener("input", () => {
|
||||
wsprFilterText = wsprFilterInput.value.trim().toUpperCase();
|
||||
applyWsprFilterToAll();
|
||||
});
|
||||
}
|
||||
|
||||
document.getElementById("wspr-decode-toggle-btn").addEventListener("click", async () => {
|
||||
try { await postPath("/toggle_wspr_decode"); } catch (e) { console.error("WSPR toggle failed", e); }
|
||||
});
|
||||
|
||||
@@ -19,20 +19,31 @@ body { font-family: sans-serif; margin: 0; min-height: 100vh; box-sizing: border
|
||||
.label { color: var(--text-muted); font-size: 0.9rem; margin-bottom: 6px; display: block; }
|
||||
.status { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.1rem 1rem; }
|
||||
input.status-input, select.status-input { width: 100%; padding: 0.45rem 0.5rem; font-size: 1rem; border: 1px solid var(--border-light); border-radius: 6px; background: var(--input-bg); color: var(--text); }
|
||||
#mode { height: 2.6rem; }
|
||||
#freq { font-family: 'DSEG14 Classic', monospace; font-size: 2rem; padding: 0.5rem 0.6rem; letter-spacing: 0.05em; text-align: center; }
|
||||
.controls-row {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto 1fr;
|
||||
gap: 1rem;
|
||||
align-items: start;
|
||||
align-items: stretch;
|
||||
}
|
||||
.controls-col {
|
||||
min-width: 0;
|
||||
display: grid;
|
||||
grid-template-rows: auto 1fr;
|
||||
}
|
||||
.controls-col { min-width: 0; }
|
||||
.controls-col-center { justify-self: center; width: auto; }
|
||||
.controls-row .label {
|
||||
margin-bottom: 6px;
|
||||
min-height: 1.2rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.controls-col .inline,
|
||||
.controls-col .jog-container,
|
||||
.controls-col .btn-grid {
|
||||
align-self: center;
|
||||
}
|
||||
.btn-grid {
|
||||
display: grid;
|
||||
@@ -47,8 +58,8 @@ input.status-input, select.status-input { width: 100%; padding: 0.45rem 0.5rem;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
.jog-wheel {
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
width: 83.2px;
|
||||
height: 83.2px;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(circle at 40% 35%, #2a3444, #1a2230);
|
||||
border: 2px solid var(--border-light);
|
||||
@@ -62,20 +73,20 @@ input.status-input, select.status-input { width: 100%; padding: 0.45rem 0.5rem;
|
||||
}
|
||||
.jog-indicator {
|
||||
position: absolute;
|
||||
width: 4px;
|
||||
height: 10px;
|
||||
width: 6.4px;
|
||||
height: 16px;
|
||||
background: var(--accent-green);
|
||||
border-radius: 2px;
|
||||
top: 4px;
|
||||
top: 6.4px;
|
||||
left: 50%;
|
||||
transform-origin: 50% 22px;
|
||||
transform-origin: 50% 35.2px;
|
||||
transform: translateX(-50%);
|
||||
pointer-events: none;
|
||||
}
|
||||
.jog-btn {
|
||||
width: 2.2rem;
|
||||
height: 2.2rem;
|
||||
font-size: 1.2rem;
|
||||
width: 3.3rem;
|
||||
height: 3.3rem;
|
||||
font-size: 1.8rem;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -143,7 +154,29 @@ button:disabled { opacity: 0.6; cursor: not-allowed; }
|
||||
.freq-inline #freq { flex: 1 1 auto; }
|
||||
small { color: var(--text-muted); }
|
||||
.header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.25rem; }
|
||||
.header-text {
|
||||
width: 16em;
|
||||
min-width: 16em;
|
||||
flex: 0 0 16em;
|
||||
}
|
||||
.title { font-size: 1.4rem; font-weight: 700; display: inline-flex; align-items: center; gap: 0.35rem; }
|
||||
.header-signal-wrap {
|
||||
flex: 1 1 auto;
|
||||
width: auto;
|
||||
min-width: 160px;
|
||||
height: clamp(2.6rem, 8vh, 4.5rem);
|
||||
margin: 0 1.5em;
|
||||
border: 1px solid color-mix(in srgb, var(--border-light) 55%, transparent);
|
||||
border-radius: 8px;
|
||||
background: color-mix(in srgb, var(--input-bg) 72%, transparent);
|
||||
opacity: 0.45;
|
||||
overflow: hidden;
|
||||
}
|
||||
#header-sig-canvas {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
}
|
||||
.header-logo { height: 6em; width: auto; flex-shrink: 0; filter: drop-shadow(0 4px 12px rgba(0,0,0,0.35)); }
|
||||
.subtitle { color: var(--text-muted); font-size: 0.95rem; }
|
||||
.subtitle a { color: var(--accent-green); text-decoration: none; }
|
||||
@@ -273,6 +306,8 @@ button:focus-visible, input:focus-visible, select:focus-visible {
|
||||
.card { padding: 1rem; }
|
||||
button { min-height: 2.8rem; font-size: 0.95rem; }
|
||||
input.status-input, select.status-input { font-size: 1.1rem; }
|
||||
.header-text { width: auto; min-width: 0; flex: 0 1 auto; }
|
||||
.header-signal-wrap { display: none; }
|
||||
.controls-row { grid-template-columns: 1fr auto; }
|
||||
.controls-col-power { grid-column: 1 / -1; }
|
||||
.ft8-controls { flex-wrap: wrap; }
|
||||
|
||||
Reference in New Issue
Block a user