Render overlaid audio gain and spectrum visualization on parent device #8

New issue

Open

opened 2026-09-02 15:25:51 +02:00 by emidab · 0 comments

emidab commented

2026-09-02 15:25:51 +02:00

Owner

Summary

Render a single overlaid audio visualization on the parent device: the live gain/level graph and the live frequency spectrum (spectrometer-style) combined into one coordinated view. The gain and spectrum share the same audio stream and sync together.

What to do

Compute audio level/gain from received audio frames
Apply FFT to the same received audio frames for the spectrum
Render gain and spectrum overlaid in one visualization (coordinated time axis / view)
Sync both layers with playback state — pause/clear together when audio receive is off
Style for visibility/contrast on a night-time parent view; reasonable performance on a phone (no jank)

Acceptance criteria

Live gain graph and spectrum render in a single overlaid view
Both layers update together and stop/clear cleanly when audio receive is toggled off
FFT-to-spectrum and gain level transforms are unit-tested with synthetic/fake audio data
Overlaid visualization widget has golden tests
Follows the established testing pattern (fake audio data, widget/golden, headless CI)

Notes

Depends on parent-side audio and the transport issue
Keep the DSP (FFT, level metering) separate from the widget so it's unit-testable in isolation
This issue merges the former separate gain-graph and spectrum issues into one coordinated visualization

## Summary Render a single overlaid audio visualization on the parent device: the live **gain/level graph** and the live **frequency spectrum** (spectrometer-style) combined into one coordinated view. The gain and spectrum share the same audio stream and sync together. ## What to do 1. Compute audio level/gain from received audio frames 2. Apply FFT to the same received audio frames for the spectrum 3. Render gain and spectrum overlaid in one visualization (coordinated time axis / view) 4. Sync both layers with playback state — pause/clear together when audio receive is off 5. Style for visibility/contrast on a night-time parent view; reasonable performance on a phone (no jank) ## Acceptance criteria - [ ] Live gain graph and spectrum render in a single overlaid view - [ ] Both layers update together and stop/clear cleanly when audio receive is toggled off - [ ] FFT-to-spectrum and gain level transforms are unit-tested with synthetic/fake audio data - [ ] Overlaid visualization widget has golden tests - [ ] Follows the established testing pattern (fake audio data, widget/golden, headless CI) ## Notes - Depends on parent-side audio and the transport issue - Keep the DSP (FFT, level metering) separate from the widget so it's unit-testable in isolation - This issue merges the former separate gain-graph and spectrum issues into one coordinated visualization

emidab added this to the v0.1 — MVP: P2P baby monitor milestone 2026-09-02 15:28:23 +02:00

emidab added the

area: parent

size: m

priority: medium

labels 2026-09-02 15:28:24 +02:00

emidab added a new dependency 2026-09-02 15:35:28 +02:00

#5 Implement parent device: receive and render streams

emidab added a new dependency 2026-09-02 15:35:29 +02:00

#6 Implement mTLS-secured stream transport and connection lifecycle

emidab added a new dependency 2026-09-02 15:35:44 +02:00

#11 Add configurable threshold notifications on parent device

emidab changed title from ~~Render live audio gain graph on parent device~~ to Render overlaid audio gain and spectrum visualization on parent device

2026-09-02 15:50:24 +02:00

emidab referenced this issue

2026-09-02 15:50:40 +02:00

Render live audio frequency spectrum on parent device #9

emidab added

size: l

and removed

size: m

labels 2026-09-02 15:53:36 +02:00