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

[feat](trx-frontend-http): move band plan overlay to top of spectrum view

Browse Source 
Repositions the bandplan strip from the bottom of the combined spectrum
canvas to the top. Updates HTML element order, CSS bp-webgl absolute
positioning, and WebGL rendering Y coordinates.

https://claude.ai/code/session_015sRhGsk7ggRYoxJANDY72S
Signed-off-by: Claude <noreply@anthropic.com>
This commit is contained in:
Claude
2026-03-30 08:10:48 +00:00
committed by Stan Grams
parent b8f6208aa7
commit 9dbf6fc64e
3 changed files with 6 additions and 7 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
+3 -3
View File
@@ -10189,16 +10189,16 @@ function drawSpectrum(data) {
spectrumGl.drawPoints(spectrumTmpMarkerPoints, Math.max(2, dpr * 1.6), cssColorToRgba(pal.waveformPeak)); spectrumGl.drawPoints(spectrumTmpMarkerPoints, Math.max(2, dpr * 1.6), cssColorToRgba(pal.waveformPeak));
} }
// ── Bandplan WebGL strip (bottom of spectrum, above waterfall) ── // ── Bandplan WebGL strip (top of spectrum) ──
if (bandplanRegion !== "off" && bandplanData) { if (bandplanRegion !== "off" && bandplanData) {
const bpSegs = bandplanVisibleSegments(bandplanRegion, range.visLoHz, range.visHiHz); const bpSegs = bandplanVisibleSegments(bandplanRegion, range.visLoHz, range.visHiHz);
if (bpSegs.length > 0) { if (bpSegs.length > 0) {
const bpH = Math.round(BANDPLAN_STRIP_CSS_HEIGHT * dpr); const bpH = Math.round(BANDPLAN_STRIP_CSS_HEIGHT * dpr);
const bpY = H - bpH; const bpY = 0;
// Dark backdrop so segments are readable over the spectrum fill. // Dark backdrop so segments are readable over the spectrum fill.
spectrumGl.fillRect(0, bpY, W, bpH, [0.07, 0.09, 0.15, 0.82]); spectrumGl.fillRect(0, bpY, W, bpH, [0.07, 0.09, 0.15, 0.82]);
// Thin separator line at bottom of bandplan strip. // Thin separator line at bottom of bandplan strip.
spectrumGl.drawSegments([0, bpY + bpH, W, bpY + bpH], spectrumGl.drawSegments([0, bpH, W, bpH],
[1, 1, 1, 0.08], Math.max(1, dpr * 0.5)); [1, 1, 1, 0.08], Math.max(1, dpr * 0.5));
const bpVerts = []; const bpVerts = [];
for (const seg of bpSegs) { for (const seg of bpSegs) {
src/trx-client/trx-frontend/trx-frontend-http/assets/web/index.html
+1 -1
View File
@@ -119,6 +119,7 @@
</div> </div>
<div id="spectrum-panel" style="display:none;"> <div id="spectrum-panel" style="display:none;">
<div class="spectrum-wrap"> <div class="spectrum-wrap">
<div id="spectrum-bandplan-strip" aria-label="Band plan allocations"></div>
<div id="spectrum-bookmark-axis"></div> <div id="spectrum-bookmark-axis"></div>
<div id="spectrum-bookmark-side-left" class="spectrum-bookmark-side spectrum-bookmark-side-left" aria-hidden="true"></div> <div id="spectrum-bookmark-side-left" class="spectrum-bookmark-side spectrum-bookmark-side-left" aria-hidden="true"></div>
<canvas id="spectrum-canvas"></canvas> <canvas id="spectrum-canvas"></canvas>
@@ -127,7 +128,6 @@
<div id="spectrum-db-axis" aria-hidden="true"></div> <div id="spectrum-db-axis" aria-hidden="true"></div>
<div id="spectrum-bookmark-side-right" class="spectrum-bookmark-side spectrum-bookmark-side-right" aria-hidden="true"></div> <div id="spectrum-bookmark-side-right" class="spectrum-bookmark-side spectrum-bookmark-side-right" aria-hidden="true"></div>
<div id="spectrum-tooltip"></div> <div id="spectrum-tooltip"></div>
<div id="spectrum-bandplan-strip" aria-label="Band plan allocations"></div>
<canvas id="spectrum-waterfall-canvas" style="display:none;"></canvas> <canvas id="spectrum-waterfall-canvas" style="display:none;"></canvas>
<div id="spectrum-freq-axis"> <div id="spectrum-freq-axis">
<button id="spectrum-center-left-btn" class="spectrum-edge-shift spectrum-edge-shift-left" type="button" aria-label="Shift spectrum center left">&lsaquo;</button> <button id="spectrum-center-left-btn" class="spectrum-edge-shift spectrum-edge-shift-left" type="button" aria-label="Shift spectrum center left">&lsaquo;</button>
src/trx-client/trx-frontend/trx-frontend-http/assets/web/style.css
+2 -3
View File
@@ -3303,11 +3303,10 @@ button:focus-visible, input:focus-visible, select:focus-visible {
/* ── WebGL overlay mode ── When the spectrum canvas is visible the coloured /* ── WebGL overlay mode ── When the spectrum canvas is visible the coloured
segments are rendered via WebGL. The DOM strip repositions itself as a segments are rendered via WebGL. The DOM strip repositions itself as a
transparent label overlay at the bottom of the spectrum canvas, just above transparent label overlay at the top of the spectrum canvas. */
the waterfall. */
#spectrum-bandplan-strip.bp-webgl { #spectrum-bandplan-strip.bp-webgl {
position: absolute; position: absolute;
top: calc(var(--spectrum-plot-height) - 18px); top: 0;
left: 0; left: 0;
right: 0; right: 0;
background: transparent; background: transparent;