[feat](trx-frontend-http): add waterfall contrast gamma curve slider

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Signed-off-by: Stan Grams <sjg@haxx.space>
This commit is contained in:
2026-03-21 18:11:39 +01:00
parent 6a7c3b5bbb
commit 1078fb23ed
3 changed files with 36 additions and 2 deletions
@@ -1025,7 +1025,7 @@ function overviewWfResetTextureCache() {
} }
function overviewWfPaletteKey(pal, viewKey = "") { function overviewWfPaletteKey(pal, viewKey = "") {
return `${pal.waterfallHue}|${pal.waterfallSat}|${pal.waterfallLight}|${pal.waterfallAlpha}|${spectrumFloor}|${spectrumRange}|${viewKey}`; return `${pal.waterfallHue}|${pal.waterfallSat}|${pal.waterfallLight}|${pal.waterfallAlpha}|${spectrumFloor}|${spectrumRange}|${waterfallGamma}|${viewKey}`;
} }
function resizeHeaderSignalCanvas() { function resizeHeaderSignalCanvas() {
@@ -1401,7 +1401,8 @@ function waterfallColorRgba(db, pal, minDb, maxDb) {
const safeDb = Number.isFinite(db) ? db : lo; const safeDb = Number.isFinite(db) ? db : lo;
const clamped = Math.max(lo, Math.min(hi, safeDb)); const clamped = Math.max(lo, Math.min(hi, safeDb));
const span = Math.max(1, hi - lo); const span = Math.max(1, hi - lo);
const t = (clamped - lo) / span; const tLinear = (clamped - lo) / span;
const t = waterfallGamma === 1.0 ? tLinear : Math.pow(tLinear, waterfallGamma);
const hue = pal.waterfallHue[0] + t * (pal.waterfallHue[1] - pal.waterfallHue[0]); const hue = pal.waterfallHue[0] + t * (pal.waterfallHue[1] - pal.waterfallHue[0]);
const light = pal.waterfallLight[0] + t * (pal.waterfallLight[1] - pal.waterfallLight[0]); const light = pal.waterfallLight[0] + t * (pal.waterfallLight[1] - pal.waterfallLight[0]);
const alpha = pal.waterfallAlpha[0] + t * (pal.waterfallAlpha[1] - pal.waterfallAlpha[0]); const alpha = pal.waterfallAlpha[0] + t * (pal.waterfallAlpha[1] - pal.waterfallAlpha[0]);
@@ -8137,6 +8138,7 @@ let spectrumPanFrac = 0.5;
// Y-axis level: floor = bottom dB value shown; range = total dB span. // Y-axis level: floor = bottom dB value shown; range = total dB span.
let spectrumFloor = -115; let spectrumFloor = -115;
let spectrumRange = 90; let spectrumRange = 90;
let waterfallGamma = 1.0;
const SPECTRUM_HEADROOM_DB = 20; const SPECTRUM_HEADROOM_DB = 20;
const SPECTRUM_SMOOTH_ALPHA = 0.42; const SPECTRUM_SMOOTH_ALPHA = 0.42;
@@ -9786,4 +9788,17 @@ if (spectrumCenterRightBtn) {
scheduleSpectrumDraw(); scheduleSpectrumDraw();
}); });
} }
const gammaInput = document.getElementById("spectrum-gamma-input");
const gammaValue = document.getElementById("spectrum-gamma-value");
if (gammaInput) {
gammaInput.addEventListener("input", () => {
const v = Number(gammaInput.value);
if (Number.isFinite(v) && v > 0) {
waterfallGamma = v;
if (gammaValue) gammaValue.textContent = v.toFixed(1);
if (lastSpectrumData) scheduleSpectrumDraw();
}
});
}
})(); })();
@@ -146,6 +146,7 @@
</label> </label>
<label id="spectrum-floor-label">Floor <input type="number" id="spectrum-floor-input" value="-115" step="5" /> dB</label> <label id="spectrum-floor-label">Floor <input type="number" id="spectrum-floor-input" value="-115" step="5" /> dB</label>
<button id="spectrum-auto-btn" type="button">Auto</button> <button id="spectrum-auto-btn" type="button">Auto</button>
<label id="spectrum-gamma-label">Contrast <input type="range" id="spectrum-gamma-input" min="0.2" max="3.0" step="0.1" value="1.0" /><span id="spectrum-gamma-value">1.0</span></label>
</div> </div>
</div> </div>
<div id="spectrum-hint" class="spectrum-hint-mouse">Scroll to zoom &middot; Ctrl+Scroll to tune &middot; Drag to pan &middot; Drag BW edges to resize</div> <div id="spectrum-hint" class="spectrum-hint-mouse">Scroll to zoom &middot; Ctrl+Scroll to tune &middot; Drag to pan &middot; Drag BW edges to resize</div>
@@ -2573,6 +2573,7 @@ button:focus-visible, input:focus-visible, select:focus-visible {
} }
#spectrum-bw-label, #spectrum-bw-label,
#spectrum-floor-label, #spectrum-floor-label,
#spectrum-gamma-label,
#spectrum-peak-hold-label { #spectrum-peak-hold-label {
width: 100%; width: 100%;
justify-content: space-between; justify-content: space-between;
@@ -3113,6 +3114,23 @@ button:focus-visible, input:focus-visible, select:focus-visible {
padding: 0 8px; padding: 0 8px;
font-size: 0.73rem; font-size: 0.73rem;
} }
#spectrum-gamma-label {
display: flex;
align-items: center;
gap: 0.3rem;
font-size: 0.75rem;
color: var(--text-muted);
}
#spectrum-gamma-input {
width: 5rem;
height: 1.5rem;
cursor: pointer;
}
#spectrum-gamma-value {
font-size: 0.72rem;
min-width: 1.6rem;
text-align: right;
}
.spectrum-hint-mouse, .spectrum-hint-mouse,
.spectrum-hint-touch { .spectrum-hint-touch {
font-size: 0.68rem; font-size: 0.68rem;