nikrozman/air-mouse
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects 2 Releases Activity
Files
ef97d8f32a955f1b2e40c0b93f0d10be8060f8d8
air-mouse/web/index.html
Nik Rozman 0ad07ac8ce Restructure project
2026-03-01 18:24:12 +01:00

180 lines
9.2 KiB
HTML
Raw Blame History

<!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">
</head>
<body class="disconnected">
<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-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>
</div>
</header>
<main id="mainContent">
<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 off" id="chgOff" onclick="setChargeMode(0)" disabled>OFF</button>
<button class="seg-btn slow" id="chgSlow" onclick="setChargeMode(1)" disabled>SLOW · 50mA</button>
<button class="seg-btn fast" id="chgFast" onclick="setChargeMode(2)" disabled>FAST · 100mA</button>
</div>
</div>
<div class="charge-info">
<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>
</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 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>
<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 class="viz-live" id="vizLive">● LIVE</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>GY (up/down)</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>GZ (left/right)</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">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>
<script src="app.js"></script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink