@blueharford/scrypted-spatial-awareness 0.1.3 → 0.1.5

package/package.json

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

package/src/main.ts

@@ -335,19 +335,105 @@ export class SpatialAwarenessPlugin extends ScryptedDeviceBase
   async getSettings(): Promise<Setting[]> {
     const settings = await this.storageSettings.getSettings();
 
-    // Topology editor launcher - opens in popup window
+    // Topology editor button that opens modal overlay
     settings.push({
       key: 'topologyEditor',
       title: 'Topology Editor',
       type: 'html' as any,
       value: `
-        <div style="padding: 15px; background: #1a1a2e; border-radius: 8px; text-align: center;">
-          <p style="color: #888; margin-bottom: 15px;">Configure camera positions, connections, and transit times</p>
-          <button onclick="window.open('ui/editor', 'TopologyEditor', 'width=1400,height=900,menubar=no,toolbar=no,location=no,status=no')"
-                  style="background: #e94560; color: white; border: none; padding: 12px 24px; border-radius: 6px; font-size: 14px; cursor: pointer; font-weight: 500;">
-            Open Topology Editor
+        <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: 10000;
+            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: 10001;
+            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;
+            border: none;
+            padding: 14px 28px;
+            border-radius: 8px;
+            font-size: 15px;
+            font-weight: 600;
+            cursor: pointer;
+            display: inline-flex;
+            align-items: center;
+            gap: 10px;
+            transition: transform 0.2s, box-shadow 0.2s;
+          }
+          .sa-open-btn:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 8px 20px rgba(233, 69, 96, 0.4);
+          }
+          .sa-btn-container {
+            padding: 20px;
+            background: #16213e;
+            border-radius: 8px;
+            text-align: center;
+          }
+          .sa-btn-desc {
+            color: #888;
+            margin-bottom: 15px;
+            font-size: 14px;
+          }
+        </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')">
+            <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>
       `,
       group: 'Topology',
     });

package/src/ui/editor-html.ts

@@ -233,7 +233,7 @@ export const EDITOR_HTML = `<!DOCTYPE html>
 
     async function loadTopology() {
       try {
-        const response = await fetch('api/topology');
+        const response = await fetch('../api/topology');
         if (response.ok) {
           topology = await response.json();
           if (topology.floorPlan?.imageData) {
@@ -251,7 +251,7 @@ export const EDITOR_HTML = `<!DOCTYPE html>
     async function saveTopology() {
       try {
         setStatus('Saving...', 'warning');
-        const response = await fetch('api/topology', {
+        const response = await fetch('../api/topology', {
           method: 'PUT',
           headers: { 'Content-Type': 'application/json' },
           body: JSON.stringify(topology)