sjg/trx-rs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[fix](trx-frontend-http): improve spectrum hover feedback

Browse Source 
Show snapped peak frequencies in the spectrum hover tooltip\nand move the bandwidth label to the bottom of the tuned\nfrequency marker.\n\nCo-authored-by: Codex <codex@openai.com>

Signed-off-by: Stan Grams <sjg@haxx.space>
This commit is contained in:
Stan Grams
2026-02-28 09:03:44 +01:00
parent 3ab8ca8c1e
commit bfb09213e0
1 changed files with 17 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/trx-client/trx-frontend/trx-frontend-http/assets/web/app.js
+17 -11
View File
@@ -3129,7 +3129,7 @@ function drawSpectrum(data) {
ctx.beginPath(); ctx.moveTo(xL, 0); ctx.lineTo(xL, H); ctx.stroke(); ctx.beginPath(); ctx.moveTo(xL, 0); ctx.lineTo(xL, H); ctx.stroke();
ctx.beginPath(); ctx.moveTo(xR, 0); ctx.lineTo(xR, H); ctx.stroke(); ctx.beginPath(); ctx.moveTo(xR, 0); ctx.lineTo(xR, H); ctx.stroke();
// Top bookmark tab centered on the dial frequency // Bottom bookmark tab centered on the dial frequency
const xMid = hzToX(lastFreqHz); const xMid = hzToX(lastFreqHz);
const bwText = formatBwLabel(currentBandwidthHz); const bwText = formatBwLabel(currentBandwidthHz);
ctx.save(); ctx.save();
@@ -3138,23 +3138,24 @@ function drawSpectrum(data) {
const PAD = 6 * dpr; const PAD = 6 * dpr;
const TAB_H = 16 * dpr; const TAB_H = 16 * dpr;
const tabX = Math.max(0, Math.min(W - tw - PAD * 2, xMid - (tw + PAD * 2) / 2)); const tabX = Math.max(0, Math.min(W - tw - PAD * 2, xMid - (tw + PAD * 2) / 2));
const tabY = H - TAB_H;
const r = 3 * dpr; const r = 3 * dpr;
// Rounded-top tab shape (flat bottom) // Rounded-bottom tab shape (flat top)
ctx.fillStyle = "rgba(240,173,78,0.85)"; ctx.fillStyle = "rgba(240,173,78,0.85)";
ctx.beginPath(); ctx.beginPath();
ctx.moveTo(tabX + r, 0); ctx.moveTo(tabX, tabY);
ctx.lineTo(tabX + tw + PAD * 2 - r, 0); ctx.lineTo(tabX + tw + PAD * 2, tabY);
ctx.arcTo(tabX + tw + PAD * 2, 0, tabX + tw + PAD * 2, r, r); ctx.lineTo(tabX + tw + PAD * 2, H - r);
ctx.lineTo(tabX + tw + PAD * 2, TAB_H); ctx.arcTo(tabX + tw + PAD * 2, H, tabX + tw + PAD * 2 - r, H, r);
ctx.lineTo(tabX, TAB_H); ctx.lineTo(tabX + r, H);
ctx.lineTo(tabX, r); ctx.arcTo(tabX, H, tabX, H - r, r);
ctx.arcTo(tabX, 0, tabX + r, 0, r); ctx.lineTo(tabX, tabY);
ctx.closePath(); ctx.closePath();
ctx.fill(); ctx.fill();
// Tab text // Tab text
ctx.fillStyle = spectrumBgColor(); ctx.fillStyle = spectrumBgColor();
ctx.textAlign = "left"; ctx.textAlign = "left";
ctx.fillText(bwText, tabX + PAD, TAB_H - 4 * dpr); ctx.fillText(bwText, tabX + PAD, H - 4 * dpr);
ctx.restore(); ctx.restore();
} }
} }
@@ -3400,7 +3401,12 @@ if (spectrumCanvas) {
const edge = getBwEdgeHit(cssX, rect.width, range); const edge = getBwEdgeHit(cssX, rect.width, range);
spectrumCanvas.style.cursor = edge ? "ew-resize" : "crosshair"; spectrumCanvas.style.cursor = edge ? "ew-resize" : "crosshair";
const hz = canvasXToHz(cssX, rect.width, range); const hz = canvasXToHz(cssX, rect.width, range);
spectrumTooltip.textContent = formatSpectrumFreq(hz); const peakHz = edge ? null : nearestSpectrumPeakHz(cssX, rect.width, lastSpectrumData);
if (peakHz != null && Math.abs(peakHz - hz) >= Math.max(minFreqStepHz, 10)) {
spectrumTooltip.textContent = `Peak ${formatSpectrumFreq(peakHz)}`;
} else {
spectrumTooltip.textContent = formatSpectrumFreq(peakHz ?? hz);
}
spectrumTooltip.style.display = "block"; spectrumTooltip.style.display = "block";
const tw = spectrumTooltip.offsetWidth; const tw = spectrumTooltip.offsetWidth;
let tx = cssX + 10; let tx = cssX + 10;