@blueharford/scrypted-spatial-awareness 0.5.9 → 0.6.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blueharford/scrypted-spatial-awareness",
-  "version": "0.5.9",
+  "version": "0.6.1",
   "description": "Cross-camera object tracking for Scrypted NVR with spatial awareness",
   "author": "Joshua Seidel <blueharford>",
   "license": "Apache-2.0",

package/src/main.ts

@@ -25,6 +25,10 @@ import {
   LANDMARK_TEMPLATES,
   inferRelationships,
   DrawnZoneType,
+  GlobalZone,
+  GlobalZoneType,
+  CameraZoneMapping,
+  ClipPath,
 } from './models/topology';
 import { TrackedObject } from './models/tracked-object';
 import { Alert, AlertRule, createDefaultRules } from './models/alert';
@@ -1820,8 +1824,7 @@ export class SpatialAwarenessPlugin extends ScryptedDeviceBase
     let updated = false;
 
     if (suggestion.type === 'landmark' && suggestion.landmark) {
-      // Calculate a reasonable position for the landmark
-      // Use the first visible camera's position as a starting point, or canvas center
+      // Calculate position for the landmark WITHIN the camera's field of view
       let position = suggestion.landmark.position;
       if (!position || (position.x === 0 && position.y === 0)) {
         // Find a camera that can see this landmark
@@ -1829,12 +1832,35 @@ export class SpatialAwarenessPlugin extends ScryptedDeviceBase
         const camera = visibleCameraId ? topology.cameras.find(c => c.deviceId === visibleCameraId) : null;
 
         if (camera?.floorPlanPosition) {
-          // Position near the camera with some offset
-          const offset = (topology.landmarks?.length || 0) * 30;
+          // Get camera's FOV direction and range (cast to any for flexible access)
+          const fov = (camera.fov || { mode: 'simple', angle: 90, direction: 0, range: 80 }) as any;
+          const direction = fov.direction || 0;
+          const range = fov.range || 80;
+          const fovAngle = fov.angle || 90;
+
+          // Count existing landmarks from this camera to spread them out
+          const existingFromCamera = (topology.landmarks || []).filter(l =>
+            l.visibleFromCameras?.includes(visibleCameraId)
+          ).length;
+
+          // Calculate position in front of camera within its FOV
+          // Convert direction to radians (0 = up/north, 90 = right/east)
+          const dirRad = (direction - 90) * Math.PI / 180;
+          const halfFov = (fovAngle / 2) * Math.PI / 180;
+
+          // Spread landmarks across the FOV cone at varying distances
+          const angleOffset = (existingFromCamera % 3 - 1) * halfFov * 0.6; // -0.6, 0, +0.6 of half FOV
+          const distanceMultiplier = 0.5 + (existingFromCamera % 2) * 0.3; // 50% or 80% of range
+
+          const finalAngle = dirRad + angleOffset;
+          const distance = range * distanceMultiplier;
+
           position = {
-            x: camera.floorPlanPosition.x + 50 + (offset % 100),
-            y: camera.floorPlanPosition.y + 50 + Math.floor(offset / 100) * 30,
+            x: camera.floorPlanPosition.x + Math.cos(finalAngle) * distance,
+            y: camera.floorPlanPosition.y + Math.sin(finalAngle) * distance,
           };
+
+          this.console.log(`[Discovery] Placing landmark "${suggestion.landmark.name}" in ${camera.name}'s FOV: dir=${direction}°, dist=${distance.toFixed(0)}px`);
         } else {
           // Position in a grid pattern starting from center
           const landmarkCount = topology.landmarks?.length || 0;
@@ -1872,72 +1898,167 @@ export class SpatialAwarenessPlugin extends ScryptedDeviceBase
       // Create a drawn zone from the discovery zone
       const zone = suggestion.zone;
 
-      // Find cameras that see this zone type to determine position
-      const cameraWithZone = suggestion.sourceCameras?.[0];
-      const camera = cameraWithZone ? topology.cameras.find(c => c.deviceId === cameraWithZone || c.name === cameraWithZone) : null;
+      // Find cameras that see this zone
+      const sourceCameras = suggestion.sourceCameras || [];
+      const camera = sourceCameras[0]
+        ? topology.cameras.find(c => c.deviceId === sourceCameras[0] || c.name === sourceCameras[0])
+        : null;
+
+      // Create zone polygon WITHIN the camera's field of view
+      let polygon: { x: number; y: number }[] = [];
+      const timestamp = Date.now();
 
-      // Create a default polygon near the camera or at a default location
-      let centerX = 300;
-      let centerY = 200;
       if (camera?.floorPlanPosition) {
-        centerX = camera.floorPlanPosition.x;
-        centerY = camera.floorPlanPosition.y + 80;
+        // Get camera's FOV direction and range (cast to any for flexible access)
+        const fov = (camera.fov || { mode: 'simple', angle: 90, direction: 0, range: 80 }) as any;
+        const direction = fov.direction || 0;
+        const range = fov.range || 80;
+        const fovAngle = fov.angle || 90;
+
+        // Convert direction to radians (0 = up/north, 90 = right/east)
+        const dirRad = (direction - 90) * Math.PI / 180;
+        const halfFov = (fovAngle / 2) * Math.PI / 180;
+
+        // Count existing zones from this camera to offset new ones
+        const existingFromCamera = (topology.drawnZones || []).filter((z: any) =>
+          z.linkedCameras?.includes(sourceCameras[0])
+        ).length;
+
+        // Create a wedge-shaped zone within the camera's FOV
+        // Offset based on existing zones to avoid overlap
+        const innerRadius = range * 0.3 + existingFromCamera * 20;
+        const outerRadius = range * 0.8 + existingFromCamera * 20;
+
+        // Use a portion of the FOV for each zone
+        const zoneSpread = halfFov * 0.7; // 70% of half FOV
+
+        const camX = camera.floorPlanPosition.x;
+        const camY = camera.floorPlanPosition.y;
+
+        // Create arc polygon (wedge shape)
+        const steps = 8;
+        // Inner arc (from left to right)
+        for (let i = 0; i <= steps; i++) {
+          const angle = dirRad - zoneSpread + (zoneSpread * 2 * i / steps);
+          polygon.push({
+            x: camX + Math.cos(angle) * innerRadius,
+            y: camY + Math.sin(angle) * innerRadius,
+          });
+        }
+        // Outer arc (from right to left)
+        for (let i = steps; i >= 0; i--) {
+          const angle = dirRad - zoneSpread + (zoneSpread * 2 * i / steps);
+          polygon.push({
+            x: camX + Math.cos(angle) * outerRadius,
+            y: camY + Math.sin(angle) * outerRadius,
+          });
+        }
+
+        this.console.log(`[Discovery] Creating zone "${zone.name}" in ${camera.name}'s FOV: dir=${direction}°`);
+      } else {
+        // Fallback: rectangular zone at default location
+        const centerX = 300 + (topology.drawnZones?.length || 0) * 120;
+        const centerY = 200;
+        const size = 100;
+        polygon = [
+          { x: centerX - size/2, y: centerY - size/2 },
+          { x: centerX + size/2, y: centerY - size/2 },
+          { x: centerX + size/2, y: centerY + size/2 },
+          { x: centerX - size/2, y: centerY + size/2 },
+        ];
       }
 
-      // Create a rectangular zone (user can edit later)
-      const size = 100;
+      // 1. Create DrawnZone (visual on floor plan)
       const drawnZone = {
-        id: `zone_${Date.now()}`,
+        id: `zone_${timestamp}`,
         name: zone.name,
         type: (zone.type || 'custom') as DrawnZoneType,
         description: zone.description,
-        polygon: [
-          { x: centerX - size/2, y: centerY - size/2 },
-          { x: centerX + size/2, y: centerY - size/2 },
-          { x: centerX + size/2, y: centerY + size/2 },
-          { x: centerX - size/2, y: centerY + size/2 },
-        ] as any,
+        polygon: polygon as any,
+        linkedCameras: sourceCameras,
       };
 
       if (!topology.drawnZones) {
         topology.drawnZones = [];
       }
       topology.drawnZones.push(drawnZone);
-      updated = true;
 
-      this.console.log(`[Discovery] Added zone: ${zone.name} (${zone.type})`);
+      // 2. Create GlobalZone (for tracking/alerting)
+      const globalZoneType = this.mapZoneTypeToGlobalType(zone.type);
+      const cameraZones: CameraZoneMapping[] = sourceCameras
+        .map(camRef => {
+          const cam = topology.cameras.find(c => c.deviceId === camRef || c.name === camRef);
+          if (!cam) return null;
+          return {
+            cameraId: cam.deviceId,
+            zone: [[0, 0], [100, 0], [100, 100], [0, 100]] as ClipPath, // Full frame default
+          };
+        })
+        .filter((z): z is CameraZoneMapping => z !== null);
+
+      if (cameraZones.length > 0) {
+        const globalZone: GlobalZone = {
+          id: `global_${timestamp}`,
+          name: zone.name,
+          type: globalZoneType,
+          cameraZones,
+        };
+
+        if (!topology.globalZones) {
+          topology.globalZones = [];
+        }
+        topology.globalZones.push(globalZone);
+        this.console.log(`[Discovery] Added zone: ${zone.name} (${zone.type}) - DrawnZone and GlobalZone created`);
+      } else {
+        this.console.log(`[Discovery] Added zone: ${zone.name} (${zone.type}) - DrawnZone only (no cameras matched)`);
+      }
+
+      updated = true;
     }
 
     if (suggestion.type === 'connection' && suggestion.connection) {
       // Add new connection to topology
       const conn = suggestion.connection;
 
-      // Ensure cameras have floor plan positions for visibility
-      const fromCamera = topology.cameras.find(c => c.deviceId === conn.fromCameraId || c.name === conn.fromCameraId);
-      const toCamera = topology.cameras.find(c => c.deviceId === conn.toCameraId || c.name === conn.toCameraId);
-
-      // Auto-assign floor plan positions if missing
-      if (fromCamera && !fromCamera.floorPlanPosition) {
-        const idx = topology.cameras.indexOf(fromCamera);
-        fromCamera.floorPlanPosition = {
-          x: 150 + (idx % 3) * 200,
-          y: 150 + Math.floor(idx / 3) * 150,
-        };
-        this.console.log(`[Discovery] Auto-positioned camera: ${fromCamera.name}`);
-      }
-      if (toCamera && !toCamera.floorPlanPosition) {
-        const idx = topology.cameras.indexOf(toCamera);
-        toCamera.floorPlanPosition = {
-          x: 150 + (idx % 3) * 200,
-          y: 150 + Math.floor(idx / 3) * 150,
-        };
-        this.console.log(`[Discovery] Auto-positioned camera: ${toCamera.name}`);
+      // Resolve camera references - LLM may return names instead of deviceIds
+      // Use case-insensitive matching for names
+      const fromCamera = topology.cameras.find(c =>
+        c.deviceId === conn.fromCameraId ||
+        c.name === conn.fromCameraId ||
+        c.name.toLowerCase() === conn.fromCameraId.toLowerCase()
+      );
+      const toCamera = topology.cameras.find(c =>
+        c.deviceId === conn.toCameraId ||
+        c.name === conn.toCameraId ||
+        c.name.toLowerCase() === conn.toCameraId.toLowerCase()
+      );
+
+      // Don't create connection if cameras not found
+      if (!fromCamera || !toCamera) {
+        this.console.warn(`[Discovery] Cannot create connection: camera not found. from="${conn.fromCameraId}" to="${conn.toCameraId}"`);
+        this.console.warn(`[Discovery] Available cameras: ${topology.cameras.map(c => `${c.name} (${c.deviceId})`).join(', ')}`);
+        return;
+      }
+
+      // Check if connection already exists
+      const existingConn = topology.connections.find(c =>
+        (c.fromCameraId === fromCamera.deviceId && c.toCameraId === toCamera.deviceId) ||
+        (c.bidirectional && c.fromCameraId === toCamera.deviceId && c.toCameraId === fromCamera.deviceId)
+      );
+      if (existingConn) {
+        this.console.log(`[Discovery] Connection already exists between ${fromCamera.name} and ${toCamera.name}`);
+        return;
+      }
+
+      // Warn if cameras don't have positions yet
+      if (!fromCamera.floorPlanPosition || !toCamera.floorPlanPosition) {
+        this.console.warn(`[Discovery] Note: One or both cameras not positioned on floor plan yet`);
       }
 
       const newConnection = {
         id: `conn_${Date.now()}`,
-        fromCameraId: fromCamera?.deviceId || conn.fromCameraId,
-        toCameraId: toCamera?.deviceId || conn.toCameraId,
+        fromCameraId: fromCamera.deviceId,
+        toCameraId: toCamera.deviceId,
         bidirectional: conn.bidirectional,
         // Default exit/entry zones covering full frame
         exitZone: [[0, 0], [100, 0], [100, 100], [0, 100]] as [number, number][],
@@ -1953,7 +2074,7 @@ export class SpatialAwarenessPlugin extends ScryptedDeviceBase
       topology.connections.push(newConnection);
       updated = true;
 
-      this.console.log(`[Discovery] Added connection: ${fromCamera?.name || conn.fromCameraId} -> ${toCamera?.name || conn.toCameraId}`);
+      this.console.log(`[Discovery] Added connection: ${fromCamera.name} (${fromCamera.deviceId}) -> ${toCamera.name} (${toCamera.deviceId})`);
     }
 
     if (updated) {
@@ -1963,6 +2084,25 @@ export class SpatialAwarenessPlugin extends ScryptedDeviceBase
     }
   }
 
+  /** Map discovered zone types to GlobalZone types for tracking/alerting */
+  private mapZoneTypeToGlobalType(type: string): GlobalZoneType {
+    const mapping: Record<string, GlobalZoneType> = {
+      'yard': 'dwell',
+      'driveway': 'entry',
+      'street': 'entry',
+      'patio': 'dwell',
+      'walkway': 'entry',
+      'parking': 'dwell',
+      'garden': 'dwell',
+      'pool': 'restricted',
+      'entrance': 'entry',
+      'garage': 'entry',
+      'deck': 'dwell',
+      'custom': 'dwell',
+    };
+    return mapping[type] || 'dwell';
+  }
+
   private serveEditorUI(response: HttpResponse): void {
     response.send(EDITOR_HTML, {
       headers: { 'Content-Type': 'text/html' },

package/src/ui/editor-html.ts

@@ -127,7 +127,7 @@ export const EDITOR_HTML = `<!DOCTYPE html>
             <button class="btn btn-small btn-primary" id="scan-now-btn" onclick="runDiscoveryScan()">Scan Now</button>
           </div>
           <div id="discovery-status" style="font-size: 11px; color: #888; margin-bottom: 8px;">
-            <span id="discovery-status-text">Not scanned yet</span>
+            <span id="discovery-status-text">Position cameras first, then scan</span>
           </div>
           <div id="discovery-suggestions-list"></div>
         </div>
@@ -160,6 +160,7 @@ export const EDITOR_HTML = `<!DOCTYPE html>
         </div>
         <div class="toolbar-group">
           <button class="btn" onclick="clearDrawings()">Clear Drawings</button>
+          <button class="btn" onclick="clearAllTopology()" style="background: #dc2626;">Delete All</button>
         </div>
         <div class="toolbar-group">
           <button class="btn btn-primary" onclick="saveTopology()">Save</button>
@@ -662,6 +663,13 @@ export const EDITOR_HTML = `<!DOCTYPE html>
     let scanPollingInterval = null;
 
     async function runDiscoveryScan() {
+      // Check if cameras are positioned on the floor plan
+      const positionedCameras = topology.cameras.filter(c => c.floorPlanPosition);
+      if (positionedCameras.length === 0) {
+        alert('Please position at least one camera on the floor plan before running discovery.\\n\\nSteps:\\n1. Click "Place Camera" in the toolbar\\n2. Click on the floor plan where the camera is located\\n3. Select the camera from the dropdown\\n4. Drag the rotation handle to set its direction\\n5. Then run discovery to detect zones and connections');
+        return;
+      }
+
       const scanBtn = document.getElementById('scan-now-btn');
       const statusText = document.getElementById('discovery-status-text');
       scanBtn.disabled = true;
@@ -1269,6 +1277,29 @@ export const EDITOR_HTML = `<!DOCTYPE html>
     function drawCamera(camera) {
       const pos = camera.floorPlanPosition;
       const isSelected = selectedItem?.type === 'camera' && selectedItem?.id === camera.deviceId;
+
+      // Get FOV settings or defaults
+      const fov = camera.fov || { mode: 'simple', angle: 90, direction: 0, range: 80 };
+      const direction = (fov.mode === 'simple' || !fov.mode) ? (fov.direction || 0) : 0;
+      const fovAngle = (fov.mode === 'simple' || !fov.mode) ? (fov.angle || 90) : 90;
+      const range = (fov.mode === 'simple' || !fov.mode) ? (fov.range || 80) : 80;
+
+      // Convert direction to radians (0 = up/north, 90 = right/east)
+      const dirRad = (direction - 90) * Math.PI / 180;
+      const halfFov = (fovAngle / 2) * Math.PI / 180;
+
+      // Draw FOV cone
+      ctx.beginPath();
+      ctx.moveTo(pos.x, pos.y);
+      ctx.arc(pos.x, pos.y, range, dirRad - halfFov, dirRad + halfFov);
+      ctx.closePath();
+      ctx.fillStyle = isSelected ? 'rgba(233, 69, 96, 0.15)' : 'rgba(76, 175, 80, 0.15)';
+      ctx.fill();
+      ctx.strokeStyle = isSelected ? 'rgba(233, 69, 96, 0.5)' : 'rgba(76, 175, 80, 0.5)';
+      ctx.lineWidth = 1;
+      ctx.stroke();
+
+      // Draw camera circle
       ctx.beginPath();
       ctx.arc(pos.x, pos.y, 20, 0, Math.PI * 2);
       ctx.fillStyle = isSelected ? '#e94560' : '#0f3460';
@@ -1276,12 +1307,41 @@ export const EDITOR_HTML = `<!DOCTYPE html>
       ctx.strokeStyle = '#fff';
       ctx.lineWidth = 2;
       ctx.stroke();
+
+      // Draw camera icon/text
       ctx.fillStyle = '#fff';
       ctx.font = '12px sans-serif';
       ctx.textAlign = 'center';
       ctx.textBaseline = 'middle';
       ctx.fillText('CAM', pos.x, pos.y);
       ctx.fillText(camera.name, pos.x, pos.y + 35);
+
+      // Draw direction handle (when selected) for rotation
+      if (isSelected) {
+        const handleLength = 45;
+        const handleX = pos.x + Math.cos(dirRad) * handleLength;
+        const handleY = pos.y + Math.sin(dirRad) * handleLength;
+
+        // Handle line
+        ctx.beginPath();
+        ctx.moveTo(pos.x + Math.cos(dirRad) * 20, pos.y + Math.sin(dirRad) * 20);
+        ctx.lineTo(handleX, handleY);
+        ctx.strokeStyle = '#ff6b6b';
+        ctx.lineWidth = 3;
+        ctx.stroke();
+
+        // Handle grip (circle at end)
+        ctx.beginPath();
+        ctx.arc(handleX, handleY, 8, 0, Math.PI * 2);
+        ctx.fillStyle = '#ff6b6b';
+        ctx.fill();
+        ctx.strokeStyle = '#fff';
+        ctx.lineWidth = 2;
+        ctx.stroke();
+
+        // Store handle position for hit detection
+        camera._handlePos = { x: handleX, y: handleY };
+      }
     }
 
     function drawConnection(from, to, conn) {
@@ -1542,7 +1602,16 @@ export const EDITOR_HTML = `<!DOCTYPE html>
 
     function showCameraProperties(camera) {
       const panel = document.getElementById('properties-panel');
-      panel.innerHTML = '<h3>Camera Properties</h3><div class="form-group"><label>Name</label><input type="text" value="' + camera.name + '" onchange="updateCameraName(\\'' + camera.deviceId + '\\', this.value)"></div><div class="form-group"><label class="checkbox-group"><input type="checkbox" ' + (camera.isEntryPoint ? 'checked' : '') + ' onchange="updateCameraEntry(\\'' + camera.deviceId + '\\', this.checked)">Entry Point</label></div><div class="form-group"><label class="checkbox-group"><input type="checkbox" ' + (camera.isExitPoint ? 'checked' : '') + ' onchange="updateCameraExit(\\'' + camera.deviceId + '\\', this.checked)">Exit Point</label></div><div class="form-group"><button class="btn" style="width: 100%; background: #f44336;" onclick="deleteCamera(\\'' + camera.deviceId + '\\')">Delete Camera</button></div>';
+      const fov = camera.fov || { mode: 'simple', angle: 90, direction: 0, range: 80 };
+      panel.innerHTML = '<h3>Camera Properties</h3>' +
+        '<div class="form-group"><label>Name</label><input type="text" value="' + camera.name + '" onchange="updateCameraName(\\'' + camera.deviceId + '\\', this.value)"></div>' +
+        '<div class="form-group"><label class="checkbox-group"><input type="checkbox" ' + (camera.isEntryPoint ? 'checked' : '') + ' onchange="updateCameraEntry(\\'' + camera.deviceId + '\\', this.checked)">Entry Point</label></div>' +
+        '<div class="form-group"><label class="checkbox-group"><input type="checkbox" ' + (camera.isExitPoint ? 'checked' : '') + ' onchange="updateCameraExit(\\'' + camera.deviceId + '\\', this.checked)">Exit Point</label></div>' +
+        '<h4 style="margin-top: 15px; margin-bottom: 10px; color: #888;">Field of View</h4>' +
+        '<div class="form-group"><label>Direction (0=up, 90=right)</label><input type="number" value="' + Math.round(fov.direction || 0) + '" min="0" max="359" onchange="updateCameraFov(\\'' + camera.deviceId + '\\', \\'direction\\', this.value)"></div>' +
+        '<div class="form-group"><label>FOV Angle (degrees)</label><input type="number" value="' + (fov.angle || 90) + '" min="30" max="180" onchange="updateCameraFov(\\'' + camera.deviceId + '\\', \\'angle\\', this.value)"></div>' +
+        '<div class="form-group"><label>Range (pixels)</label><input type="number" value="' + (fov.range || 80) + '" min="20" max="300" onchange="updateCameraFov(\\'' + camera.deviceId + '\\', \\'range\\', this.value)"></div>' +
+        '<div class="form-group"><button class="btn" style="width: 100%; background: #f44336;" onclick="deleteCamera(\\'' + camera.deviceId + '\\')">Delete Camera</button></div>';
     }
 
     function showConnectionProperties(connection) {
@@ -1553,6 +1622,13 @@ export const EDITOR_HTML = `<!DOCTYPE html>
     function updateCameraName(id, value) { const camera = topology.cameras.find(c => c.deviceId === id); if (camera) camera.name = value; updateUI(); }
     function updateCameraEntry(id, value) { const camera = topology.cameras.find(c => c.deviceId === id); if (camera) camera.isEntryPoint = value; }
     function updateCameraExit(id, value) { const camera = topology.cameras.find(c => c.deviceId === id); if (camera) camera.isExitPoint = value; }
+    function updateCameraFov(id, field, value) {
+      const camera = topology.cameras.find(c => c.deviceId === id);
+      if (!camera) return;
+      if (!camera.fov) camera.fov = { mode: 'simple', angle: 90, direction: 0, range: 80 };
+      camera.fov[field] = parseFloat(value);
+      render();
+    }
     function updateConnectionName(id, value) { const conn = topology.connections.find(c => c.id === id); if (conn) conn.name = value; updateUI(); }
     function updateTransitTime(id, field, value) { const conn = topology.connections.find(c => c.id === id); if (conn) conn.transitTime[field] = parseInt(value) * 1000; }
     function updateConnectionBidi(id, value) { const conn = topology.connections.find(c => c.id === id); if (conn) conn.bidirectional = value; render(); }
@@ -1696,10 +1772,30 @@ export const EDITOR_HTML = `<!DOCTYPE html>
       setStatus('Drawings cleared', 'success');
     }
 
+    function clearAllTopology() {
+      if (!confirm('DELETE ALL TOPOLOGY DATA?\\n\\nThis will remove:\\n- All cameras\\n- All connections\\n- All landmarks\\n- All zones\\n- All drawings\\n\\nThis cannot be undone.')) return;
+
+      topology.cameras = [];
+      topology.connections = [];
+      topology.landmarks = [];
+      topology.globalZones = [];
+      topology.drawnZones = [];
+      topology.drawings = [];
+      topology.relationships = [];
+
+      selectedItem = null;
+      document.getElementById('properties-panel').innerHTML = '<h3>Properties</h3><p style="color: #666;">Select an item to edit.</p>';
+      updateCameraSelects();
+      updateUI();
+      render();
+      setStatus('All topology data cleared', 'warning');
+    }
+
     function closeModal(id) { document.getElementById(id).classList.remove('active'); }
     function setStatus(text, type) { document.getElementById('status-text').textContent = text; const dot = document.getElementById('status-dot'); dot.className = 'status-dot'; if (type === 'warning') dot.classList.add('warning'); if (type === 'error') dot.classList.add('error'); }
 
     let dragging = null;
+    let rotatingCamera = null;
 
     canvas.addEventListener('mousedown', (e) => {
       const rect = canvas.getBoundingClientRect();
@@ -1715,7 +1811,20 @@ export const EDITOR_HTML = `<!DOCTYPE html>
       }
 
       if (currentTool === 'select') {
-        // Check cameras first
+        // Check for rotation handle on selected camera first
+        if (selectedItem?.type === 'camera') {
+          const camera = topology.cameras.find(c => c.deviceId === selectedItem.id);
+          if (camera?._handlePos) {
+            const dist = Math.hypot(x - camera._handlePos.x, y - camera._handlePos.y);
+            if (dist < 15) {
+              rotatingCamera = camera;
+              setStatus('Drag to rotate camera direction', 'warning');
+              return;
+            }
+          }
+        }
+
+        // Check cameras
         for (const camera of topology.cameras) {
           if (camera.floorPlanPosition) {
             const dist = Math.hypot(x - camera.floorPlanPosition.x, y - camera.floorPlanPosition.y);
@@ -1779,6 +1888,20 @@ export const EDITOR_HTML = `<!DOCTYPE html>
       const x = e.clientX - rect.left;
       const y = e.clientY - rect.top;
 
+      // Handle camera rotation
+      if (rotatingCamera) {
+        const pos = rotatingCamera.floorPlanPosition;
+        const angle = Math.atan2(y - pos.y, x - pos.x);
+        // Convert to our direction system (0 = up/north, 90 = right/east)
+        const direction = (angle * 180 / Math.PI) + 90;
+        if (!rotatingCamera.fov) {
+          rotatingCamera.fov = { mode: 'simple', angle: 90, direction: 0, range: 80 };
+        }
+        rotatingCamera.fov.direction = ((direction % 360) + 360) % 360; // Normalize 0-360
+        render();
+        return;
+      }
+
       if (dragging) {
         if (dragging.type === 'camera') {
           dragging.item.floorPlanPosition.x = x;
@@ -1801,6 +1924,13 @@ export const EDITOR_HTML = `<!DOCTYPE html>
     });
 
     canvas.addEventListener('mouseup', (e) => {
+      // Clear camera rotation
+      if (rotatingCamera) {
+        setStatus('Camera direction updated', 'success');
+        rotatingCamera = null;
+        return;
+      }
+
       if (isDrawing && currentDrawing) {
         if (!topology.drawings) topology.drawings = [];
         // Normalize room coordinates if drawn backwards