@blueharford/scrypted-spatial-awareness 0.1.0 → 0.1.2
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.
- package/dist/main.nodejs.js +1 -1
- package/dist/main.nodejs.js.map +1 -1
- package/dist/plugin.zip +0 -0
- package/package.json +1 -1
- package/src/main.ts +9 -55
- package/src/ui/editor-html.ts +512 -0
package/dist/plugin.zip
CHANGED
|
Binary file
|
package/package.json
CHANGED
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
|
|
28
|
-
import * as path from 'path';
|
|
27
|
+
import { EDITOR_HTML } from './ui/editor-html';
|
|
29
28
|
|
|
30
29
|
const { deviceManager, systemManager } = sdk;
|
|
31
30
|
|
|
@@ -336,13 +335,13 @@ export class SpatialAwarenessPlugin extends ScryptedDeviceBase
|
|
|
336
335
|
async getSettings(): Promise<Setting[]> {
|
|
337
336
|
const settings = await this.storageSettings.getSettings();
|
|
338
337
|
|
|
339
|
-
//
|
|
338
|
+
// Embed topology editor as iframe
|
|
340
339
|
settings.push({
|
|
341
|
-
key: '
|
|
342
|
-
title: '
|
|
343
|
-
type: '
|
|
344
|
-
|
|
345
|
-
group: '
|
|
340
|
+
key: 'topologyEditor',
|
|
341
|
+
title: 'Topology Editor',
|
|
342
|
+
type: 'html' as any,
|
|
343
|
+
value: `<iframe src="ui/editor" style="width: 100%; height: 700px; border: none; border-radius: 8px;"></iframe>`,
|
|
344
|
+
group: 'Topology',
|
|
346
345
|
});
|
|
347
346
|
|
|
348
347
|
// Add status display
|
|
@@ -375,12 +374,6 @@ export class SpatialAwarenessPlugin extends ScryptedDeviceBase
|
|
|
375
374
|
}
|
|
376
375
|
|
|
377
376
|
async putSetting(key: string, value: SettingValue): Promise<void> {
|
|
378
|
-
if (key === 'openTopologyEditor') {
|
|
379
|
-
// The UI will handle opening the editor via HTTP
|
|
380
|
-
this.console.log('Topology editor requested - access via plugin HTTP endpoint');
|
|
381
|
-
return;
|
|
382
|
-
}
|
|
383
|
-
|
|
384
377
|
await this.storageSettings.putSetting(key, value);
|
|
385
378
|
|
|
386
379
|
// Handle setting changes that require engine restart
|
|
@@ -575,48 +568,9 @@ export class SpatialAwarenessPlugin extends ScryptedDeviceBase
|
|
|
575
568
|
}
|
|
576
569
|
|
|
577
570
|
private serveEditorUI(response: HttpResponse): void {
|
|
578
|
-
|
|
579
|
-
|
|
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);
|
|
571
|
+
response.send(EDITOR_HTML, {
|
|
572
|
+
headers: { 'Content-Type': 'text/html' },
|
|
612
573
|
});
|
|
613
|
-
</script>
|
|
614
|
-
</body>
|
|
615
|
-
</html>`;
|
|
616
|
-
response.send(html, {
|
|
617
|
-
headers: { 'Content-Type': 'text/html' },
|
|
618
|
-
});
|
|
619
|
-
}
|
|
620
574
|
}
|
|
621
575
|
|
|
622
576
|
private serveStaticFile(path: string, response: HttpResponse): void {
|
|
@@ -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>`;
|