diff --git a/steps/Visualizer_quick_start_Guide.html b/steps/Visualizer_quick_start_Guide.html new file mode 100644 index 0000000..53e336a --- /dev/null +++ b/steps/Visualizer_quick_start_Guide.html @@ -0,0 +1,233 @@ + + + + + + Radar & Video Synchronizer Infographic + + + + + + + + + + + + +
+ + +
+
+ 📡️ + 🎬 +
+

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
    • +
+
+
+ +
+ + +