@blueharford/scrypted-spatial-awareness 0.3.0 → 0.4.0

package/src/main.ts

@@ -32,6 +32,8 @@ import { GlobalTrackerSensor } from './devices/global-tracker-sensor';
 import { TrackingZone } from './devices/tracking-zone';
 import { MqttPublisher, MqttConfig } from './integrations/mqtt-publisher';
 import { EDITOR_HTML } from './ui/editor-html';
+import { TRAINING_HTML } from './ui/training-html';
+import { TrainingConfig, TrainingLandmark } from './models/training';
 
 const { deviceManager, systemManager } = sdk;
 
@@ -432,8 +434,91 @@ export class SpatialAwarenessPlugin extends ScryptedDeviceBase
   async getSettings(): Promise<Setting[]> {
     const settings = await this.storageSettings.getSettings();
 
+    // Training Mode button that opens mobile-friendly training UI in modal
+    const trainingOnclickCode = `(function(){var e=document.getElementById('sa-training-modal');if(e)e.remove();var m=document.createElement('div');m.id='sa-training-modal';m.style.cssText='position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.85);z-index:2147483647;display:flex;align-items:center;justify-content:center;';var c=document.createElement('div');c.style.cssText='width:min(420px,95vw);height:92vh;max-height:900px;background:#121212;border-radius:8px;overflow:hidden;position:relative;box-shadow:0 8px 32px rgba(0,0,0,0.5);border:1px solid rgba(255,255,255,0.1);';var b=document.createElement('button');b.innerHTML='×';b.style.cssText='position:absolute;top:8px;right:8px;z-index:2147483647;background:rgba(255,255,255,0.1);color:white;border:none;width:32px;height:32px;border-radius:4px;font-size:18px;cursor:pointer;line-height:1;';b.onclick=function(){m.remove();};var f=document.createElement('iframe');f.src='/endpoint/@blueharford/scrypted-spatial-awareness/ui/training';f.style.cssText='width:100%;height:100%;border:none;';c.appendChild(b);c.appendChild(f);m.appendChild(c);m.onclick=function(ev){if(ev.target===m)m.remove();};document.body.appendChild(m);})()`;
+
+    settings.push({
+      key: 'trainingMode',
+      title: 'Training Mode',
+      type: 'html' as any,
+      value: `
+        <style>
+          .sa-training-container {
+            padding: 16px;
+            background: rgba(255,255,255,0.03);
+            border-radius: 4px;
+            border: 1px solid rgba(255,255,255,0.08);
+          }
+          .sa-training-title {
+            color: #4fc3f7;
+            font-size: 14px;
+            font-weight: 500;
+            margin-bottom: 8px;
+            font-family: inherit;
+          }
+          .sa-training-desc {
+            color: rgba(255,255,255,0.6);
+            margin-bottom: 12px;
+            font-size: 13px;
+            line-height: 1.5;
+            font-family: inherit;
+          }
+          .sa-training-btn {
+            background: #4fc3f7;
+            color: #000;
+            border: none;
+            padding: 10px 20px;
+            border-radius: 4px;
+            font-size: 14px;
+            font-weight: 500;
+            cursor: pointer;
+            display: inline-flex;
+            align-items: center;
+            gap: 8px;
+            transition: background 0.2s;
+            font-family: inherit;
+          }
+          .sa-training-btn:hover {
+            background: #81d4fa;
+          }
+          .sa-training-steps {
+            color: rgba(255,255,255,0.5);
+            font-size: 12px;
+            margin-top: 12px;
+            padding-top: 12px;
+            border-top: 1px solid rgba(255,255,255,0.05);
+            font-family: inherit;
+          }
+          .sa-training-steps ol {
+            margin: 6px 0 0 16px;
+            padding: 0;
+          }
+          .sa-training-steps li {
+            margin-bottom: 2px;
+          }
+        </style>
+        <div class="sa-training-container">
+          <div class="sa-training-title">Guided Property Training</div>
+          <p class="sa-training-desc">Walk your property while the system learns your camera layout, transit times, and landmarks automatically.</p>
+          <button class="sa-training-btn" onclick="${trainingOnclickCode}">
+            Start Training Mode
+          </button>
+          <div class="sa-training-steps">
+            <strong>How it works:</strong>
+            <ol>
+              <li>Start training and walk to each camera</li>
+              <li>System auto-detects you and records transit times</li>
+              <li>Mark landmarks as you encounter them</li>
+              <li>Apply results to generate your topology</li>
+            </ol>
+          </div>
+        </div>
+      `,
+      group: 'Getting Started',
+    });
+
     // Topology editor button that opens modal overlay (appended to body for proper z-index)
-    const onclickCode = `(function(){var e=document.getElementById('sa-topology-modal');if(e)e.remove();var m=document.createElement('div');m.id='sa-topology-modal';m.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;';var c=document.createElement('div');c.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 b=document.createElement('button');b.innerHTML='×';b.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;';b.onclick=function(){m.remove();};var f=document.createElement('iframe');f.src='/endpoint/@blueharford/scrypted-spatial-awareness/ui/editor';f.style.cssText='width:100%;height:100%;border:none;';c.appendChild(b);c.appendChild(f);m.appendChild(c);m.onclick=function(ev){if(ev.target===m)m.remove();};document.body.appendChild(m);})()`;
+    const onclickCode = `(function(){var e=document.getElementById('sa-topology-modal');if(e)e.remove();var m=document.createElement('div');m.id='sa-topology-modal';m.style.cssText='position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.85);z-index:2147483647;display:flex;align-items:center;justify-content:center;';var c=document.createElement('div');c.style.cssText='width:95vw;height:92vh;max-width:1800px;background:#121212;border-radius:8px;overflow:hidden;position:relative;box-shadow:0 8px 32px rgba(0,0,0,0.5);border:1px solid rgba(255,255,255,0.1);';var b=document.createElement('button');b.innerHTML='×';b.style.cssText='position:absolute;top:8px;right:8px;z-index:2147483647;background:rgba(255,255,255,0.1);color:white;border:none;width:32px;height:32px;border-radius:4px;font-size:18px;cursor:pointer;line-height:1;';b.onclick=function(){m.remove();};var f=document.createElement('iframe');f.src='/endpoint/@blueharford/scrypted-spatial-awareness/ui/editor';f.style.cssText='width:100%;height:100%;border:none;';c.appendChild(b);c.appendChild(f);m.appendChild(c);m.onclick=function(ev){if(ev.target===m)m.remove();};document.body.appendChild(m);})()`;
 
     settings.push({
       key: 'topologyEditor',
@@ -442,39 +527,41 @@ export class SpatialAwarenessPlugin extends ScryptedDeviceBase
       value: `
         <style>
           .sa-open-btn {
-            background: linear-gradient(135deg, #e94560 0%, #0f3460 100%);
-            color: white;
+            background: #4fc3f7;
+            color: #000;
             border: none;
-            padding: 14px 28px;
-            border-radius: 8px;
-            font-size: 15px;
-            font-weight: 600;
+            padding: 10px 20px;
+            border-radius: 4px;
+            font-size: 14px;
+            font-weight: 500;
             cursor: pointer;
             display: inline-flex;
             align-items: center;
-            gap: 10px;
-            transition: transform 0.2s, box-shadow 0.2s;
+            gap: 8px;
+            transition: background 0.2s;
+            font-family: inherit;
           }
           .sa-open-btn:hover {
-            transform: translateY(-2px);
-            box-shadow: 0 8px 20px rgba(233, 69, 96, 0.4);
+            background: #81d4fa;
           }
           .sa-btn-container {
-            padding: 20px;
-            background: #16213e;
-            border-radius: 8px;
+            padding: 16px;
+            background: rgba(255,255,255,0.03);
+            border-radius: 4px;
             text-align: center;
+            border: 1px solid rgba(255,255,255,0.08);
           }
           .sa-btn-desc {
-            color: #888;
-            margin-bottom: 15px;
-            font-size: 14px;
+            color: rgba(255,255,255,0.6);
+            margin-bottom: 12px;
+            font-size: 13px;
+            font-family: inherit;
           }
         </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="${onclickCode}">
-            <span>&#9881;</span> Open Topology Editor
+            Open Topology Editor
           </button>
         </div>
       `,
@@ -736,11 +823,38 @@ export class SpatialAwarenessPlugin extends ScryptedDeviceBase
         return this.handleJourneyPathRequest(globalId, response);
       }
 
+      // Training Mode endpoints
+      if (path.endsWith('/api/training/start')) {
+        return this.handleTrainingStartRequest(request, response);
+      }
+      if (path.endsWith('/api/training/pause')) {
+        return this.handleTrainingPauseRequest(response);
+      }
+      if (path.endsWith('/api/training/resume')) {
+        return this.handleTrainingResumeRequest(response);
+      }
+      if (path.endsWith('/api/training/end')) {
+        return this.handleTrainingEndRequest(response);
+      }
+      if (path.endsWith('/api/training/status')) {
+        return this.handleTrainingStatusRequest(response);
+      }
+      if (path.endsWith('/api/training/landmark')) {
+        return this.handleTrainingLandmarkRequest(request, response);
+      }
+      if (path.endsWith('/api/training/apply')) {
+        return this.handleTrainingApplyRequest(response);
+      }
+
       // UI Routes
       if (path.endsWith('/ui/editor') || path.endsWith('/ui/editor/')) {
         return this.serveEditorUI(response);
       }
 
+      if (path.endsWith('/ui/training') || path.endsWith('/ui/training/')) {
+        return this.serveTrainingUI(response);
+      }
+
       if (path.includes('/ui/')) {
         return this.serveStaticFile(path, response);
       }
@@ -748,7 +862,7 @@ export class SpatialAwarenessPlugin extends ScryptedDeviceBase
       // Default: return info page
       response.send(JSON.stringify({
         name: 'Spatial Awareness Plugin',
-        version: '0.3.0',
+        version: '0.4.0',
         endpoints: {
           api: {
             trackedObjects: '/api/tracked-objects',
@@ -760,9 +874,19 @@ export class SpatialAwarenessPlugin extends ScryptedDeviceBase
             liveTracking: '/api/live-tracking',
             connectionSuggestions: '/api/connection-suggestions',
             landmarkSuggestions: '/api/landmark-suggestions',
+            training: {
+              start: '/api/training/start',
+              pause: '/api/training/pause',
+              resume: '/api/training/resume',
+              end: '/api/training/end',
+              status: '/api/training/status',
+              landmark: '/api/training/landmark',
+              apply: '/api/training/apply',
+            },
           },
           ui: {
             editor: '/ui/editor',
+            training: '/ui/training',
           },
         },
       }), {
@@ -1228,12 +1352,187 @@ export class SpatialAwarenessPlugin extends ScryptedDeviceBase
     }
   }
 
+  // ==================== Training Mode Handlers ====================
+
+  private handleTrainingStartRequest(request: HttpRequest, response: HttpResponse): void {
+    if (!this.trackingEngine) {
+      response.send(JSON.stringify({ error: 'Tracking engine not running. Configure topology first.' }), {
+        code: 500,
+        headers: { 'Content-Type': 'application/json' },
+      });
+      return;
+    }
+
+    try {
+      let config: Partial<TrainingConfig> | undefined;
+      let trainerName: string | undefined;
+
+      if (request.body) {
+        const body = JSON.parse(request.body);
+        trainerName = body.trainerName;
+        config = body.config;
+      }
+
+      const session = this.trackingEngine.startTrainingSession(trainerName, config);
+      response.send(JSON.stringify(session), {
+        headers: { 'Content-Type': 'application/json' },
+      });
+    } catch (e) {
+      response.send(JSON.stringify({ error: (e as Error).message }), {
+        code: 500,
+        headers: { 'Content-Type': 'application/json' },
+      });
+    }
+  }
+
+  private handleTrainingPauseRequest(response: HttpResponse): void {
+    if (!this.trackingEngine) {
+      response.send(JSON.stringify({ error: 'Tracking engine not running' }), {
+        code: 500,
+        headers: { 'Content-Type': 'application/json' },
+      });
+      return;
+    }
+
+    const success = this.trackingEngine.pauseTrainingSession();
+    if (success) {
+      response.send(JSON.stringify({ success: true }), {
+        headers: { 'Content-Type': 'application/json' },
+      });
+    } else {
+      response.send(JSON.stringify({ error: 'No active training session to pause' }), {
+        code: 400,
+        headers: { 'Content-Type': 'application/json' },
+      });
+    }
+  }
+
+  private handleTrainingResumeRequest(response: HttpResponse): void {
+    if (!this.trackingEngine) {
+      response.send(JSON.stringify({ error: 'Tracking engine not running' }), {
+        code: 500,
+        headers: { 'Content-Type': 'application/json' },
+      });
+      return;
+    }
+
+    const success = this.trackingEngine.resumeTrainingSession();
+    if (success) {
+      response.send(JSON.stringify({ success: true }), {
+        headers: { 'Content-Type': 'application/json' },
+      });
+    } else {
+      response.send(JSON.stringify({ error: 'No paused training session to resume' }), {
+        code: 400,
+        headers: { 'Content-Type': 'application/json' },
+      });
+    }
+  }
+
+  private handleTrainingEndRequest(response: HttpResponse): void {
+    if (!this.trackingEngine) {
+      response.send(JSON.stringify({ error: 'Tracking engine not running' }), {
+        code: 500,
+        headers: { 'Content-Type': 'application/json' },
+      });
+      return;
+    }
+
+    const session = this.trackingEngine.endTrainingSession();
+    if (session) {
+      response.send(JSON.stringify(session), {
+        headers: { 'Content-Type': 'application/json' },
+      });
+    } else {
+      response.send(JSON.stringify({ error: 'No training session to end' }), {
+        code: 400,
+        headers: { 'Content-Type': 'application/json' },
+      });
+    }
+  }
+
+  private handleTrainingStatusRequest(response: HttpResponse): void {
+    if (!this.trackingEngine) {
+      response.send(JSON.stringify({ state: 'idle', stats: null }), {
+        headers: { 'Content-Type': 'application/json' },
+      });
+      return;
+    }
+
+    const status = this.trackingEngine.getTrainingStatus();
+    if (status) {
+      response.send(JSON.stringify(status), {
+        headers: { 'Content-Type': 'application/json' },
+      });
+    } else {
+      response.send(JSON.stringify({ state: 'idle', stats: null }), {
+        headers: { 'Content-Type': 'application/json' },
+      });
+    }
+  }
+
+  private handleTrainingLandmarkRequest(request: HttpRequest, response: HttpResponse): void {
+    if (!this.trackingEngine) {
+      response.send(JSON.stringify({ error: 'Tracking engine not running' }), {
+        code: 500,
+        headers: { 'Content-Type': 'application/json' },
+      });
+      return;
+    }
+
+    try {
+      const body = JSON.parse(request.body!) as Omit<TrainingLandmark, 'id' | 'markedAt'>;
+      const landmark = this.trackingEngine.markTrainingLandmark(body);
+      if (landmark) {
+        response.send(JSON.stringify({ success: true, landmark }), {
+          headers: { 'Content-Type': 'application/json' },
+        });
+      } else {
+        response.send(JSON.stringify({ error: 'No active training session' }), {
+          code: 400,
+          headers: { 'Content-Type': 'application/json' },
+        });
+      }
+    } catch (e) {
+      response.send(JSON.stringify({ error: 'Invalid request body' }), {
+        code: 400,
+        headers: { 'Content-Type': 'application/json' },
+      });
+    }
+  }
+
+  private handleTrainingApplyRequest(response: HttpResponse): void {
+    if (!this.trackingEngine) {
+      response.send(JSON.stringify({ error: 'Tracking engine not running' }), {
+        code: 500,
+        headers: { 'Content-Type': 'application/json' },
+      });
+      return;
+    }
+
+    const result = this.trackingEngine.applyTrainingToTopology();
+    if (result.success) {
+      // Save the updated topology
+      const topology = this.trackingEngine.getTopology();
+      this.storage.setItem('topology', JSON.stringify(topology));
+    }
+    response.send(JSON.stringify(result), {
+      headers: { 'Content-Type': 'application/json' },
+    });
+  }
+
   private serveEditorUI(response: HttpResponse): void {
     response.send(EDITOR_HTML, {
       headers: { 'Content-Type': 'text/html' },
     });
   }
 
+  private serveTrainingUI(response: HttpResponse): void {
+    response.send(TRAINING_HTML, {
+      headers: { 'Content-Type': 'text/html' },
+    });
+  }
+
   private serveStaticFile(path: string, response: HttpResponse): void {
     // Serve static files for the UI
     response.send('Not found', { code: 404 });