[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:
@@ -1025,7 +1025,7 @@ function overviewWfResetTextureCache() {
|
||||
}
|
||||
|
||||
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() {
|
||||
@@ -1401,7 +1401,8 @@ function waterfallColorRgba(db, pal, minDb, maxDb) {
|
||||
const safeDb = Number.isFinite(db) ? db : lo;
|
||||
const clamped = Math.max(lo, Math.min(hi, safeDb));
|
||||
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 light = pal.waterfallLight[0] + t * (pal.waterfallLight[1] - pal.waterfallLight[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.
|
||||
let spectrumFloor = -115;
|
||||
let spectrumRange = 90;
|
||||
let waterfallGamma = 1.0;
|
||||
const SPECTRUM_HEADROOM_DB = 20;
|
||||
const SPECTRUM_SMOOTH_ALPHA = 0.42;
|
||||
|
||||
@@ -9786,4 +9788,17 @@ if (spectrumCenterRightBtn) {
|
||||
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 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>
|
||||
<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 id="spectrum-hint" class="spectrum-hint-mouse">Scroll to zoom · Ctrl+Scroll to tune · Drag to pan · Drag BW edges to resize</div>
|
||||
|
||||
@@ -2573,6 +2573,7 @@ button:focus-visible, input:focus-visible, select:focus-visible {
|
||||
}
|
||||
#spectrum-bw-label,
|
||||
#spectrum-floor-label,
|
||||
#spectrum-gamma-label,
|
||||
#spectrum-peak-hold-label {
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
@@ -3113,6 +3114,23 @@ button:focus-visible, input:focus-visible, select:focus-visible {
|
||||
padding: 0 8px;
|
||||
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-touch {
|
||||
font-size: 0.68rem;
|
||||
|
||||
Reference in New Issue
Block a user