Align Tab 2 Radar and UI with Tab 1

LaserPerception/LaserPerception.js

@@ -3346,7 +3346,7 @@
     // Start loop immediately
     requestAnimationFrame(renderFrameRadar);
 
-    // ========= Radar rendering (Tab 2) =========
+// ========= Radar rendering (Tab 2) - Aligned with Tab 1 Scale/FOV =========
     function renderRadar() {
         const ctx = radarCanvas.getContext("2d");
         const rect = radarCanvas.getBoundingClientRect();
@@ -3360,88 +3360,123 @@
         const w = radarCanvas.width, h = radarCanvas.height;
         ctx.clearRect(0, 0, w, h);
 
-        // background
-        ctx.fillStyle = "rgba(0,0,0,.35)";
+        // Background (Matches Tab 1)
+        ctx.fillStyle = "#0a0f22";
         ctx.fillRect(0, 0, w, h);
 
         const cx = w * 0.5, cy = h * 0.5;
-        const R = Math.min(w, h) * 0.42;
+        const R = Math.min(w, h) * 0.45; // Match Tab 1 Radius factor
 
-        // rings
-        ctx.strokeStyle = "rgba(255,255,255,.10)";
+        // Rings (Matches Tab 1 style)
+        ctx.strokeStyle = "rgba(34, 211, 238, 0.1)";
         ctx.lineWidth = 1;
         for (let i = 1; i <= 4; i++) {
             ctx.beginPath();
-            ctx.arc(cx, cy, R * i / 4, 0, Math.PI * 2);
+            ctx.arc(cx, cy, R * (i / 4), 0, Math.PI * 2);
             ctx.stroke();
         }
-        // cross
-        ctx.beginPath(); ctx.moveTo(cx - R, cy); ctx.lineTo(cx + R, cy); ctx.stroke();
-        ctx.beginPath(); ctx.moveTo(cx, cy - R); ctx.lineTo(cx, cy + R); ctx.stroke();
+        // Cross
+        ctx.beginPath();
+        ctx.moveTo(cx - R, cy); ctx.lineTo(cx + R, cy);
+        ctx.moveTo(cx, cy - R); ctx.lineTo(cx, cy + R);
+        ctx.stroke();
 
-        // sweep
-        const t = now() / 1000;
-        const ang = (t * 0.65) % (Math.PI * 2);
-        ctx.strokeStyle = "rgba(34,211,238,.22)";
-        ctx.lineWidth = 2;
+        // Sweep Animation
+        const t = now() / 1500; // Match Tab 1 speed (slower)
+        const ang = (t * (Math.PI * 2)) % (Math.PI * 2);
+        
+        // Gradient Sweep
+        const grad = ctx.createConicGradient(ang + Math.PI / 2, cx, cy);
+        grad.addColorStop(0, "transparent");
+        grad.addColorStop(0.1, "transparent");
+        grad.addColorStop(0.8, "rgba(34, 211, 238, 0.0)");
+        grad.addColorStop(1, "rgba(34, 211, 238, 0.15)");
+        ctx.fillStyle = grad;
+        ctx.beginPath();
+        ctx.arc(cx, cy, R, 0, Math.PI * 2);
+        ctx.fill();
+
+        // Scan Line
+        ctx.strokeStyle = "rgba(34, 211, 238, 0.6)";
+        ctx.lineWidth = 1.5;
         ctx.beginPath();
         ctx.moveTo(cx, cy);
         ctx.lineTo(cx + Math.cos(ang) * R, cy + Math.sin(ang) * R);
         ctx.stroke();
 
-        // ownship
-        ctx.fillStyle = "rgba(34,211,238,.85)";
+        // Ownship (Center)
+        ctx.fillStyle = "#22d3ee";
         ctx.beginPath();
-        ctx.arc(cx, cy, 5, 0, Math.PI * 2);
+        ctx.arc(cx, cy, 3, 0, Math.PI * 2);
         ctx.fill();
+        ctx.strokeStyle = "rgba(34, 211, 238, 0.5)";
+        ctx.lineWidth = 1;
+        ctx.beginPath();
+        ctx.arc(cx, cy, 6, 0, Math.PI * 2);
+        ctx.stroke();
 
-        // tracks as blips
+        // Render Tracks (Tab 2 Source, Tab 1 Logic)
         const tracks = state.tracker.tracks;
         tracks.forEach(tr => {
+            // Range Logic (Matches Tab 1)
             const areaRange = rangeFromArea(tr);
             const displayRange = getTrackDisplayRange(tr);
-            const relVal = getDisplayRel(tr);
-            const rr = relVal != null
-                ? clamp(0.2 + relVal * 3.0, 0.1, 3.2)
-                : clamp(areaRange / Math.max(250, +rangeBase.value), 0.1, 3.5); // relative
-            const b = tr.bbox;
-
-            // bearing from image position
-            const vw = videoEngage.videoWidth || state.frame.w;
-            const vh = videoEngage.videoHeight || state.frame.h;
-            const tx = (b.x + b.w * 0.5) / vw - 0.5;
-            const ty = (b.y + b.h * 0.5) / vh - 0.5;
-            const bearing = Math.atan2(ty, tx);
-
-            const rad = clamp(rr, 0, 3.2) * (R / 3.2);
-            const px = cx + Math.cos(bearing) * rad;
-            const py = cy + Math.sin(bearing) * rad;
+            
+            let dist = 3000;
+            if (Number.isFinite(displayRange.range)) dist = displayRange.range;
+            else dist = areaRange; // fallback
+
+            // Scale: 0 -> 1500m (Matches Tab 1)
+            const maxRangeM = 1500;
+            const rPx = (clamp(dist, 0, maxRangeM) / maxRangeM) * R;
+
+            // Bearing Logic (Matches Tab 1 FOV=60)
+            // We need normalized X center (-0.5 to 0.5)
+            // tracks store pixel coordinates on current frame scale
+            const vw = videoEngage.videoWidth || state.frame.w || 1280;
+            const bx = tr.bbox.x + tr.bbox.w * 0.5;
+            const tx = (bx / vw) - 0.5; // -0.5 (left) to 0.5 (right)
+            
+            const fovRad = (60 * Math.PI) / 180;
+            const angle = (-Math.PI / 2) + (tx * fovRad);
+
+            const px = cx + Math.cos(angle) * rPx;
+            const py = cy + Math.sin(angle) * rPx;
+
+            // Styling based on State
+            const isSelected = (state.tracker.selectedTrackId === tr.id);
+            const killed = tr.killed;
 
-            // color by engagement state
-            const col = tr.killed ? "rgba(148,163,184,.65)" :
+            const col = killed ? "rgba(148,163,184,.65)" :
                 (tr.state === "FIRE" ? "rgba(239,68,68,.9)" :
                     (tr.state === "ASSESS" ? "rgba(245,158,11,.9)" :
-                        "rgba(124,58,237,.9)"));
+                        (isSelected ? "#f59e0b" : "rgba(34, 211, 238, 0.9)"))); // Cyan default
+
+            if (isSelected) {
+                ctx.shadowBlur = 10;
+                ctx.shadowColor = col;
+            } else {
+                ctx.shadowBlur = 0;
+            }
 
             ctx.fillStyle = col;
             ctx.beginPath();
             ctx.arc(px, py, 5, 0, Math.PI * 2);
             ctx.fill();
 
-            ctx.fillStyle = tr.killed ? "rgba(148,163,184,.75)" : "rgba(255,255,255,.75)";
-            ctx.font = "11px " + getComputedStyle(document.body).fontFamily;
-            const rangeLabel = Number.isFinite(displayRange.range)
-                ? `${Math.round(displayRange.range)}m`
-                : `${Math.round(areaRange)}m`;
-            const relLabel = relVal != null ? ` · Rel=${relVal.toFixed(2)}` : "";
-            ctx.fillText(`${tr.id} · R=${rangeLabel}${relLabel}`, px + 8, py + 4);
+            // Label
+            if (!killed && (isSelected || tracks.length < 5)) {
+                ctx.fillStyle = "rgba(255,255,255,.75)";
+                ctx.font = "11px " + getComputedStyle(document.body).fontFamily;
+                ctx.fillText(tr.id, px + 8, py + 4);
+            }
         });
 
