rakadu1
/
visualizer
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Context.md as on 29/10/2025.

refactor/modularize
RUSHIL AMBARISH KADU 7 months ago
parent
7407a9bf57
commit
f537d4b2f9
2 changed files with 263 additions and 132 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 132
      steps/context.md
  2. 251
      steps/readme.md

132
steps/context.md
View File

@ -1,110 +1,84 @@
Context Document: Radar and Video Synchronizer Application
1. High-Level Overview
This document provides a detailed technical overview of the Radar and Video Synchronizer web application. Its purpose is to give an AI assistant a comprehensive understanding of the codebase to facilitate efficient and accurate development assistance.
Core Purpose: The application is a high-precision, browser-based tool for visualizing and synchronizing radar sensor data (from a JSON file) with a corresponding video file. It allows for detailed analysis of object tracks, point clouds, and vehicle dynamics.
### 1. High-Level Overview
Core Technologies:
**Core Purpose**: A high-precision, browser-based tool for visualizing and synchronizing radar sensor data (JSON) with a corresponding video file. It allows for detailed analysis of object tracks, point clouds, and vehicle dynamics.
Frontend: HTML5, Tailwind CSS
**Core Technologies**:
- **Frontend**: HTML5, Tailwind CSS
- **Logic**: Modular JavaScript (ES6 Modules)
- **Visualization**: `p5.js` for the main radar plot, a zoomed-in "god mode" view, and a time-series speed graph.
- **Data Handling**:
- **Web Workers** (`parser.worker.js`) with the `Clarinet.js` streaming library to parse large JSON files off the main thread, preventing UI freezes.
- `Oboe.js` is also loaded but the primary implementation uses the worker.
- **Data Exploration**: `AG-Grid` for tabular data view and `Chart.js` for plotting data from the grid.
- **Persistence**: `IndexedDB` for caching large files (JSON, Video) and `localStorage` for user settings (UI state, theme, file references).
Logic: Modular JavaScript (ES6 Modules)
### 2. Project Architecture & File Structure
Visualization: p5.js library for rendering the radar plot and speed graph.
The application uses a modular ES6 structure. All source code resides in the `/src` directory.
Data Handling: Web Workers and the Oboe.js library for non-blocking parsing of large JSON files.
- **`index.html`**: The main HTML shell. Defines the DOM structure, including the main layout, collapsible sidebar, data explorer panel, and modal dialogs. It loads all necessary CDN libraries and the main JS module.
Persistence: IndexedDB for caching session files (JSON, Video) and localStorage for user settings (UI layout, theme, etc.).
- **`/src/main.js`**: **The Orchestrator**. This is the application's entry point. It initializes all modules, wires up all event listeners (clicks, drag-drop, keydown), and manages the file loading pipeline and application lifecycle.
Key Features:
- **`/src/state.js`**: **The Single Source of Truth**. Exports a single global `appState` object that holds all dynamic data (e.g., `vizData`, `isPlaying`, `currentFrame`). All modules import from this file.
Synchronized playback of video and radar data.
- **`/src/dom.js`**: **The UI Abstraction Layer**. Exports constants for every key DOM element and contains functions that directly manipulate the DOM, such as `updateFrame()`, `resetUIForNewLoad()`, and `updatePersistentOverlays()`.
Resizable two-panel layout (Radar and Video).
- **`/src/sync.js`**: **The Heartbeat/Clock**. Contains the `animationLoop()` function. It uses `performance.now()` to create a high-precision clock, calculates the current media time, finds the corresponding radar frame, and handles resynchronization with the video element.
Collapsible sidebar for display settings.
- **`/src/fileParsers.js`**: **The Data Processor**. Contains `parseVisualizationJson()`, which takes the raw parsed JSON object and enriches it with calculated `timestampMs` values relative to the video start time and determines global SNR ranges.
Dynamic coloring of radar points (by SNR, Cluster, etc.).
- **`/src/parser.worker.js`**: **The Heavy Lifter**. A Web Worker that uses `Clarinet.js` to stream-parse the JSON file, preventing the main thread from freezing. It posts progress updates and the final parsed object back to `main.js`.
Visualization of tracked object trajectories, speed, and Time-to-Collision (TTC).
- **`/src/db.js`**: **The Caching Layer**. Manages all interactions with `IndexedDB` to save and load file blobs and their metadata, enabling fast session reloads.
A speed graph showing ego-velocity and CAN bus speed over time.
- **`/src/dataExplorer.js`**: **The Inspector**. Manages the "Data Explorer" panel. It uses AG-Grid to display data in a table and Chart.js to plot selected columns.
Robust keyboard shortcuts for power users.
- **`/src/p5/radarSketch.js`**: The p5.js sketch for the main radar visualization (point cloud, tracks, axes, ego vehicle).
Session management (Save/Load settings and file references).
- **`/src/p5/speedGraphSketch.js`**: The p5.js sketch for the time-series speed graph.
2. Project Architecture & File Structure
The application follows a modern modular JavaScript architecture. Logic is separated into distinct files, each with a single responsibility. All source code is in the /src/ directory.
- **`/src/p5/zoomSketch.js`**: The p5.js sketch for the "GOD MODE" magnified view that follows the mouse.
index.html: The main HTML file. It's a shell that contains the DOM structure and loads the main JavaScript module (/src/main.js).
- **`/src/drawUtils.js`**: **The Artist's Toolkit**. Contains pure drawing functions called by the p5 sketches (e.g., `drawPointCloud`, `drawTrajectories`). This is where the visual appearance of radar objects is defined.
/src/
- **`/src/utils.js`**: A collection of pure, reusable helper functions (e.g., `findRadarFrameIndexForTime` (binary search), timestamp parsers, `throttle`).
main.js: The Orchestrator. This is the application's entry point. It initializes all other modules, wires up all event listeners (clicks, keydown, etc.), and manages the overall application lifecycle on DOMContentLoaded.
- **`/src/modal.js`**: Manages the logic for pop-up modal dialogs, including notifications, confirmations, and loading progress bars.
state.js: The Single Source of Truth. Exports a single global appState object that holds all dynamic data (e.g., vizData, isPlaying, currentFrame). All modules import and reference this object to get the current state.
- **`/src/theme.js`**: Handles the dark/light mode theme switching.
dom.js: The UI Abstraction Layer. Exports constants for every key DOM element (videoPlayer, playPauseBtn, etc.). It also contains functions that directly manipulate the DOM, such as updateFrame() and updatePersistentOverlays(). For any changes to UI text or visibility, this is the primary file to inspect.
- **`/src/constants.js`**: Stores shared, static values like `VIDEO_FPS` and radar plot boundaries.
sync.js: The Heartbeat/Clock. Contains the animationLoop() function, which is the core of the synchronized playback. It uses performance.now() to create a high-precision clock, calculates the current media time, finds the corresponding radar frame, and handles resynchronization.
### 3. Data Flow & State Management
fileParsers.js: The Data Processor. Contains the logic for post-processing the raw data from files. parseVisualizationJson() takes the parsed JSON object and enriches it with calculated timestampMs values and determines global SNR ranges.
**File Loading Pipeline (`main.js`):**
1. **User Action**: User drops files or uses "Load" buttons. The `handleFiles()` function is triggered.
2. **UI Reset**: `resetUIForNewLoad()` is called to clear the previous state.
3. **Pipeline Start**: `processFilePipeline()` begins. A loading modal is shown.
4. **JSON Parsing**: If a JSON file exists, it's sent to `parser.worker.js`. The worker streams the file, posts progress updates, and finally returns the complete parsed object.
5. **JSON Processing**: The parsed object is processed by `parseVisualizationJson()` to calculate relative timestamps and SNR ranges. The result is stored in `appState.vizData`.
6. **Video Loading (Two-Stage)**:
- **Stage A (Metadata)**: An event listener waits for `loadedmetadata`. When this fires, the video's `duration` is known. The `finalizeSetup()` function is called, which creates the p5 sketches and sets up the speed graph.
- **Stage B (Buffering)**: A separate listener waits for `canplaythrough`. When this fires, it signals that the video is ready for smooth playback, and the loading modal is hidden.
7. **Finalization**: `finalizeSetup()` creates the p5 instances and `resetVisualization()` is called to display the first frame.
parser.worker.js: The Heavy Lifter. This Web Worker is responsible for parsing the potentially massive JSON file off the main thread to prevent the UI from freezing. It uses the Clarinet.js streaming parser for efficiency.
**State Management (`appState`):**
The `appState` object in `state.js` is the central hub. Key properties include:
- `vizData`: The large object containing all radar frames and track data.
- `isPlaying`: A boolean that controls the `animationLoop`.
- `currentFrame`: The integer index of the currently displayed radar frame.
- `videoStartDate`, `radarStartTimeMs`: Date objects used to calculate the time offset.
- `p5_instance`, `speedGraphInstance`, `zoomSketchInstance`: References to the active p5.js sketches.
db.js: The Caching Layer. Manages all interactions with IndexedDB. It's used to save and load the JSON and video files so that subsequent sessions load almost instantly.
### 4. Key Logic and Interaction Flows
/p5/radarSketch.js: The p5.js sketch responsible for drawing the main radar visualization (point cloud, tracks, axes).
**Playback Synchronization (`sync.js`)**: The `animationLoop` is the core. It uses `performance.now()` to create a high-resolution timer independent of the video's `timeupdate` event. It calculates what the video's `currentTime` *should* be, finds the corresponding radar frame using a binary search (`findRadarFrameIndexForTime` in `utils.js`), and periodically corrects the video's `currentTime` if it drifts.
/p5/speedGraphSketch.js: The p5.js sketch for drawing the time-series speed graph.
**UI Updates (`dom.js`)**: The `updateFrame(frame, forceVideoSeek)` function is the primary entry point for changing what's on screen. It updates the frame counter, seeks the video if `forceVideoSeek` is true, and calls the `.redraw()` methods on the p5 sketches. It's called by both the `animationLoop` (for smooth playback) and by UI event listeners like the timeline slider (for seeking).
drawUtils.js: The Artist's Toolkit. Contains pure drawing functions that are called by radarSketch.js. This is where the visual appearance (colors, shapes, lines, text) of the radar objects is defined. To change how tracks or points are drawn, modify this file.
**Session Persistence (`main.js` & `db.js`)**: On `DOMContentLoaded`, the app checks `localStorage` for saved filenames. It then calls `loadFreshFileFromDB()` to attempt to load the corresponding blobs from `IndexedDB`. If successful, `handleFiles()` is called with the cached blobs, bypassing the need for user file selection.
utils.js: A collection of pure, reusable helper functions (e.g., findRadarFrameIndexForTime (binary search), timestamp parsers, throttle).
modal.js: Manages the logic for the pop-up modal dialogs (e.g., for notifications, confirmations, and progress bars).
theme.js: Handles the dark/light mode theme switching and persists the choice to localStorage.
constants.js: Stores shared, static values like VIDEO_FPS and radar plot boundaries.
3. Data Flow & State Management
Data Loading Sequence:
User Action: The user clicks a "Load" button in the UI (index.html).
Event Trigger: The click is handled by an event listener in main.js.
File Selection: The browser's file input is opened.
Caching: Upon file selection, the change event fires. In main.js, the file is immediately sent to db.js to be saved in IndexedDB via saveFileWithMetadata().
Parsing (JSON): The JSON file is passed to the parser.worker.js. The worker streams the file, constructs a complete JavaScript object, and sends it back to main.js.
Processing: main.js receives the parsed object and passes it to fileParsers.js's parseVisualizationJson() function. This function calculates the relative timestamps and other necessary metadata.
State Update: The processed data is stored in the central appState.vizData object in state.js.
UI Update: main.js calls functions in dom.js and creates new p5.js instances (radarSketch, speedGraphSketch) to render the data now available in appState.
State Management (appState):
The appState object in state.js is the central hub. All modules import it and read from it. It is mutated directly by the core logic in main.js and sync.js. Key properties include:
vizData: The large object containing all radar frames and track data.
isPlaying: A boolean that controls the animationLoop.
currentFrame: The integer index of the currently displayed radar frame.
videoStartDate, radarStartTimeMs: Date objects used to calculate the time offset.
p5_instance, speedGraphInstance: References to the active p5.js sketches.
4. Key Logic and Interaction Flows
Playback Synchronization (sync.js): The animationLoop is the core. It does not rely on the video's timeupdate event, which can be imprecise. Instead, it creates its own high-resolution timer with performance.now(). It calculates what the video's currentTime should be and then finds the corresponding radar frame using a binary search (findRadarFrameIndexForTime in utils.js). It periodically checks for drift between its calculated time and the actual video.currentTime and corrects the video if necessary.
UI Updates (dom.js): The updateFrame(frame, forceVideoSeek) function is the primary entry point for changing what's on screen. It updates the frame counter, seeks the video if forceVideoSeek is true, and calls the .redraw() methods on the p5 sketches. It is called both by the animationLoop (for smooth playback) and by UI event listeners like the timeline slider (for seeking).
Session Persistence (main.js & db.js): On DOMContentLoaded, the application first checks localStorage for saved filenames and UI settings. It then calls loadFreshFileFromDB from db.js, which attempts to load the files from IndexedDB. If successful, the application loads the cached data, bypassing the need for the user to re-select the files.
Keyboard Shortcuts (main.js): A single, comprehensive keydown event listener is attached to the document. It checks for various keys and programmatically triggers .click() events on the corresponding DOM elements (e.g., pressing Spacebar clicks the playPauseBtn). It includes a check to prevent shortcuts from firing when the user is typing in an input field.
**Keyboard Shortcuts (`main.js`)**: A single `keydown` event listener on the document handles all shortcuts. It programmatically triggers `.click()` events on the corresponding DOM elements (e.g., Spacebar clicks `playPauseBtn`). It includes a check to prevent shortcuts from firing when the user is typing in an input field.

