Visualizer — Application Flowchart

Clear, staged view of initialization, data loading, and playback sync. Shows the recommended two-stage video loading fix (metadata vs buffering).

Print

Overview

The visualizer loads JSON radar data and a video file, synchronizes timestamps, creates p5 sketches, then runs a high-precision animation loop to keep video and radar frames in sync.

Key events
loadedmetadata → duration available (Stage A)
canplaythrough → buffering sufficient (Stage B)
requestAnimationFrame / requestVideoFrameCallback → high precision playback

Stage 1 — Initialization

App boot & cache check
Start application
DOMContentLoaded → initTheme() & initDB()
Check localStorage for session?
If yes: load json & video blobs from IndexedDB
Call handleFiles([...blobs]) → processFilePipeline()

Stage 2 — Data Loading & Finalization

Two-stage video loading (robust)
processFilePipeline() starts
Show loading modal + spinner
JSON file present?
Parse JSON in worker → parseVisualizationJson()
Video file present?
Setup video player & attach listeners
Stage A — Metadata (DATA init)
Wait for loadedmetadata → video.duration available → call finalizeSetup() (create p5 sketches, draw static graphs).
Stage B — Buffering (UI finalization)
Wait for canplaythrough (or fallback timeout/loadeddata) → stop spinner and hide modal.
Re-sync radar timestamps (CRITICAL) — update each frame.timestampMs relative to videoStartDate & offset
function: calculateAndSetOffset() + timestamp normalization before finalize
Create p5 instances: radarSketch, speedGraphSketch, zoomSketch
Set initial frame → updateFrame(0)
Hide loading modal

Stage 3 — Playback & Synchronization

High-precision sync loop
User clicks Play
Start animationLoop() (requestAnimationFrame) & video.play()
Compute high-precision time & map to radar timestamp
Find matching radar frame index (binary search / lookup)
Update UI overlays, redraw p5 sketches, update timeline
Is drift > threshold (e.g. 150 ms)?
If yes → resync video player currentTime and reset master timers
Continue loop

Legend

Step — UI / user action
Process — internal data processing
I/O — modal / loading / network
Decision — branching

Troubleshooting checklist

  1. loadedmetadata must fire before calling setData(..., videoPlayer.duration). If graphs are blank, confirm timeline shows duration > 0.
  2. If modal never hides, verify canplaythrough or fallback timer resolves. Some codecs/browsers don't reliably emit canplaythrough — use a timeout fallback.
  3. On cached reload (IndexedDB) the ordering may differ — ensure both paths run the same Stage A → Stage B sequence.
  4. Guard finalizeSetup() with a flag so it only runs once (prevents double initialization).
Notes: This diagram reflects the robust two-stage loading approach: Stage A for data initialization (metadata) and Stage B for UI/buffering. Use the export button to paste into reports or attach to bug tickets.