@blueharford/scrypted-spatial-awareness 0.1.8 → 0.1.10

package/package.json

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

package/src/main.ts

@@ -380,20 +380,23 @@ export class SpatialAwarenessPlugin extends ScryptedDeviceBase
         </div>
         <script>
           window.openSATopologyEditor = function() {
-            // Remove existing modal if any
-            const existing = document.getElementById('sa-topology-modal');
+            var existing = document.getElementById('sa-topology-modal');
             if (existing) existing.remove();
-
-            // Create modal and append to body
-            const modal = document.createElement('div');
+            var 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>
-            \`;
+            var container = document.createElement('div');
+            container.style.cssText = '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);';
+            var closeBtn = document.createElement('button');
+            closeBtn.innerHTML = '&times;';
+            closeBtn.style.cssText = '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;';
+            closeBtn.onclick = function() { modal.remove(); };
+            var iframe = document.createElement('iframe');
+            iframe.src = '/endpoint/@blueharford/scrypted-spatial-awareness/ui/editor';
+            iframe.style.cssText = 'width:100%;height:100%;border:none;';
+            container.appendChild(closeBtn);
+            container.appendChild(iframe);
+            modal.appendChild(container);
             modal.onclick = function(e) { if (e.target === modal) modal.remove(); };
             document.body.appendChild(modal);
           };
@@ -491,6 +494,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);
       }
@@ -597,6 +604,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;