+ An infographic user manual for the high-precision visualization tool.
+
+
+
+
+
+
How to Use (The 30-Second Guide)
+
+
+ 1️⃣
+
Load Files
+
Drag & drop your .json and .mp4 files onto the window, or use the Load JSON / Load Video buttons.
+
+
➔
+
+ 2️⃣
+
Play & Sync
+
Press Play (or Spacebar). The app automatically syncs the radar data to the video based on their timestamps.
+
+
➔
+
+ 3️⃣
+
Explore & Analyze
+
Use the timeline, sidebar (M), zoom (G), and Data Explorer (I) to analyze the synchronized data.
+
+
+
+
+
+
+
The Main Interface
+
+
+
+
+
Main Radar Canvas
+
+
Video Player
+
Speed Graph
+
+
+
Control Bar & Timeline
+
+
+
+
+
+ 1. Radar Canvas
+
Main p5.js visualization. Shows:
+ - Point Clouds (Points)
+ - Object Trajectories (Lines)
+ - Track Markers (+)
+ - Ego Vehicle (Box at bottom)
+
+
Overlays (top-left):
+ Frame: 123Time: 12:30:01.456
+ Mode: Color by SNRDrift: -15ms
+
+
+
+
+
+ 2. Video Player
+
Shows the synchronized video feed.
+ Overlays (top-left):
+ Frame: 110Time: 12:30:01.440
+
+
+
+
+
+ 3. Speed Graph
+
Shows Ego Speed vs. CAN Speed over time.
+ A red line indicates the current playback position.
+
+
+
+
+
+ 4. Control Bar & Timeline
+
Main controls for playback.
+ - Play / Pause (Space), Stop
+ - Timeline slider (Click, drag, or Scroll Wheel to seek)
+ - Playback Speed slider
+
+
+
+
+
+ Sidebar
+
Click ☰ (or M) to open all toggles.
+
+
+
+
+ Data Explorer
+
Click ⛶ (or I) to open data inspector.
+
+
+
+
+
+
+
Key Features & Controls
+
+
+
+
+
+ 🖱️
+
File Loading & Caching
+
+
+ Load .json and .mp4 files via Drag & Drop anywhere on the page or by using the Load buttons. Files are cached in `IndexedDB` for instant reloads.
+
+
+
+
+
+
+ ⏱️
+
High-Precision Sync
+
+
+ The app uses a `performance.now()` master clock to drive playback, correcting any video drift. The time offset is automatically calculated from filenames (e.g., `fHist_...` and `WIN_...`).
+
+
+
+
+
+
+ slider
+
Advanced Timeline Control
+
+
+ Click or drag the timeline to seek. You can also hover your mouse wheel over the slider to seek frame-by-frame (slow scroll) or scrub quickly (fast scroll).
+
+
+
+
+
+
+ 🎨
+
Display Settings Sidebar (M)
+
+
+ Toggle visibility of: Tracks (T), Details (D), Predicted Pos (P), Covariance, and Confirmed Tracks.
+ Color Modes: Switch between SNR (1), Cluster (2), Inlier (3), or Stationary (4).
+ TTC Colors: Customize the Time-to-Collision (TTC) risk colors.
+
+
+
+
+
+
+ 🚀
+
"GOD MODE" Zoom (G)
+
+
+ Activates a separate, high-fidelity p5.js canvas that follows your mouse, showing a magnified view. Hover over points/tracks to see a detailed tooltip. Use the mouse wheel while in this mode to zoom in/out.
+
+
+
+
+
+
+ 📈
+
Data Explorer (I)
+
+
+ Opens a resizable panel to inspect the raw data of the *current frame*.
+ Tree View: Shows the full JSON structure.
+ Grid View: Sortable/filterable AG-Grid of point clouds or tracks.
+ Plot View: Click a grid header to plot that data with Chart.js.
+
+
+
+
+
+
+ 🚗
+
CAN Speed Integration
+
+
+ The Load CAN button has been removed. The visualizer now expects CAN speed data (canVehSpeed_kmph) to be included directly within the main JSON file, associated with each radar frame.
+
+
+
+
+
+
+ 💾
+
Session Management
+
+
+ Save Session downloads a .json file with your current file names, offset, and all UI toggle states. Load Session restores this state (requires files to be cached).
+
+
+
+
+
+
+ ⚙️
+
Web Worker Parsing
+
+
+ Large JSON files are parsed in a background Web Worker using a streaming parser. This prevents the UI from freezing and shows a real-time progress bar.
+
+
+
+
+
+
+
+
+
Full Keyboard Shortcuts
+
+
+
+
Playback & Navigation
+
+
Spacebar - Play / Pause
+
ArrowRight - Next Frame (pauses)
+
ArrowLeft - Previous Frame (pauses)
+
R - Reset to Frame 0
+
+
+
+
+
View & UI Toggles
+
+
M - Toggle Sidebar Menu
+
I - Toggle Data Explorer
+
G - Toggle "GOD MODE" Zoom
+
Q - Toggle Dark/Light Theme
+
A - Toggle Advanced Debug Info
+
F11 - Toggle Fullscreen
+
+
+
+
+
Data Display Toggles
+
+
T - Toggle Tracks
+
D - Toggle Object Details
+
P - Toggle Predicted Position
+
C - Toggle Confirmed Tracks Only
+
1 / S - Color by SNR
+
2 - Color by Cluster
+
3 - Color by Inlier
+
4 - Color by Stationary
+
+
+
+
+
+
+
+
Data & Setup
+
+
+
+
+
Project File Structure
+
+
index.html (Main Page)
+
readme.md (Docs)
+
Visualizer_quick_start_Guide.html (This file)
+
Visualization_Start.bat
+
python_check.bat
+
src/
+
+
main.js (App Entry)
+
state.js (Global State)
+
sync.js (Animation Loop)
+
dom.js (UI Functions)
+
drawUtils.js (P5 Helpers)
+
fileParsers.js (Data Processing)
+
parser.worker.js (JSON Parsing)
+
dataExplorer.js (Grid/Plot)
+
db.js (Caching)
+
modal.js (Popups)
+
theme.js (Dark/Light)
+
utils.js (Helpers)
+
constants.js (Config)
+
p5/
+
+
radarSketch.js
+
speedGraphSketch.js
+
zoomSketch.js
+
+
+
+
+
+
+
+
+
+
Local Setup Guide
+
The app must be run from a local server due to browser security rules for modules.
+
+
+ 1
+ Run Visualization_Start.bat. This script checks for Python 3 and starts the server for you.
+
+
+ 2
+ Your browser should open to `http://localhost:8000` automatically.
+
+
+ 3
+ Keep the black terminal window open while you use the app. Close it to stop the server.
+
+
+ 4
+ If the `.bat` fails, run python_check.bat to diagnose, or manually run `python -m http.server 8000` in the `steps` folder.
+