410 lines
27 KiB
HTML
410 lines
27 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>IMU Mouse // Config Terminal</title>
|
|
<link href="https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Barlow+Condensed:wght@300;400;600;700;900&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="style.css">
|
|
<script src="https://cdn.jsdelivr.net/npm/three@0.128.0/build/three.min.js"></script>
|
|
<script src="version.js"></script>
|
|
</head>
|
|
<body class="disconnected">
|
|
|
|
<div id="hashMismatchBanner" style="display:none"></div>
|
|
|
|
<header>
|
|
<div>
|
|
<div class="logo">IMU<span>·</span>Mouse</div>
|
|
<div class="logo-sub">BLE Config Terminal v3.3</div>
|
|
</div>
|
|
<div class="header-right">
|
|
<div class="batt-bar" id="battBar" style="display:none">
|
|
<div id="badgeCharging" class="chg-badge charging">⚡ CHARGING</div>
|
|
<div id="badgeFull" class="chg-badge full">✓ FULL</div>
|
|
<div class="batt-cells" id="battCells"></div>
|
|
<span id="battPct">--%</span>
|
|
</div>
|
|
<button class="btn btn-debug" id="debugBtn" onclick="openDebugModal()" style="display:none" title="IMU Debug Recorder"><span>DBG</span></button>
|
|
<button class="btn btn-theme" id="themeBtn" onclick="cycleTheme()"><span>AUTO</span></button>
|
|
<div class="status-pill" id="statusPill"><div class="dot"></div><span id="statusText">DISCONNECTED</span></div>
|
|
<button class="btn btn-connect" id="connectBtn" onclick="doConnect()"><span>Connect</span></button>
|
|
<button class="btn btn-disconnect" id="disconnectBtn" onclick="doDisconnect()" style="display:none"><span>Disconnect</span></button>
|
|
<label class="toggle" title="Auto-Reconnect" style="margin-left:6px;flex-shrink:0"><input type="checkbox" id="autoReconnect"><div class="toggle-track"></div><div class="toggle-thumb"></div></label>
|
|
<span style="font-family:var(--mono);font-size:9px;color:var(--label);white-space:nowrap">AUTO-RECONNECT</span>
|
|
<label class="toggle" style="margin-left:10px;flex-shrink:0" title="Advanced"><input type="checkbox" id="advancedToggle" onchange="toggleAdvanced(this.checked)"><div class="toggle-track"></div><div class="toggle-thumb"></div></label>
|
|
<span style="font-family:var(--mono);font-size:9px;color:var(--label);white-space:nowrap">ADVANCED</span>
|
|
</div>
|
|
</header>
|
|
|
|
<main id="mainContent">
|
|
|
|
<!-- col-left: cursor motion -->
|
|
<div class="col-left">
|
|
|
|
<div class="section-label">Motion Parameters</div>
|
|
<div class="card">
|
|
<div class="param">
|
|
<div><div class="param-label">Sensitivity</div><div class="param-desc">Cursor speed multiplier</div></div>
|
|
<input type="range" id="slSensitivity" min="100" max="1500" step="10" value="600"
|
|
oninput="updateDisplay('sensitivity',this.value)" onchange="writeConfigBlob()">
|
|
<div class="param-value" id="valSensitivity">600</div>
|
|
</div>
|
|
<div class="param">
|
|
<div><div class="param-label">Dead Zone</div><div class="param-desc">Noise floor (rad/s) - raise to reduce drift</div></div>
|
|
<input type="range" id="slDeadZone" min="0.005" max="0.2" step="0.005" value="0.06"
|
|
oninput="updateDisplay('deadZone',this.value)" onchange="writeConfigBlob()">
|
|
<div class="param-value" id="valDeadZone">0.060</div>
|
|
</div>
|
|
<div class="param">
|
|
<div><div class="param-label">Accel Strength</div><div class="param-desc">Pointer acceleration multiplier</div></div>
|
|
<input type="range" id="slAccel" min="0" max="0.5" step="0.01" value="0.08"
|
|
oninput="updateDisplay('accel',this.value)" onchange="writeConfigBlob()">
|
|
<div class="param-value" id="valAccel">0.08</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="section-label">Motion Curve</div>
|
|
<div class="card">
|
|
<div class="param" style="border-bottom:none;padding:0">
|
|
<div><div class="param-label">Scaling Curve</div><div class="param-desc">Response shape for input magnitude</div></div>
|
|
<div class="segmented" style="grid-column:2/4">
|
|
<button class="seg-btn active" id="curveLinear" onclick="setCurve(0)" disabled>LINEAR</button>
|
|
<button class="seg-btn" id="curveSquare" onclick="setCurve(1)" disabled>SQUARE ²</button>
|
|
<button class="seg-btn" id="curveSqrt" onclick="setCurve(2)" disabled>√ SQRT</button>
|
|
</div>
|
|
</div>
|
|
<div style="padding-top:12px;display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;font-size:9px;color:var(--label);text-align:center">
|
|
<div>Proportional.<br>Predictable.</div>
|
|
<div>Precision at slow,<br>power at fast.</div>
|
|
<div>Coarse fast,<br>fine near target.</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="section-label">Battery Charging</div>
|
|
<div class="card">
|
|
<div class="param" style="border-bottom:none;padding:0">
|
|
<div><div class="param-label">Charge Mode</div><div class="param-desc">BQ25100 ISET via P0.13 (HICHG)</div></div>
|
|
<div class="segmented charge-seg" style="grid-column:2/4">
|
|
<button class="seg-btn slow" id="chgSlow" onclick="setChargeMode(0)" disabled>SLOW · 50mA</button>
|
|
<button class="seg-btn fast" id="chgFast" onclick="setChargeMode(1)" disabled>FAST · 100mA</button>
|
|
</div>
|
|
</div>
|
|
<div class="charge-info" id="chargeInfo">
|
|
<div class="ci-item"><div class="ci-val" id="ciStatus">--</div><div class="ci-lbl">Status</div></div>
|
|
<div class="ci-item"><div class="ci-val" id="ciMode">--</div><div class="ci-lbl">Current</div></div>
|
|
<div class="ci-item"><div class="ci-val" id="ciPct">--%</div><div class="ci-lbl">Level</div></div>
|
|
<div class="ci-item ci-advanced" id="ciVoltItem" style="display:none"><div class="ci-val accent" id="ciVolt">--</div><div class="ci-lbl">Voltage</div></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="section-label">Axis Configuration</div>
|
|
<div class="card">
|
|
<div class="flip-row">
|
|
<div class="flip-label">Flip X Axis</div>
|
|
<div class="param-desc" style="flex:1;font-size:9px;color:var(--label)">Invert left / right</div>
|
|
<label class="toggle"><input type="checkbox" id="flipX" onchange="writeConfigBlob()" disabled><div class="toggle-track"></div><div class="toggle-thumb"></div></label>
|
|
</div>
|
|
<div class="flip-row" style="border-bottom:none">
|
|
<div class="flip-label">Flip Y Axis</div>
|
|
<div class="param-desc" style="flex:1;font-size:9px;color:var(--label)">Invert up / down</div>
|
|
<label class="toggle"><input type="checkbox" id="flipY" onchange="writeConfigBlob()" disabled><div class="toggle-track"></div><div class="toggle-thumb"></div></label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="section-label">Device Capabilities</div>
|
|
<div class="card">
|
|
<div class="flip-row">
|
|
<div class="flip-label">Tap Detection</div>
|
|
<div class="param-desc" style="flex:1;font-size:9px;color:var(--label)">Double-tap click action <span class="restart-note">· restart to apply</span></div>
|
|
<label class="toggle"><input type="checkbox" id="capTapEnabled" onchange="onCapTapChange(this.checked)" disabled><div class="toggle-track"></div><div class="toggle-thumb"></div></label>
|
|
</div>
|
|
<div class="flip-row">
|
|
<div class="flip-label">Temp Compensation</div>
|
|
<div class="param-desc" style="flex:1;font-size:9px;color:var(--label)">Gyro drift correction by temperature</div>
|
|
<label class="toggle"><input type="checkbox" id="capTempComp" onchange="writeConfigBlob()" disabled><div class="toggle-track"></div><div class="toggle-thumb"></div></label>
|
|
</div>
|
|
<div class="flip-row" style="border-bottom:none">
|
|
<div class="flip-label">Auto Recalibration</div>
|
|
<div class="param-desc" style="flex:1;font-size:9px;color:var(--label)">Recalibrate gyro after long idle period</div>
|
|
<label class="toggle"><input type="checkbox" id="capAutoRecal" onchange="writeConfigBlob()" disabled><div class="toggle-track"></div><div class="toggle-thumb"></div></label>
|
|
</div>
|
|
</div>
|
|
|
|
</div><!-- /col-left -->
|
|
|
|
<!-- col-mid: button configuration -->
|
|
<div class="col-mid">
|
|
|
|
<div class="section-label">Tap Configuration</div>
|
|
<div class="card">
|
|
<div class="param">
|
|
<div><div class="param-label">Tap Freeze</div><div class="param-desc">Freeze cursor during tap impacts (jerk detection)</div></div>
|
|
<div style="grid-column:2/4;display:flex;justify-content:flex-end;align-items:center">
|
|
<label class="toggle"><input type="checkbox" id="tapFreezeEnabled" onchange="onTapFreezeChange(this.checked)" disabled><div class="toggle-track"></div><div class="toggle-thumb"></div></label>
|
|
</div>
|
|
</div>
|
|
<div class="param">
|
|
<div><div class="param-label">Tap Freeze Sensitivity</div><div class="param-desc">Jerk² threshold - lower = more aggressive cursor freeze during taps</div></div>
|
|
<input type="range" id="slJerkThreshold" min="500" max="10000" step="100" value="2000"
|
|
oninput="updateDisplay('jerkThreshold',this.value)" onchange="writeConfigBlob()">
|
|
<div class="param-value" id="valJerkThreshold">2000</div>
|
|
</div>
|
|
<div class="param">
|
|
<div><div class="param-label">Tap Threshold</div><div class="param-desc">Impact force needed · 1 LSB ≈ 62.5 mg at ±2g</div></div>
|
|
<input type="range" id="slTapThreshold" min="1" max="31" step="1" value="12"
|
|
oninput="updateDisplay('tapThreshold',this.value)" onchange="writeConfigBlob()">
|
|
<div class="param-value" id="valTapThreshold">750 mg</div>
|
|
</div>
|
|
<div class="param" style="border-bottom:none;padding-bottom:0">
|
|
<div><div class="param-label">Double-Tap Action</div><div class="param-desc">What a double-tap sends</div></div>
|
|
<div class="segmented" style="grid-column:2/4">
|
|
<button class="seg-btn active" id="tapActLeft" onclick="setTapAction(0)" disabled>LEFT</button>
|
|
<button class="seg-btn" id="tapActRight" onclick="setTapAction(1)" disabled>RIGHT</button>
|
|
<button class="seg-btn" id="tapActMiddle" onclick="setTapAction(2)" disabled>MIDDLE</button>
|
|
<button class="seg-btn" id="tapActKey" onclick="setTapAction(3)" disabled>KEY</button>
|
|
</div>
|
|
</div>
|
|
<div class="tap-key-row" id="tapKeyRow" style="display:none">
|
|
<div class="param-label" style="font-size:11px">HID Keycode (hex)</div>
|
|
<input type="text" id="tapKeyHex" placeholder="e.g. 28 = Enter" maxlength="4"
|
|
style="font-family:var(--mono);font-size:12px;background:var(--bg);color:var(--text);border:1px solid var(--border);padding:4px 8px;width:110px"
|
|
oninput="onTapKeyInput()" disabled>
|
|
<div class="param-label" style="font-size:11px;margin-left:12px">Modifier</div>
|
|
<div style="display:flex;gap:6px;flex-wrap:wrap">
|
|
<label class="mod-btn"><input type="checkbox" id="tapModCtrl" onchange="writeConfigBlob()" disabled><span>Ctrl</span></label>
|
|
<label class="mod-btn"><input type="checkbox" id="tapModShift" onchange="writeConfigBlob()" disabled><span>Shift</span></label>
|
|
<label class="mod-btn"><input type="checkbox" id="tapModAlt" onchange="writeConfigBlob()" disabled><span>Alt</span></label>
|
|
<label class="mod-btn"><input type="checkbox" id="tapModGui" onchange="writeConfigBlob()" disabled><span>GUI</span></label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="section-label">Physical Buttons</div>
|
|
<div class="card">
|
|
<!-- XIAO nRF52840 Sense pin diagram -->
|
|
<div class="xiao-wrap">
|
|
<svg id="xiaoSvg" viewBox="0 0 200 278" xmlns="http://www.w3.org/2000/svg" style="display:block;width:100%;max-width:200px">
|
|
<!-- USB-C connector -->
|
|
<rect x="72" y="4" width="56" height="28" rx="7" fill="#080e18" stroke="#162234" stroke-width="1.5"/>
|
|
<rect x="82" y="10" width="36" height="5" rx="1.5" fill="#0e1c30"/><rect x="82" y="18" width="36" height="5" rx="1.5" fill="#0e1c30"/>
|
|
<text x="100" y="30" text-anchor="middle" font-size="5.5" fill="#162234" font-family="Share Tech Mono,monospace">USB·C</text>
|
|
<!-- PCB board -->
|
|
<rect x="22" y="29" width="156" height="244" rx="9" fill="#080e18" stroke="#142030" stroke-width="1.5"/>
|
|
<!-- Corner holes -->
|
|
<circle cx="34" cy="41" r="3.5" fill="#040810" stroke="#0e1c2c" stroke-width="0.8"/>
|
|
<circle cx="166" cy="41" r="3.5" fill="#040810" stroke="#0e1c2c" stroke-width="0.8"/>
|
|
<circle cx="34" cy="261" r="3.5" fill="#040810" stroke="#0e1c2c" stroke-width="0.8"/>
|
|
<circle cx="166" cy="261" r="3.5" fill="#040810" stroke="#0e1c2c" stroke-width="0.8"/>
|
|
<!-- Board silk label -->
|
|
<text x="100" y="52" text-anchor="middle" font-size="5.5" fill="#142030" font-family="Share Tech Mono,monospace">XIAO nRF52840 Sense</text>
|
|
<!-- Antenna outline -->
|
|
<rect x="130" y="34" width="34" height="22" rx="2" fill="none" stroke="#0e1c2c" stroke-width="0.7" stroke-dasharray="2,2"/>
|
|
<text x="147" y="48" text-anchor="middle" font-size="5" fill="#0e1c2c" font-family="Share Tech Mono,monospace">ANT</text>
|
|
<!-- SoC -->
|
|
<rect x="60" y="78" width="80" height="72" rx="3" fill="#0c1828" stroke="#142030" stroke-width="0.8"/>
|
|
<text x="100" y="112" text-anchor="middle" font-size="7" fill="#1e3858" font-family="Share Tech Mono,monospace" font-weight="bold">nRF52840</text>
|
|
<text x="100" y="123" text-anchor="middle" font-size="5.5" fill="#102030" font-family="Share Tech Mono,monospace">HOLYIOT</text>
|
|
<!-- BGA dots (decorative) -->
|
|
<g fill="#0c1a2a"><circle cx="74" cy="94" r="1.8"/><circle cx="82" cy="94" r="1.8"/><circle cx="90" cy="94" r="1.8"/><circle cx="98" cy="94" r="1.8"/><circle cx="106" cy="94" r="1.8"/><circle cx="114" cy="94" r="1.8"/><circle cx="74" cy="102" r="1.8"/><circle cx="82" cy="102" r="1.8"/><circle cx="90" cy="102" r="1.8"/><circle cx="98" cy="102" r="1.8"/><circle cx="106" cy="102" r="1.8"/><circle cx="114" cy="102" r="1.8"/><circle cx="74" cy="140" r="1.8"/><circle cx="82" cy="140" r="1.8"/><circle cx="90" cy="140" r="1.8"/><circle cx="98" cy="140" r="1.8"/><circle cx="106" cy="140" r="1.8"/><circle cx="114" cy="140" r="1.8"/></g>
|
|
<!-- IMU chip -->
|
|
<rect x="72" y="176" width="56" height="44" rx="3" fill="#0a1420" stroke="#122030" stroke-width="0.8"/>
|
|
<text x="100" y="196" text-anchor="middle" font-size="5.5" fill="#142030" font-family="Share Tech Mono,monospace">LSM6DS3</text>
|
|
<text x="100" y="207" text-anchor="middle" font-size="5" fill="#0e1c2c" font-family="Share Tech Mono,monospace">IMU</text>
|
|
<!-- Charger IC -->
|
|
<rect x="36" y="228" width="30" height="26" rx="2" fill="#0a1420" stroke="#122030" stroke-width="0.8"/>
|
|
<text x="51" y="244" text-anchor="middle" font-size="4.5" fill="#0e1c2c" font-family="Share Tech Mono,monospace">BQ25100</text>
|
|
<!-- LED indicators -->
|
|
<circle cx="142" cy="168" r="3.5" fill="#0a1a0a" stroke="#0e180e" stroke-width="0.8"/>
|
|
<circle cx="152" cy="168" r="3.5" fill="#1a0a0a" stroke="#180e0e" stroke-width="0.8"/>
|
|
<circle cx="162" cy="168" r="3.5" fill="#0a0a1a" stroke="#0e0e18" stroke-width="0.8"/>
|
|
<text x="152" y="178" text-anchor="middle" font-size="4.5" fill="#0e1c2c" font-family="Share Tech Mono,monospace">LED</text>
|
|
<!-- Left traces -->
|
|
<g stroke="#142030" stroke-width="2"><line x1="22" y1="62" x2="9" y2="62"/><line x1="22" y1="94" x2="9" y2="94"/><line x1="22" y1="126" x2="9" y2="126"/><line x1="22" y1="158" x2="9" y2="158"/><line x1="22" y1="190" x2="9" y2="190"/><line x1="22" y1="222" x2="9" y2="222"/><line x1="22" y1="254" x2="9" y2="254"/></g>
|
|
<!-- Right traces -->
|
|
<g stroke="#142030" stroke-width="2"><line x1="178" y1="62" x2="191" y2="62"/><line x1="178" y1="94" x2="191" y2="94"/><line x1="178" y1="126" x2="191" y2="126"/><line x1="178" y1="158" x2="191" y2="158"/><line x1="178" y1="190" x2="191" y2="190"/><line x1="178" y1="222" x2="191" y2="222"/><line x1="178" y1="254" x2="191" y2="254"/></g>
|
|
<!-- Left pads D0-D6 (arduino 0-6) -->
|
|
<circle id="xiaoPin0" cx="9" cy="62" r="7" fill="#0c1828" stroke="#162234" stroke-width="1.5"/>
|
|
<circle id="xiaoPin1" cx="9" cy="94" r="7" fill="#0c1828" stroke="#162234" stroke-width="1.5"/>
|
|
<circle id="xiaoPin2" cx="9" cy="126" r="7" fill="#0c1828" stroke="#162234" stroke-width="1.5"/>
|
|
<circle id="xiaoPin3" cx="9" cy="158" r="7" fill="#0c1828" stroke="#162234" stroke-width="1.5"/>
|
|
<circle id="xiaoPin4" cx="9" cy="190" r="7" fill="#0c1828" stroke="#162234" stroke-width="1.5"/>
|
|
<circle id="xiaoPin5" cx="9" cy="222" r="7" fill="#0c1828" stroke="#162234" stroke-width="1.5"/>
|
|
<circle id="xiaoPin6" cx="9" cy="254" r="7" fill="#0c1828" stroke="#162234" stroke-width="1.5"/>
|
|
<!-- Right pads D7-D10 (arduino 7-10) -->
|
|
<circle id="xiaoPin7" cx="191" cy="62" r="7" fill="#0c1828" stroke="#162234" stroke-width="1.5"/>
|
|
<circle id="xiaoPin8" cx="191" cy="94" r="7" fill="#0c1828" stroke="#162234" stroke-width="1.5"/>
|
|
<circle id="xiaoPin9" cx="191" cy="126" r="7" fill="#0c1828" stroke="#162234" stroke-width="1.5"/>
|
|
<circle id="xiaoPin10" cx="191" cy="158" r="7" fill="#0c1828" stroke="#162234" stroke-width="1.5"/>
|
|
<!-- RST / GND / 3V3 (non-configurable) -->
|
|
<circle cx="191" cy="190" r="7" fill="#0c1828" stroke="#102028" stroke-width="1.5"/>
|
|
<circle cx="191" cy="222" r="7" fill="#0c1828" stroke="#201010" stroke-width="1.5"/>
|
|
<circle cx="191" cy="254" r="7" fill="#0c1828" stroke="#102010" stroke-width="1.5"/>
|
|
<!-- Left labels D0-D6 -->
|
|
<g font-size="7" font-family="Share Tech Mono,monospace" fill="#1e3858"><text x="24" y="65">D0</text><text x="24" y="97">D1</text><text x="24" y="129">D2</text><text x="24" y="161">D3</text><text x="24" y="193">D4</text><text x="24" y="225">D5</text><text x="24" y="257">D6</text></g>
|
|
<g font-size="5.5" font-family="Share Tech Mono,monospace" fill="#112030"><text x="36" y="65">A0</text><text x="36" y="97">A1</text><text x="36" y="129">A2</text><text x="36" y="161">A3</text><text x="36" y="193">SDA</text><text x="36" y="225">SCL</text><text x="36" y="257">TX</text></g>
|
|
<!-- Right labels D7-D10 -->
|
|
<g font-size="7" font-family="Share Tech Mono,monospace" text-anchor="end" fill="#1e3858"><text x="176" y="65">D7</text><text x="176" y="97">D8</text><text x="176" y="129">D9</text><text x="176" y="161">D10</text></g>
|
|
<g font-size="5.5" font-family="Share Tech Mono,monospace" text-anchor="end" fill="#112030"><text x="162" y="65">RX</text><text x="162" y="97">SCK</text><text x="162" y="129">MISO</text><text x="162" y="161">MOSI</text></g>
|
|
<!-- RST/GND/3V3 labels -->
|
|
<g font-size="7" font-family="Share Tech Mono,monospace" text-anchor="end" fill="#0e1c2c"><text x="176" y="193">RST</text></g>
|
|
<g font-size="7" font-family="Share Tech Mono,monospace" text-anchor="end" fill="#1a0808"><text x="176" y="225">GND</text></g>
|
|
<g font-size="7" font-family="Share Tech Mono,monospace" text-anchor="end" fill="#081a08"><text x="176" y="257">3V3</text></g>
|
|
</svg>
|
|
<div class="pin-legend">
|
|
<span class="pleg left">● Left</span>
|
|
<span class="pleg right">● Right</span>
|
|
<span class="pleg mid">● Middle</span>
|
|
</div>
|
|
</div>
|
|
<hr class="xiao-divider">
|
|
<div class="flip-row" style="align-items:center;padding-top:4px">
|
|
<div class="flip-label">Left Click</div>
|
|
<div class="param-desc" style="flex:1;font-size:9px;color:var(--label)">Pin wired to GND when pressed</div>
|
|
<select class="pin-select" id="btnLeftPin" onchange="updatePinDiagram();writeConfigBlob()" disabled>
|
|
<option value="255">None</option>
|
|
<option value="0">D0</option><option value="1">D1</option><option value="2">D2</option>
|
|
<option value="3">D3</option><option value="4">D4</option><option value="5">D5</option>
|
|
<option value="6">D6</option><option value="7">D7</option><option value="8">D8</option>
|
|
<option value="9">D9</option><option value="10">D10</option>
|
|
</select>
|
|
</div>
|
|
<div class="flip-row" style="align-items:center">
|
|
<div class="flip-label">Right Click</div>
|
|
<div class="param-desc" style="flex:1;font-size:9px;color:var(--label)">Pin wired to GND when pressed</div>
|
|
<select class="pin-select" id="btnRightPin" onchange="updatePinDiagram();writeConfigBlob()" disabled>
|
|
<option value="255">None</option>
|
|
<option value="0">D0</option><option value="1">D1</option><option value="2">D2</option>
|
|
<option value="3">D3</option><option value="4">D4</option><option value="5">D5</option>
|
|
<option value="6">D6</option><option value="7">D7</option><option value="8">D8</option>
|
|
<option value="9">D9</option><option value="10">D10</option>
|
|
</select>
|
|
</div>
|
|
<div class="flip-row" style="align-items:center;border-bottom:none">
|
|
<div class="flip-label">Middle Click</div>
|
|
<div class="param-desc" style="flex:1;font-size:9px;color:var(--label)">Pin wired to GND when pressed</div>
|
|
<select class="pin-select" id="btnMiddlePin" onchange="updatePinDiagram();writeConfigBlob()" disabled>
|
|
<option value="255">None</option>
|
|
<option value="0">D0</option><option value="1">D1</option><option value="2">D2</option>
|
|
<option value="3">D3</option><option value="4">D4</option><option value="5">D5</option>
|
|
<option value="6">D6</option><option value="7">D7</option><option value="8">D8</option>
|
|
<option value="9">D9</option><option value="10">D10</option>
|
|
</select>
|
|
</div>
|
|
<div style="padding:8px 0 2px;font-size:9px;color:var(--label);font-family:var(--mono)">
|
|
Pull-up built-in · wire button between chosen pin and GND
|
|
</div>
|
|
</div>
|
|
|
|
<div class="section-label">Device Commands</div>
|
|
<div class="cmd-grid">
|
|
<button class="cmd-btn calibrate" id="btnCal" onclick="sendCalibrate()" disabled>
|
|
<span class="cmd-icon">⊕</span><span>Calibrate Gyro</span>
|
|
<span class="cmd-desc">Hold device still - recalculates bias + records cal temperature.</span>
|
|
</button>
|
|
<button class="cmd-btn reset" id="btnReset" onclick="confirmReset()" disabled>
|
|
<span class="cmd-icon">⚠</span><span>Factory Reset</span>
|
|
<span class="cmd-desc">Wipes all config from flash and restores defaults.</span>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="section-label" style="margin-top:8px">Event Log</div>
|
|
<div class="console" id="console"></div>
|
|
|
|
</div><!-- /col-mid -->
|
|
|
|
<!-- col-right: live monitoring -->
|
|
<div class="col-right">
|
|
|
|
<div class="section-label">Live Cursor Visualiser</div>
|
|
<div class="viz-panel">
|
|
<div class="viz-header">
|
|
<div class="viz-title">IMU Stream</div>
|
|
<div style="display:flex;align-items:center;gap:10px">
|
|
<div class="viz-live paused" id="vizLive">⏸ PAUSED</div>
|
|
<button class="viz-ctrl-btn" id="vizPauseBtn" onclick="vizSetPaused(true)" title="Pause" style="display:none">▮▮</button>
|
|
<button class="viz-ctrl-btn" id="vizPlayBtn" onclick="vizSetPaused(false)" title="Play">▶</button>
|
|
</div>
|
|
</div>
|
|
<div class="viz-wrap">
|
|
<canvas id="vizCanvas" width="340" height="260"></canvas>
|
|
<div class="tap-flash left" id="tapFlashLeft"></div>
|
|
<div class="tap-flash right" id="tapFlashRight"></div>
|
|
</div>
|
|
<div class="viz-axes">
|
|
<div class="axis-bar-wrap">
|
|
<div class="axis-bar-label"><span>X (left/right)</span><span id="gyVal">0</span></div>
|
|
<div class="axis-bar-track"><div class="axis-bar-fill" id="gyBar"></div><div class="axis-bar-center"></div></div>
|
|
</div>
|
|
<div class="axis-bar-wrap">
|
|
<div class="axis-bar-label"><span>Y (up/down)</span><span id="gzVal">0</span></div>
|
|
<div class="axis-bar-track"><div class="axis-bar-fill" id="gzBar"></div><div class="axis-bar-center"></div></div>
|
|
</div>
|
|
</div>
|
|
<div style="margin-top:10px;font-size:9px;color:var(--label);line-height:1.7">
|
|
Dot = cursor position. Trail fades over time. <span style="color:var(--accent)">Cyan flash</span> = left click, <span style="color:var(--accent2)">red flash</span> = right click.
|
|
</div>
|
|
</div>
|
|
|
|
<div class="section-label">Device Orientation</div>
|
|
<div class="card orient-card">
|
|
<canvas id="orientCanvas"></canvas>
|
|
<div style="font-size:9px;color:var(--label);text-align:center;margin-top:6px" id="orientLabel">- not streaming -</div>
|
|
</div>
|
|
|
|
<div class="section-label">Live Telemetry</div>
|
|
<div class="telem-grid">
|
|
<div class="telem-cell"><div class="telem-val accent" id="telTemp">--</div><div class="telem-lbl">Temperature °C</div></div>
|
|
<div class="telem-cell"><div class="telem-val" id="telUptime">--</div><div class="telem-lbl">Uptime</div></div>
|
|
<div class="telem-cell"><div class="telem-val ok" id="telLeft">0</div><div class="telem-lbl">Left Clicks</div></div>
|
|
<div class="telem-cell"><div class="telem-val warn" id="telRight">0</div><div class="telem-lbl">Right Clicks</div></div>
|
|
<div class="telem-cell"><div class="telem-val" id="telBias">--</div><div class="telem-lbl">Bias RMS (rad/s)</div></div>
|
|
<div class="telem-cell"><div class="telem-val" id="telRecal">0</div><div class="telem-lbl">Recal Count</div></div>
|
|
</div>
|
|
|
|
</div>
|
|
</main>
|
|
|
|
<div class="overlay" id="overlay">
|
|
<div class="modal">
|
|
<h3>⚠ Factory Reset</h3>
|
|
<p>Erase all stored configuration from flash and restore factory defaults. This cannot be undone.</p>
|
|
<div class="modal-btns">
|
|
<button class="btn-cancel" onclick="closeModal()">Cancel</button>
|
|
<button class="btn-confirm" onclick="doReset()">Reset Device</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="overlay" id="debugOverlay">
|
|
<div class="modal debug-modal">
|
|
<div class="debug-header">
|
|
<h3>IMU Debug Recorder</h3>
|
|
<div style="display:flex;align-items:center;gap:8px">
|
|
<span class="debug-shock-badge" id="debugShockBadge">SHOCK</span>
|
|
<button class="debug-close" onclick="closeDebugModal()">✕</button>
|
|
</div>
|
|
</div>
|
|
<div class="debug-live" id="debugLive">
|
|
<table class="debug-table">
|
|
<thead><tr>
|
|
<th>ms</th><th>gX</th><th>gZ</th><th>aX</th><th>aY</th><th>aZ</th><th>mX</th><th>mY</th><th>flags</th>
|
|
</tr></thead>
|
|
<tbody id="debugRows"></tbody>
|
|
</table>
|
|
</div>
|
|
<div class="debug-controls">
|
|
<button class="debug-rec-btn" id="debugRecBtn" onclick="toggleDebugRec()">● REC</button>
|
|
<span class="debug-rec-count" id="debugRecCount">0 samples</span>
|
|
<button class="debug-ctrl-btn" onclick="saveDebugCSV()">Save CSV</button>
|
|
<button class="debug-ctrl-btn" onclick="clearDebugRec()">Clear</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="app.js"></script>
|
|
</body>
|
|
</html>
|
|
|
|
|