@blueharford/scrypted-spatial-awareness 0.1.7 → 0.1.9

package/package.json

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

package/src/main.ts

@@ -335,63 +335,13 @@ export class SpatialAwarenessPlugin extends ScryptedDeviceBase
   async getSettings(): Promise<Setting[]> {
     const settings = await this.storageSettings.getSettings();
 
-    // Topology editor button that opens modal overlay
+    // Topology editor button that opens modal overlay (appended to body for proper z-index)
     settings.push({
       key: 'topologyEditor',
       title: 'Topology Editor',
       type: 'html' as any,
       value: `
         <style>
-          .sa-modal-overlay {
-            display: none;
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            bottom: 0;
-            background: rgba(0, 0, 0, 0.85);
-            z-index: 999999;
-            align-items: center;
-            justify-content: center;
-          }
-          .sa-modal-overlay.active {
-            display: flex;
-          }
-          .sa-modal-container {
-            width: 95vw;
-            height: 90vh;
-            max-width: 1600px;
-            background: #1a1a2e;
-            border-radius: 12px;
-            overflow: hidden;
-            position: relative;
-            box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
-          }
-          .sa-modal-close {
-            position: absolute;
-            top: 10px;
-            right: 10px;
-            z-index: 1000000;
-            background: #e94560;
-            color: white;
-            border: none;
-            width: 36px;
-            height: 36px;
-            border-radius: 50%;
-            font-size: 20px;
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-          }
-          .sa-modal-close:hover {
-            background: #ff6b6b;
-          }
-          .sa-modal-iframe {
-            width: 100%;
-            height: 100%;
-            border: none;
-          }
           .sa-open-btn {
             background: linear-gradient(135deg, #e94560 0%, #0f3460 100%);
             color: white;
@@ -424,16 +374,30 @@ export class SpatialAwarenessPlugin extends ScryptedDeviceBase
         </style>
         <div class="sa-btn-container">
           <p class="sa-btn-desc">Configure camera positions, connections, and transit times</p>
-          <button class="sa-open-btn" onclick="document.getElementById('sa-topology-modal').classList.add('active')">
+          <button class="sa-open-btn" onclick="window.openSATopologyEditor()">
             <span>&#9881;</span> Open Topology Editor
           </button>
         </div>
-        <div id="sa-topology-modal" class="sa-modal-overlay" onclick="if(event.target===this)this.classList.remove('active')">
-          <div class="sa-modal-container">
-            <button class="sa-modal-close" onclick="document.getElementById('sa-topology-modal').classList.remove('active')">&times;</button>
-            <iframe class="sa-modal-iframe" src="/endpoint/@blueharford/scrypted-spatial-awareness/ui/editor"></iframe>
-          </div>
-        </div>
+        <script>
+          window.openSATopologyEditor = function() {
+            // Remove existing modal if any
+            const existing = document.getElementById('sa-topology-modal');
+            if (existing) existing.remove();
+
+            // Create modal and append to body
+            const modal = document.createElement('div');
+            modal.id = 'sa-topology-modal';
+            modal.style.cssText = 'position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.9);z-index:2147483647;display:flex;align-items:center;justify-content:center;';
+            modal.innerHTML = \`
+              <div style="width:95vw;height:92vh;max-width:1800px;background:#1a1a2e;border-radius:12px;overflow:hidden;position:relative;box-shadow:0 25px 50px rgba(0,0,0,0.5);">
+                <button onclick="document.getElementById('sa-topology-modal').remove()" style="position:absolute;top:15px;right:15px;z-index:2147483647;background:#e94560;color:white;border:none;width:40px;height:40px;border-radius:50%;font-size:24px;cursor:pointer;display:flex;align-items:center;justify-content:center;">&times;</button>
+                <iframe src="/endpoint/@blueharford/scrypted-spatial-awareness/ui/editor" style="width:100%;height:100%;border:none;"></iframe>
+              </div>
+            \`;
+            modal.onclick = function(e) { if (e.target === modal) modal.remove(); };
+            document.body.appendChild(modal);
+          };
+        </script>
       `,
       group: 'Topology',
     });
@@ -527,6 +491,10 @@ export class SpatialAwarenessPlugin extends ScryptedDeviceBase
         return this.handleAlertsRequest(request, response);
       }
 
+      if (path.endsWith('/api/cameras')) {
+        return this.handleCamerasRequest(response);
+      }
+
       if (path.endsWith('/api/floor-plan')) {
         return this.handleFloorPlanRequest(request, response);
       }
@@ -633,6 +601,36 @@ export class SpatialAwarenessPlugin extends ScryptedDeviceBase
     });
   }
 
