Body:
This commit introduces a new advanced debugging overlay to help diagnose synchronization issues and fixes three core timing bugs that caused data streams to be misaligned.
Advanced Debug Overlay:
A new "Show Advanced Debug" toggle has been added to the UI. When enabled, it displays critical synchronization diagnostics in real-time, including:
Video vs. Target Radar timestamps
The calculated "Drift" in milliseconds between the two
Absolute start times for video and radar recordings
The currently applied offset
This provides a precise tool for manually calibrating the offset and verifying sync accuracy.
Synchronization Fixes:
The previous implementation suffered from several race conditions and logical errors in its time management:
Speed Graph Misalignment: The ego speed line on the graph was plotted using raw radar timestamps, ignoring the video offset. This has been corrected to use the offset-adjusted timestampMs, aligning it with the CAN data.
Playback Drift: The main animation loop was incorrectly applying the time offset a second time during playback, causing the radar visualization to lead or lag the video. The redundant offset calculation has been removed from the animationLoop.
Seeking Inaccuracy: When scrubbing the timeline, the UI would update the CAN speed using a stale videoPlayer.currentTime value due to the asynchronous nature of video seeking. The logic in updateFrame now uses the precise, calculated target time for the update, ensuring the EGO and CAN speed indicators match perfectly during seeks.
These changes result in a significantly more robust and verifiable synchronization between the video and radar data feeds.
Moves the main animationLoop function from index.html into a dedicated src/sync.js module.
This change isolates the core playback, clock management, and video resynchronization logic into a single, focused file.
The main script in index.html now imports and calls this function, simplifying its responsibilities and preparing for the final wiring step.
This commit resolves three persistent bugs that were identified during the refactoring of the file parsers and UI modules.
1. Fixed Cache Loading Race Condition
Problem: On page load, the application would try to process cached JSON data immediately. If the cached video file hadn't finished loading its metadata yet, the videoStartDate would be null, causing a getTime of null error in the JSON parser and preventing the visualization from loading.
Solution: The application's startup logic in DOMContentLoaded has been rewritten. A new processAllData function now contains all the data parsing logic. This function is now called exclusively as a callback to the video player's onloadedmetadata event. This guarantees that all data processing (for JSON and CAN logs) only happens after the video is ready and a valid videoStartDate is available.
2. Fixed Speed Graph Theme Not Updating
Problem: The speed graph's background, grid, and data lines are drawn to a static buffer for performance. When the theme was changed, the setTheme function would call .redraw() on the sketch, but this would only re-display the old buffer with the old theme's colors. The buffer itself was not being regenerated.
Solution:
The drawStaticGraphToBuffer function within the speedGraphSketch was made public by attaching it to the p5 instance (p.drawStaticGraphToBuffer).
The setTheme function in src/theme.js was updated to explicitly call this new public function. It now forces the speed graph to generate a new static buffer with the correct theme colors before redrawing.
Imported the videoPlayer element into theme.js to prevent a ReferenceError when checking its properties.
3. Fixed p5.js Canvas Resizing Error
Problem: When the browser window was resized, both p5 sketches would throw a TypeError because the code was attempting to call .resize() on the static graphics buffers (staticBackgroundBuffer and staticBuffer), which is not a valid function.
Solution: The windowResized functions in both sketches were corrected. Instead of trying to resize the existing buffer, the code now creates a brand new, correctly-sized buffer using p.createGraphics() and immediately redraws the static content (axes, gridlines, etc.) onto it.
Refactored the modal and theme-switching functionality out of the main script.
- Created src/modal.js to handle all logic for the confirmation modal.
- Created src/theme.js to manage the dark/light theme and canvas redraws.
- The main script now imports and initializes these modules, cleaning up the global scope.
RUSHIL AMBARISH KADU