From d4e7b41f06f163a817ed193a2a44d37ef3f87777 Mon Sep 17 00:00:00 2001
From: rakadu1 <rakadu1@bajajauto.co.in>
Date: Mon, 8 Sep 2025 17:32:18 +0530
Subject: [PATCH] Working before the comparison button.

---
 steps/index.html            |  6 +--
 steps/src/drawUtils.js      | 95 ++++++++++++++++++++++++++++---------
 steps/src/main.js           |  2 -
 steps/src/p5/radarSketch.js |  2 +-
 4 files changed, 76 insertions(+), 29 deletions(-)

diff --git a/steps/index.html b/steps/index.html
index 9f51f66..88edef1 100644
--- a/steps/index.html
+++ b/steps/index.html
@@ -220,7 +220,7 @@
         <div id="radar-info-overlay"
           class="absolute top-1 left-2 z-10 bg-black bg-opacity-60 text-white font-mono text-xs p-2 rounded-md hidden">
         </div>
-        <div class="absolute bottom-2 left-1/2 -translate-x-1/2 flex items-center justify-center gap-4">
+        <div class="absolute bottom left-1/2 -translate-x-1/2 flex items-center justify-center gap-4">
           <div id="ego-speed-display"
             class="bg-black bg-opacity-60 text-white text-sm px-3 py-1.5 rounded-md hidden font-mono"></div>
           <div id="can-speed-display"
@@ -266,10 +266,10 @@
           class="bg-red-600 text-white px-4 py-2 rounded-lg hover:bg-red-700 transition-colors text-sm font-medium">Clear
           Cache</button>
         <button id="save-session-btn"
-          class="bg-purple-600 text-white px-4 py-2 rounded-lg hover:bg-purple-700 transition-colors text-sm font-medium">Save
+          class=" hidden bg-purple-600 text-white px-4 py-2 rounded-lg hover:bg-purple-700 transition-colors text-sm font-medium">Save
           Session</button>
         <button id="load-session-btn"
-          class="bg-teal-600 text-white px-4 py-2 rounded-lg hover:bg-teal-700 transition-colors text-sm font-medium">Load
+          class=" hidden bg-teal-600 text-white px-4 py-2 rounded-lg hover:bg-teal-700 transition-colors text-sm font-medium">Load
           Session</button>
         <div class="flex items-center gap-2">
           <label for="offset-input" class="text-sm font-medium">Offset (ms):<br /><small>(+ve if radar
diff --git a/steps/src/drawUtils.js b/steps/src/drawUtils.js
index 1f303de..2919e56 100644
--- a/steps/src/drawUtils.js
+++ b/steps/src/drawUtils.js
@@ -20,7 +20,7 @@ export const snrColors = (p) => ({
   c1: p.color(0, 0, 255), // Blue
   c2: p.color(0, 255, 255), // Cyan
   c3: p.color(0, 255, 0), // Green
-  c4: p.color(186,142,35), // Dark Yellow
+  c4: p.color(186, 142, 35), // Dark Yellow
   c5: p.color(255, 0, 0), // Red
 });
 
@@ -283,24 +283,30 @@ export function drawTrajectories(p, plotScales) {
       continue;
 
     const isCurrentlyStationary = lastLog.isStationary;
-    
+
     // ... (trajectory point calculation logic remains the same)
-    let maxLen = isCurrentlyStationary ? Math.floor(MAX_TRAJECTORY_LENGTH / 4) : MAX_TRAJECTORY_LENGTH;
-    let trajPts = logs.filter((log) => log.correctedPosition && log.correctedPosition[0] !== null).map((log) => log.correctedPosition);
+    let maxLen = isCurrentlyStationary
+      ? Math.floor(MAX_TRAJECTORY_LENGTH / 4)
+      : MAX_TRAJECTORY_LENGTH;
+    let trajPts = logs
+      .filter(
+        (log) => log.correctedPosition && log.correctedPosition[0] !== null
+      )
+      .map((log) => log.correctedPosition);
     if (trajPts.length > maxLen) {
       trajPts = trajPts.slice(trajPts.length - maxLen);
     }
-    
+
     p.push();
     p.noFill();
-    
+
     if (isCurrentlyStationary) {
       // Stationary tracks are always green and dashed
       p.stroke(34, 139, 34, 220);
       p.strokeWeight(1);
       p.drawingContext.setLineDash([3, 3]);
       for (let i = 1; i < trajPts.length; i++) {
-         // ... (draw fading stationary trajectory logic)
+        // ... (draw fading stationary trajectory logic)
       }
     } else {
       // --- START: New Dynamic Coloring Logic ---
@@ -311,28 +317,40 @@ export function drawTrajectories(p, plotScales) {
         const ttc = lastLog.ttc;
         const scheme = appState.customTtcScheme;
         if (ttc === null || isNaN(ttc) || ttc < 0) {
-            trajectoryColor = p.color(localTtcColors.default); // Gray for unknown
+          trajectoryColor = p.color(localTtcColors.default); // Gray for unknown
         } else if (ttc <= scheme.critical.time) {
-            trajectoryColor = p.color(scheme.critical.color);
+          trajectoryColor = p.color(scheme.critical.color);
         } else if (ttc <= scheme.high.time) {
-            trajectoryColor = p.color(scheme.high.color);
+          trajectoryColor = p.color(scheme.high.color);
         } else if (ttc <= scheme.medium.time) {
-            trajectoryColor = p.color(scheme.medium.color);
+          trajectoryColor = p.color(scheme.medium.color);
         } else {
-            trajectoryColor = p.color(scheme.low.color); // Use custom color for low risk
+          trajectoryColor = p.color(scheme.low.color); // Use custom color for low risk
         }
       } else {
         // MODE 2: DEFAULT TTC SCHEME (Use pre-calculated category from JSON)
         switch (lastLog.ttcCategory) {
-            case 3: trajectoryColor = p.color(localTtcColors.critical); break;
-            case 2: trajectoryColor = p.color(localTtcColors.high); break;
-            case 1: trajectoryColor = p.color(localTtcColors.medium); break;
-            case 0: trajectoryColor = p.color(localTtcColors.low); break;
-            case -1: trajectoryColor = p.color(localTtcColors.away); break;
-            default: trajectoryColor = p.color(localTtcColors.default); break;
+          case 3:
+            trajectoryColor = p.color(localTtcColors.critical);
+            break;
+          case 2:
+            trajectoryColor = p.color(localTtcColors.high);
+            break;
+          case 1:
+            trajectoryColor = p.color(localTtcColors.medium);
+            break;
+          case 0:
+            trajectoryColor = p.color(localTtcColors.low);
+            break;
+          case -1:
+            trajectoryColor = p.color(localTtcColors.away);
+            break;
+          default:
+            trajectoryColor = p.color(localTtcColors.default);
+            break;
         }
       }
-      
+
       p.strokeWeight(1.5);
       p.drawingContext.setLineDash([]);
 
@@ -341,17 +359,19 @@ export function drawTrajectories(p, plotScales) {
         const alpha = p.map(i, 0, trajPts.length, 50, 255);
         trajectoryColor.setAlpha(alpha);
         p.stroke(trajectoryColor);
-        
+
         const prevPt = trajPts[i - 1];
         const currPt = trajPts[i];
         p.line(
-            prevPt[0] * plotScales.plotScaleX, prevPt[1] * plotScales.plotScaleY,
-            currPt[0] * plotScales.plotScaleX, currPt[1] * plotScales.plotScaleY
+          prevPt[0] * plotScales.plotScaleX,
+          prevPt[1] * plotScales.plotScaleY,
+          currPt[0] * plotScales.plotScaleX,
+          currPt[1] * plotScales.plotScaleY
         );
       }
       // --- END: New Dynamic Coloring Logic ---
     }
-    
+
     p.drawingContext.setLineDash([]);
     p.pop();
   }
@@ -629,3 +649,32 @@ export function drawCovarianceEllipse(
   );
   p.pop();
 }
