From 59893ba65b7c43978bd86b43c5dca5a0ddfa34b1 Mon Sep 17 00:00:00 2001 From: rakadu1 Date: Mon, 3 Nov 2025 17:15:22 +0530 Subject: [PATCH] Added user manual to make things clear. --- steps/User_Manual.html | 489 +++++++++++++++++++++++++++++++++++++++++ steps/index.html | 88 ++++++-- steps/src/drawUtils.js | 419 ----------------------------------- 3 files changed, 561 insertions(+), 435 deletions(-) create mode 100644 steps/User_Manual.html diff --git a/steps/User_Manual.html b/steps/User_Manual.html new file mode 100644 index 0000000..38860d1 --- /dev/null +++ b/steps/User_Manual.html @@ -0,0 +1,489 @@ + + + + + + Radar & Video Synchronizer - Infographic Manual + + + + + + + + +
+ + +
+
📡️ 🎬
+

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

This infographic was generated based on the project's readme.md and context.md files.

+
+ +
+ + + diff --git a/steps/index.html b/steps/index.html index 12b575d..69c7c4b 100644 --- a/steps/index.html +++ b/steps/index.html @@ -78,19 +78,70 @@ background: transparent; z-index: 10; } - .resizer-t { top: -5px; left: 5px; right: 5px; height: 10px; cursor: ns-resize; } - .resizer-r { top: 5px; right: -5px; bottom: 5px; width: 10px; cursor: ew-resize; } - .resizer-b { bottom: -5px; left: 5px; right: 5px; height: 10px; cursor: ns-resize; } - .resizer-l { top: 5px; left: -5px; bottom: 5px; width: 10px; cursor: ew-resize; } - .resizer-tl { top: -5px; left: -5px; cursor: nwse-resize; } - .resizer-tr { top: -5px; right: -5px; cursor: nesw-resize; } - .resizer-br { bottom: -5px; right: -5px; cursor: nwse-resize; } - .resizer-bl { bottom: -5px; left: -5px; cursor: nesw-resize; } + + .resizer-t { + top: -5px; + left: 5px; + right: 5px; + height: 10px; + cursor: ns-resize; + } + + .resizer-r { + top: 5px; + right: -5px; + bottom: 5px; + width: 10px; + cursor: ew-resize; + } + + .resizer-b { + bottom: -5px; + left: 5px; + right: 5px; + height: 10px; + cursor: ns-resize; + } + + .resizer-l { + top: 5px; + left: -5px; + bottom: 5px; + width: 10px; + cursor: ew-resize; + } + + .resizer-tl { + top: -5px; + left: -5px; + cursor: nwse-resize; + } + + .resizer-tr { + top: -5px; + right: -5px; + cursor: nesw-resize; + } + + .resizer-br { + bottom: -5px; + right: -5px; + cursor: nwse-resize; + } + + .resizer-bl { + bottom: -5px; + left: -5px; + cursor: nesw-resize; + } + /* When dragging/resizing, prevent text selection on the page */ - body.resizing, body.dragging { + body.resizing, + body.dragging { user-select: none; -webkit-user-select: none; } + /* --- END: CSS for Resizable/Draggable Panel --- */ @@ -105,7 +156,7 @@

- @@ -319,7 +374,8 @@ - +
@@ -330,7 +386,7 @@