| 509 | |
| 510 | // ========== 右侧 IMU 数据展示（干净：无背景、无边框、无滚动条） ========== |
| 511 | function createDataPanel() { |
| 512 | const panel = document.createElement('div'); |
| 513 | panel.id = 'data-panel'; |
| 514 | panel.style.cssText = ` |
| 515 | position: absolute; |
| 516 | right: 20px; |
| 517 | bottom: 20px; |
| 518 | background: transparent; |
| 519 | border: none; |
| 520 | border-radius: 10px; |
| 521 | padding: 15px; |
| 522 | min-width: 280px; |
| 523 | color: #e6edf3; |
| 524 | font-family: 'Consolas','Monaco',monospace; |
| 525 | font-size: 12px; |
| 526 | z-index: 1; |
| 527 | box-shadow: none; |
| 528 | pointer-events: auto; |
| 529 | max-height: none; /* 不触发滚动条 */ |
| 530 | overflow: hidden; /* 兜底：即使超出也不出现滚动条 */ |
| 531 | `; |
| 532 | panel.innerHTML = ` |
| 533 | <div style="margin-bottom:12px;font-weight:bold;color:#61dafb;border-bottom:1px solid #2a3446;padding-bottom:6px;"> |
| 534 | IMU 实时数据 |
| 535 | </div> |
| 536 | <div style="display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px;"> |
| 537 | <div><div style="color:#9fb0c3;font-size:10px;">翻滚角 (Roll)</div> |
| 538 | <div id="panel-roll" style="color:#ff6b6b;font-size:16px;font-weight:bold;">0.0°</div></div> |
| 539 | <div><div style="color:#9fb0c3;font-size:10px;">俯仰角 (Pitch)</div> |
| 540 | <div id="panel-pitch" style="color:#4ecdc4;font-size:16px;font-weight:bold;">0.0°</div></div> |
| 541 | </div> |
| 542 | <div style="margin-bottom:12px;"> |
| 543 | <div style="color:#9fb0c3;font-size:10px;">偏航角 (Yaw)</div> |
| 544 | <div id="panel-yaw" style="color:#45b7d1;font-size:16px;font-weight:bold;">0.0°</div> |
| 545 | </div> |
| 546 | <div style="border-top:1px solid #2a3446;padding-top:8px;margin-top:8px;"> |
| 547 | <div style="color:#9fb0c3;font-size:10px;margin-bottom:6px;">角速度 (°/s)</div> |
| 548 | <div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;margin-bottom:8px;"> |
| 549 | <div><div style="color:#ff9999;font-size:9px;">gX</div><div id="panel-gx" style="color:#ff9999;font-size:11px;">0.0</div></div> |
| 550 | <div><div style="color:#99ff99;font-size:9px;">gY</div><div id="panel-gy" style="color:#99ff99;font-size:11px;">0.0</div></div> |
| 551 | <div><div style="color:#9999ff;font-size:9px;">gZ</div><div id="panel-gz" style="color:#9999ff;font-size:11px;">0.0</div></div> |
| 552 | </div> |
| 553 | </div> |
| 554 | <div style="border-top:1px solid #2a3446;padding-top:8px;"> |
| 555 | <div style="color:#9fb0c3;font-size:10px;margin-bottom:6px;">加速度 (m/s²)</div> |
| 556 | <div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;"> |
| 557 | <div><div style="color:#ff9999;font-size:9px;">aX</div><div id="panel-ax" style="color:#ff9999;font-size:11px;">0.00</div></div> |
| 558 | <div><div style="color:#99ff99;font-size:9px;">aY</div><div id="panel-ay" style="color:#99ff99;font-size:11px;">0.00</div></div> |
| 559 | <div><div style="color:#9999ff;font-size:9px;">aZ</div><div id="panel-az" style="color:#9999ff;font-size:11px;">0.00</div></div> |
| 560 | </div> |
| 561 | </div> |
| 562 | `; |
| 563 | hud.appendChild(panel); |
| 564 | return panel; |
| 565 | } |
| 566 | const dataPanel = createDataPanel(); |
| 567 | |
| 568 | function updateDataPanel(roll, pitch, yaw, gx, gy, gz, ax, ay, az) { |