diff --git a/steps/code-base-overview.html b/steps/code-base-overview.html new file mode 100644 index 0000000..830aeec --- /dev/null +++ b/steps/code-base-overview.html @@ -0,0 +1,1697 @@ + + + + + + + Codebase Overview - Radar & Video Synchronizer + + + + + + + + + + + + + +
+
+
+
+ 🛠️ +
+

Codebase Overview

+ +
+
+ + + +
+
+
+ +
+ + + + + +
+ +
+ +
+ +

Visual Navigation Map +

+ + Click a UI element to see its code + +
+ + + +
+ + + +
+ + + + + + + +
+ + + + + + + + + + + +
+ + + + + + + + + + + +
+ + + + + + + +
+ + + +
+ + + + Data Explorer & Sidebar + + + +
+ + + +
+ + + + + + + + + + + +
+ + + +
+ + + + Radar Visualization Canvas
+ + + + (p5.js Render Loop) + + + +
+ + + +
+ + + + + + + + + + + +
+ + + +
+ + + + Video Player
+ + + + (Sync Engine) + + + +
+ + + +
+ + + + Speed Graph + + + +
+ + + +
+ + + +
+ + + + + + + + + + + +
+ + + +
+ + + + Playback Controls & Timeline + + + +
+ + + +
+ + + +
+ + + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + +
+ + + + + + + + + + + + + + + +
+ + + + + + + +
+ + + + + + + + Data Pipeline & Storage + + + + + + + + (Loader/DB) + + + + + + + +
+ + + + + + + +
+ + + + + + + + + + + + + + + +
+ + + + + + + +
+ + + + + + + +
+ +
+ + + +
+ +
+ +
+ + + + +
+
+
+ 🧠 +
+

Core Architecture

+

State management and application + initialization.

+
+
+ +
+
+
+

src/main.js

+ Core +
+
+
    +
  • Entry Point: Initializes the + application sequence.
    • +
  • Orchestrator: Sets up Theme, DB, + Session Manager.
    • +
  • Glue Code: Wires independent modules + together.
    • +
+
+
Links to: state.js, dom.js, sync.js
+
+ +
+

src/state.js

+
+
    +
  • Source of Truth: Central + appState object.
    • +
  • Runtime Variables: Stores current + frame, playback status.
    • +
  • Global Settings: SNR limits, boolean + toggles.
    • +
+
+
Imported by: Almost all modules
+
+ +
+

src/constants.js

+
+
    +
  • Configuration: Immutable system + constants.
    • +
  • Parameters: VIDEO_FPS, + Radar boundaries.
    • +
  • Visuals: Canvas aspect ratios.
    • +
+
+
Used by: p5 Sketches, fileParsers.js
+
+
+
+
+ + +
+
+
+ 💾 +
+

Data Pipeline & Storage

+

Input handling, parsing, and persistent caching. +

+
+
+ +
+
+
+

src/fileLoader.js

+ Core +
+
+
    +
  • Input Handling: Detects JSON/Video + from Drag & Drop.
    • +
  • Offset Logic: Extracts timestamps for + sync offset.
    • +
  • Control: Triggers Web Worker parsing. +
    • +
+
+
Triggers: parser.worker.js
+
+ +
+

src/parser.worker.js

+
+
    +
  • Background Thread: Prevents UI + freezing.
    • +
  • Streaming: Uses + Clarinet.js for chunk parsing.
    • +
  • Messaging: Reports real-time progress. +
    • +
+
+
Dependency: vendor/clarinet.min.js
+
+ +
+

src/fileParsers.js

+
+
    +
  • Post-Processing: Refines raw JSON + data.
    • +
  • Calculations: Computes + timestampMs & global SNR.
    • +
  • Smoothing: Pre-calculates inter-frame + times.
    • +
+
+
Called by: fileLoader.js
+
+ +
+

src/db.js

+
+
    +
  • Wrapper: Abstraction for + IndexedDB.
    • +
  • Caching: Stores blobs for instant + reloads.
    • +
  • Management: Handles "load fresh" & + metadata.
    • +
+
+
Used by: session.js, main.js
+
+
+
+
+ + +
+
+
+ ⏱️ +
+

Synchronization Engine

+

Time-critical logic, playback loops, and drift + correction.

+
+
+ +
+
+
+

src/sync.js

+ Core +
+
+
    +
  • Master Clock: Uses + performance.now().
    • +
  • Loop: Custom animation loop decoupled + from video.
    • +
  • Drift Correction: Forces seek if drift + > 150ms.
    • +
  • Mapping: Finds exact radar frame for + video time.
    • +
+
+
Controls: Video Element, P5 Loop
+
+ +
+

src/utils.js

+
+
    +
  • Binary Search: O(log n) frame lookups. +
    • +
  • Regex: Extract timestamps from + filenames.
    • +
  • Formatting: Time display helpers + (MM:SS.ms).
    • +
+
+
Used by: sync.js, fileLoader.js
+
+
+
+
+ + +
+
+
+ 🎨 +
+

Visualization

+

P5.js sketches and drawing primitives.

+
+
+ +
+
+
+

src/p5/radarSketch.js +

+ Core +
+
+
    +
  • Main Canvas: Primary renderer.
    • +
  • Scene: Draws Ego, points, tracks. +
    • +
  • Scaling: World-to-Screen mapping. +
    • +
+
+
+ +
+
+

src/drawUtils.js

+ Core +
+
+
    +
  • Library: Optimized drawing + functions.
    • +
  • Decoupling: Separates logic from + render.
    • +
  • Palettes: SNR & TTC colors.
    • +
+
+
+ +
+

src/p5/zoomSketch.js

+
+
    +
  • GOD MODE: Magnified cursor view. +
    • +
  • Tracking: Follows mouse + coordinates.
    • +
  • Details: Tooltips for hovered + items.
    • +
+
+
+ +
+

src/p5/speedGraphSketch.js +

+
+
    +
  • Graphing: Bottom-right chart.
    • +
  • Plotting: Ego vs. CAN Speed.
    • +
  • Sync: Playback indicator.
    • +
+
+
+
+
+
+ + +
+
+
+ 🖥️ +
+

UI & Interaction

+

DOM manipulation and user input.

+
+
+ +
+
+
+

src/dom.js

+ Core +
+
+
    +
  • Caching: Stores DOM references.
    • +
  • Access: Efficient element lookup. +
    • +
  • Updates: Overlays & Debug.
    • +
+
+
+ +
+

src/ui.js

+
+
    +
  • Management: High-level UI + interactions.
    • +
  • Components: Sidebar, Manual, + Shortcuts.
    • +
  • Toggles: Fullscreen switching.
    • +
+
+
+ +
+

src/keyboard.js

+
+
    +
  • Listener: Intercepts keydown events. +
    • +
  • Mapping: Binds keys to functions. +
    • +
  • Controller: Hardware input layer. +
    • +
+
+
+ +
+

src/dataExplorer.js

+
+
    +
  • Inspector: Panel logic (AG Grid). +
    • +
  • Plot View: Integrates Chart.js.
    • +
+
+
+ +
+

src/session.js

+
+
    +
  • Persistence: Serializes state to + JSON.
    • +
  • Restoration: Re-hydrates from files. +
    • +
+
+
+ +
+

src/theme.js

+
+
    +
  • Theming: Dark/Light mode toggle.
    • +
  • Storage: Persists user preference. +
    • +
+
+
+
+
+
+ + + +
+ + + + + + + + + + + \ No newline at end of file