feat: add signal activity waveform component for radiosonde mode

Reusable SVG bar waveform (SignalWaveform.Live) that animates in response
to incoming SSE data — idle breathing when stopped, active oscillation
proportional to telemetry update frequency, smooth decay on signal loss.

Integrated into radiosonde Status section with ping() on each balloon
message and stop() on tracking stop. Also hardens the fetch error path
to show a readable message instead of a JSON parse error when the server
returns HTML.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Smittix
2026-03-02 16:27:09 +00:00
parent f8e5d61fa9
commit 90b455aa6c
4 changed files with 253 additions and 1 deletions

View File

@@ -0,0 +1,39 @@
/**
* Signal Waveform Component
* Animated SVG bar waveform for indicating live signal activity
*/
.signal-waveform {
display: inline-flex;
align-items: center;
vertical-align: middle;
}
.signal-waveform-svg {
display: block;
}
.signal-waveform-bar {
will-change: height, y;
transition: fill 0.3s ease;
}
/* Idle breathing animation */
.signal-waveform.idle .signal-waveform-bar {
animation: signal-waveform-breathe 2.5s ease-in-out infinite;
}
.signal-waveform.idle .signal-waveform-bar:nth-child(even) {
animation-delay: -1.25s;
}
@keyframes signal-waveform-breathe {
0%, 100% { opacity: 0.4; }
50% { opacity: 0.7; }
}
/* Active state - disable CSS breathing, JS drives heights */
.signal-waveform.active .signal-waveform-bar {
animation: none;
opacity: 1;
}