@blueharford/scrypted-spatial-awareness 0.1.6 → 0.1.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blueharford/scrypted-spatial-awareness",
-  "version": "0.1.6",
+  "version": "0.1.8",
   "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',
     });

package/src/ui/editor-html.ts

@@ -94,12 +94,18 @@ export const EDITOR_HTML = `<!DOCTYPE html>
     <div class="editor">
       <div class="toolbar">
         <div class="toolbar-group">
-          <button class="btn" onclick="uploadFloorPlan()">Upload Floor Plan</button>
+          <button class="btn" onclick="uploadFloorPlan()">Upload Image</button>
+          <button class="btn" onclick="useBlankCanvas()">Blank Canvas</button>
         </div>
         <div class="toolbar-group">
-          <button class="btn" onclick="setTool('select')">Select</button>
-          <button class="btn" onclick="setTool('camera')">Place Camera</button>
-          <button class="btn" onclick="setTool('connect')">Connect</button>
+          <button class="btn" id="tool-select" onclick="setTool('select')">Select</button>
+          <button class="btn" id="tool-wall" onclick="setTool('wall')">Draw Wall</button>
+          <button class="btn" id="tool-room" onclick="setTool('room')">Draw Room</button>
+          <button class="btn" id="tool-camera" onclick="setTool('camera')">Place Camera</button>
+          <button class="btn" id="tool-connect" onclick="setTool('connect')">Connect</button>
+        </div>
+        <div class="toolbar-group">
+          <button class="btn" onclick="clearDrawings()">Clear Drawings</button>
         </div>
         <div class="toolbar-group">
           <button class="btn btn-primary" onclick="saveTopology()">Save</button>
@@ -109,9 +115,12 @@ export const EDITOR_HTML = `<!DOCTYPE html>
         <canvas id="floor-plan-canvas"></canvas>
         <div class="canvas-placeholder" id="canvas-placeholder">
           <h2>Floor Plan Editor</h2>
-          <p>Upload a floor plan image to get started</p>
+          <p>Upload an image or use a blank canvas to draw your floor plan</p>
           <br>
-          <button class="btn btn-primary" onclick="uploadFloorPlan()">Upload Floor Plan</button>
+          <div style="display: flex; gap: 15px; justify-content: center;">
+            <button class="btn btn-primary" onclick="uploadFloorPlan()">Upload Image</button>
+            <button class="btn" onclick="useBlankCanvas()">Use Blank Canvas</button>
+          </div>
         </div>
       </div>
       <div class="status-bar">
@@ -215,11 +224,15 @@ export const EDITOR_HTML = `<!DOCTYPE html>
   </div>
 
   <script>
-    let topology = { version: '1.0', cameras: [], connections: [], globalZones: [], floorPlan: null };
+    let topology = { version: '1.0', cameras: [], connections: [], globalZones: [], floorPlan: null, drawings: [] };
     let selectedItem = null;
     let currentTool = 'select';
     let floorPlanImage = null;
     let availableCameras = [];
+    let isDrawing = false;
+    let drawStart = null;
+    let currentDrawing = null;
+    let blankCanvasMode = false;
     const canvas = document.getElementById('floor-plan-canvas');
     const ctx = canvas.getContext('2d');
 
@@ -236,8 +249,11 @@ export const EDITOR_HTML = `<!DOCTYPE html>
         const response = await fetch('../api/topology');
         if (response.ok) {
           topology = await response.json();
+          if (!topology.drawings) topology.drawings = [];
           if (topology.floorPlan?.imageData) {
             await loadFloorPlanImage(topology.floorPlan.imageData);
+          } else if (topology.floorPlan?.type === 'blank') {
+            blankCanvasMode = true;
           }
         }
       } catch (e) { console.error('Failed to load topology:', e); }
@@ -269,7 +285,22 @@ export const EDITOR_HTML = `<!DOCTYPE html>
 
     function render() {
       ctx.clearRect(0, 0, canvas.width, canvas.height);
-      if (floorPlanImage) {
+
+      // Draw grid for blank canvas
+      if (blankCanvasMode && !floorPlanImage) {
+        document.getElementById('canvas-placeholder').style.display = 'none';
+        ctx.fillStyle = '#1a1a2e';
+        ctx.fillRect(0, 0, canvas.width, canvas.height);
+        ctx.strokeStyle = '#2a2a4e';
+        ctx.lineWidth = 1;
+        const gridSize = 40;
+        for (let x = 0; x < canvas.width; x += gridSize) {
+          ctx.beginPath(); ctx.moveTo(x, 0); ctx.lineTo(x, canvas.height); ctx.stroke();
+        }
+        for (let y = 0; y < canvas.height; y += gridSize) {
+          ctx.beginPath(); ctx.moveTo(0, y); ctx.lineTo(canvas.width, y); ctx.stroke();
+        }
+      } else if (floorPlanImage) {
         document.getElementById('canvas-placeholder').style.display = 'none';
         const scale = Math.min(canvas.width / floorPlanImage.width, canvas.height / floorPlanImage.height) * 0.9;
         const x = (canvas.width - floorPlanImage.width * scale) / 2;
@@ -278,6 +309,48 @@ export const EDITOR_HTML = `<!DOCTYPE html>
       } else {
         document.getElementById('canvas-placeholder').style.display = 'block';
       }
