@blueharford/scrypted-spatial-awareness 0.6.0 → 0.6.2

package/package.json

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

package/src/main.ts

@@ -1824,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
@@ -1833,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;
@@ -1882,17 +1904,69 @@ export class SpatialAwarenessPlugin extends ScryptedDeviceBase
         ? topology.cameras.find(c => c.deviceId === sourceCameras[0] || c.name === sourceCameras[0])
         : null;
 
-      // Create a default polygon near the camera or at a default location
-      let centerX = 300;
-      let centerY = 200;
+      // Create zone polygon WITHIN the camera's field of view
+      let polygon: { x: number; y: number }[] = [];
+      const timestamp = Date.now();
+
       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,
+          });
+        }
 
-      // Create a rectangular zone (user can edit later)
-      const size = 100;
-      const timestamp = Date.now();
+        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 },
+        ];
+      }
 
       // 1. Create DrawnZone (visual on floor plan)
       const drawnZone = {
@@ -1900,12 +1974,7 @@ export class SpatialAwarenessPlugin extends ScryptedDeviceBase
         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,
       };
 

package/src/ui/editor-html.ts

@@ -71,6 +71,19 @@ export const EDITOR_HTML = `<!DOCTYPE html>
         <p>Topology Editor</p>
       </div>
       <div class="sidebar-content">
+        <div class="section" style="background: #1a3a5c; margin: -10px -15px 10px -15px; padding: 15px;">
+          <div class="section-title" style="margin-bottom: 10px;">
+            <span>Floor Plan Scale</span>
+          </div>
+          <div style="display: flex; gap: 10px; align-items: center;">
+            <input type="number" id="scale-input" value="5" min="1" max="50" style="width: 60px; padding: 6px; background: #0f3460; border: 1px solid #1a4a7a; border-radius: 4px; color: #fff;" onchange="updateScale(this.value)">
+            <span style="font-size: 12px; color: #888;">pixels per foot</span>
+            <button class="btn btn-small" onclick="openScaleHelper()" style="margin-left: auto;">Help</button>
+          </div>
+          <div style="font-size: 11px; color: #666; margin-top: 8px;">
+            Tip: If your floor plan is 800px wide and represents 80ft, scale = 10 px/ft
+          </div>
+        </div>
         <div class="section">
           <div class="section-title">
             <span>Cameras</span>
@@ -379,6 +392,14 @@ export const EDITOR_HTML = `<!DOCTYPE html>
     let currentDrawing = null;
     let blankCanvasMode = false;
 
+    // Floor plan scale: pixels per foot (default assumes ~5 pixels per foot for a typical floor plan)
+    // User can adjust this by setting the scale
+    let floorPlanScale = 5; // pixels per foot
+
+    // Helper functions for scale conversion
+    function feetToPixels(feet) { return feet * floorPlanScale; }
+    function pixelsToFeet(pixels) { return pixels / floorPlanScale; }
+
     // Zone drawing state
     let zoneDrawingMode = false;
     let currentZonePoints = [];
@@ -434,6 +455,12 @@ export const EDITOR_HTML = `<!DOCTYPE html>
         if (response.ok) {
           topology = await response.json();
           if (!topology.drawings) topology.drawings = [];
+          // Load floor plan scale if saved
+          if (topology.floorPlanScale) {
+            floorPlanScale = topology.floorPlanScale;
+            const scaleInput = document.getElementById('scale-input');
+            if (scaleInput) scaleInput.value = floorPlanScale;
+          }
           // Load floor plan from separate storage (handles legacy imageData in topology too)
           if (topology.floorPlan?.imageData) {
             // Legacy: imageData was stored in topology
@@ -1603,6 +1630,8 @@ export const EDITOR_HTML = `<!DOCTYPE html>
     function showCameraProperties(camera) {
       const panel = document.getElementById('properties-panel');
       const fov = camera.fov || { mode: 'simple', angle: 90, direction: 0, range: 80 };
+      // Convert stored pixel range to feet for display
+      const rangeInFeet = Math.round(pixelsToFeet(fov.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>' +
@@ -1610,7 +1639,8 @@ export const EDITOR_HTML = `<!DOCTYPE html>
         '<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"><label>Range (feet)</label><input type="number" value="' + rangeInFeet + '" min="5" max="200" onchange="updateCameraFovRange(\\'' + camera.deviceId + '\\', this.value)"></div>' +
+        '<div style="font-size: 11px; color: #666; margin-top: -10px; margin-bottom: 15px;">~' + (fov.range || 80) + ' pixels at current scale</div>' +
         '<div class="form-group"><button class="btn" style="width: 100%; background: #f44336;" onclick="deleteCamera(\\'' + camera.deviceId + '\\')">Delete Camera</button></div>';
     }
 
@@ -1629,6 +1659,36 @@ export const EDITOR_HTML = `<!DOCTYPE html>
       camera.fov[field] = parseFloat(value);
       render();
     }
+    function updateCameraFovRange(id, feetValue) {
+      // Convert feet to pixels and store
+      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.range = feetToPixels(parseFloat(feetValue));
+      render();
+      // Update the pixel display
+      showCameraProperties(camera);
+    }
+    function updateScale(value) {
+      floorPlanScale = parseFloat(value) || 5;
+      // Store in topology for persistence
+      topology.floorPlanScale = floorPlanScale;
+      render();
+      setStatus('Scale updated: ' + floorPlanScale + ' pixels per foot', 'success');
+    }
+    function openScaleHelper() {
+      alert('How to determine your floor plan scale:\\n\\n' +
+        '1. Measure a known distance on your floor plan in pixels\\n' +
+        '   (e.g., measure a room that you know is 20 feet wide)\\n\\n' +
+        '2. Divide the pixel width by the real width in feet\\n' +
+        '   Example: 200 pixels / 20 feet = 10 pixels per foot\\n\\n' +
+        '3. Enter that value in the scale field\\n\\n' +
+        'Common scales:\\n' +
+        '- Small floor plan (fits on screen): 3-5 px/ft\\n' +
+        '- Medium floor plan: 5-10 px/ft\\n' +
+        '- Large/detailed floor plan: 10-20 px/ft\\n\\n' +
+        'Tip: Most outdoor cameras see 30-50 feet, indoor 15-30 feet');
+    }
     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(); }