-        // label
+        // Legend
+        ctx.shadowBlur = 0;
         ctx.fillStyle = "rgba(255,255,255,.55)";
         ctx.font = "11px " + getComputedStyle(document.body).fontFamily;
-        ctx.fillText("CENTER: OWN-SHIP", 10, 18);
-        ctx.fillText("BLIPS: DEPTH RELATIVE RANGE + BEARING (area fallback)", 10, 36);
+        ctx.fillText("LIVE TRACKING: 60° FOV, 1500m SCALE", 10, 18);
     }
 
     // ========= Resizing overlays to match video viewports =========

update_radar.py

@@ -0,0 +1,189 @@
+import re
+
+file_path = 'LaserPerception/LaserPerception.js'
+
+new_code = r'''// ========= Radar rendering (Tab 2) - Aligned with Tab 1 Scale/FOV =========
+    function renderRadar() {
+        const ctx = radarCanvas.getContext("2d");
+        const rect = radarCanvas.getBoundingClientRect();
+        const dpr = devicePixelRatio || 1;
+        const targetW = Math.max(1, Math.floor(rect.width * dpr));
+        const targetH = Math.max(1, Math.floor(rect.height * dpr));
+        if (radarCanvas.width !== targetW || radarCanvas.height !== targetH) {
+            radarCanvas.width = targetW;
+            radarCanvas.height = targetH;
+        }
+        const w = radarCanvas.width, h = radarCanvas.height;
+        ctx.clearRect(0, 0, w, h);
+
+        // Background (Matches Tab 1)
+        ctx.fillStyle = "#0a0f22";
+        ctx.fillRect(0, 0, w, h);
+
+        const cx = w * 0.5, cy = h * 0.5;
+        const R = Math.min(w, h) * 0.45; // Match Tab 1 Radius factor
+
+        // Rings (Matches Tab 1 style)
+        ctx.strokeStyle = "rgba(34, 211, 238, 0.1)";
+        ctx.lineWidth = 1;
+        for (let i = 1; i <= 4; i++) {
+            ctx.beginPath();
+            ctx.arc(cx, cy, R * (i / 4), 0, Math.PI * 2);
+            ctx.stroke();
+        }
+        // Cross
+        ctx.beginPath();
+        ctx.moveTo(cx - R, cy); ctx.lineTo(cx + R, cy);
+        ctx.moveTo(cx, cy - R); ctx.lineTo(cx, cy + R);
+        ctx.stroke();
+
+        // Sweep Animation
+        const t = now() / 1500; // Match Tab 1 speed (slower)
+        const ang = (t * (Math.PI * 2)) % (Math.PI * 2);
+        
+        // Gradient Sweep
+        const grad = ctx.createConicGradient(ang + Math.PI / 2, cx, cy);
+        grad.addColorStop(0, "transparent");
+        grad.addColorStop(0.1, "transparent");
+        grad.addColorStop(0.8, "rgba(34, 211, 238, 0.0)");
+        grad.addColorStop(1, "rgba(34, 211, 238, 0.15)");
+        ctx.fillStyle = grad;
+        ctx.beginPath();
+        ctx.arc(cx, cy, R, 0, Math.PI * 2);
+        ctx.fill();
+
+        // Scan Line
+        ctx.strokeStyle = "rgba(34, 211, 238, 0.6)";
+        ctx.lineWidth = 1.5;
+        ctx.beginPath();
+        ctx.moveTo(cx, cy);
+        ctx.lineTo(cx + Math.cos(ang) * R, cy + Math.sin(ang) * R);
+        ctx.stroke();
+
+        // Ownship (Center)
+        ctx.fillStyle = "#22d3ee";
+        ctx.beginPath();
+        ctx.arc(cx, cy, 3, 0, Math.PI * 2);
+        ctx.fill();
+        ctx.strokeStyle = "rgba(34, 211, 238, 0.5)";
+        ctx.lineWidth = 1;
+        ctx.beginPath();
+        ctx.arc(cx, cy, 6, 0, Math.PI * 2);
+        ctx.stroke();
+
+        // Render Tracks (Tab 2 Source, Tab 1 Logic)
+        const tracks = state.tracker.tracks;
+        tracks.forEach(tr => {
+            // Range Logic (Matches Tab 1)
+            const areaRange = rangeFromArea(tr);
+            const displayRange = getTrackDisplayRange(tr);
+            
+            let dist = 3000;
+            if (Number.isFinite(displayRange.range)) dist = displayRange.range;
+            else dist = areaRange; // fallback
+
+            // Scale: 0 -> 1500m (Matches Tab 1)
+            const maxRangeM = 1500;
+            const rPx = (clamp(dist, 0, maxRangeM) / maxRangeM) * R;
+
+            // Bearing Logic (Matches Tab 1 FOV=60)
+            // We need normalized X center (-0.5 to 0.5)
+            // tracks store pixel coordinates on current frame scale
+            const vw = videoEngage.videoWidth || state.frame.w || 1280;
+            const bx = tr.bbox.x + tr.bbox.w * 0.5;
+            const tx = (bx / vw) - 0.5; // -0.5 (left) to 0.5 (right)
+            
+            const fovRad = (60 * Math.PI) / 180;
+            const angle = (-Math.PI / 2) + (tx * fovRad);
+
+            const px = cx + Math.cos(angle) * rPx;
+            const py = cy + Math.sin(angle) * rPx;
+
+            // Styling based on State
+            const isSelected = (state.tracker.selectedTrackId === tr.id);
+            const killed = tr.killed;
+
+            const col = killed ? "rgba(148,163,184,.65)" :
+                (tr.state === "FIRE" ? "rgba(239,68,68,.9)" :
+                    (tr.state === "ASSESS" ? "rgba(245,158,11,.9)" :
+                        (isSelected ? "#f59e0b" : "rgba(34, 211, 238, 0.9)"))); // Cyan default
+
+            if (isSelected) {
+                ctx.shadowBlur = 10;
+                ctx.shadowColor = col;
+            } else {
+                ctx.shadowBlur = 0;
+            }
+
+            ctx.fillStyle = col;
+            ctx.beginPath();
+            ctx.arc(px, py, 5, 0, Math.PI * 2);
+            ctx.fill();
+
+            // Label
+            if (!killed && (isSelected || tracks.length < 5)) {
+                ctx.fillStyle = "rgba(255,255,255,.75)";
+                ctx.font = "11px " + getComputedStyle(document.body).fontFamily;
+                ctx.fillText(tr.id, px + 8, py + 4);
+            }
+        });
+
+        // Legend
+        ctx.shadowBlur = 0;
+        ctx.fillStyle = "rgba(255,255,255,.55)";
+        ctx.font = "11px " + getComputedStyle(document.body).fontFamily;
+        ctx.fillText("LIVE TRACKING: 60° FOV, 1500m SCALE", 10, 18);
+    }'''
+
+with open(file_path, 'r') as f:
+    content = f.read()
+
+# Pattern to find the existing renderRadar function
+# We look for the comment and function definition, and try to match until the end of the function
+# This is tricky with regex for nested braces, but we know the structure roughly.
+# Let's try to match from 'function renderRadar() {' to the end of the file or next function?
+# Actually, precise replacement is better.
+# We know it starts at line ~3350 and ends at ~3445.
+# Let's just find the start string and replace until a known end string or just rely on the structure.
+
+start_str = '// ========= Radar rendering (Tab 2) ========='
+end_str = 'function renderRadar() {'
+# We need to find the closing brace for this function.
+# Let's assume correct indentation of "    }" at the start of a line.
+
+lines = content.split('\n')
+start_idx = -1
+end_idx = -1
+
+for i, line in enumerate(lines):
+    if line.strip() == '// ========= Radar rendering (Tab 2) =========':
+        start_idx = i
+        break
+
+if start_idx != -1:
+    # Find the matching closing brace.
+    # We can count braces.
+    brace_count = 0
+    found_start = False
+    for i in range(start_idx, len(lines)):
+        line = lines[i]
+        brace_count += line.count('{')
+        brace_count -= line.count('}')
+        if '{' in line:
+            found_start = True
+        
+        if found_start and brace_count == 0:
+            end_idx = i
+            break
+
+if start_idx != -1 and end_idx != -1:
+    print(f"Replacing lines {start_idx} to {end_idx}")
+    new_lines = new_code.split('\n')
+    lines[start_idx:end_idx+1] = new_lines
+    
+    with open(file_path, 'w') as f:
+        f.write('\n'.join(lines))
+    print("Successfully updated renderRadar")
+else:
+    print("Could not find renderRadar block")
+    exit(1)