mirror of
https://github.com/smittix/intercept.git
synced 2026-04-24 22:59:59 -07:00
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:
39
static/css/components/signal-waveform.css
Normal file
39
static/css/components/signal-waveform.css
Normal 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;
|
||||
}
|
||||
Reference in New Issue
Block a user