diff --git a/steps/src/theme.js b/steps/src/theme.js index cc09d8e..2787162 100644 --- a/steps/src/theme.js +++ b/steps/src/theme.js @@ -35,6 +35,7 @@ function setTheme(theme) { appState.vizData, videoPlayer.duration ); + appState.speedGraphInstance.redraw(); } } } diff --git a/zoomsketch-issue/123.html b/zoomsketch-issue/123.html new file mode 100644 index 0000000..dc26215 --- /dev/null +++ b/zoomsketch-issue/123.html @@ -0,0 +1,320 @@ + + + + + + Visualizer — Flowchart + + + + + + + + + + + + + +
+
+
+

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. +
  2. If modal never hides, verify canplaythrough or fallback timer resolves. Some codecs/browsers don't reliably emit canplaythrough — use a timeout fallback.
    3. +
  3. On cached reload (IndexedDB) the ordering may differ — ensure both paths run the same Stage A → Stage B sequence.
    4. +
  4. Guard finalizeSetup() with a flag so it only runs once (prevents double initialization).
    5. +
+
+
+ + +
+ 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. +
+
+
+ + + + diff --git a/zoomsketch-issue/mermaid_live_editor.html b/zoomsketch-issue/mermaid_live_editor.html new file mode 100644 index 0000000..bdaaaa9 --- /dev/null +++ b/zoomsketch-issue/mermaid_live_editor.html @@ -0,0 +1,314 @@ + + + + + + Mermaid Live Editor + + + + + + + + +
+
+

Mermaid Live Editor

+

Paste Mermaid code on the left, render on the right. Uses Mermaid v11+ (ESM) and html2canvas for PNG export.

+
+ +
+ +
+
+ + + + + + + +
+ +
+ + + + + 100% +
+ + + + + +
+ + +
+ +
+
+ +
Rendered diagram will appear here.
+
+
+
+
+ + +
+ + + + + + + + diff --git a/zoomsketch-issue/visualizer-flowchart.html b/zoomsketch-issue/visualizer-flowchart.html new file mode 100644 index 0000000..6b79b92 --- /dev/null +++ b/zoomsketch-issue/visualizer-flowchart.html @@ -0,0 +1,159 @@ + + + + + + Visualizer — Interactive Mermaid Flowchart + + + + + + + + + + +
+
+
+

Visualizer — Interactive Flowchart (Mermaid)

+

Paste Mermaid source → instantly render a flowchart beside it.

+
+ +
+ + + + +
+
+ +
+ +
+
+

Flowchart

+
+ Legend: Stage A = metadata • Stage B = buffering +
+
+
+
+
+
+ + + +
+
+ + + + + +