diff --git a/steps/Visualizer_quick_start_Guide.html b/steps/Visualizer_quick_start_Guide.html deleted file mode 100644 index 53e336a..0000000 --- a/steps/Visualizer_quick_start_Guide.html +++ /dev/null @@ -1,233 +0,0 @@ - - - - - - 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
    • -
-
-
- -
- - -