@blueharford/scrypted-spatial-awareness 0.1.0 → 0.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/main.nodejs.js +1 -1
  2. package/dist/main.nodejs.js.map +1 -1
  3. package/dist/plugin.zip +0 -0
  4. package/package.json +1 -1
  5. package/src/main.ts +3 -43
  6. package/src/ui/editor-html.ts +512 -0
package/dist/plugin.zip CHANGED
Binary file
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@blueharford/scrypted-spatial-awareness",
3
- "version": "0.1.0",
3
+ "version": "0.1.1",
4
4
  "description": "Cross-camera object tracking for Scrypted NVR with spatial awareness",
5
5
  "author": "Joshua Seidel <blueharford>",
6
6
  "license": "Apache-2.0",
package/src/main.ts CHANGED
@@ -24,8 +24,7 @@ import { AlertManager } from './alerts/alert-manager';
24
24
  import { GlobalTrackerSensor } from './devices/global-tracker-sensor';
25
25
  import { TrackingZone } from './devices/tracking-zone';
26
26
  import { MqttPublisher, MqttConfig } from './integrations/mqtt-publisher';
27
- import * as fs from 'fs';
28
- import * as path from 'path';
27
+ import { EDITOR_HTML } from './ui/editor-html';
29
28
 
30
29
  const { deviceManager, systemManager } = sdk;
31
30
 
@@ -575,48 +574,9 @@ export class SpatialAwarenessPlugin extends ScryptedDeviceBase
575
574
  }
576
575
 
577
576
  private serveEditorUI(response: HttpResponse): void {
578
- // Try to read the editor HTML from the bundled file
579
- try {
580
- const editorPath = path.join(__dirname, 'ui', 'editor.html');
581
- const html = fs.readFileSync(editorPath, 'utf-8');
582
- response.send(html, {
583
- headers: { 'Content-Type': 'text/html' },
584
- });
585
- } catch (e) {
586
- this.console.error('Failed to load editor UI:', e);
587
- // Fallback to basic UI
588
- const html = `
589
- <!DOCTYPE html>
590
- <html>
591
- <head>
592
- <title>Spatial Awareness - Topology Editor</title>
593
- <meta charset="utf-8">
594
- <meta name="viewport" content="width=device-width, initial-scale=1">
595
- <style>
596
- body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; margin: 0; padding: 20px; background: #1a1a1a; color: #fff; }
597
- h1 { margin-top: 0; }
598
- .container { max-width: 1200px; margin: 0 auto; }
599
- .btn { background: #0066cc; color: #fff; border: none; padding: 10px 20px; border-radius: 4px; cursor: pointer; font-size: 14px; }
600
- </style>
601
- </head>
602
- <body>
603
- <div class="container">
604
- <h1>Spatial Awareness - Topology Editor</h1>
605
- <p>Error loading visual editor. Configure topology via REST API: <code>PUT /api/topology</code></p>
606
- <h3>Current Topology</h3>
607
- <pre id="topology-json" style="background: #2a2a2a; padding: 15px; border-radius: 4px; overflow: auto;"></pre>
608
- </div>
609
- <script>
610
- fetch('api/topology').then(r => r.json()).then(data => {
611
- document.getElementById('topology-json').textContent = JSON.stringify(data, null, 2);
577
+ response.send(EDITOR_HTML, {
578
+ headers: { 'Content-Type': 'text/html' },
612
579
  });
613
- </script>
614
- </body>
615
- </html>`;
616
- response.send(html, {
617
- headers: { 'Content-Type': 'text/html' },
618
- });
619
- }
620
580
  }
621
581
 
