webserial-core 2.0.0-dev.1 → 2.0.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.
@@ -0,0 +1,483 @@
1
+ <!doctype html>
2
+ <html lang="en" data-theme="dark">
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
+ <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
7
+ <title>Web Serial — webserial-core demo</title>
8
+ <style>
9
+ :root {
10
+ --accent: #22c55e;
11
+ --accent-dark: #16a34a;
12
+ --accent-glow: rgba(34, 197, 94, 0.12);
13
+ --accent-badge: #052e16;
14
+ }
15
+ </style>
16
+ <script
17
+ type="module"
18
+ crossorigin
19
+ src="/demos/assets/web-serial-CsBUUDvz.js"
20
+ ></script>
21
+ <link
22
+ rel="modulepreload"
23
+ crossorigin
24
+ href="/demos/assets/demo-shared-DnvFynUr.js"
25
+ />
26
+ <link
27
+ rel="stylesheet"
28
+ crossorigin
29
+ href="/demos/assets/demo-shared-DLFsukQx.css"
30
+ />
31
+ </head>
32
+ <body>
33
+ <!-- ── Topbar ──────────────────────────────────────────── -->
34
+ <header class="topbar">
35
+ <button class="icon-btn" id="menu-btn" title="Toggle sidebar">
36
+ <i data-lucide="menu"></i>
37
+ </button>
38
+ <a class="topbar-brand" href="/demos/web-serial.html">
39
+ <span class="brand-icon"><i data-lucide="zap"></i></span>
40
+ <span class="brand-name">webserial-core</span>
41
+ <span class="brand-ver">v2</span>
42
+ </a>
43
+ <span class="provider-pill">Web Serial</span>
44
+ <span class="flex-1"></span>
45
+
46
+ <nav class="topbar-nav">
47
+ <a class="nav-item active" href="/demos/web-serial.html"
48
+ ><i data-lucide="zap"></i><span class="nav-lbl"> Web Serial</span></a
49
+ >
50
+ <a class="nav-item" href="/demos/web-bluetooth.html"
51
+ ><i data-lucide="bluetooth"></i
52
+ ><span class="nav-lbl"> Bluetooth</span></a
53
+ >
54
+ <a class="nav-item" href="/demos/web-usb.html"
55
+ ><i data-lucide="usb"></i><span class="nav-lbl"> WebUSB</span></a
56
+ >
57
+ <a class="nav-item" href="/demos/websocket.html"
58
+ ><i data-lucide="globe"></i><span class="nav-lbl"> WebSocket</span></a
59
+ >
60
+ </nav>
61
+
62
+ <div class="topbar-actions">
63
+ <div class="status-pill">
64
+ <div class="status-dot" id="status-dot"></div>
65
+ <span id="status-text">Disconnected</span>
66
+ </div>
67
+ <button class="icon-btn" id="theme-btn" title="Toggle theme">🌙</button>
68
+ <button
69
+ class="icon-btn code-toggle"
70
+ id="code-toggle-btn"
71
+ title="Toggle code panel"
72
+ >
73
+ <i data-lucide="code-2"></i>
74
+ </button>
75
+ <button class="btn btn-connect" id="btn-connect">Connect</button>
76
+ <button class="btn btn-disconnect" id="btn-disconnect" disabled>
77
+ Disconnect
78
+ </button>
79
+ </div>
80
+ </header>
81
+
82
+ <!-- ── App layout ───────────────────────────────────────── -->
83
+ <div class="app-layout">
84
+ <!-- ── Sidebar ─────────────────────────────────────────── -->
85
+ <aside class="sidebar" id="sidebar">
86
+ <div class="sidebar-scroll">
87
+ <!-- Connection settings -->
88
+ <div class="sb-section">
89
+ <div class="sb-title">Connection</div>
90
+
91
+ <div class="field">
92
+ <label for="cfg-baud">Baud Rate</label>
93
+ <select id="cfg-baud">
94
+ <option>300</option>
95
+ <option>600</option>
96
+ <option>1200</option>
97
+ <option>2400</option>
98
+ <option>4800</option>
99
+ <option value="9600" selected>9600</option>
100
+ <option>14400</option>
101
+ <option>19200</option>
102
+ <option>38400</option>
103
+ <option>57600</option>
104
+ <option>115200</option>
105
+ <option>128000</option>
106
+ <option>230400</option>
107
+ <option>250000</option>
108
+ <option>500000</option>
109
+ <option>1000000</option>
110
+ <option>2000000</option>
111
+ </select>
112
+ </div>
113
+
114
+ <div class="field-row">
115
+ <div class="field">
116
+ <label for="cfg-databits">Data Bits</label>
117
+ <select id="cfg-databits">
118
+ <option value="7">7</option>
119
+ <option value="8" selected>8</option>
120
+ </select>
121
+ </div>
122
+ <div class="field">
123
+ <label for="cfg-stopbits">Stop Bits</label>
124
+ <select id="cfg-stopbits">
125
+ <option value="1" selected>1</option>
126
+ <option value="2">2</option>
127
+ </select>
128
+ </div>
129
+ </div>
130
+
131
+ <div class="field-row">
132
+ <div class="field">
133
+ <label for="cfg-parity">Parity</label>
134
+ <select id="cfg-parity">
135
+ <option value="none" selected>None</option>
136
+ <option value="even">Even</option>
137
+ <option value="odd">Odd</option>
138
+ </select>
139
+ </div>
140
+ <div class="field">
141
+ <label for="cfg-flow">Flow Control</label>
142
+ <select id="cfg-flow">
143
+ <option value="none" selected>None</option>
144
+ <option value="hardware">Hardware</option>
145
+ </select>
146
+ </div>
147
+ </div>
148
+
149
+ <div class="field-row">
150
+ <div class="field">
151
+ <label for="cfg-bufsize">Buffer Size</label>
152
+ <input
153
+ type="number"
154
+ id="cfg-bufsize"
155
+ value="255"
156
+ min="64"
157
+ max="65536"
158
+ />
159
+ </div>
160
+ <div class="field">
161
+ <label for="cfg-timeout">Cmd Timeout (ms)</label>
162
+ <input type="number" id="cfg-timeout" value="3000" min="0" />
163
+ </div>
164
+ </div>
165
+
166
+ <div class="field-row">
167
+ <div class="field">
168
+ <label for="cfg-handshake">Handshake (ms)</label>
169
+ <input type="number" id="cfg-handshake" value="2000" min="0" />
170
+ </div>
171
+ <div class="field">
172
+ <label for="cfg-reconnect-ms">Reconnect (ms)</label>
173
+ <input
174
+ type="number"
175
+ id="cfg-reconnect-ms"
176
+ value="1500"
177
+ min="500"
178
+ />
179
+ </div>
180
+ </div>
181
+
182
+ <div class="field-toggle">
183
+ <label for="cfg-autoreconnect">Auto Reconnect</label>
184
+ <label class="sw">
185
+ <input type="checkbox" id="cfg-autoreconnect" checked />
186
+ <span class="sw-knob"></span>
187
+ </label>
188
+ </div>
189
+
190
+ <div class="field-row">
191
+ <div class="field">
192
+ <label for="cfg-vendor">Vendor ID (hex)</label>
193
+ <input type="text" id="cfg-vendor" placeholder="e.g. 10c4" />
194
+ </div>
195
+ <div class="field">
196
+ <label for="cfg-product">Product ID (hex)</label>
197
+ <input type="text" id="cfg-product" placeholder="e.g. ea60" />
198
+ </div>
199
+ </div>
200
+ </div>
201
+
202
+ <!-- Message format -->
203
+ <div class="sb-section">
204
+ <div class="sb-title">Message Format</div>
205
+ <div class="field">
206
+ <label for="cfg-delim">Delimiter</label>
207
+ <input
208
+ type="text"
209
+ id="cfg-delim"
210
+ value="\n"
211
+ placeholder="\n \r\n | etc."
212
+ />
213
+ </div>
214
+ <div class="field-row">
215
+ <div class="field">
216
+ <label for="cfg-prepend">Prepend</label>
217
+ <input
218
+ type="text"
219
+ id="cfg-prepend"
220
+ value=""
221
+ placeholder="e.g. STX"
222
+ />
223
+ </div>
224
+ <div class="field">
225
+ <label for="cfg-append">Append</label>
226
+ <input
227
+ type="text"
228
+ id="cfg-append"
229
+ value="\n"
230
+ placeholder="e.g. \n"
231
+ />
232
+ </div>
233
+ </div>
234
+ </div>
235
+
236
+ <!-- Handshake -->
237
+ <div class="sb-section">
238
+ <div class="sb-title">Handshake on Connect</div>
239
+ <div class="notice" style="margin-bottom: 6px">
240
+ Sent automatically right after the port opens. Leave
241
+ <em>Command</em> empty to skip entirely.
242
+ </div>
243
+ <div class="field-row">
244
+ <div class="field">
245
+ <label for="cfg-hs-cmd">Command to send</label>
246
+ <input
247
+ type="text"
248
+ id="cfg-hs-cmd"
249
+ value=""
250
+ placeholder="e.g. PING\n or FF 01 A3"
251
+ />
252
+ </div>
253
+ <div class="field" style="flex: 0 0 62px">
254
+ <label for="cfg-hs-cmd-mode">Mode</label>
255
+ <select id="cfg-hs-cmd-mode">
256
+ <option value="text" selected>TXT</option>
257
+ <option value="hex">HEX</option>
258
+ </select>
259
+ </div>
260
+ </div>
261
+ <div class="field-row">
262
+ <div class="field">
263
+ <label for="cfg-hs-expect"
264
+ >Expected <small>(empty = no check)</small></label
265
+ >
266
+ <input
267
+ type="text"
268
+ id="cfg-hs-expect"
269
+ value=""
270
+ placeholder="e.g. PONG or OK"
271
+ />
272
+ </div>
273
+ <div class="field" style="flex: 0 0 62px">
274
+ <label for="cfg-hs-expect-mode">Mode</label>
275
+ <select id="cfg-hs-expect-mode">
276
+ <option value="text" selected>TXT</option>
277
+ <option value="hex">HEX</option>
278
+ </select>
279
+ </div>
280
+ </div>
281
+ </div>
282
+
283
+ <!-- Saved Commands -->
284
+ <div class="sb-section">
285
+ <div class="sb-title">Saved Commands</div>
286
+ <div class="notice" style="margin-bottom: 6px">
287
+ Pre-defined commands to send. Use <em>HEX</em> for raw bytes.
288
+ </div>
289
+ <div class="field-row">
290
+ <div class="field" style="flex: 0 0 72px">
291
+ <label for="cmd-name">Name</label>
292
+ <input type="text" id="cmd-name" placeholder="LED ON" />
293
+ </div>
294
+ <div class="field">
295
+ <label for="cmd-value">Command</label>
296
+ <input type="text" id="cmd-value" placeholder="LED_ON\n" />
297
+ </div>
298
+ <div class="field" style="flex: 0 0 62px">
299
+ <label for="cmd-mode">Mode</label>
300
+ <select id="cmd-mode">
301
+ <option value="text" selected>TXT</option>
302
+ <option value="hex">HEX</option>
303
+ </select>
304
+ </div>
305
+ </div>
306
+ <button
307
+ class="btn btn-ghost"
308
+ id="cmd-add"
309
+ style="width: 100%; margin-top: 3px"
310
+ >
311
+ <i data-lucide="plus"></i> Add Command
312
+ </button>
313
+ <div class="chip-list" id="cmd-list"></div>
314
+ </div>
315
+
316
+ <!-- Data Listeners -->
317
+ <div class="sb-section">
318
+ <div class="sb-title">Data Listeners</div>
319
+ <div class="notice" style="margin-bottom: 6px">
320
+ Patterns for <code>on('serial:data')</code> — skeleton code in
321
+ download.
322
+ </div>
323
+ <div class="field-row">
324
+ <div class="field" style="flex: 0 0 64px">
325
+ <label for="lst-name">Name</label>
326
+ <input type="text" id="lst-name" placeholder="Temp" />
327
+ </div>
328
+ <div class="field">
329
+ <label for="lst-pattern">Pattern</label>
330
+ <input type="text" id="lst-pattern" placeholder="TEMP:" />
331
+ </div>
332
+ <div class="field" style="flex: 0 0 62px">
333
+ <label for="lst-match">Match</label>
334
+ <select id="lst-match">
335
+ <option value="exact">exact</option>
336
+ <option value="contains" selected>has</option>
337
+ <option value="startsWith">starts</option>
338
+ <option value="hex">hex</option>
339
+ </select>
340
+ </div>
341
+ </div>
342
+ <button
343
+ class="btn btn-ghost"
344
+ id="lst-add"
345
+ style="width: 100%; margin-top: 3px"
346
+ >
347
+ <i data-lucide="plus"></i> Add Listener
348
+ </button>
349
+ <div class="chip-list" id="lst-list"></div>
350
+ </div>
351
+
352
+ <!-- Download -->
353
+ <div class="sb-section">
354
+ <div class="sb-title">Download Code</div>
355
+ <div class="field">
356
+ <label for="dl-name">Class / File name</label>
357
+ <input
358
+ type="text"
359
+ id="dl-name"
360
+ value="MySerialDevice"
361
+ placeholder="MySerialDevice"
362
+ />
363
+ </div>
364
+ <div class="dl-lang-row">
365
+ <label class="dl-opt"
366
+ ><input type="radio" name="dl-lang" value="ts" checked />
367
+ TypeScript</label
368
+ >
369
+ <label class="dl-opt"
370
+ ><input type="radio" name="dl-lang" value="js" />
371
+ JavaScript</label
372
+ >
373
+ </div>
374
+ <div class="dl-type-row">
375
+ <label class="dl-opt"
376
+ ><input type="radio" name="dl-type" value="file" checked />
377
+ Standalone file</label
378
+ >
379
+ <label class="dl-opt"
380
+ ><input type="radio" name="dl-type" value="project" /> Full
381
+ project (ZIP)</label
382
+ >
383
+ </div>
384
+ <div class="dl-btns">
385
+ <button class="btn btn-dl" id="dl-btn">
386
+ <i data-lucide="download"></i> Download
387
+ </button>
388
+ <button
389
+ class="btn btn-ghost"
390
+ id="cfg-export-btn"
391
+ title="Export configuration as JSON"
392
+ >
393
+ <i data-lucide="share"></i> Export config
394
+ </button>
395
+ <label
396
+ class="btn btn-ghost"
397
+ title="Import configuration from JSON"
398
+ >
399
+ <i data-lucide="upload"></i> Import config
400
+ <input
401
+ type="file"
402
+ id="cfg-import-input"
403
+ accept=".json"
404
+ style="display: none"
405
+ />
406
+ </label>
407
+ </div>
408
+ </div>
409
+ </div>
410
+ <!-- /sidebar-scroll -->
411
+ </aside>
412
+ <div class="sidebar-resize-handle" id="sidebar-resize-handle"></div>
413
+
414
+ <!-- ── Chat console ─────────────────────────────────── -->
415
+ <main class="console-area">
416
+ <div class="console-hdr">
417
+ <div class="status-pill">
418
+ <div class="status-dot" id="console-dot"></div>
419
+ <span id="console-text"
420
+ >Connect a device to start communicating</span
421
+ >
422
+ </div>
423
+ <button
424
+ class="btn btn-ghost"
425
+ id="clear-btn"
426
+ style="margin-left: auto; font-size: 0.7rem; padding: 4px 10px"
427
+ >
428
+ Clear
429
+ </button>
430
+ </div>
431
+
432
+ <div class="messages" id="messages">
433
+ <div class="empty-state">
434
+ <div class="empty-icon">⚡</div>
435
+ <span>Connect a Web Serial device to begin</span>
436
+ </div>
437
+ </div>
438
+
439
+ <div class="input-bar">
440
+ <button class="btn btn-mode" id="mode-toggle">TXT</button>
441
+ <input
442
+ class="msg-input"
443
+ id="input-send"
444
+ type="text"
445
+ placeholder="Type a command, e.g. LED_ON"
446
+ disabled
447
+ />
448
+ <button class="btn btn-send" id="btn-send" disabled>Send</button>
449
+ </div>
450
+ </main>
451
+
452
+ <!-- ── Code panel ────────────────────────────────────── -->
453
+ <div class="resize-handle" id="resize-handle"></div>
454
+ <aside class="code-panel" id="code-panel">
455
+ <div class="cp-hdr">
456
+ <div class="cp-title">
457
+ <span>Code Preview</span>
458
+ <span class="cp-tab" id="code-tab">device.ts</span>
459
+ </div>
460
+ <div class="cp-actions">
461
+ <button class="cp-btn" id="copy-btn">Copy</button>
462
+ </div>
463
+ </div>
464
+ <pre class="code-view" id="code-view"></pre>
465
+ </aside>
466
+ </div>
467
+ <!-- /app-layout -->
468
+
469
+ <footer class="app-footer">
470
+ © 2025
471
+ <a
472
+ href="https://github.com/danidoble"
473
+ style="color: inherit; text-decoration: none"
474
+ >@danidoble</a
475
+ >
476
+ · webserial-core v2
477
+ </footer>
478
+ <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
479
+ <script>
480
+ lucide.createIcons();
481
+ </script>
482
+ </body>
483
+ </html>