251
steps/readme.md
View File

@ -1,73 +1,230 @@
Radar and Video Timestamp VisualizerThis is a high-precision, browser-based tool for visualizing radar point cloud data, object tracks, and CAN bus speed data, synchronized with a corresponding video file. The application was refactored from a single monolithic HTML file into a modern, modular JavaScript application for improved maintainability, performance, and future extensibility.
Radar and Video Synchronizer (Refactored)
Features:
Version: Based on commit f426eee3 (Inferred)
\*Synchronized Playback: Simultaneously plays a video file and visualizes radar data frames based on precise timestamps.
Overview
\*Multi-File Support: Load and visualize data from three distinct sources:
-JSON: Contains radar point clouds and tracked object data.
-Video: The ground-truth video corresponding to the radar data.
-CAN Log: A text log file containing vehicle speed data over time.
This is a high-precision, browser-based tool for visualizing radar point cloud data, object tracks, and CAN bus speed data, synchronized with a corresponding video file. Originally a monolithic HTML application (V14_inliner_Stationary.html), it has been refactored into a modern, modular JavaScript application using ES6 Modules. This structure enhances maintainability, performance (especially with large datasets), and extensibility.
*Interactive Visualization:
-Displays radar point clouds and object trajectories on a 2D plane.
-Overlays object details like ID, speed (km/h), and Time-to-Collision (TTC).
-Visualizes vehicle speed from both CAN logs and radar ego-velocity on a time-series graph.
*Dynamic Filtering & Coloring:
-Colorize radar points based on Signal-to-Noise Ratio (SNR), cluster ID, or inlier/outlier status.
-Distinguish between stationary and moving objects with unique colors and markers.
-Adjustable SNR range for fine-tuning the visualization.
The application leverages p5.js for rendering visualizations, a Web Worker with the Clarinet.js streaming parser for efficient background JSON processing, IndexedDB for persistent file caching, Tailwind CSS for styling, and introduces a Data Explorer panel using AG Grid and Chart.js for in-depth data inspection.
\*Playback Controls: Full control over the playback, including play, pause, stop, frame-by-frame stepping (using arrow keys), and a draggable timeline slider.
Core Features Detailed
\*Data Caching: Uses IndexedDB to cache loaded files, allowing for instant reloading of the last session.
Synchronized Playback (sync.js):
\*Dark/Light Theme: A theme toggle for user comfort that persists across sessions.
Utilizes performance.now() for a high-resolution master clock, independent of potentially imprecise video events.
How to Run Locally:-
Calculates the target media time based on playback speed (speedSlider.value) and elapsed real time.
Because this project uses ES Modules (import/export), you cannot simply open the index.html file directly in your browser from the file system (file:///...).
You must serve the files using a local web server.The easiest way to do this is with Python or Node.js.
Maps the target media time (adjusted by the user-defined offsetInput.value) to the corresponding radar frame timestamp (timestampMs).
1.) Navigate to the Project Directory: Open your terminal or command prompt and change to the root directory of this project (the one containing index.html).
Uses a binary search (utils.js::findRadarFrameIndexForTime) to efficiently find the correct radar frame index for the calculated timestamp.
2.) Start a Local Server:Using Python:
Periodically checks for drift (>150ms) between the master clock's calculated time and videoPlayer.currentTime, forcing a video seek if needed to maintain sync.
--# For Python 3.x
" python -m http.server "
Unified File Loading (main.js):
--# Using Node.js (with serve):
If you don't have serve, install it first:
" npm install -g serve.serve ".
Handles loading JSON (radar data) and Video files through both button clicks (loadJsonBtn, loadVideoBtn) and drag-and-drop onto the main content area (<main>).
3.) Open in Browser: Open your web browser and navigate to the URL provided by the server (usually http://localhost:8000 or http://localhost:3000). # Navigate to the server URL
The handleFiles function identifies file types (.json, video/*) and triggers the processFilePipeline.
Project StructureThe project has been refactored into a modular structure to separate concerns. All JavaScript source code resides in the src/ directory..
Note: Dedicated CAN log loading (loadCanBtn, canFileInput) has been removed. CAN speed data (canVehSpeed_kmph) is now expected within the JSON structure, associated with each radarFrame.
Efficient JSON Parsing (parser.worker.js, main.js, fileParsers.js):
The processFilePipeline function initiates a Web Worker (parser.worker.js).
├── index.html # The main HTML shell for the application
├── README.md # This documentation file
└── src/
├── constants.js # Shared constants (e.g., radar bounds, FPS)
The worker receives the JSON File object.
It uses the File.stream() API and TextDecoder to read the file chunk by chunk.
Clarinet.js (clarinet.min.js via CDN import in worker) parses the incoming JSON stream event-by-event (onopenobject, onkey, onvalue, etc.), reconstructing the full JavaScript object in memory off the main thread.
Progress updates (percent) are sent back to the main thread via postMessage.
On completion, the fully parsed object (data) is sent back.
The main thread receives the parsed data and passes it to fileParsers.js::parseVisualizationJson for post-processing (calculating relative timestampMs, determining global SNR range).
Interactive Visualization (p5/, drawUtils.js):
radarSketch.js: The primary p5 sketch.
Manages the main canvas within #canvas-container.
Calculates plot scales (plotScaleX, plotScaleY) based on canvas size and constants.js boundaries.
Draws axes, ego vehicle representation (drawUtils.js::drawEgoVehicle).
Draws dynamic elements: point clouds (drawUtils.js::drawPointCloud), tracks (drawUtils.js::drawTrajectories), track markers (drawUtils.js::drawTrackMarkers), predicted positions (now drawn for the current frame currentFrame, not currentFrame + 1), covariance ellipses (drawUtils.js::drawCovarianceEllipse), cluster centroids (drawUtils.js::drawClusterCentroids), and regions of interest (drawUtils.js::drawRegionsOfInterest).
Handles hover interactions for the Zoom Mode ("GOD MODE") tooltip via drawUtils.js::handleCloseUpDisplay.
Draws legends (SNR, Track TTC).
speedGraphSketch.js: The secondary p5 sketch for the speed graph.
Manages the canvas within #speed-graph-container.
Draws time-series lines for Ego Speed (frame.egoVelocity[1] * 3.6) and CAN Speed (frame.canVehSpeed_kmph) from the JSON vizData.
Draws axes and legends.
Draws a vertical red line indicator synchronized with the current frame's timestamp (frameData.timestampMs).
zoomSketch.js: p5 sketch for the magnified "GOD MODE" view.
Manages a separate canvas within #zoom-canvas-container.
Receives mouse coordinates and hovered items from radarSketch.js.
Redraws a scaled and translated portion of the main scene, providing a high-fidelity zoom.
Includes detailed tooltip drawing logic (drawZoomTooltip) showing extensive info for points, clusters, tracks (with speed), and predictions (with velocity).
Handles mouse wheel events for adjusting appState.zoomFactor.
drawUtils.js: Contains numerous helper functions responsible for the actual drawing logic (shapes, lines, colors, text) used by radarSketch.js and zoomSketch.js. Defines color palettes (snrColors, ttcColors, clusterColors). Refined tooltip data generation in handleCloseUpDisplay.
Data Explorer (dataExplorer.js, main.js, index.html):
A dedicated panel (#data-explorer-panel) for inspecting raw data of the current frame (appState.currentFrame).
Activated by pressing the <kbd>I</kbd> key or clicking on the main radar canvas (#canvas-container).
Features three views selectable via tabs:
Tree View (#tab-panel-tree): Displays the current frame's data structure as a formatted JSON string.
Grid View (#tab-panel-grid): Uses AG Grid (ag-grid-community.min.js) to display array data (e.g., pointCloud) in a sortable, filterable table. Populated via displayInGrid(data, title).
Plot View (#tab-panel-plot): Uses Chart.js (chart.js CDN) to generate a line plot of the numeric data from a column selected in the Grid View (by clicking the column header).
Allows users to directly examine the underlying numerical values being visualized.
Dynamic Filtering & Coloring (dom.js, drawUtils.js, state.js):
Checkboxes in the sidebar (#collapsible-menu) control boolean flags in appState (via main.js event listeners).
drawUtils.js functions read these flags (toggleSnrColor.checked, toggleConfirmedOnly.checked, etc.) to determine:
Which color palette/logic to apply to points and tracks.
Whether to show certain elements (tracks, velocity vectors, predicted positions, covariance).
SNR range inputs (snrMinInput, snrMaxInput) update appState.globalMinSnr/MaxSnr for color scaling.
TTC coloring mode (ttcModeDefault, ttcModeCustom) and custom inputs (ttcColorCritical, ttcTimeCritical, etc.) update appState.useCustomTtcScheme and appState.customTtcScheme respectively (dom.js event listeners). drawUtils.js::drawTrajectories uses this state to color tracks.
Playback Controls & Navigation (main.js, dom.js):
Standard buttons (playPauseBtn, stopBtn) modify appState.isPlaying and call videoPlayer.play/pause/currentTime.
timelineSlider input event updates appState.currentFrame and calls dom.js::updateFrame(frame, true) (forcing video seek). Throttled for performance during drag, debounced for final sync on release.
timelineSlider wheel event calculates scroll speed and dynamically seeks frames, also debounced for final sync (main.js).
timelineSlider mousemove event calculates hover position to display frame/time in #timeline-tooltip (main.js).
speedSlider updates videoPlayer.playbackRate (main.js).
UI Enhancements (main.js, theme.js, dom.js, index.html):
Sidebar (#collapsible-menu) visibility toggled by toggleMenuBtn, closeMenuBtn, and clicks on the #menu-scrim overlay (main.js::toggleMenu).
Fullscreen toggled via fullscreenBtn and monitored using the fullscreenchange event (main.js).
Persistent overlays (#radar-info-overlay, #video-info-overlay) updated by dom.js::updatePersistentOverlays with frame index, absolute time, color mode, and sync drift.
Dark/Light theme managed by theme.js::setTheme, saving preference to localStorage, and triggering redraws in p5 sketches.
Session Management (main.js, db.js):
Files are cached in IndexedDB using db.js::saveFileWithMetadata upon loading. Metadata (filename, size) is stored alongside the blob.
On DOMContentLoaded, main.js retrieves expected filenames from localStorage and attempts to load corresponding blobs using db.js::loadFreshFileFromDB. This function verifies filename and size match before returning the blob, ensuring cache validity.
saveSessionBtn gathers current state (appState filenames, offsetInput.value, toggle states) into a JSON object and triggers a browser download (main.js).
loadSessionBtn reads a chosen session JSON file. It verifies that the files mentioned in the session currently exist and are valid in IndexedDB using loadFreshFileFromDB before applying settings to localStorage and reloading the page (main.js).
Keyboard Shortcuts (main.js):
A comprehensive keydown listener intercepts keys (Space, Arrows, 1-4, S, T, D, G, P, A, M, Q, R, C, I).
It programmatically triggers .click() events on corresponding buttons or directly updates appState/calls functions (like showExplorer/hideExplorer).
Includes a check to prevent shortcuts firing when focus is on text/number inputs (offsetInput, snrMinInput, etc.).
How to Run Locally
(Instructions remain the same - requires Python 3 and running python -m http.server 8000 or the provided .bat script in the steps directory).
Check Python Installation: Run python_check.bat or python --version. Need Python 3.x in PATH.
Navigate to Project Directory: cd to the steps directory containing index.html.
Start Local Server: Run Visualization_Start.bat or python -m http.server 8000. Keep terminal open.
Open in Browser: Navigate to http://localhost:8000.
Project Structure
├── index.html # Main HTML shell
├── README.md # This documentation
├── Visualization_Start.bat # Script to start the local server
├── python_check.bat # Script to check Python installation
├── Visualizer_quick_start_Guide.html # Separate HTML quick start guide
├── favicon.png # Browser tab icon
└── src/
├── constants.js # Shared constants (radar bounds, FPS)
├── dataExplorer.js # NEW: Logic for the Data Explorer panel
├── db.js # IndexedDB logic for caching files
├── dom.js # DOM element references and UI update functions
├── drawUtils.js # p5.js drawing helper functions for the radar sketch
├── fileParsers.js # Logic for parsing JSON and CAN log files
├── main.js # The main application entry point and event wiring
├── modal.js # Logic for the pop-up modal dialog
├── state.js # Centralized application state management
├── sync.js # The core animation loop and playback synchronization logic
├── drawUtils.js # p5.js drawing helpers (points, tracks, axes, legends)
├── fileParsers.js # Post-processing logic for parsed JSON
├── main.js # Main application entry point, event wiring, initialization
├── modal.js # Logic for pop-up modal dialogs & progress bar
├── parser.worker.js # Web Worker for background JSON parsing (uses Clarinet.js)
├── state.js # Centralized application state management object (appState)
├── sync.js # Core animation loop and playback synchronization logic
├── theme.js # Dark/Light mode theme switching logic
├── utils.js # General utility functions (e.g., binary search, throttling)
├── utils.js # General utility functions (binary search, timestamp parsing, formatting)
└── p5/
├── radarSketch.js # The p5.js sketch for the main radar visualization
└── speedGraphSketch.js # The p5.js sketch for the speed graph
├── radarSketch.js # p5.js sketch for the main radar visualization
├── speedGraphSketch.js # p5.js sketch for the speed graph
└── zoomSketch.js # p5.js sketch for the magnified zoom window ("GOD MODE")
├── tests/ # Simple unit tests (optional)
│ ├── test-runner.html
│ ├── utils.test.js
│ └── fileParsers.test.js
└── context.md # Detailed technical overview for AI assistance
How to Use the Application
- Load Files: Use the "Load JSON", "Load Video", and "Load CAN Log" buttons to select your data files. The application works best when all three are loaded. The application will automatically attempt to calculate the time offset between the JSON and video files based on their filenames.
- Playback: Use the "Play/Pause" and "Stop" buttons to control the timeline. You can also click and drag the main timeline slider or use the Left and Right arrow keys to step through frames.
- Adjust Speed: Use the "Speed" slider to change the playback rate of the video and visualization.
- Use Toggles: Use the checkboxes to toggle various visualization features, such as showing object tracks, coloring points by SNR, or displaying debug information.
(Usage instructions remain largely similar, with additions for the Data Explorer)
Load Files: Use "Load JSON"/"Load Video" buttons or Drag & Drop. Offset calculated automatically from filenames (fHist_...json, WIN_...mp4).
Playback: Use UI buttons (<kbd>Space</kbd>), timeline slider (drag, hover, scroll wheel), or arrow keys (←/→).
Adjust Offset: Manually enter offset (ms, +ve if radar lags) and press Enter.
Adjust Speed: Use the "Speed" slider.
Use Sidebar (<kbd>M</kbd>): Access toggles (Color modes <kbd>1-4</kbd>/<kbd>S</kbd>, Tracks <kbd>T</kbd>, Details <kbd>D</kbd>, Zoom <kbd>G</kbd>, Predicted Pos <kbd>P</kbd>, Debug <kbd>A</kbd>, Raw Only <kbd>C</kbd>, Confirmed Only), SNR range, TTC customization.
Data Explorer (<kbd>I</kbd> / Canvas Click):
Press <kbd>I</kbd> or click the main radar canvas to open/close the panel.
View current frame data structure in the Tree View.
If applicable data is sent (e.g., pointCloud via canvas click), view it in the Grid View. Sort/filter columns.
In Grid View, click a column header, then click "Plot Selected Column" to see a line graph in the Plot View.
Session Management: Use "Save/Load Session", "Clear Cache". Load requires files in cache.
Other Shortcuts: Theme <kbd>Q</kbd>, Reset <kbd>R</kbd>.
Write Preview
Loading…
Cancel
Save