📡️ 🎬

Radar & Video Synchronizer

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: 123 Time: 12:30:01.456
Mode: Color by SNR Drift: -15ms

2. Video Player

Shows the synchronized video feed.
Overlays (top-left):
Frame: 110 Time: 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.

⚙️

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. 1 Run Visualization_Start.bat. This script checks for Python 3 and starts the server for you.
  2. 2 Your browser should open to `http://localhost:8000` automatically.
  3. 3 Keep the black terminal window open while you use the app. Close it to stop the server.
  4. 4 If the `.bat` fails, run python_check.bat to diagnose, or manually run `python -m http.server 8000` in the `steps` folder.