📡️ + 🎬

Radar & Video Synchronizer

A high-precision, browser-based tool for visualizing synchronized radar data and video, rebuilt with a modern modular JavaScript architecture.

Key Features

🔄

Synchronized Playback

Precise alignment of video and radar frames using high-resolution timers.

📂

Unified File Loading

Load JSON & Video via buttons or drag & drop. Handles large files efficiently.

⚙️

Efficient Parsing

Web Worker + Streaming parser prevent UI freezes with large JSON datasets.

📊

Interactive Visualization

p5.js renders point clouds, trajectories, speed graph, and details (TTC, ID).

🎨

Dynamic Filtering & Colors

Color points by SNR, Cluster, etc. Customize TTC risk colors. Filter tracks.

▶️

Advanced Controls

Full playback control, frame stepping, scroll-to-seek, zoom mode, sidebar, and shortcuts.

💾

Session Management

Cache files with IndexedDB for instant reload. Save/Load session state.

💡

Modern UI/UX

Responsive design, dark/light theme, clear overlays, and intuitive controls.

How It Works: Data Flow

User Loads
JSON & Video Files
(Drag & Drop / Button)
➔
Files Cached
(IndexedDB) &
Worker Parses JSON
➔
Timestamps Synced
& Data Processed
(Main Thread)
➔
p5.js Visualizes
Radar & Speed Graph
(UI Updated)
➔
Animation Loop
Keeps Video & Radar
Synced During Playback

Setup Guide (Local)
"Only needed if MyApp.exe does not work in your case"

Due to browser security with ES Modules, you need a simple local server. Python 3 is recommended.

1️⃣

Navigate

Navigate to the "public" folder inside the Main Visualizer folder

2️⃣

Check Python

Run `python_check.bat` or `python --version` in terminal. Ensure Python 3.x is in PATH.

3️⃣

Start Server

Run `Visualization_Start.bat` or type: - `python -m http.server 8000` in a CMD terminal inside "public" folder. Keep terminal open.

4️⃣

Browser Opens automatically

Incase it doesn't, Go to `http://localhost:8000` (or the URL shown in terminal).

Quick Usage Guide

🖱️

Load Data

Use buttons or drag & drop JSON/Video files.

▶️

Control Playback

Use Play/Pause/Stop, slider, arrows, or scroll wheel.

☰

Adjust Settings

Use the sidebar (M) for toggles, SNR, TTC colors.

⌨️

Use Shortcuts

Space, Arrows, 1-4, T, D, G, Q, etc. for speed.

Project File Structure

  • index.html
  • README.md
  • Visualization_Start.bat
  • python_check.bat
  • favicon.png
  • src/
    • constants.js
    • db.js
    • dom.js
    • drawUtils.js
    • fileParsers.js
    • main.js
    • modal.js
    • parser.worker.js
    • state.js
    • sync.js
    • theme.js
    • utils.js
    • p5/
      • radarSketch.js
      • speedGraphSketch.js
      • zoomSketch.js
  • tests/
    • test-runner.html
    • utils.test.js
    • fileParsers.test.js
  • context.md