+
+      // Draw saved drawings (walls and rooms)
+      if (topology.drawings) {
+        for (const drawing of topology.drawings) {
+          if (drawing.type === 'wall') {
+            ctx.beginPath();
+            ctx.moveTo(drawing.x1, drawing.y1);
+            ctx.lineTo(drawing.x2, drawing.y2);
+            ctx.strokeStyle = '#888';
+            ctx.lineWidth = 4;
+            ctx.stroke();
+          } else if (drawing.type === 'room') {
+            ctx.strokeStyle = '#666';
+            ctx.lineWidth = 2;
+            ctx.strokeRect(drawing.x, drawing.y, drawing.width, drawing.height);
+            ctx.fillStyle = 'rgba(100, 100, 150, 0.1)';
+            ctx.fillRect(drawing.x, drawing.y, drawing.width, drawing.height);
+            if (drawing.label) {
+              ctx.fillStyle = '#888';
+              ctx.font = '12px sans-serif';
+              ctx.textAlign = 'center';
+              ctx.fillText(drawing.label, drawing.x + drawing.width/2, drawing.y + drawing.height/2);
+            }
+          }
+        }
+      }
+
+      // Draw current drawing in progress
+      if (currentDrawing) {
+        if (currentDrawing.type === 'wall') {
+          ctx.beginPath();
+          ctx.moveTo(currentDrawing.x1, currentDrawing.y1);
+          ctx.lineTo(currentDrawing.x2, currentDrawing.y2);
+          ctx.strokeStyle = '#e94560';
+          ctx.lineWidth = 4;
+          ctx.stroke();
+        } else if (currentDrawing.type === 'room') {
+          ctx.strokeStyle = '#e94560';
+          ctx.lineWidth = 2;
+          ctx.strokeRect(currentDrawing.x, currentDrawing.y, currentDrawing.width, currentDrawing.height);
+        }
+      }
       for (const conn of topology.connections) {
         const fromCam = topology.cameras.find(c => c.deviceId === conn.fromCameraId);
         const toCam = topology.cameras.find(c => c.deviceId === conn.toCameraId);
@@ -361,6 +434,9 @@ export const EDITOR_HTML = `<!DOCTYPE html>
       const name = document.getElementById('camera-name-input').value || '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(),
         nativeId: 'cam-' + Date.now(),
@@ -368,7 +444,7 @@ export const EDITOR_HTML = `<!DOCTYPE html>
         isEntryPoint: isEntry,
         isExitPoint: isExit,
         trackClasses: ['person', 'car', 'animal'],
-        floorPlanPosition: { x: canvas.width / 2 + Math.random() * 100 - 50, y: canvas.height / 2 + Math.random() * 100 - 50 }
+        floorPlanPosition: pos
       };
       topology.cameras.push(camera);
       closeModal('add-camera-modal');
