audio/tcdweb
2
0
Fork 0
mirror of https://codeberg.org/armin/tcdweb.git synced 2026-09-01 05:30:45 +02:00
Code Issues Projects Releases Packages Wiki Activity

Add color legend to live spectrum section

Browse source 
Add a 4-item legend below the realtime FFT chart explaining the line
colors: FFT Spectrum (cyan), Peak Hold (white), Max Peaks (orange),
Cutoff (red). Also add corresponding CSS classes for the legend
layout and swatches, including a dashed variant for the
spectrum-section legend.
This commit is contained in:
Armin 2026-07-06 18:10:26 +02:00
commit 2d91d847d4
2 changed files with 33 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

6
index.html
View file

@ -56,6 +56,12 @@
<canvas id="liveSpectrum"></canvas> <canvas id="liveSpectrum"></canvas>
<canvas id="liveSpectrumOverlay" style="position:absolute;top:0;left:0;pointer-events:none"></canvas> <canvas id="liveSpectrumOverlay" style="position:absolute;top:0;left:0;pointer-events:none"></canvas>
</div> </div>
<div class="legend">
<span class="legend-item"><span class="legend-swatch" style="background:#00bcd4"></span>FFT Spectrum</span>
<span class="legend-item"><span class="legend-swatch" style="background:rgba(255,255,255,0.85)"></span>Peak Hold</span>
<span class="legend-item"><span class="legend-swatch" style="background:rgba(255,183,77,0.5)"></span>Max Peaks</span>
<span class="legend-item"><span class="legend-swatch" style="background:#ff5252"></span>Cutoff</span>
</div>
<div class="metrics-grid" style="margin-top:10px"> <div class="metrics-grid" style="margin-top:10px">
<div class="metric-card"> <div class="metric-card">
<div class="metric-label">Live Peak</div> <div class="metric-label">Live Peak</div>

27
style.css
View file

@ -190,6 +190,33 @@ section h2 {
} }
#spectrumChart { height: 360px; } #spectrumChart { height: 360px; }
.legend {
display: flex;
gap: 16px;
flex-wrap: wrap;
justify-content: center;
margin-top: 10px;
}
.legend-item {
display: flex;
align-items: center;
gap: 6px;
font-size: 11px;
color: var(--fg2);
font-family: var(--font);
}
.legend-swatch {
display: inline-block;
width: 12px;
height: 3px;
border-radius: 1px;
}
.legend-swatch-dashed {
width: 12px;
height: 0;
border-top: 2px dashed;
}
.player-controls { .player-controls {
display: flex; display: flex;
align-items: center; align-items: center;