-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathindex.html
More file actions
236 lines (220 loc) · 13.5 KB
/
Copy pathindex.html
File metadata and controls
236 lines (220 loc) · 13.5 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="color-scheme" content="dark light">
<title>OpenMV Studio</title>
<link rel="stylesheet" href="/src/style.css">
</head>
<body>
<div class="ide-layout">
<!-- SIDEBAR -->
<div class="sidebar">
<button class="sidebar-btn" data-panel="examples" title="Examples">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M4 19.5A2.5 2.5 0 016.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 014 19.5v-15A2.5 2.5 0 016.5 2z"/></svg>
<span>Examples</span>
</button>
<button class="sidebar-btn" data-panel="docs" title="Docs">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M2 3h6a4 4 0 014 4v14a3 3 0 00-3-3H2z"/><path d="M22 3h-6a4 4 0 00-4 4v14a3 3 0 013-3h7z"/></svg>
<span>Docs</span>
</button>
<button class="sidebar-btn" data-panel="pinout" title="Pinout">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M12 2v8"/><circle cx="12" cy="14" r="4"/><path d="M4.93 4.93l4.24 4.24"/><path d="M14.83 9.17l4.24-4.24"/><path d="M12 18v4"/></svg>
<span>Pinout</span>
</button>
<button class="sidebar-btn" data-panel="romfs" title="ROMFS Editor">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><ellipse cx="12" cy="5" rx="8" ry="2.5"/><path d="M4 5v6c0 1.4 3.6 2.5 8 2.5s8-1.1 8-2.5V5"/><path d="M4 11v6c0 1.4 3.6 2.5 8 2.5s8-1.1 8-2.5v-6"/></svg>
<span>ROMFS</span>
</button>
<button class="sidebar-btn" data-panel="ml" title="ML">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><circle cx="5" cy="5" r="2"/><circle cx="5" cy="12" r="2"/><circle cx="5" cy="19" r="2"/><circle cx="19" cy="8" r="2"/><circle cx="19" cy="16" r="2"/><line x1="7" y1="5" x2="17" y2="8"/><line x1="7" y1="5" x2="17" y2="16"/><line x1="7" y1="12" x2="17" y2="8"/><line x1="7" y1="12" x2="17" y2="16"/><line x1="7" y1="19" x2="17" y2="8"/><line x1="7" y1="19" x2="17" y2="16"/></svg>
<span>ML</span>
</button>
<div class="sidebar-spacer"></div>
<button class="sidebar-btn" id="btn-connect" title="Connect">
<svg class="icon-connect" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M18.36 5.64a9 9 0 11-12.73 0"/><line x1="12" y1="2" x2="12" y2="12"/></svg>
<span>Connect</span>
</button>
<button class="sidebar-btn disabled" id="btn-run-stop" title="Run (Cmd+R)">
<svg class="icon-play" width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><polygon points="5 3 19 12 5 21 5 3"/></svg>
<svg class="icon-stop" width="18" height="18" viewBox="0 0 24 24" fill="currentColor" style="display:none"><rect x="4" y="4" width="16" height="16" rx="2"/></svg>
<span class="run-stop-label">Run</span>
</button>
<button class="sidebar-btn" id="btn-settings" title="Settings">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 010 2.83 2 2 0 01-2.83 0l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-4 0v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83-2.83l.06-.06A1.65 1.65 0 004.68 15a1.65 1.65 0 00-1.51-1H3a2 2 0 010-4h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 012.83-2.83l.06.06A1.65 1.65 0 009 4.68a1.65 1.65 0 001-1.51V3a2 2 0 014 0v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 2.83l-.06.06A1.65 1.65 0 0019.4 9a1.65 1.65 0 001.51 1H21a2 2 0 010 4h-.09a1.65 1.65 0 00-1.51 1z"/></svg>
<span>Settings</span>
</button>
</div>
<!-- SIDE PANEL (Files/Examples/Docs/Settings) -->
<div class="side-panel" id="side-panel">
<!-- Examples panel (populated dynamically) -->
<div class="side-panel-content" data-panel="examples" style="display:none">
<div class="side-panel-header">Examples</div>
<div class="file-tree" id="examples-tree">
<div style="padding:8px;color:var(--text-muted)">Connect to load examples</div>
</div>
</div>
<!-- Docs panel -->
<div class="side-panel-content" data-panel="docs" style="display:none">
<div class="side-panel-header">Documentation</div>
<div id="docs-tree" class="file-tree">
<div style="padding:8px;color:var(--text-tertiary)">Loading...</div>
</div>
</div>
<!-- Settings is now a dialog, not a side panel -->
</div>
<!-- MAIN AREA -->
<div class="main-area">
<!-- Welcome screen (replaces tab bar + editor when no files open) -->
<div class="welcome-screen" id="welcome-screen" style="display:none"></div>
<!-- Tab bar + Editor + Terminal -->
<div class="tab-bar-container" id="tab-bar-container">
<button class="tab-scroll-btn left" id="tab-scroll-left"><</button>
<div class="tab-bar" id="tab-bar"></div>
<button class="tab-scroll-btn right" id="tab-scroll-right">></button>
</div>
<div class="editor-area">
<div id="monaco-editor"></div>
</div>
<div class="resize-handle-v" id="resize-v"></div>
<div class="terminal-panel">
<div class="terminal-header">
<div class="terminal-tabs">
<div class="terminal-tab active">Console</div>
</div>
<div class="terminal-actions">
<button class="term-btn" title="Show IDE log" id="btn-toggle-log">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M8 2l1.88 1.88M14.12 3.88L16 2M9 7.13v-1a3.003 3.003 0 116 0v1"/><path d="M12 20c-3.3 0-6-2.7-6-6v-3a6 6 0 0112 0v3c0 3.3-2.7 6-6 6z"/><path d="M12 20v2M6 13H2M22 13h-4M6 17H3.5M20.5 17H18M6 9H4M20 9h-2"/></svg>
</button>
<button class="term-btn" title="Lock console/tools split" id="btn-lock-split">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0110 0v4"/></svg>
</button>
<button class="term-btn" title="Copy" id="btn-copy-term">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><rect x="9" y="9" width="11" height="11" rx="2"/><path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"/></svg>
</button>
<button class="term-btn" title="Clear" id="btn-clear-term">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M3 6h18M8 6V4a1 1 0 011-1h6a1 1 0 011 1v2M19 6l-1 14a2 2 0 01-2 2H8a2 2 0 01-2-2L5 6"/></svg>
</button>
</div>
</div>
<div class="terminal-content" id="terminal-output">
</div>
</div>
</div>
<!-- RESIZE HANDLE: horizontal (between main and right panel) -->
<div class="resize-handle-h" id="resize-h"></div>
<!-- RIGHT PANEL -->
<div class="right-panel">
<div class="fb-section">
<div class="fb-header">
<div class="fb-header-strip">
<div class="fb-overlay-badges">
<span class="info-badge badge-res" id="fb-resolution"></span>
<span class="info-badge badge-format" id="fb-format"></span>
<span class="info-badge badge-fps" id="fb-fps"></span>
</div>
<div style="flex:1"></div>
<select id="fb-source" disabled><option value="">No sensor</option></select>
<button class="fb-btn active" id="btn-fb-disable" title="Disable streaming">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
</button>
<button class="fb-btn active" id="btn-fb-jpeg" title="JPEG mode">
<svg width="18" height="14" viewBox="0 0 28 24" fill="none" stroke="currentColor" stroke-width="1.8"><text x="1" y="17" font-size="14" font-weight="bold" font-family="sans-serif" fill="currentColor" stroke="none">JPG</text></svg>
</button>
</div>
</div>
<div class="fb-viewport">
<div class="no-image">
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="2" y="2" width="20" height="20" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>
<span>No image data</span>
</div>
<canvas id="framebuffer-canvas" style="display:none;"></canvas>
</div>
</div>
<!-- Resize handle between FB and tools panel -->
<div class="resize-handle-v" id="resize-fb-hist"></div>
<!-- Tools panel (tabbed) -->
<div class="tools-panel">
<div class="tools-tabs">
<button class="tools-tab active" data-tool="histogram">Histogram</button>
<button class="tools-tab" data-tool="info">Board Info</button>
<button class="tools-tab" data-tool="memory">Memory</button>
<button class="tools-tab" data-tool="channels">Channels</button>
<button class="tools-tab" data-tool="protocol">Statistics</button>
</div>
<!-- Histogram tab -->
<div class="tools-body" data-tool="histogram">
<canvas id="hist-canvas"></canvas>
<div class="hist-stats">
<div class="hist-stat"><span class="stat-label">Mean</span><span class="stat-val" id="hist-mean">--</span></div>
<div class="hist-stat"><span class="stat-label">Median</span><span class="stat-val" id="hist-median">--</span></div>
<div class="hist-stat"><span class="stat-label">StDev</span><span class="stat-val" id="hist-stdev">--</span></div>
<div class="hist-stat"><span class="stat-label">Min</span><span class="stat-val" id="hist-min">--</span></div>
<div class="hist-stat"><span class="stat-label">Max</span><span class="stat-val" id="hist-max">--</span></div>
<div class="hist-stat"><span class="stat-label">Mode</span><span class="stat-val" id="hist-mode">--</span></div>
</div>
</div>
<!-- Info tab -->
<div class="tools-body" data-tool="info" style="display:none">
<div class="info-grid" id="info-content">
<div style="padding:8px;color:var(--text-muted)">Connect to view board info</div>
</div>
</div>
<!-- Memory tab -->
<div class="tools-body" data-tool="memory" style="display:none">
<div class="mem-poll-control">
<label class="mem-poll-label">Poll interval</label>
<input type="range" id="mem-poll-slider" min="100" max="1000" step="100" value="500" class="mem-poll-slider">
<span class="mem-poll-value" id="mem-poll-value">500 ms</span>
</div>
<div id="memory-content" class="memory-panel">
<div style="padding:8px;color:var(--text-muted)">Connect to view memory</div>
</div>
</div>
<!-- Protocol tab -->
<div class="tools-body" data-tool="protocol" style="display:none">
<div class="proto-poll-control">
<label class="proto-poll-label">Poll interval</label>
<input type="range" id="proto-poll-slider" min="100" max="1000" step="100" value="500" class="proto-poll-slider">
<span class="proto-poll-value" id="proto-poll-value">500 ms</span>
</div>
<div id="proto-content" class="proto-panel">
<div style="padding:8px;color:var(--text-muted)">Connect to view protocol stats</div>
</div>
</div>
<!-- Channels tab -->
<div class="tools-body" data-tool="channels" style="display:none">
<div class="ch-poll-control">
<label class="ch-poll-label">Poll interval</label>
<input type="range" id="ch-poll-slider" min="100" max="1000" step="100" value="500" class="ch-poll-slider">
<span class="ch-poll-value" id="ch-poll-value">500 ms</span>
</div>
<div id="channels-content" class="channels-panel">
<div style="padding:8px;color:var(--text-muted)">Connect to view channels</div>
</div>
</div>
</div>
</div>
<!-- STATUS BAR -->
<div class="statusbar">
<div class="status-left">
<div class="status-item">
<span class="status-dot disconnected"></span>
<span class="val" id="status-board">Disconnected</span>
</div>
</div>
<div class="status-right">
<div class="status-item status-updates" id="status-updates" style="display:none" title="Resource updates available">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
<span>Updates</span>
</div>
<div class="status-item">
<span id="status-cursor">Ln 1, Col 1</span>
</div>
</div>
</div>
</div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>