@@ -464,47 +540,115 @@ export const EDITOR_HTML = `<!DOCTYPE html>
     function updateConnectionBidi(id, value) { const conn = topology.connections.find(c => c.id === id); if (conn) conn.bidirectional = value; render(); }
     function deleteCamera(id) { if (!confirm('Delete this camera?')) return; topology.cameras = topology.cameras.filter(c => c.deviceId !== id); topology.connections = topology.connections.filter(c => c.fromCameraId !== id && c.toCameraId !== id); selectedItem = null; document.getElementById('properties-panel').innerHTML = '<h3>Properties</h3><p style="color: #666;">Select a camera or connection.</p>'; updateUI(); render(); }
     function deleteConnection(id) { if (!confirm('Delete this connection?')) return; topology.connections = topology.connections.filter(c => c.id !== id); selectedItem = null; document.getElementById('properties-panel').innerHTML = '<h3>Properties</h3><p style="color: #666;">Select a camera or connection.</p>'; updateUI(); render(); }
-    function setTool(tool) { currentTool = tool; setStatus('Tool: ' + tool, 'success'); }
+    function setTool(tool) {
+      currentTool = tool;
+      setStatus('Tool: ' + tool, 'success');
+      document.querySelectorAll('.toolbar .btn').forEach(b => b.style.background = '');
+      const btn = document.getElementById('tool-' + tool);
+      if (btn) btn.style.background = '#e94560';
+    }
+
+    function useBlankCanvas() {
+      blankCanvasMode = true;
+      floorPlanImage = null;
+      topology.floorPlan = { type: 'blank', width: canvas.width, height: canvas.height };
+      render();
+      setStatus('Blank canvas ready - use Draw Wall or Draw Room tools', 'success');
+    }
+
+    function clearDrawings() {
+      if (!confirm('Clear all drawings (walls and rooms)?')) return;
+      topology.drawings = [];
+      render();
+      setStatus('Drawings cleared', 'success');
+    }
+
     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;
+
     canvas.addEventListener('mousedown', (e) => {
       const rect = canvas.getBoundingClientRect();
       const x = e.clientX - rect.left;
       const y = e.clientY - rect.top;
+
       if (currentTool === 'select') {
         for (const camera of topology.cameras) {
           if (camera.floorPlanPosition) {
             const dist = Math.hypot(x - camera.floorPlanPosition.x, y - camera.floorPlanPosition.y);
-            if (dist < 25) { selectCamera(camera.deviceId); return; }
+            if (dist < 25) { selectCamera(camera.deviceId); dragging = camera; return; }
           }
         }
+      } else if (currentTool === 'wall') {
+        isDrawing = true;
+        drawStart = { x, y };
+        currentDrawing = { type: 'wall', x1: x, y1: y, x2: x, y2: y };
+      } else if (currentTool === 'room') {
+        isDrawing = true;
+        drawStart = { x, y };
+        currentDrawing = { type: 'room', x: x, y: y, width: 0, height: 0 };
+      } else if (currentTool === 'camera') {
+        openAddCameraModal();
+        // Will position camera at click location after adding
+        topology._pendingCameraPos = { x, y };
       }
     });
 
-    let dragging = null;
-    canvas.addEventListener('mousedown', (e) => {
-      if (currentTool !== 'select') return;
+    canvas.addEventListener('mousemove', (e) => {
       const rect = canvas.getBoundingClientRect();
       const x = e.clientX - rect.left;
       const y = e.clientY - rect.top;
-      for (const camera of topology.cameras) {
-        if (camera.floorPlanPosition) {
-          const dist = Math.hypot(x - camera.floorPlanPosition.x, y - camera.floorPlanPosition.y);
-          if (dist < 25) { dragging = camera; return; }
+
+      if (dragging) {
+        dragging.floorPlanPosition.x = x;
+        dragging.floorPlanPosition.y = y;
+        render();
+      } else if (isDrawing && currentDrawing) {
+        if (currentDrawing.type === 'wall') {
+          currentDrawing.x2 = x;
+          currentDrawing.y2 = y;
+        } else if (currentDrawing.type === 'room') {
+          currentDrawing.width = x - drawStart.x;
+          currentDrawing.height = y - drawStart.y;
         }
+        render();
       }
     });
 
-    canvas.addEventListener('mousemove', (e) => {
-      if (!dragging) return;
-      const rect = canvas.getBoundingClientRect();
-      dragging.floorPlanPosition.x = e.clientX - rect.left;
-      dragging.floorPlanPosition.y = e.clientY - rect.top;
-      render();
+    canvas.addEventListener('mouseup', (e) => {
+      if (isDrawing && currentDrawing) {
+        if (!topology.drawings) topology.drawings = [];
+        // Normalize room coordinates if drawn backwards
+        if (currentDrawing.type === 'room') {
+          if (currentDrawing.width < 0) {
+            currentDrawing.x += currentDrawing.width;
+            currentDrawing.width = Math.abs(currentDrawing.width);
+          }
+          if (currentDrawing.height < 0) {
+            currentDrawing.y += currentDrawing.height;
+            currentDrawing.height = Math.abs(currentDrawing.height);
+          }
+          // Only add if room is big enough
+          if (currentDrawing.width > 20 && currentDrawing.height > 20) {
+            const label = prompt('Room name (optional):');
+            if (label) currentDrawing.label = label;
+            topology.drawings.push(currentDrawing);
+          }
+        } else if (currentDrawing.type === 'wall') {
+          // Only add if wall is long enough
+          const len = Math.hypot(currentDrawing.x2 - currentDrawing.x1, currentDrawing.y2 - currentDrawing.y1);
+          if (len > 20) {
+            topology.drawings.push(currentDrawing);
+          }
+        }
+        isDrawing = false;
+        currentDrawing = null;
+        render();
+      }
+      dragging = null;
     });
 
-    canvas.addEventListener('mouseup', () => { dragging = null; });
     window.addEventListener('resize', () => { resizeCanvas(); render(); });
     init();
   </script>