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(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 bwText = formatBwLabel(currentBandwidthHz);
ctx.save();
@@ -3138,23 +3138,24 @@ function drawSpectrum(data) {
const PAD = 6 * dpr;
const TAB_H = 16 * dpr;
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;
// Rounded-top tab shape (flat bottom)
// Rounded-bottom tab shape (flat top)
ctx.fillStyle = "rgba(240,173,78,0.85)";
ctx.beginPath();
ctx.moveTo(tabX + r, 0);
ctx.lineTo(tabX + tw + PAD * 2 - r, 0);
ctx.arcTo(tabX + tw + PAD * 2, 0, tabX + tw + PAD * 2, r, r);
ctx.lineTo(tabX + tw + PAD * 2, TAB_H);
ctx.lineTo(tabX, TAB_H);
ctx.lineTo(tabX, r);
ctx.arcTo(tabX, 0, tabX + r, 0, r);
ctx.moveTo(tabX, tabY);
ctx.lineTo(tabX + tw + PAD * 2, tabY);
ctx.lineTo(tabX + tw + PAD * 2, H - r);
ctx.arcTo(tabX + tw + PAD * 2, H, tabX + tw + PAD * 2 - r, H, r);
ctx.lineTo(tabX + r, H);
ctx.arcTo(tabX, H, tabX, H - r, r);
ctx.lineTo(tabX, tabY);
ctx.closePath();
ctx.fill();
// Tab text
ctx.fillStyle = spectrumBgColor();
ctx.textAlign = "left";
ctx.fillText(bwText, tabX + PAD, TAB_H - 4 * dpr);
ctx.fillText(bwText, tabX + PAD, H - 4 * dpr);
ctx.restore();
}
}
@@ -3400,7 +3401,12 @@ if (spectrumCanvas) {
const edge = getBwEdgeHit(cssX, rect.width, range);
spectrumCanvas.style.cursor = edge ? "ew-resize" : "crosshair";
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";
const tw = spectrumTooltip.offsetWidth;
let tx = cssX + 10;