[feat](trx-frontend-http): add bandplan strip above spectrum waterfall

Add a bandplan display strip that shows IARU frequency allocations
(CW, Phone, Digital, FM, Beacon, Satellite) above the spectrum plot.
Includes IARU Region 1/2/3 data for all HF/VHF/UHF bands, a settings
submenu for region selection and label toggle, and color-coded segments
that pan/zoom with the spectrum view.

https://claude.ai/code/session_01AyBktp6b8qFjchyyqwL7dv
Signed-off-by: Claude <noreply@anthropic.com>
This commit is contained in:
Claude
2026-03-29 21:42:59 +00:00
committed by Stan Grams
parent 4aae2fa725
commit 4c095e64f0
7 changed files with 700 additions and 0 deletions
@@ -3235,6 +3235,98 @@ button:focus-visible, input:focus-visible, select:focus-visible {
cursor: crosshair;
touch-action: none;
}
/* ── Bandplan strip ─────────────────────────────────────────────────────────── */
#spectrum-bandplan-strip {
position: relative;
left: 0;
right: 0;
width: 100%;
height: 0;
overflow: hidden;
transition: height 80ms ease;
z-index: 5;
background: var(--bg-secondary, #121828);
border-bottom: 1px solid transparent;
}
#spectrum-bandplan-strip.bp-visible {
height: 18px;
overflow: hidden;
border-bottom-color: var(--border-light, rgba(255,255,255,0.06));
}
.bp-segment {
position: absolute;
top: 0;
height: 100%;
box-sizing: border-box;
border-right: 1px solid var(--bg-secondary, #121828);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
cursor: default;
min-width: 0;
}
.bp-segment-label {
font-size: 0.56rem;
font-weight: 600;
line-height: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding: 0 2px;
pointer-events: none;
opacity: 0.92;
}
.bp-segment[data-mode="CW"] { background: rgba(74,144,217,0.55); color: #d0e4ff; }
.bp-segment[data-mode="Phone"] { background: rgba(76,175,80,0.50); color: #d0f5d2; }
.bp-segment[data-mode="Narrow"] { background: rgba(217,74,122,0.50); color: #ffd0e4; }
.bp-segment[data-mode="FM"] { background: rgba(255,152,0,0.50); color: #fff0d0; }
.bp-segment[data-mode="All"] { background: rgba(120,120,120,0.40); color: #ddd; }
.bp-segment[data-mode="Beacon"] { background: rgba(156,39,176,0.50); color: #f0d0ff; }
.bp-segment[data-mode="Satellite"]{ background: rgba(0,188,212,0.50); color: #d0f8ff; }
.bp-band-label {
position: absolute;
top: 0;
height: 100%;
display: flex;
align-items: center;
font-size: 0.54rem;
font-weight: 700;
color: var(--text-muted);
opacity: 0.65;
pointer-events: none;
padding-left: 3px;
z-index: 1;
}
/* Legend in settings */
.bandplan-legend-grid {
display: flex;
flex-wrap: wrap;
gap: 0.6rem 1.2rem;
}
.bandplan-legend-item {
display: inline-flex;
align-items: center;
gap: 0.35rem;
font-size: 0.8rem;
color: var(--text);
}
.bandplan-legend-swatch {
display: inline-block;
width: 18px;
height: 12px;
border-radius: 2px;
}
.bandplan-legend-swatch[data-mode="CW"] { background: rgba(74,144,217,0.75); }
.bandplan-legend-swatch[data-mode="Phone"] { background: rgba(76,175,80,0.70); }
.bandplan-legend-swatch[data-mode="Narrow"] { background: rgba(217,74,122,0.70); }
.bandplan-legend-swatch[data-mode="FM"] { background: rgba(255,152,0,0.70); }
.bandplan-legend-swatch[data-mode="All"] { background: rgba(120,120,120,0.55); }
.bandplan-legend-swatch[data-mode="Beacon"] { background: rgba(156,39,176,0.70); }
.bandplan-legend-swatch[data-mode="Satellite"]{ background: rgba(0,188,212,0.70); }
#spectrum-bookmark-axis {
position: absolute;
top: calc(-1 * var(--overview-plot-height));