-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
135 lines (123 loc) · 5.96 KB
/
Copy pathindex.html
File metadata and controls
135 lines (123 loc) · 5.96 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
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>BLE Telemetry Aircraft HUD</title>
<meta name="color-scheme" content="dark" />
<link
rel="stylesheet"
href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
crossorigin=""
/>
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<div class="app-bg"></div>
<div class="layout">
<section class="left-panel glass">
<div class="panel-top">
<div class="brand">
<div class="brand-icon">BLE</div>
<div class="brand-text">
<h1>Telemetry Console</h1>
<p>3D Aircraft Attitude / Professional Browser BLE Dashboard</p>
</div>
</div>
<div class="hero-status">
<span class="hero-dot" id="heroDot"></span>
<span id="heroStatusText">未连接</span>
</div>
</div>
<div class="left-scroll">
<div class="section-title">连接控制</div>
<div class="button-grid">
<button id="btnConnect" class="btn btn-primary">连接蓝牙</button>
<button id="btnDisconnect" class="btn btn-secondary">断开连接</button>
</div>
<button id="btnRecord" class="btn btn-secondary btn-wide">开始记录</button>
<div class="section-title">设备状态</div>
<div class="card-list">
<div class="status-card">
<div class="row"><span>蓝牙状态</span><b id="btState" class="pill pill-warn">未连接</b></div>
<div class="row"><span>设备名称</span><b id="deviceName">-</b></div>
<div class="row"><span>浏览器设备ID</span><b id="deviceId" class="mono">-</b></div>
<div class="row"><span>Notify</span><b id="notifyState">off</b></div>
<div class="row"><span>连接时间</span><b id="sessionTime">-</b></div>
<div class="row"><span>总帧数</span><b id="frameCount">0</b></div>
<div class="row"><span>最近接收</span><b id="lastReceive">-</b></div>
</div>
</div>
<div class="section-title">发送参数</div>
<div class="status-card">
<label class="field">
<span>周期 Tcycle (ms)</span>
<input id="tcycleInput" type="number" value="10" min="10" max="10000" />
</label>
<button id="btnSetTcycle" class="btn btn-primary btn-wide">发送到设备</button>
</div>
<div class="section-title">核心遥测</div>
<div class="tele-grid">
<div class="kv-card"><span>MAC</span><b id="tele-mac">-</b></div>
<div class="kv-card"><span>Time</span><b id="tele-time">-</b></div>
<div class="kv-card"><span>Longitude</span><b id="tele-lon">-</b></div>
<div class="kv-card"><span>Latitude</span><b id="tele-lat">-</b></div>
<div class="kv-card"><span>Roll</span><b id="tele-roll">-</b></div>
<div class="kv-card"><span>Pitch</span><b id="tele-pitch">-</b></div>
<div class="kv-card"><span>Yaw</span><b id="tele-yaw">-</b></div>
<div class="kv-card"><span>AX / AY / AZ</span><b id="tele-acc">-</b></div>
<div class="kv-card"><span>GX / GY / GZ</span><b id="tele-gyro">-</b></div>
</div>
<div class="section-title">实时波形 (5s)</div>
<div class="wave-grid">
<div class="wave-card"><div class="wave-label">AX (m/s²)</div><div class="wave-canvas-wrap"><canvas id="chartAx"></canvas></div></div>
<div class="wave-card"><div class="wave-label">AY (m/s²)</div><div class="wave-canvas-wrap"><canvas id="chartAy"></canvas></div></div>
<div class="wave-card"><div class="wave-label">AZ (m/s²)</div><div class="wave-canvas-wrap"><canvas id="chartAz"></canvas></div></div>
<div class="wave-card"><div class="wave-label">Radar V5 (V)</div><div class="wave-canvas-wrap"><canvas id="chartV5"></canvas></div></div>
<div class="wave-card"><div class="wave-label">Radar V6 (V)</div><div class="wave-canvas-wrap"><canvas id="chartV6"></canvas></div></div>
</div>
<div class="section-title">3D 飞机姿态 HUD</div>
<div class="canvas-card hud-card">
<div class="hud-overlay">
<div class="hud-title">AIRCRAFT ATTITUDE</div>
<div class="hud-sub">Three.js / Smooth Quaternion / Real-time Telemetry</div>
</div>
<div id="aircraft3d"></div>
<div class="hud-bottom">
<div class="hud-metric"><span>ROLL</span><b id="hudRoll">0.0°</b></div>
<div class="hud-metric"><span>PITCH</span><b id="hudPitch">0.0°</b></div>
<div class="hud-metric"><span>YAW</span><b id="hudYaw">0.0°</b></div>
</div>
</div>
<div class="section-title">最近帧</div>
<div class="frames-list" id="frames"></div>
<div class="section-title">使用提示</div>
<div class="tip-box">
这版已改为非 module 方式加载 Three.js。若“连接蓝牙”仍无反应，请打开浏览器开发者工具查看 Console，或确认使用的是 Chrome / Edge 且页面在 HTTPS 环境。
</div>
</div>
</section>
<section class="right-panel glass">
<div class="map-head">
<div>
<h2>地图定位</h2>
<p id="coordMode">WGS84 / GCJ02 自动处理</p>
</div>
<div class="map-tags">
<span class="tag" id="mapStatus">No Fix</span>
</div>
</div>
<div id="map"></div>
</section>
</div>
<script
src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
crossorigin=""
></script>
<script src="https://unpkg.com/three@0.160.0/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.3/dist/chart.umd.min.js"></script>
<script src="./app.js"></script>
</body>
</html>