mirror of
https://github.com/smittix/intercept.git
synced 2026-04-24 22:59:59 -07:00
90b455aa6c
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>
40 lines
858 B
CSS
40 lines
858 B
CSS
/**
|
|
* 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;
|
|
}
|