+  private handleCamerasRequest(response: HttpResponse): void {
+    try {
+      // Get all devices with ObjectDetector interface
+      const cameras: { id: string; name: string }[] = [];
+
+      for (const id of Object.keys(systemManager.getSystemState())) {
+        try {
+          const device = systemManager.getDeviceById(id);
+          if (device && device.interfaces?.includes(ScryptedInterface.ObjectDetector)) {
+            cameras.push({
+              id: id,
+              name: device.name || `Camera ${id}`,
+            });
+          }
+        } catch (e) {
+          // Skip devices that can't be accessed
+        }
+      }
+
+      response.send(JSON.stringify(cameras), {
+        headers: { 'Content-Type': 'application/json' },
+      });
+    } catch (e) {
+      this.console.error('Error getting cameras:', e);
+      response.send(JSON.stringify([]), {
+        headers: { 'Content-Type': 'application/json' },
+      });
+    }
+  }
+
   private handleFloorPlanRequest(request: HttpRequest, response: HttpResponse): void {
     if (request.method === 'GET') {
       const imageData = this.storage.getItem('floorPlanImage');

package/src/ui/editor-html.ts

@@ -260,7 +260,17 @@ export const EDITOR_HTML = `<!DOCTYPE html>
     }
 
     async function loadAvailableCameras() {
-      availableCameras = topology.cameras.map(c => ({ id: c.deviceId, name: c.name }));
+      try {
+        const response = await fetch('../api/cameras');
+        if (response.ok) {
+          availableCameras = await response.json();
+        } else {
+          availableCameras = [];
+        }
+      } catch (e) {
+        console.error('Failed to load cameras:', e);
+        availableCameras = [];
+      }
       updateCameraSelects();
     }
 
@@ -431,14 +441,20 @@ export const EDITOR_HTML = `<!DOCTYPE html>
 
     function addCamera() {
       const deviceId = document.getElementById('camera-device-select').value;
-      const name = document.getElementById('camera-name-input').value || 'New Camera';
+      if (!deviceId) {
+        alert('Please select a camera');
+        return;
+      }
+      const selectedCam = availableCameras.find(c => c.id === deviceId);
+      const customName = document.getElementById('camera-name-input').value;
+      const name = customName || (selectedCam ? selectedCam.name : 'New Camera');
       const isEntry = document.getElementById('camera-entry-checkbox').checked;
       const isExit = document.getElementById('camera-exit-checkbox').checked;
       // Use pending position from click, or default to center
       const pos = topology._pendingCameraPos || { x: canvas.width / 2 + Math.random() * 100 - 50, y: canvas.height / 2 + Math.random() * 100 - 50 };
       delete topology._pendingCameraPos;
       const camera = {
-        deviceId: deviceId || 'camera-' + Date.now(),
+        deviceId: deviceId,
         nativeId: 'cam-' + Date.now(),
         name,
         isEntryPoint: isEntry,
@@ -448,6 +464,11 @@ export const EDITOR_HTML = `<!DOCTYPE html>
       };
       topology.cameras.push(camera);
       closeModal('add-camera-modal');
+      // Clear form
+      document.getElementById('camera-name-input').value = '';
+      document.getElementById('camera-entry-checkbox').checked = false;
+      document.getElementById('camera-exit-checkbox').checked = false;
+      updateCameraSelects();
       updateUI();
       render();
     }
@@ -459,6 +480,22 @@ export const EDITOR_HTML = `<!DOCTYPE html>
     }
 
     function updateCameraSelects() {
+      // Update camera device select (for adding new cameras)
+      const cameraDeviceSelect = document.getElementById('camera-device-select');
+      if (availableCameras.length > 0) {
+        const existingIds = topology.cameras.map(c => c.deviceId);
+        const available = availableCameras.filter(c => !existingIds.includes(c.id));
+        if (available.length > 0) {
+          cameraDeviceSelect.innerHTML = '<option value="">Select a camera...</option>' +
+            available.map(c => '<option value="' + c.id + '">' + c.name + '</option>').join('');
+        } else {
+          cameraDeviceSelect.innerHTML = '<option value="">All cameras already added</option>';
+        }
+      } else {
+        cameraDeviceSelect.innerHTML = '<option value="">No cameras with object detection found</option>';
+      }
+
+      // Update connection selects (for existing topology cameras)
       const options = topology.cameras.map(c => '<option value="' + c.deviceId + '">' + c.name + '</option>').join('');
       document.getElementById('connection-from-select').innerHTML = options;
       document.getElementById('connection-to-select').innerHTML = options;