622
582
  private serveStaticFile(path: string, response: HttpResponse): void {
package/src/ui/editor-html.ts ADDED
@@ -0,0 +1,512 @@
1
+ /**
2
+ * Editor HTML embedded as a string for bundling
3
+ */
4
+
5
+ export const EDITOR_HTML = `<!DOCTYPE html>
6
+ <html lang="en">
7
+ <head>
8
+ <meta charset="UTF-8">
9
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
10
+ <title>Spatial Awareness - Topology Editor</title>
11
+ <style>
12
+ * { box-sizing: border-box; margin: 0; padding: 0; }
13
+ body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, sans-serif; background: #1a1a2e; color: #eee; min-height: 100vh; }
14
+ .container { display: flex; height: 100vh; }
15
+ .sidebar { width: 300px; background: #16213e; border-right: 1px solid #0f3460; display: flex; flex-direction: column; overflow: hidden; }
16
+ .sidebar-header { padding: 20px; border-bottom: 1px solid #0f3460; }
17
+ .sidebar-header h1 { font-size: 18px; font-weight: 600; margin-bottom: 5px; }
18
+ .sidebar-header p { font-size: 12px; color: #888; }
19
+ .sidebar-content { flex: 1; overflow-y: auto; padding: 15px; }
20
+ .section { margin-bottom: 20px; }
21
+ .section-title { font-size: 12px; font-weight: 600; text-transform: uppercase; color: #888; margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center; }
22
+ .btn { background: #0f3460; color: #fff; border: none; padding: 8px 16px; border-radius: 4px; cursor: pointer; font-size: 13px; transition: background 0.2s; }
23
+ .btn:hover { background: #1a4a7a; }
24
+ .btn-primary { background: #e94560; }
25
+ .btn-primary:hover { background: #ff6b6b; }
26
+ .btn-small { padding: 4px 8px; font-size: 11px; }
27
+ .camera-item, .connection-item { background: #0f3460; border-radius: 6px; padding: 12px; margin-bottom: 8px; cursor: pointer; transition: background 0.2s; }
28
+ .camera-item:hover, .connection-item:hover { background: #1a4a7a; }
29
+ .camera-item.selected, .connection-item.selected { outline: 2px solid #e94560; }
30
+ .camera-name { font-weight: 500; margin-bottom: 4px; }
31
+ .camera-info { font-size: 11px; color: #888; }
32
+ .editor { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
33
+ .toolbar { background: #16213e; border-bottom: 1px solid #0f3460; padding: 10px 20px; display: flex; gap: 10px; align-items: center; }
34
+ .toolbar-group { display: flex; gap: 5px; padding-right: 15px; border-right: 1px solid #0f3460; margin-right: 5px; }
35
+ .toolbar-group:last-child { border-right: none; }
36
+ .canvas-container { flex: 1; position: relative; overflow: hidden; background: #0f0f1a; }
37
+ #floor-plan-canvas { position: absolute; top: 0; left: 0; }
38
+ .canvas-placeholder { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; color: #666; }
39
+ .canvas-placeholder h2 { margin-bottom: 15px; }
40
+ .properties-panel { width: 280px; background: #16213e; border-left: 1px solid #0f3460; overflow-y: auto; padding: 15px; }
41
+ .properties-panel h3 { font-size: 14px; margin-bottom: 15px; padding-bottom: 10px; border-bottom: 1px solid #0f3460; }
42
+ .form-group { margin-bottom: 15px; }
43
+ .form-group label { display: block; font-size: 12px; color: #888; margin-bottom: 5px; }
44
+ .form-group input, .form-group select { width: 100%; padding: 8px 10px; background: #0f3460; border: 1px solid #1a4a7a; border-radius: 4px; color: #fff; font-size: 13px; }
45
+ .form-group input:focus, .form-group select:focus { outline: none; border-color: #e94560; }
46
+ .checkbox-group { display: flex; align-items: center; gap: 8px; }
47
+ .checkbox-group input[type="checkbox"] { width: auto; }
48
+ .transit-time-inputs { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
49
+ .transit-time-inputs input { text-align: center; }
50
+ .transit-time-labels { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; font-size: 10px; color: #666; text-align: center; }
51
+ .modal-overlay { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.7); z-index: 1000; align-items: center; justify-content: center; }
52
+ .modal-overlay.active { display: flex; }
53
+ .modal { background: #16213e; border-radius: 8px; padding: 25px; max-width: 500px; width: 90%; max-height: 80vh; overflow-y: auto; }
54
+ .modal h2 { margin-bottom: 20px; }
55
+ .modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; }
56
+ .upload-zone { border: 2px dashed #0f3460; border-radius: 8px; padding: 40px; text-align: center; cursor: pointer; transition: border-color 0.2s, background 0.2s; }
57
+ .upload-zone:hover { border-color: #e94560; background: rgba(233, 69, 96, 0.1); }
58
+ .upload-zone input { display: none; }
59
+ .status-bar { background: #0f3460; padding: 8px 20px; font-size: 12px; color: #888; display: flex; justify-content: space-between; }
60
+ .status-indicator { display: flex; align-items: center; gap: 6px; }
61
+ .status-dot { width: 8px; height: 8px; border-radius: 50%; background: #4caf50; }
62
+ .status-dot.warning { background: #ff9800; }
63
+ .status-dot.error { background: #f44336; }
64
+ </style>
65
+ </head>
66
+ <body>
67
+ <div class="container">
68
+ <div class="sidebar">
69
+ <div class="sidebar-header">
70
+ <h1>Spatial Awareness</h1>
71
+ <p>Topology Editor</p>
72
+ </div>
73
+ <div class="sidebar-content">
74
+ <div class="section">
75
+ <div class="section-title">
76
+ <span>Cameras</span>
77
+ <button class="btn btn-small" onclick="openAddCameraModal()">+ Add</button>
78
+ </div>
79
+ <div id="camera-list">
80
+ <div class="camera-item" style="color: #666; text-align: center; cursor: default;">No cameras configured</div>
81
+ </div>
82
+ </div>
83
+ <div class="section">
84
+ <div class="section-title">
85
+ <span>Connections</span>
86
+ <button class="btn btn-small" onclick="openAddConnectionModal()">+ Add</button>
87
+ </div>
88
+ <div id="connection-list">
89
+ <div class="connection-item" style="color: #666; text-align: center; cursor: default;">No connections configured</div>
90
+ </div>
91
+ </div>
92
+ </div>
93
+ </div>
94
+ <div class="editor">
95
+ <div class="toolbar">
96
+ <div class="toolbar-group">
97
+ <button class="btn" onclick="uploadFloorPlan()">Upload Floor Plan</button>
98
+ </div>
99
+ <div class="toolbar-group">
100
+ <button class="btn" onclick="setTool('select')">Select</button>
101
+ <button class="btn" onclick="setTool('camera')">Place Camera</button>
102
+ <button class="btn" onclick="setTool('connect')">Connect</button>
103
+ </div>
104
+ <div class="toolbar-group">
105
+ <button class="btn btn-primary" onclick="saveTopology()">Save</button>
106
+ </div>
107
+ </div>
108
+ <div class="canvas-container">
109
+ <canvas id="floor-plan-canvas"></canvas>
110
+ <div class="canvas-placeholder" id="canvas-placeholder">
111
+ <h2>Floor Plan Editor</h2>
112
+ <p>Upload a floor plan image to get started</p>
113
+ <br>
114
+ <button class="btn btn-primary" onclick="uploadFloorPlan()">Upload Floor Plan</button>
115
+ </div>
116
+ </div>
117
+ <div class="status-bar">
118
+ <div class="status-indicator">
119
+ <div class="status-dot" id="status-dot"></div>
120
+ <span id="status-text">Ready</span>
121
+ </div>
122
+ <div>
123
+ <span id="camera-count">0</span> cameras | <span id="connection-count">0</span> connections
124
+ </div>
125
+ </div>
126
+ </div>
127
+ <div class="properties-panel" id="properties-panel">
128
+ <h3>Properties</h3>
129
+ <p style="color: #666; font-size: 13px;">Select a camera or connection to edit its properties.</p>
130
+ </div>
131
+ </div>
132
+
133
+ <div class="modal-overlay" id="add-camera-modal">
134
+ <div class="modal">
135
+ <h2>Add Camera</h2>
136
+ <div class="form-group">
137
+ <label>Camera Device</label>
138
+ <select id="camera-device-select"><option value="">Loading cameras...</option></select>
139
+ </div>
140
+ <div class="form-group">
141
+ <label>Display Name</label>
142
+ <input type="text" id="camera-name-input" placeholder="e.g., Front Door Camera">
143
+ </div>
144
+ <div class="form-group">
145
+ <label class="checkbox-group">
146
+ <input type="checkbox" id="camera-entry-checkbox">
147
+ Entry Point (objects can enter property here)
148
+ </label>
149
+ </div>
150
+ <div class="form-group">
151
+ <label class="checkbox-group">
152
+ <input type="checkbox" id="camera-exit-checkbox">
153
+ Exit Point (objects can exit property here)
154
+ </label>
155
+ </div>
156
+ <div class="modal-actions">
157
+ <button class="btn" onclick="closeModal('add-camera-modal')">Cancel</button>
158
+ <button class="btn btn-primary" onclick="addCamera()">Add Camera</button>
159
+ </div>
160
+ </div>
161
+ </div>
162
+
163
+ <div class="modal-overlay" id="add-connection-modal">
164
+ <div class="modal">
165
+ <h2>Add Connection</h2>
166
+ <div class="form-group">
167
+ <label>Connection Name</label>
168
+ <input type="text" id="connection-name-input" placeholder="e.g., Driveway to Front Door">
169
+ </div>
170
+ <div class="form-group">
171
+ <label>From Camera</label>
172
+ <select id="connection-from-select"></select>
173
+ </div>
174
+ <div class="form-group">
175
+ <label>To Camera</label>
176
+ <select id="connection-to-select"></select>
177
+ </div>
178
+ <div class="form-group">
179
+ <label>Transit Time (seconds)</label>
180
+ <div class="transit-time-inputs">
181
+ <input type="number" id="transit-min" placeholder="Min" value="3">
182
+ <input type="number" id="transit-typical" placeholder="Typical" value="10">
183
+ <input type="number" id="transit-max" placeholder="Max" value="30">
184
+ </div>
185
+ <div class="transit-time-labels">
186
+ <span>Minimum</span>
187
+ <span>Typical</span>
188
+ <span>Maximum</span>
189
+ </div>
190
+ </div>
191
+ <div class="form-group">
192
+ <label class="checkbox-group">
193
+ <input type="checkbox" id="connection-bidirectional" checked>
194
+ Bidirectional (works both ways)
195
+ </label>
196
+ </div>
197
+ <div class="modal-actions">
198
+ <button class="btn" onclick="closeModal('add-connection-modal')">Cancel</button>
199
+ <button class="btn btn-primary" onclick="addConnection()">Add Connection</button>
200
+ </div>
201
+ </div>
202
+ </div>
203
+
204
+ <div class="modal-overlay" id="upload-modal">
205
+ <div class="modal">
206
+ <h2>Upload Floor Plan</h2>
207
+ <div class="upload-zone" onclick="document.getElementById('floor-plan-input').click()">
208
+ <p>Click to select an image<br><small>PNG, JPG, or SVG</small></p>
209
+ <input type="file" id="floor-plan-input" accept="image/*" onchange="handleFloorPlanUpload(event)">
210
+ </div>
211
+ <div class="modal-actions">
212
+ <button class="btn" onclick="closeModal('upload-modal')">Cancel</button>
213
+ </div>
214
+ </div>
215
+ </div>
216
+
217
+ <script>
218
+ let topology = { version: '1.0', cameras: [], connections: [], globalZones: [], floorPlan: null };
219
+ let selectedItem = null;
220
+ let currentTool = 'select';
221
+ let floorPlanImage = null;
222
+ let availableCameras = [];
223
+ const canvas = document.getElementById('floor-plan-canvas');
224
+ const ctx = canvas.getContext('2d');
225
+
226
+ async function init() {
227
+ await loadTopology();
228
+ await loadAvailableCameras();
229
+ resizeCanvas();
230
+ render();
231
+ updateUI();
232
+ }
233
+
234
+ async function loadTopology() {
235
+ try {
236
+ const response = await fetch('api/topology');
237
+ if (response.ok) {
238
+ topology = await response.json();
239
+ if (topology.floorPlan?.imageData) {
240
+ await loadFloorPlanImage(topology.floorPlan.imageData);
241
+ }
242
+ }
243
+ } catch (e) { console.error('Failed to load topology:', e); }
244
+ }
245
+
246
+ async function loadAvailableCameras() {
247
+ availableCameras = topology.cameras.map(c => ({ id: c.deviceId, name: c.name }));
248
+ updateCameraSelects();
249
+ }
250
+
251
+ async function saveTopology() {
252
+ try {
253
+ setStatus('Saving...', 'warning');
254
+ const response = await fetch('api/topology', {
255
+ method: 'PUT',
256
+ headers: { 'Content-Type': 'application/json' },
257
+ body: JSON.stringify(topology)
258
+ });
259
+ if (response.ok) { setStatus('Saved successfully', 'success'); }
260
+ else { setStatus('Failed to save', 'error'); }
261
+ } catch (e) { console.error('Failed to save topology:', e); setStatus('Failed to save', 'error'); }
262
+ }
263
+
264
+ function resizeCanvas() {
265
+ const container = canvas.parentElement;
266
+ canvas.width = container.clientWidth;
267
+ canvas.height = container.clientHeight;
268
+ }
269
+
270
+ function render() {
271
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
272
+ if (floorPlanImage) {
273
+ document.getElementById('canvas-placeholder').style.display = 'none';
274
+ const scale = Math.min(canvas.width / floorPlanImage.width, canvas.height / floorPlanImage.height) * 0.9;
275
+ const x = (canvas.width - floorPlanImage.width * scale) / 2;
276
+ const y = (canvas.height - floorPlanImage.height * scale) / 2;
277
+ ctx.drawImage(floorPlanImage, x, y, floorPlanImage.width * scale, floorPlanImage.height * scale);
278
+ } else {
279
+ document.getElementById('canvas-placeholder').style.display = 'block';
280
+ }
281
+ for (const conn of topology.connections) {
282
+ const fromCam = topology.cameras.find(c => c.deviceId === conn.fromCameraId);
283
+ const toCam = topology.cameras.find(c => c.deviceId === conn.toCameraId);
284
+ if (fromCam?.floorPlanPosition && toCam?.floorPlanPosition) {
285
+ drawConnection(fromCam.floorPlanPosition, toCam.floorPlanPosition, conn);
286
+ }
287
+ }
288
+ for (const camera of topology.cameras) {
289
+ if (camera.floorPlanPosition) { drawCamera(camera); }
290
+ }
291
+ }
292
+
293
+ function drawCamera(camera) {
294
+ const pos = camera.floorPlanPosition;
295
+ const isSelected = selectedItem?.type === 'camera' && selectedItem?.id === camera.deviceId;
296
+ ctx.beginPath();
297
+ ctx.arc(pos.x, pos.y, 20, 0, Math.PI * 2);
298
+ ctx.fillStyle = isSelected ? '#e94560' : '#0f3460';
299
+ ctx.fill();
300
+ ctx.strokeStyle = '#fff';
301
+ ctx.lineWidth = 2;
302
+ ctx.stroke();
303
+ ctx.fillStyle = '#fff';
304
+ ctx.font = '12px sans-serif';
305
+ ctx.textAlign = 'center';
306
+ ctx.textBaseline = 'middle';
307
+ ctx.fillText('CAM', pos.x, pos.y);
308
+ ctx.fillText(camera.name, pos.x, pos.y + 35);
309
+ }
310
+
311
+ function drawConnection(from, to, conn) {
312
+ const isSelected = selectedItem?.type === 'connection' && selectedItem?.id === conn.id;
313
+ ctx.beginPath();
314
+ ctx.moveTo(from.x, from.y);
315
+ ctx.lineTo(to.x, to.y);
316
+ ctx.strokeStyle = isSelected ? '#e94560' : '#4caf50';
317
+ ctx.lineWidth = isSelected ? 4 : 2;
318
+ ctx.stroke();
319
+ if (!conn.bidirectional) {
320
+ const angle = Math.atan2(to.y - from.y, to.x - from.x);
321
+ const midX = (from.x + to.x) / 2;
322
+ const midY = (from.y + to.y) / 2;
323
+ ctx.beginPath();
324
+ ctx.moveTo(midX, midY);
325
+ ctx.lineTo(midX - 10 * Math.cos(angle - 0.5), midY - 10 * Math.sin(angle - 0.5));
326
+ ctx.lineTo(midX - 10 * Math.cos(angle + 0.5), midY - 10 * Math.sin(angle + 0.5));
327
+ ctx.closePath();
328
+ ctx.fillStyle = isSelected ? '#e94560' : '#4caf50';
329
+ ctx.fill();
330
+ }
331
+ }
332
+
333
+ function uploadFloorPlan() { document.getElementById('upload-modal').classList.add('active'); }
334
+
335
+ async function handleFloorPlanUpload(event) {
336
+ const file = event.target.files[0];
337
+ if (!file) return;
338
+ const reader = new FileReader();
339
+ reader.onload = async (e) => {
340
+ const imageData = e.target.result;
341
+ await loadFloorPlanImage(imageData);
342
+ topology.floorPlan = { imageData, width: floorPlanImage.width, height: floorPlanImage.height };
343
+ closeModal('upload-modal');
344
+ render();
345
+ };
346
+ reader.readAsDataURL(file);
347
+ }
348
+
349
+ function loadFloorPlanImage(imageData) {
350
+ return new Promise((resolve) => {
351
+ floorPlanImage = new Image();
352
+ floorPlanImage.onload = resolve;
353
+ floorPlanImage.src = imageData;
354
+ });
355
+ }
356
+
357
+ function openAddCameraModal() { document.getElementById('add-camera-modal').classList.add('active'); }
358
+
359
+ function addCamera() {
360
+ const deviceId = document.getElementById('camera-device-select').value;
361
+ const name = document.getElementById('camera-name-input').value || 'New Camera';
362
+ const isEntry = document.getElementById('camera-entry-checkbox').checked;
363
+ const isExit = document.getElementById('camera-exit-checkbox').checked;
364
+ const camera = {
365
+ deviceId: deviceId || 'camera-' + Date.now(),
366
+ nativeId: 'cam-' + Date.now(),
367
+ name,
368
+ isEntryPoint: isEntry,
369
+ isExitPoint: isExit,
370
+ trackClasses: ['person', 'car', 'animal'],
371
+ floorPlanPosition: { x: canvas.width / 2 + Math.random() * 100 - 50, y: canvas.height / 2 + Math.random() * 100 - 50 }
372
+ };
373
+ topology.cameras.push(camera);
374
+ closeModal('add-camera-modal');
375
+ updateUI();
376
+ render();
377
+ }
378
+
379
+ function openAddConnectionModal() {
380
+ if (topology.cameras.length < 2) { alert('Add at least 2 cameras before creating connections'); return; }
381
+ updateCameraSelects();
382
+ document.getElementById('add-connection-modal').classList.add('active');
383
+ }
384
+
385
+ function updateCameraSelects() {
386
+ const options = topology.cameras.map(c => '<option value="' + c.deviceId + '">' + c.name + '</option>').join('');
387
+ document.getElementById('connection-from-select').innerHTML = options;
388
+ document.getElementById('connection-to-select').innerHTML = options;
389
+ }
390
+
391
+ function addConnection() {
392
+ const name = document.getElementById('connection-name-input').value;
393
+ const fromId = document.getElementById('connection-from-select').value;
394
+ const toId = document.getElementById('connection-to-select').value;
395
+ const minTransit = parseInt(document.getElementById('transit-min').value) * 1000;
396
+ const typicalTransit = parseInt(document.getElementById('transit-typical').value) * 1000;
397
+ const maxTransit = parseInt(document.getElementById('transit-max').value) * 1000;
398
+ const bidirectional = document.getElementById('connection-bidirectional').checked;
399
+ if (fromId === toId) { alert('Please select different cameras'); return; }
400
+ const connection = {
401
+ id: 'conn-' + Date.now(),
402
+ fromCameraId: fromId,
403
+ toCameraId: toId,
404
+ name: name || fromId + ' to ' + toId,
405
+ exitZone: [],
406
+ entryZone: [],
407
+ transitTime: { min: minTransit, typical: typicalTransit, max: maxTransit },
408
+ bidirectional
409
+ };
410
+ topology.connections.push(connection);
411
+ closeModal('add-connection-modal');
412
+ updateUI();
413
+ render();
414
+ }
415
+
416
+ function updateUI() {
417
+ const cameraList = document.getElementById('camera-list');
418
+ if (topology.cameras.length === 0) {
419
+ cameraList.innerHTML = '<div class="camera-item" style="color: #666; text-align: center; cursor: default;">No cameras configured</div>';
420
+ } else {
421
+ cameraList.innerHTML = topology.cameras.map(c => '<div class="camera-item ' + (selectedItem?.type === 'camera' && selectedItem?.id === c.deviceId ? 'selected' : '') + '" onclick="selectCamera(\\'' + c.deviceId + '\\')"><div class="camera-name">CAM ' + c.name + '</div><div class="camera-info">' + (c.isEntryPoint ? 'Entry ' : '') + (c.isExitPoint ? 'Exit' : '') + '</div></div>').join('');
422
+ }
423
+ const connectionList = document.getElementById('connection-list');
424
+ if (topology.connections.length === 0) {
425
+ connectionList.innerHTML = '<div class="connection-item" style="color: #666; text-align: center; cursor: default;">No connections configured</div>';
426
+ } else {
427
+ connectionList.innerHTML = topology.connections.map(c => '<div class="connection-item ' + (selectedItem?.type === 'connection' && selectedItem?.id === c.id ? 'selected' : '') + '" onclick="selectConnection(\\'' + c.id + '\\')"><div class="camera-name">' + c.name + '</div><div class="camera-info">' + (c.transitTime.typical / 1000) + 's typical ' + (c.bidirectional ? '<->' : '->') + '</div></div>').join('');
428
+ }
429
+ document.getElementById('camera-count').textContent = topology.cameras.length;
430
+ document.getElementById('connection-count').textContent = topology.connections.length;
431
+ }
432
+
433
+ function selectCamera(deviceId) {
434
+ selectedItem = { type: 'camera', id: deviceId };
435
+ const camera = topology.cameras.find(c => c.deviceId === deviceId);
436
+ showCameraProperties(camera);
437
+ updateUI();
438
+ render();
439
+ }
440
+
441
+ function selectConnection(connId) {
442
+ selectedItem = { type: 'connection', id: connId };
443
+ const connection = topology.connections.find(c => c.id === connId);
444
+ showConnectionProperties(connection);
445
+ updateUI();
446
+ render();
447
+ }
448
+
449
+ function showCameraProperties(camera) {
450
+ const panel = document.getElementById('properties-panel');
451
+ panel.innerHTML = '<h3>Camera Properties</h3><div class="form-group"><label>Name</label><input type="text" value="' + camera.name + '" onchange="updateCameraName(\\'' + camera.deviceId + '\\', this.value)"></div><div class="form-group"><label class="checkbox-group"><input type="checkbox" ' + (camera.isEntryPoint ? 'checked' : '') + ' onchange="updateCameraEntry(\\'' + camera.deviceId + '\\', this.checked)">Entry Point</label></div><div class="form-group"><label class="checkbox-group"><input type="checkbox" ' + (camera.isExitPoint ? 'checked' : '') + ' onchange="updateCameraExit(\\'' + camera.deviceId + '\\', this.checked)">Exit Point</label></div><div class="form-group"><button class="btn" style="width: 100%; background: #f44336;" onclick="deleteCamera(\\'' + camera.deviceId + '\\')">Delete Camera</button></div>';
452
+ }
453
+
454
+ function showConnectionProperties(connection) {
455
+ const panel = document.getElementById('properties-panel');
456
+ panel.innerHTML = '<h3>Connection Properties</h3><div class="form-group"><label>Name</label><input type="text" value="' + connection.name + '" onchange="updateConnectionName(\\'' + connection.id + '\\', this.value)"></div><div class="form-group"><label>Transit Time (seconds)</label><div class="transit-time-inputs"><input type="number" value="' + (connection.transitTime.min / 1000) + '" onchange="updateTransitTime(\\'' + connection.id + '\\', \\'min\\', this.value)"><input type="number" value="' + (connection.transitTime.typical / 1000) + '" onchange="updateTransitTime(\\'' + connection.id + '\\', \\'typical\\', this.value)"><input type="number" value="' + (connection.transitTime.max / 1000) + '" onchange="updateTransitTime(\\'' + connection.id + '\\', \\'max\\', this.value)"></div><div class="transit-time-labels"><span>Min</span><span>Typical</span><span>Max</span></div></div><div class="form-group"><label class="checkbox-group"><input type="checkbox" ' + (connection.bidirectional ? 'checked' : '') + ' onchange="updateConnectionBidi(\\'' + connection.id + '\\', this.checked)">Bidirectional</label></div><div class="form-group"><button class="btn" style="width: 100%; background: #f44336;" onclick="deleteConnection(\\'' + connection.id + '\\')">Delete Connection</button></div>';
457
+ }
458
+
459
+ function updateCameraName(id, value) { const camera = topology.cameras.find(c => c.deviceId === id); if (camera) camera.name = value; updateUI(); }
460
+ function updateCameraEntry(id, value) { const camera = topology.cameras.find(c => c.deviceId === id); if (camera) camera.isEntryPoint = value; }
461
+ function updateCameraExit(id, value) { const camera = topology.cameras.find(c => c.deviceId === id); if (camera) camera.isExitPoint = value; }
462
+ function updateConnectionName(id, value) { const conn = topology.connections.find(c => c.id === id); if (conn) conn.name = value; updateUI(); }
463
+ function updateTransitTime(id, field, value) { const conn = topology.connections.find(c => c.id === id); if (conn) conn.transitTime[field] = parseInt(value) * 1000; }
464
+ function updateConnectionBidi(id, value) { const conn = topology.connections.find(c => c.id === id); if (conn) conn.bidirectional = value; render(); }
465
+ 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(); }
466
+ 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(); }
467
+ function setTool(tool) { currentTool = tool; setStatus('Tool: ' + tool, 'success'); }
468
+ function closeModal(id) { document.getElementById(id).classList.remove('active'); }
469
+ 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'); }
470
+
471
+ canvas.addEventListener('mousedown', (e) => {
472
+ const rect = canvas.getBoundingClientRect();
473
+ const x = e.clientX - rect.left;
474
+ const y = e.clientY - rect.top;
475
+ if (currentTool === 'select') {
476
+ for (const camera of topology.cameras) {
477
+ if (camera.floorPlanPosition) {
478
+ const dist = Math.hypot(x - camera.floorPlanPosition.x, y - camera.floorPlanPosition.y);
479
+ if (dist < 25) { selectCamera(camera.deviceId); return; }
480
+ }
481
+ }
482
+ }
483
+ });
484
+
485
+ let dragging = null;
486
+ canvas.addEventListener('mousedown', (e) => {
487
+ if (currentTool !== 'select') return;
488
+ const rect = canvas.getBoundingClientRect();
489
+ const x = e.clientX - rect.left;
490
+ const y = e.clientY - rect.top;
491
+ for (const camera of topology.cameras) {
492
+ if (camera.floorPlanPosition) {
493
+ const dist = Math.hypot(x - camera.floorPlanPosition.x, y - camera.floorPlanPosition.y);
494
+ if (dist < 25) { dragging = camera; return; }
495
+ }
496
+ }
497
+ });
498
+
499
+ canvas.addEventListener('mousemove', (e) => {
500
+ if (!dragging) return;
501
+ const rect = canvas.getBoundingClientRect();
502
+ dragging.floorPlanPosition.x = e.clientX - rect.left;
503
+ dragging.floorPlanPosition.y = e.clientY - rect.top;
504
+ render();
505
+ });
506
+
507
+ canvas.addEventListener('mouseup', () => { dragging = null; });
508
+ window.addEventListener('resize', () => { resizeCanvas(); render(); });
509
+ init();
510
+ </script>
511
+ </body>
512
+ </html>`;