-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
625 lines (577 loc) · 40.2 KB
/
index.html
File metadata and controls
625 lines (577 loc) · 40.2 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
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>MeshMapper</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="MeshMapper Wardrive — BLE companion">
<meta name="keywords" content="MeshCore,coverage,wardrive,cascadia,ottawamesh,ottawa,meshmapper">
<meta name="Original author" content="Kyle Reed">
<meta name="Modified by" content="MrAlders0n">
<link rel="manifest" href="content/wardrive.json">
<link rel="icon" href="content/wardrive-badge.png">
<link rel="stylesheet" href="content/tailwind.css">
<link rel="stylesheet" href="content/style.css">
<!-- AES-JS for AES-ECB decryption support (used for channel message encryption) -->
<script defer src="https://cdn.jsdelivr.net/npm/aes-js@3.1.2/index.min.js"></script>
<style>
/* Double-buffered iframe styles */
.coverage-frame {
width: 100%;
height: 400px;
border: 0;
position: absolute;
top: 0;
left: 0;
transition: opacity 0.15s ease-in-out;
}
.coverage-frame-active {
opacity: 1;
z-index: 1;
pointer-events: auto;
}
.coverage-frame-hidden {
opacity: 0;
z-index: 0;
pointer-events: none;
}
</style>
</head>
<body class="bg-slate-900 text-slate-100">
<main class="min-h-screen flex items-start justify-center px-3 pt-1 pb-3">
<div class="w-full max-w-xl space-y-2">
<!-- App Title -->
<header class="flex items-center justify-between gap-2">
<h1 class="flex items-center gap-2 text-lg sm:text-xl font-bold truncate min-w-0">
<img class="h-12 w-12 sm:h-14 sm:w-14 flex-shrink-0" src="content/wardrive.png" alt="MeshCore" />
<span class="truncate">MeshMapper</span>
</h1>
<span id="appVersion" class="text-xs bg-slate-800 border border-slate-700 px-2 py-0.5 rounded-full text-slate-400 flex-shrink-0">v1.0</span>
</header>
<!-- Connection Status Bar with Settings Panel -->
<div>
<!-- Connection Status Bar -->
<div id="connectionBar" class="bg-slate-800/80 border border-slate-700 rounded-t-xl rounded-b-none px-4 py-0.5 flex items-center justify-between">
<div class="flex items-center gap-2 text-sm">
<span id="statusIndicator" class="text-base text-red-400">●</span>
<span id="connectionStatus" class="font-medium text-red-300">Disconnected</span>
</div>
<div class="flex items-center gap-3">
<span id="noiseDisplay" class="text-sm text-slate-300"></span>
<button id="settingsGearBtn" class="p-0 text-slate-400 hover:text-slate-200 transition-colors" aria-label="Toggle settings">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
</svg>
</button>
</div>
</div>
<!-- Settings Panel (extends from connection bar) -->
<section id="settingsPanel" class="bg-slate-800/80 border-x border-b border-slate-700 rounded-b-xl p-4 space-y-3">
<div class="flex items-center justify-between mb-2">
<h2 class="text-sm font-medium text-slate-300 uppercase tracking-wide">Settings</h2>
<button id="settingsCloseBtn" class="w-8 h-8 flex items-center justify-center rounded-full text-slate-400 hover:text-slate-200 hover:bg-slate-700/50 transition-all" aria-label="Close settings">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</button>
</div>
<!-- Auto Ping Interval -->
<div class="space-y-2">
<div class="flex items-center gap-2">
<label class="block text-xs font-medium text-slate-400 uppercase tracking-wide">Auto Ping Interval</label>
<button id="intervalInfoLink" class="flex-shrink-0 hover:opacity-80 transition-opacity" aria-label="Auto ping interval information">
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 48 48">
<linearGradient id="infoGrad1" x1="9.899" x2="38.183" y1="9.98" y2="38.264" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#33bef0"></stop><stop offset="1" stop-color="#0a85d9"></stop></linearGradient>
<path fill="url(#infoGrad1)" d="M44.041,24.122c0,11.045-8.955,20-20,20s-20-8.955-20-20s8.955-20,20-20S44.041,13.077,44.041,24.122z"></path>
<path d="M22,36h4c0.552,0,1-0.448,1-1V20c0-0.552-0.448-1-1-1h-4c-0.552,0-1,0.448-1,1v15C21,35.552,21.448,36,22,36z" opacity=".05"></path>
<path d="M22.227,35.5h3.547c0.401,0,0.727-0.325,0.727-0.727V20.227c0-0.401-0.325-0.727-0.727-0.727h-3.547c-0.401,0-0.727,0.325-0.727,0.727v14.547C21.5,35.175,21.825,35.5,22.227,35.5z" opacity=".07"></path>
<path fill="#fff" d="M24,17.732c1.7,0,2.65-1.068,2.65-2.388C26.65,14.024,25.647,13,24,13s-2.65,1.024-2.65,2.344C21.35,16.664,22.3,17.732,24,17.732z"></path>
<rect width="4" height="15" x="22" y="20" fill="#fff"></rect>
</svg>
</button>
</div>
<div style="display: flex; gap: 0.5rem;">
<label style="flex: 1; display: flex; align-items: center; justify-content: center; padding: 0.5rem 0.75rem; border-radius: 0.5rem; border: 1px solid #475569; cursor: pointer;" class="hover:bg-slate-700 has-[:checked]:bg-emerald-600 has-[:checked]:border-emerald-600">
<input type="radio" name="interval" value="15" class="sr-only">
<span class="text-sm font-medium">15s</span>
</label>
<label style="flex: 1; display: flex; align-items: center; justify-content: center; padding: 0.5rem 0.75rem; border-radius: 0.5rem; border: 1px solid #475569; cursor: pointer;" class="hover:bg-slate-700 has-[:checked]:bg-emerald-600 has-[:checked]:border-emerald-600">
<input type="radio" name="interval" value="30" checked class="sr-only">
<span class="text-sm font-medium">30s</span>
</label>
<label style="flex: 1; display: flex; align-items: center; justify-content: center; padding: 0.5rem 0.75rem; border-radius: 0.5rem; border: 1px solid #475569; cursor: pointer;" class="hover:bg-slate-700 has-[:checked]:bg-emerald-600 has-[:checked]:border-emerald-600">
<input type="radio" name="interval" value="60" class="sr-only">
<span class="text-sm font-medium">60s</span>
</label>
</div>
</div>
<!-- External Antenna -->
<div class="space-y-2">
<div class="flex items-center gap-2">
<label class="block text-xs font-medium text-slate-400 uppercase tracking-wide">
External Antenna <span class="text-amber-400">⚠️ Required</span>
</label>
<button id="antennaInfoLink" class="flex-shrink-0 hover:opacity-80 transition-opacity" aria-label="External antenna information">
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 48 48">
<linearGradient id="infoGrad2" x1="9.899" x2="38.183" y1="9.98" y2="38.264" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#33bef0"></stop><stop offset="1" stop-color="#0a85d9"></stop></linearGradient>
<path fill="url(#infoGrad2)" d="M44.041,24.122c0,11.045-8.955,20-20,20s-20-8.955-20-20s8.955-20,20-20S44.041,13.077,44.041,24.122z"></path>
<path d="M22,36h4c0.552,0,1-0.448,1-1V20c0-0.552-0.448-1-1-1h-4c-0.552,0-1,0.448-1,1v15C21,35.552,21.448,36,22,36z" opacity=".05"></path>
<path d="M22.227,35.5h3.547c0.401,0,0.727-0.325,0.727-0.727V20.227c0-0.401-0.325-0.727-0.727-0.727h-3.547c-0.401,0-0.727,0.325-0.727,0.727v14.547C21.5,35.175,21.825,35.5,22.227,35.5z" opacity=".07"></path>
<path fill="#fff" d="M24,17.732c1.7,0,2.65-1.068,2.65-2.388C26.65,14.024,25.647,13,24,13s-2.65,1.024-2.65,2.344C21.35,16.664,22.3,17.732,24,17.732z"></path>
<rect width="4" height="15" x="22" y="20" fill="#fff"></rect>
</svg>
</button>
</div>
<div style="display: flex; gap: 0.5rem;">
<label style="flex: 1; display: flex; align-items: center; justify-content: center; padding: 0.5rem 0.75rem; border-radius: 0.5rem; border: 1px solid #475569; cursor: pointer;" class="hover:bg-slate-700 has-[:checked]:bg-emerald-600 has-[:checked]:border-emerald-600">
<input type="radio" name="externalAntenna" value="NO" class="sr-only">
<span class="text-sm font-medium">No</span>
</label>
<label style="flex: 1; display: flex; align-items: center; justify-content: center; padding: 0.5rem 0.75rem; border-radius: 0.5rem; border: 1px solid #475569; cursor: pointer;" class="hover:bg-slate-700 has-[:checked]:bg-emerald-600 has-[:checked]:border-emerald-600">
<input type="radio" name="externalAntenna" value="YES" class="sr-only">
<span class="text-sm font-medium">Yes</span>
</label>
</div>
</div>
<!-- Radio Power -->
<div class="space-y-2">
<div class="flex items-center gap-2">
<label class="block text-xs font-medium text-slate-400 uppercase tracking-wide">
Radio Power <span id="powerLabelStatus"></span>
</label>
<button id="powerInfoLink" class="flex-shrink-0 hover:opacity-80 transition-opacity" aria-label="Radio power information">
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 48 48">
<linearGradient id="infoGrad3" x1="9.899" x2="38.183" y1="9.98" y2="38.264" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#33bef0"></stop><stop offset="1" stop-color="#0a85d9"></stop></linearGradient>
<path fill="url(#infoGrad3)" d="M44.041,24.122c0,11.045-8.955,20-20,20s-20-8.955-20-20s8.955-20,20-20S44.041,13.077,44.041,24.122z"></path>
<path d="M22,36h4c0.552,0,1-0.448,1-1V20c0-0.552-0.448-1-1-1h-4c-0.552,0-1,0.448-1,1v15C21,35.552,21.448,36,22,36z" opacity=".05"></path>
<path d="M22.227,35.5h3.547c0.401,0,0.727-0.325,0.727-0.727V20.227c0-0.401-0.325-0.727-0.727-0.727h-3.547c-0.401,0-0.727,0.325-0.727,0.727v14.547C21.5,35.175,21.825,35.5,22.227,35.5z" opacity=".07"></path>
<path fill="#fff" d="M24,17.732c1.7,0,2.65-1.068,2.65-2.388C26.65,14.024,25.647,13,24,13s-2.65,1.024-2.65,2.344C21.35,16.664,22.3,17.732,24,17.732z"></path>
<rect width="4" height="15" x="22" y="20" fill="#fff"></rect>
</svg>
</button>
</div>
<!-- Placeholder when disconnected -->
<div id="powerPlaceholder" style="display: flex; align-items: center; justify-content: center; padding: 0.5rem 0.75rem; border-radius: 0.5rem; border: 1px solid #475569; background-color: rgba(71, 85, 105, 0.1);">
<span class="text-sm font-medium text-slate-500">Waiting for connection...</span>
</div>
<!-- Auto-configured power display (shown when auto-set) -->
<div id="powerAutoDisplay" class="hidden" style="align-items: center; gap: 0.5rem;">
<div style="flex: 1; display: flex; align-items: center; justify-content: center; padding: 0.5rem 0.75rem; border-radius: 0.5rem; border: 1px solid #10b981; background-color: rgba(16, 185, 129, 0.1);">
<span id="powerAutoValue" class="text-sm font-medium text-emerald-400">1.0w</span>
</div>
<button id="powerOverrideBtn" type="button" style="padding: 0.5rem 1rem; border-radius: 0.5rem; border: 1px solid #475569; cursor: pointer; background-color: #1e293b;" class="text-sm font-medium text-slate-300 hover:bg-slate-700">
Override
</button>
</div>
<!-- Manual power selection (shown when unknown device or after override -->
<div id="powerManualSelection" class="hidden" style="gap: 0.5rem;">
<label style="flex: 1; display: flex; align-items: center; justify-content: center; padding: 0.5rem 0.75rem; border-radius: 0.5rem; border: 1px solid #475569; cursor: pointer;" class="hover:bg-slate-700 has-[:checked]:bg-emerald-600 has-[:checked]:border-emerald-600">
<input type="radio" name="power" value="0.3w" class="sr-only">
<span class="text-sm font-medium">0.3w</span>
</label>
<label style="flex: 1; display: flex; align-items: center; justify-content: center; padding: 0.5rem 0.75rem; border-radius: 0.5rem; border: 1px solid #475569; cursor: pointer;" class="hover:bg-slate-700 has-[:checked]:bg-emerald-600 has-[:checked]:border-emerald-600">
<input type="radio" name="power" value="0.6w" class="sr-only">
<span class="text-sm font-medium">0.6w</span>
</label>
<label style="flex: 1; display: flex; align-items: center; justify-content: center; padding: 0.5rem 0.75rem; border-radius: 0.5rem; border: 1px solid #475569; cursor: pointer;" class="hover:bg-slate-700 has-[:checked]:bg-emerald-600 has-[:checked]:border-emerald-600">
<input type="radio" name="power" value="1.0w" class="sr-only">
<span class="text-sm font-medium">1.0w</span>
</label>
<label style="flex: 1; display: flex; align-items: center; justify-content: center; padding: 0.5rem 0.75rem; border-radius: 0.5rem; border: 1px solid #475569; cursor: pointer;" class="hover:bg-slate-700 has-[:checked]:bg-emerald-600 has-[:checked]:border-emerald-600">
<input type="radio" name="power" value="2.0w" class="sr-only">
<span class="text-sm font-medium">2.0w</span>
</label>
</div>
</div>
<!-- Carpeater Filter -->
<div class="space-y-2">
<div class="flex items-center gap-2">
<label class="block text-xs font-medium text-slate-400 uppercase tracking-wide">Carpeater Filter</label>
<button id="carpeaterInfoLink" class="flex-shrink-0 hover:opacity-80 transition-opacity" aria-label="Carpeater filter information">
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 48 48">
<linearGradient id="infoGrad4" x1="9.899" x2="38.183" y1="9.98" y2="38.264" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#33bef0"></stop><stop offset="1" stop-color="#0a85d9"></stop></linearGradient>
<path fill="url(#infoGrad4)" d="M44.041,24.122c0,11.045-8.955,20-20,20s-20-8.955-20-20s8.955-20,20-20S44.041,13.077,44.041,24.122z"></path>
<path d="M22,36h4c0.552,0,1-0.448,1-1V20c0-0.552-0.448-1-1-1h-4c-0.552,0-1,0.448-1,1v15C21,35.552,21.448,36,22,36z" opacity=".05"></path>
<path d="M22.227,35.5h3.547c0.401,0,0.727-0.325,0.727-0.727V20.227c0-0.401-0.325-0.727-0.727-0.727h-3.547c-0.401,0-0.727,0.325-0.727,0.727v14.547C21.5,35.175,21.825,35.5,22.227,35.5z" opacity=".07"></path>
<path fill="#fff" d="M24,17.732c1.7,0,2.65-1.068,2.65-2.388C26.65,14.024,25.647,13,24,13s-2.65,1.024-2.65,2.344C21.35,16.664,22.3,17.732,24,17.732z"></path>
<rect width="4" height="15" x="22" y="20" fill="#fff"></rect>
</svg>
</button>
</div>
<div class="flex items-center gap-2">
<!-- Custom styled checkbox -->
<label class="relative inline-flex items-center cursor-pointer">
<input type="checkbox" id="carpeaterFilterEnabled" class="sr-only peer">
<div class="w-5 h-5 bg-slate-700 border border-slate-600 rounded peer-checked:bg-emerald-600 peer-checked:border-emerald-600 peer-focus:ring-2 peer-focus:ring-emerald-500 peer-focus:ring-offset-1 peer-focus:ring-offset-slate-800 transition-all flex items-center justify-center group">
<svg class="w-3 h-3 text-white opacity-0 transition-opacity checkmark-svg" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"></path>
</svg>
</div>
</label>
<label for="carpeaterFilterEnabled" class="text-sm text-slate-300 cursor-pointer select-none">Ignore ID:</label>
<input type="text" id="carpeaterIdInput" maxlength="2" placeholder="00" disabled
class="w-14 px-2 py-1 text-sm bg-slate-700 text-white border border-slate-600 rounded focus:border-emerald-500 focus:ring-1 focus:ring-emerald-500 focus:outline-none uppercase font-mono disabled:opacity-50 disabled:cursor-not-allowed">
</div>
</div>
<!-- Status Info -->
<div class="space-y-2">
<label class="block text-xs font-medium text-slate-400 uppercase tracking-wide">Status Info</label>
<!-- Model and Channel (always 2 columns) -->
<div class="grid grid-cols-2 gap-2">
<div class="flex items-center gap-2 text-sm">
<span class="text-slate-300">Model:</span>
<span id="deviceModel" class="font-medium">—</span>
</div>
<div class="flex items-center gap-2 text-sm">
<span class="text-slate-300">Channel:</span>
<span id="channelInfo" class="font-medium">—</span>
</div>
</div>
<!-- Location and Slots (always 2 columns) -->
<div class="grid grid-cols-2 gap-2">
<div class="flex items-center gap-2 text-sm">
<span class="text-slate-300">Location:</span>
<span id="locationDisplay" class="font-medium">—</span>
</div>
<div class="flex items-center gap-2 text-sm">
<span class="text-slate-300">Slots:</span>
<span id="slotsDisplay" class="font-medium text-slate-400">N/A</span>
</div>
</div>
</div>
</section>
</div>
<!-- Control Buttons -->
<section class="bg-slate-800/80 border border-slate-700 rounded-xl p-4 space-y-2">
<!-- Ping controls (always visible, disabled when not connected) -->
<div id="pingControls" class="w-full flex gap-2">
<button id="txPingBtn"
class="flex-1 min-w-0 px-3 py-2 rounded-lg bg-sky-600 hover:bg-sky-500 text-sm font-medium text-white disabled:opacity-40 disabled:cursor-not-allowed">
TX Ping
</button>
<button id="txRxAutoBtn"
class="flex-1 min-w-0 px-3 py-2 rounded-lg bg-indigo-600 hover:bg-indigo-500 text-sm font-medium text-white disabled:opacity-40 disabled:cursor-not-allowed">
TX/RX Auto
</button>
<button id="rxAutoBtn"
class="flex-1 min-w-0 px-3 py-2 rounded-lg bg-indigo-600 hover:bg-indigo-500 text-sm font-medium text-white disabled:opacity-40 disabled:cursor-not-allowed">
RX Auto
</button>
</div>
<!-- Connect/Disconnect button (always visible, changes text/color) -->
<button id="connectBtn"
class="w-full px-3 py-2 rounded-lg bg-emerald-600 hover:bg-emerald-500 text-sm font-medium text-white disabled:opacity-40 disabled:cursor-not-allowed">
Connect
</button>
</section>
<!-- Status Message Box (Dynamic App Status) -->
<section class="bg-slate-800/80 border border-slate-700 rounded-xl px-4 py-1.5 flex items-center">
<span id="status" class="text-sm font-medium text-slate-300">—</span>
</section>
<!-- Map Section with Overlays -->
<section class="relative bg-slate-800/80 border border-slate-700 rounded-xl overflow-hidden" style="height: 400px;">
<!-- Double-buffered iframes: one visible, one loading in background -->
<iframe
id="coverageFrameA"
class="coverage-frame coverage-frame-active"
title="MeshMapper Coverage Zone"
referrerpolicy="no-referrer"
src="https://yow.meshmapper.net/embed.php?cov_grid=1&fail_grid=1&pings=0&repeaters=1&rep_coverage=0&grid_lines=0&lat=45.42150&lon=-75.69720&meters=10000">
</iframe>
<iframe
id="coverageFrameB"
class="coverage-frame coverage-frame-hidden"
title="MeshMapper Coverage Zone"
referrerpolicy="no-referrer">
</iframe>
<!-- Map Overlays -->
<!-- Top-right corner: GPS Accuracy and Distance stacked vertically -->
<div class="absolute top-2 right-2 z-10 flex flex-col gap-2 text-right">
<!-- GPS Accuracy -->
<div class="bg-slate-900/80 backdrop-blur-sm border border-slate-700 rounded-lg px-3 py-2 text-xs text-slate-300">
<span id="gpsAcc">±-</span>
</div>
<!-- Distance from Last Ping -->
<div class="bg-slate-900/80 backdrop-blur-sm border border-slate-700 rounded-lg px-3 py-2 text-xs text-slate-300">
<span id="distanceInfo">∆-</span>
</div>
</div>
<!-- Bottom: GPS Coordinates spanning full width -->
<div class="absolute bottom-2 left-2 right-2 z-10">
<div class="bg-slate-900/80 backdrop-blur-sm border border-slate-700 rounded-lg px-3 py-2 text-xs text-slate-300 text-center">
<div id="gpsInfo">-</div>
</div>
</div>
</section>
<!-- TX Log: Unified Static Section (replaces mobile bottom sheet and desktop log) -->
<section class="bg-slate-800/80 border border-slate-700 rounded-xl overflow-hidden" aria-labelledby="txPingsHeading">
<!-- Log Header (collapsible toggle) -->
<div id="txLogSummaryBar" class="px-4 py-3 flex items-center justify-between cursor-pointer hover:bg-slate-800/60 transition-colors">
<div class="flex items-center gap-3 text-sm min-w-0 flex-1">
<h2 id="txPingsHeading" class="text-sm font-medium text-slate-300 uppercase tracking-wide">TX Log</h2>
<span class="text-slate-500">|</span>
<span id="txLogCount" class="font-medium text-slate-300">Pings: 0</span>
<span id="txLogLastTime" class="text-slate-400 text-xs truncate hidden sm:inline">No data</span>
</div>
<div class="flex items-center gap-2">
<span id="txLogLastSnr" class="text-xs font-mono text-slate-400">—</span>
<button id="txLogCopyBtn" class="copy-btn text-xs text-slate-400 hover:text-slate-200 px-2 py-1 rounded transition-colors hidden">
Copy
</button>
<svg id="txLogExpandArrow" class="w-4 h-4 text-slate-400 transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
</svg>
</div>
</div>
<!-- Expandable Log Content -->
<div id="txLogBottomSheet" class="border-t border-slate-700 hidden">
<!-- Log entries (scrollable) -->
<div id="txLogScrollContainer" class="overflow-y-auto px-4 py-2 max-h-64" style="-webkit-overflow-scrolling: touch;">
<div id="txPings" class="space-y-2">
<!-- Log entries will be appended here -->
<div class="text-xs text-slate-500 italic text-center py-4">No pings logged yet</div>
</div>
</div>
</div>
</section>
<!-- RX Log: Passive Observations -->
<section class="bg-slate-800/80 border border-slate-700 rounded-xl overflow-hidden" aria-labelledby="rxLogHeading">
<div id="rxLogSummaryBar" class="px-4 py-3 flex items-center justify-between cursor-pointer hover:bg-slate-800/60 transition-colors">
<div class="flex items-center gap-3 text-sm min-w-0 flex-1">
<h2 id="rxLogHeading" class="text-sm font-medium text-slate-300 uppercase tracking-wide">RX Log</h2>
<span class="text-slate-500">|</span>
<span id="rxLogCount" class="font-medium text-slate-300">Handled: 0 Drop: 0</span>
<span id="rxLogLastTime" class="text-slate-400 text-xs truncate hidden sm:inline">No data</span>
</div>
<div class="flex items-center gap-2">
<span id="rxLogLastRepeater" class="text-xs font-mono text-slate-400">—</span>
<span id="rxLogSnrChip" class="hidden"></span>
<button id="rxLogCopyBtn" class="copy-btn text-xs text-slate-400 hover:text-slate-200 px-2 py-1 rounded transition-colors hidden">
Copy
</button>
<svg id="rxLogExpandArrow" class="w-4 h-4 text-slate-400 transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
</svg>
</div>
</div>
<div id="rxLogBottomSheet" class="border-t border-slate-700 hidden">
<div id="rxLogScrollContainer" class="overflow-y-auto px-4 py-2 max-h-64">
<div id="rxLogEntries" class="space-y-2">
<div class="text-xs text-slate-500 italic text-center py-4">No RX observations yet</div>
</div>
</div>
</div>
</section>
<!-- Error Log -->
<section class="bg-slate-800/80 border border-slate-700 rounded-xl overflow-hidden" aria-labelledby="errorLogHeading">
<div id="errorLogSummaryBar" class="px-4 py-3 flex items-center justify-between cursor-pointer hover:bg-slate-800/60 transition-colors">
<div class="flex items-center gap-3 text-sm min-w-0 flex-1">
<h2 id="errorLogHeading" class="text-sm font-medium text-red-300 uppercase tracking-wide">Error Log</h2>
<span class="text-slate-500">|</span>
<span id="errorLogCount" class="font-medium text-red-300">Events: 0</span>
<span id="errorLogLastTime" class="text-slate-400 text-xs truncate hidden sm:inline">No errors</span>
</div>
<div class="flex items-center gap-2">
<span id="errorLogLastError" class="text-xs font-mono text-slate-400">—</span>
<button id="errorLogCopyBtn" class="copy-btn text-xs text-slate-400 hover:text-slate-200 px-2 py-1 rounded transition-colors hidden">
Copy
</button>
<svg id="errorLogExpandArrow" class="w-4 h-4 text-slate-400 transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
</svg>
</div>
</div>
<div id="errorLogBottomSheet" class="border-t border-slate-700 hidden">
<div id="errorLogScrollContainer" class="overflow-y-auto px-4 py-2 max-h-64">
<div id="errorLogEntries" class="space-y-2">
<div class="text-xs text-slate-500 italic text-center py-4">No errors logged</div>
</div>
</div>
</div>
</section>
<!-- Notes Section -->
<section class="bg-slate-800/80 border border-slate-700 rounded-xl p-4 space-y-2">
<h2 class="text-sm font-medium text-slate-300">Notes</h2>
<ul class="text-xs text-slate-400 space-y-1 list-disc list-inside">
<li>Requires Bluetooth and Location permissions</li>
<li>Keep app in foreground with screen on & unlocked</li>
<li class="text-amber-400 font-medium">⚠️ Not supported in Safari — Use Bluefy on iOS</li>
</ul>
</section>
</div>
</main>
<!-- Load main script -->
<script type="module" src="content/wardrive.js"></script>
<script type="module">
import { onLoad } from './content/wardrive.js';
onLoad();
</script>
<!-- Deprecation Notice Modal -->
<div id="noticeModal" class="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50 p-4">
<div class="bg-slate-800 rounded-lg shadow-xl max-w-lg w-full border border-slate-700">
<div class="p-6">
<div class="mb-4">
<h3 class="text-xl font-semibold text-amber-400">Project Deprecated — Please Use MeshMapper Mobile</h3>
</div>
<div class="space-y-4 text-sm text-slate-300">
<p>This webapp is deprecated and no longer supported. Please get the official MeshMapper apps or try the new modern web app below.</p>
<div class="grid grid-cols-1 gap-2">
<a href="https://play.google.com/store/apps/details?id=net.meshmapper.app" target="_blank" rel="noopener noreferrer" class="block text-center py-2 px-4 bg-indigo-600 hover:bg-indigo-700 text-white rounded-lg transition-colors">Android: Get it on the Play Store</a>
<a href="https://github.com/MeshMapper/MeshMapper_Project/releases/" target="_blank" rel="noopener noreferrer" class="block text-center py-2 px-4 bg-slate-700 hover:bg-slate-600 text-white rounded-lg transition-colors">Grab the APK from GitHub</a>
<a href="https://apps.apple.com/us/app/meshmapper/id6758073991" target="_blank" rel="noopener noreferrer" class="block text-center py-2 px-4 bg-sky-600 hover:bg-sky-700 text-white rounded-lg transition-colors">iOS: Get it on the App Store</a>
<a href="https://wd.meshmapper.net/" target="_blank" rel="noopener noreferrer" class="block text-center py-2 px-4 bg-emerald-600 hover:bg-emerald-700 text-white rounded-lg transition-colors">Modern Web App</a>
</div>
<p class="text-xs text-slate-400">Join the MeshMapper Discord for beta testing and live updates: <a href="https://discord.gg/x8aBDZwyz7" target="_blank" rel="noopener noreferrer" class="text-indigo-300 underline">https://discord.gg/D26P6c6QmG</a></p>
</div>
</div>
</div>
</div>
<!-- Override Confirmation Modal -->
<div id="overrideModal" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
<div class="bg-slate-800 rounded-lg shadow-xl max-w-sm w-full border border-slate-600">
<div class="p-6 border-b border-slate-600">
<h3 class="text-lg font-medium text-slate-200">Override Auto-Configuration?</h3>
</div>
<div class="p-6">
<p class="text-sm text-slate-300 mb-2">This will allow you to manually select the radio power setting.</p>
<p class="text-sm text-slate-400">The device was automatically configured based on its hardware profile.</p>
</div>
<div style="padding: 1.5rem; display: flex; gap: 0.75rem; border-top: 1px solid #475569;">
<button id="overrideModalCancel" style="flex: 1; padding: 0.5rem 1rem; font-size: 0.875rem; font-weight: 500; color: #cbd5e1; background-color: #475569; border-radius: 0.5rem; border: none; cursor: pointer; transition: background-color 0.2s;">
Cancel
</button>
<button id="overrideModalConfirm" style="flex: 1; padding: 0.5rem 1rem; font-size: 0.875rem; font-weight: 500; color: white; background-color: #10b981; border-radius: 0.5rem; border: none; cursor: pointer; transition: background-color 0.2s;">
Override
</button>
</div>
</div>
</div>
<!-- Carpeater Info Modal -->
<div id="carpeaterModal" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
<div class="bg-slate-800 rounded-lg shadow-xl max-w-md w-full border border-slate-700">
<div class="p-6">
<div class="flex justify-between items-start mb-4">
<h3 class="text-lg font-semibold text-slate-200">What is a Carpeater?</h3>
<button data-modal-close class="text-slate-400 hover:text-slate-200">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</button>
</div>
<div class="space-y-3 text-sm text-slate-300">
<p>A <strong class="text-emerald-400">carpeater</strong> is a repeater that's extremely close to you (usually in your vehicle or pocket), causing interference with wardriving data collection.</p>
<div class="bg-slate-900 rounded p-3 border border-slate-700">
<p class="font-semibold text-slate-200 mb-2">This filter has two modes:</p>
<ul class="space-y-2 text-xs">
<li><span class="text-emerald-400">•</span> <strong>User-specified ID:</strong> Ignores all packets from a specific repeater you enter (silent drops, no error log)</li>
<li><span class="text-amber-400">•</span> <strong>RSSI failsafe:</strong> Automatically drops extremely strong signals (≥ -30 dBm) from other repeaters (shows error log)</li>
</ul>
</div>
<p class="text-xs text-slate-400">Enable the checkbox and enter the 2-character hex ID of your carpeater to exclude it from all wardriving data.</p>
</div>
<button data-modal-close class="mt-4 w-full px-4 py-2 bg-emerald-600 hover:bg-emerald-700 text-white rounded-lg transition-colors">
Got it
</button>
</div>
</div>
</div>
<!-- Auto Ping Interval Info Modal -->
<div id="intervalModal" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
<div class="bg-slate-800 rounded-lg shadow-xl max-w-md w-full border border-slate-700">
<div class="p-6">
<div class="flex justify-between items-start mb-4">
<h3 class="text-lg font-semibold text-slate-200">Auto Ping Interval</h3>
<button data-modal-close class="text-slate-400 hover:text-slate-200">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</button>
</div>
<div class="space-y-3 text-sm text-slate-300">
<p>Controls how frequently the app automatically sends pings while in TX/RX Auto or RX Auto mode.</p>
<div class="bg-slate-900 rounded p-3 border border-slate-700">
<p class="font-semibold text-slate-200 mb-2">Interval Options:</p>
<ul class="space-y-2 text-xs">
<li><span class="text-sky-400">•</span> <strong>15s</strong> — Maximum coverage density, higher mesh load. Best for detailed mapping of small areas or testing specific routes.</li>
<li><span class="text-emerald-400">•</span> <strong>30s</strong> — Balanced coverage and mesh load. Recommended for most wardriving sessions.</li>
<li><span class="text-amber-400">•</span> <strong>60s</strong> — Lower coverage density, minimal mesh load. Ideal for casual mapping or being respectful during busy network times.</li>
</ul>
</div>
<p class="text-xs text-slate-400"><strong>Tip:</strong> Shorter intervals create more detailed coverage maps but increase traffic on the mesh network. Choose 30s or 60s when the network is actively being used by others.</p>
</div>
<button data-modal-close class="mt-4 w-full px-4 py-2 bg-emerald-600 hover:bg-emerald-700 text-white rounded-lg transition-colors">
Got it
</button>
</div>
</div>
</div>
<!-- External Antenna Info Modal -->
<div id="antennaModal" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
<div class="bg-slate-800 rounded-lg shadow-xl max-w-md w-full border border-slate-700">
<div class="p-6">
<div class="flex justify-between items-start mb-4">
<h3 class="text-lg font-semibold text-slate-200">External Antenna</h3>
<button data-modal-close class="text-slate-400 hover:text-slate-200">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</button>
</div>
<div class="space-y-3 text-sm text-slate-300">
<p>Indicates whether you have an external antenna mounted on your vehicle (typically on the roof or magnetic-mounted).</p>
<div class="bg-slate-900 rounded p-3 border border-slate-700">
<p class="font-semibold text-slate-200 mb-2">Why this matters:</p>
<p class="text-xs">External antennas outside of your vehicle significantly improve signal propagation and reception range compared to a companion/antenna inside your car. This setting helps correlate coverage data with your actual hardware setup.</p>
</div>
<div class="space-y-2 text-xs">
<p class="font-semibold text-emerald-400">When to select YES:</p>
<ul class="space-y-1 ml-3">
<li>• You have a roof-mounted or magnetic antenna</li>
<li>• You're using an antenna on an extension cable outside your vehicle</li>
<li>• Your device is connected to any external antenna system</li>
</ul>
<p class="font-semibold text-amber-400 mt-3">When to select NO:</p>
<ul class="space-y-1 ml-3">
<li>• You're using only the device's antenna that's directly connected to your companion</li>
<li>• Your device is inside your vehicle without external antenna</li>
</ul>
</div>
</div>
<button data-modal-close class="mt-4 w-full px-4 py-2 bg-emerald-600 hover:bg-emerald-700 text-white rounded-lg transition-colors">
Got it
</button>
</div>
</div>
</div>
<!-- Radio Power Info Modal -->
<div id="powerModal" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
<div class="bg-slate-800 rounded-lg shadow-xl max-w-md w-full border border-slate-700">
<div class="p-6">
<div class="flex justify-between items-start mb-4">
<h3 class="text-lg font-semibold text-slate-200">Radio Power Configuration</h3>
<button data-modal-close class="text-slate-400 hover:text-slate-200">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</button>
</div>
<div class="space-y-3 text-sm text-slate-300">
<p>We track this for context, allowing us to display the power level of each ping on the map. This is useful for understanding coverage patterns and signal propagation. The app automatically detects your device model and sets the optimal power level based on your hardware capabilities.</p>
<div class="bg-slate-900 rounded p-3 border border-slate-700">
<p class="font-semibold text-slate-200 mb-2">Auto-Configuration:</p>
<p class="text-xs">When connected, the app displays the default power with a <span class="text-emerald-400">green indicator</span>. This is based on your specific device model from the hardware database.</p>
</div>
<div class="bg-amber-900/20 rounded p-3 border border-amber-700/50">
<p class="font-semibold text-amber-400 mb-2">Override:</p>
<p class="text-xs">Only manually select power if you have specific hardware knowledge or if your device was not auto-configured — in that case, you must manually select it.</p>
</div>
</div>
<button data-modal-close class="mt-4 w-full px-4 py-2 bg-emerald-600 hover:bg-emerald-700 text-white rounded-lg transition-colors">
Got it
</button>
</div>
</div>
</div>
</body>
</html>