+
+// In src/drawUtils.js
+
+/**
+ * Draws a simple representation of the ego vehicle at the origin (0,0).
+ * @param {p5.Graphics} b - The p5.Graphics buffer to draw on.
+ */
+function drawEgoVehicle(p, b) {
+  // Determine car color based on the current theme for better visibility.
+  const isDark = document.documentElement.classList.contains("dark");
+  const carColor = isDark ? p.color(200, 200, 220) : p.color(100, 100, 110);
+  
+  b.push(); // Start a new drawing state
+
+  // Set drawing properties for the car body
+  b.fill(carColor);
+  b.noStroke();
+  b.rectMode(p.CENTER); // Draw rectangles from their center point
+
+  // The car's dimensions in meters (width x length)
+  const carWidthMeters = 2;
+  const carLengthMeters = 4.5;
+  
+  // These dimensions are in "radar space", not pixels.
+  // The buffer's existing scaling will handle the conversion automatically.
+  b.rect(0, 0, carWidthMeters, carLengthMeters, 0.5); // Main body with rounded corners
+
+  b.pop(); // Restore original drawing state
+}
\ No newline at end of file
diff --git a/steps/src/main.js b/steps/src/main.js
index 8e47ee8..d7a10a4 100644
--- a/steps/src/main.js
+++ b/steps/src/main.js
@@ -704,7 +704,6 @@ colorToggles.forEach((t) => {
     }
     if (appState.p5_instance) appState.p5_instance.redraw();
     updatePersistentOverlays(videoPlayer.currentTime);
-
   });
 });
 
@@ -896,7 +895,6 @@ document.addEventListener("DOMContentLoaded", () => {
 
   initDB(async () => {
     console.log("DEBUG: Database initialized.");
-
     // --- START: Restore Session and UI State from localStorage ---
     const savedOffset = localStorage.getItem("visualizerOffset");
     if (savedOffset !== null) {
diff --git a/steps/src/p5/radarSketch.js b/steps/src/p5/radarSketch.js
index 979d792..22a62bd 100644
--- a/steps/src/p5/radarSketch.js
+++ b/steps/src/p5/radarSketch.js
@@ -22,7 +22,7 @@ import {
   drawTrackMarkers,
   snrColors,
   handleCloseUpDisplay,
-  drawCovarianceEllipse, // BUG FIX 1: Import the close-up handler
+  drawCovarianceEllipse,
 } from "../drawUtils.js";
 
 export const radarSketch = function (p) {