874 lines
45 KiB
HTML
874 lines
45 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">
|
|
<style>
|
|
:root {
|
|
--bg: #0a0c0e;
|
|
--panel: #111417;
|
|
--panel2: #0d1013;
|
|
--border: #1f2428;
|
|
--accent: #00e5ff;
|
|
--accent2: #ff3d71;
|
|
--warn: #ffaa00;
|
|
--ok: #00e096;
|
|
--dim: #3a4050;
|
|
--text: #c8d0dc;
|
|
--label: #5a6480;
|
|
--mono: 'Share Tech Mono', monospace;
|
|
--sans: 'Barlow Condensed', sans-serif;
|
|
--logo-color: #ffffff;
|
|
/* Component tokens */
|
|
--header-bg: rgba(10,12,14,0.96);
|
|
--scanline: rgba(0,0,0,0.07);
|
|
--hover-desc-color: rgba(10,12,14,0.65);
|
|
/* Canvas */
|
|
--canvas-bg: #0d1013;
|
|
--canvas-fade: rgba(13,16,19,0.25);
|
|
--canvas-grid: rgba(31,36,40,0.6);
|
|
--canvas-center: rgba(58,64,80,0.5);
|
|
--canvas-idle-text: rgba(90,100,128,0.7);
|
|
--trail-rgb: 0,229,255;
|
|
--trail-idle-rgb: 58,64,80;
|
|
--canvas-dot: #00e5ff;
|
|
--canvas-dot-idle: #3a4050;
|
|
--canvas-dot-glow: rgba(0,229,255,0.35);
|
|
/* Tap flashes */
|
|
--tap-left: rgba(0,229,255,0.35);
|
|
--tap-right: rgba(255,61,113,0.35);
|
|
}
|
|
|
|
/* ── Light theme (explicit) ──────────────────────────────────────────────── */
|
|
:root.theme-light {
|
|
--bg: #f0f2f5;
|
|
--panel: #ffffff;
|
|
--panel2: #e8eaed;
|
|
--border: #b8bec8;
|
|
--accent: #006699;
|
|
--accent2: #c01a50;
|
|
--warn: #b36a00;
|
|
--ok: #007040;
|
|
--dim: #848ea4;
|
|
--text: #0f1118;
|
|
--label: #4e566e;
|
|
--logo-color: #0f1118;
|
|
--header-bg: rgba(240,242,245,0.96);
|
|
--scanline: rgba(0,0,0,0.03);
|
|
--hover-desc-color: rgba(240,242,245,0.7);
|
|
--canvas-bg: #e8eaed;
|
|
--canvas-fade: rgba(232,234,237,0.35);
|
|
--canvas-grid: rgba(195,200,210,0.7);
|
|
--canvas-center: rgba(155,162,178,0.6);
|
|
--canvas-idle-text: rgba(100,112,140,0.8);
|
|
--trail-rgb: 0,100,170;
|
|
--trail-idle-rgb: 155,162,178;
|
|
--canvas-dot: #0077aa;
|
|
--canvas-dot-idle: #a8b0c0;
|
|
--canvas-dot-glow: rgba(0,100,170,0.3);
|
|
--tap-left: rgba(0,100,170,0.35);
|
|
--tap-right: rgba(200,30,80,0.35);
|
|
}
|
|
|
|
/* ── Auto light (OS hint; explicit class overrides) ──────────────────────── */
|
|
@media (prefers-color-scheme: light) {
|
|
:root:not(.theme-dark) {
|
|
--bg: #f0f2f5;
|
|
--panel: #ffffff;
|
|
--panel2: #e8eaed;
|
|
--border: #b8bec8;
|
|
--accent: #006699;
|
|
--accent2: #c01a50;
|
|
--warn: #b36a00;
|
|
--ok: #007040;
|
|
--dim: #848ea4;
|
|
--text: #0f1118;
|
|
--label: #4e566e;
|
|
--logo-color: #0f1118;
|
|
--header-bg: rgba(240,242,245,0.96);
|
|
--scanline: rgba(0,0,0,0.03);
|
|
--hover-desc-color: rgba(240,242,245,0.7);
|
|
--canvas-bg: #e8eaed;
|
|
--canvas-fade: rgba(232,234,237,0.35);
|
|
--canvas-grid: rgba(195,200,210,0.7);
|
|
--canvas-center: rgba(155,162,178,0.6);
|
|
--canvas-idle-text: rgba(100,112,140,0.8);
|
|
--trail-rgb: 0,100,170;
|
|
--trail-idle-rgb: 155,162,178;
|
|
--canvas-dot: #0077aa;
|
|
--canvas-dot-idle: #a8b0c0;
|
|
--canvas-dot-glow: rgba(0,100,170,0.3);
|
|
--tap-left: rgba(0,100,170,0.35);
|
|
--tap-right: rgba(200,30,80,0.35);
|
|
}
|
|
}
|
|
|
|
* { box-sizing:border-box; margin:0; padding:0; }
|
|
body { background:var(--bg); color:var(--text); font-family:var(--mono); min-height:100vh; overflow-x:hidden; }
|
|
body::before { content:''; position:fixed; inset:0; pointer-events:none; z-index:9999;
|
|
background:repeating-linear-gradient(0deg,transparent,transparent 2px,var(--scanline) 2px,var(--scanline) 4px); }
|
|
|
|
header { border-bottom:1px solid var(--border); padding:16px 28px; display:flex; align-items:center; gap:20px; position:sticky; top:0; background:var(--header-bg); backdrop-filter:blur(10px); z-index:100; }
|
|
.logo { font-family:var(--sans); font-weight:900; font-size:22px; letter-spacing:0.08em; color:var(--logo-color); text-transform:uppercase; line-height:1; }
|
|
.logo span { color:var(--accent); }
|
|
.logo-sub { font-size:10px; color:var(--label); letter-spacing:0.25em; text-transform:uppercase; margin-top:3px; }
|
|
.header-right { margin-left:auto; display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:flex-end; }
|
|
|
|
.status-pill { display:flex; align-items:center; gap:8px; padding:6px 12px; border:1px solid var(--border); font-size:11px; letter-spacing:0.15em; text-transform:uppercase; color:var(--label); transition:all 0.3s; white-space:nowrap; }
|
|
.status-pill.connected { border-color:var(--ok); color:var(--ok); }
|
|
.status-pill.connecting { border-color:var(--warn); color:var(--warn); }
|
|
.dot { width:7px; height:7px; border-radius:50%; background:var(--dim); flex-shrink:0; }
|
|
.connected .dot { background:var(--ok); box-shadow:0 0 8px var(--ok); animation:pulse 2s infinite; }
|
|
.connecting .dot { background:var(--warn); box-shadow:0 0 8px var(--warn); animation:pulse 0.8s infinite; }
|
|
@keyframes pulse { 0%,100%{opacity:1}50%{opacity:0.3} }
|
|
@keyframes chgpulse { 0%,100%{opacity:1}50%{opacity:0.5} }
|
|
|
|
.btn { font-family:var(--sans); font-weight:700; font-size:13px; letter-spacing:0.15em; text-transform:uppercase; background:transparent; padding:8px 18px; cursor:pointer; transition:all 0.2s; position:relative; overflow:hidden; white-space:nowrap; }
|
|
.btn-connect { border:1px solid var(--accent); color:var(--accent); }
|
|
.btn-disconnect { border:1px solid var(--accent2); color:var(--accent2); }
|
|
.btn::before { content:''; position:absolute; inset:0; transform:scaleX(0); transform-origin:left; transition:transform 0.2s; }
|
|
.btn-connect::before { background:var(--accent); }
|
|
.btn-disconnect::before { background:var(--accent2); }
|
|
.btn:hover::before { transform:scaleX(1); }
|
|
.btn:hover { color:var(--bg); }
|
|
.btn span { position:relative; z-index:1; }
|
|
.btn:disabled { border-color:var(--dim); color:var(--dim); cursor:not-allowed; }
|
|
.btn:disabled::before { display:none; }
|
|
.btn:disabled:hover { color:var(--dim); }
|
|
.btn-theme { border:1px solid var(--dim); color:var(--label); min-width:72px; text-align:center; }
|
|
.btn-theme::before { background:var(--text); }
|
|
|
|
.batt-bar { display:flex; align-items:center; gap:8px; font-size:11px; color:var(--label); }
|
|
.batt-cells { display:flex; gap:2px; }
|
|
.batt-cell { width:9px; height:15px; border:1px solid var(--dim); background:transparent; transition:background 0.3s; }
|
|
.batt-cell.f { background:var(--ok); border-color:var(--ok); }
|
|
.batt-cell.f.warn { background:var(--warn); border-color:var(--warn); }
|
|
.batt-cell.f.crit { background:var(--accent2); border-color:var(--accent2); }
|
|
.batt-cell.f.charging { background:var(--accent); border-color:var(--accent); animation:chgpulse 1.2s ease-in-out infinite; }
|
|
.chg-badge { display:none; align-items:center; gap:4px; padding:3px 8px; font-size:10px; letter-spacing:0.15em; text-transform:uppercase; white-space:nowrap; border:1px solid; }
|
|
.chg-badge.charging { border-color:var(--accent); color:var(--accent); animation:chgpulse 1.6s ease-in-out infinite; }
|
|
.chg-badge.full { border-color:var(--ok); color:var(--ok); }
|
|
.chg-badge.show { display:flex; }
|
|
|
|
main { max-width:1100px; margin:0 auto; padding:32px 20px 80px; display:grid; grid-template-columns:1fr 380px; gap:16px; align-items:start; }
|
|
.col-left { display:grid; gap:12px; }
|
|
.col-right { display:grid; gap:12px; position:sticky; top:80px; }
|
|
|
|
.section-label { font-family:var(--sans); font-size:11px; font-weight:600; letter-spacing:0.3em; text-transform:uppercase; color:var(--label); padding:4px 0; border-bottom:1px solid var(--border); margin-bottom:4px; display:flex; align-items:center; gap:8px; }
|
|
.section-label::before { content:'//'; color:var(--accent); font-family:var(--mono); font-size:10px; }
|
|
|
|
.card { background:var(--panel); border:1px solid var(--border); padding:20px; position:relative; }
|
|
.card::before { content:''; position:absolute; top:0; left:0; width:3px; height:100%; background:var(--accent); opacity:0; transition:opacity 0.3s; }
|
|
.card:focus-within::before { opacity:1; }
|
|
|
|
.param { display:grid; grid-template-columns:190px 1fr auto; align-items:center; gap:14px; padding:12px 0; border-bottom:1px solid var(--border); }
|
|
.param:last-child { border-bottom:none; padding-bottom:0; }
|
|
.param:first-child { padding-top:0; }
|
|
.param-label { font-family:var(--sans); font-size:13px; font-weight:600; letter-spacing:0.05em; text-transform:uppercase; }
|
|
.param-desc { font-size:10px; color:var(--label); margin-top:3px; }
|
|
.param-value { font-size:13px; color:var(--accent); min-width:52px; text-align:right; }
|
|
|
|
input[type=range] { -webkit-appearance:none; appearance:none; width:100%; height:2px; background:var(--border); outline:none; cursor:pointer; }
|
|
input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; width:13px; height:13px; border-radius:0; background:var(--accent); cursor:pointer; transition:transform 0.15s; }
|
|
input[type=range]::-webkit-slider-thumb:hover { transform:scale(1.4); }
|
|
input[type=range]:disabled { opacity:0.35; }
|
|
input[type=range]:disabled::-webkit-slider-thumb { background:var(--dim); cursor:not-allowed; }
|
|
|
|
.segmented { display:flex; border:1px solid var(--border); }
|
|
.seg-btn { flex:1; padding:7px 8px; background:transparent; border:none; border-right:1px solid var(--border); font-family:var(--mono); font-size:10px; letter-spacing:0.1em; color:var(--label); cursor:pointer; text-transform:uppercase; transition:all 0.15s; }
|
|
.seg-btn:last-child { border-right:none; }
|
|
.seg-btn.active { background:var(--accent); color:var(--bg); font-weight:bold; }
|
|
.seg-btn:disabled { cursor:not-allowed; opacity:0.35; }
|
|
.charge-seg .seg-btn.active.off { background:var(--dim); color:#fff; }
|
|
.charge-seg .seg-btn.active.slow { background:var(--warn); color:var(--bg); }
|
|
.charge-seg .seg-btn.active.fast { background:var(--accent2);color:#fff; }
|
|
|
|
.flip-row { display:flex; gap:16px; padding:12px 0; border-bottom:1px solid var(--border); align-items:center; }
|
|
.flip-row:last-child { border-bottom:none; }
|
|
.flip-label { font-family:var(--sans); font-size:13px; font-weight:600; text-transform:uppercase; flex:1; }
|
|
.toggle { position:relative; width:40px; height:22px; flex-shrink:0; }
|
|
.toggle input { display:none; }
|
|
.toggle-track { position:absolute; inset:0; background:var(--border); cursor:pointer; transition:background 0.2s; }
|
|
.toggle input:checked + .toggle-track { background:var(--accent); }
|
|
.toggle-thumb { position:absolute; top:3px; left:3px; width:16px; height:16px; background:#fff; transition:transform 0.2s; pointer-events:none; }
|
|
.toggle input:checked ~ .toggle-thumb { transform:translateX(18px); }
|
|
.toggle input:disabled + .toggle-track { cursor:not-allowed; opacity:0.4; }
|
|
|
|
.cmd-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
|
|
.cmd-btn { font-family:var(--sans); font-weight:700; font-size:13px; letter-spacing:0.12em; text-transform:uppercase; background:transparent; border:1px solid var(--border); color:var(--text); padding:14px; cursor:pointer; transition:all 0.2s; position:relative; overflow:hidden; text-align:left; display:flex; flex-direction:column; gap:5px; }
|
|
.cmd-btn .cmd-icon { font-size:20px; }
|
|
.cmd-btn .cmd-desc { font-family:var(--mono); font-size:9px; color:var(--label); letter-spacing:0.04em; text-transform:none; font-weight:400; }
|
|
.cmd-btn::before { content:''; position:absolute; inset:0; opacity:0; transition:opacity 0.2s; }
|
|
.cmd-btn:hover::before { opacity:1; }
|
|
.cmd-btn:hover { color:var(--bg); }
|
|
.cmd-btn:hover .cmd-desc { color:var(--hover-desc-color); }
|
|
.cmd-btn.calibrate::before { background:var(--accent); }
|
|
.cmd-btn.calibrate:hover { border-color:var(--accent); }
|
|
.cmd-btn.reset::before { background:var(--accent2); }
|
|
.cmd-btn.reset:hover { border-color:var(--accent2); }
|
|
.cmd-btn span { position:relative; z-index:1; }
|
|
.cmd-btn:disabled { opacity:0.3; cursor:not-allowed; }
|
|
.cmd-btn:disabled::before { display:none; }
|
|
.cmd-btn:disabled:hover { color:var(--text); border-color:var(--border); }
|
|
.cmd-btn:disabled:hover .cmd-desc { color:var(--label); }
|
|
|
|
.console { background:var(--panel2); border:1px solid var(--border); padding:14px; height:160px; overflow-y:auto; font-size:10.5px; line-height:1.85; }
|
|
.console::-webkit-scrollbar { width:3px; }
|
|
.console::-webkit-scrollbar-thumb { background:var(--dim); }
|
|
.log-line { display:flex; gap:10px; }
|
|
.log-time { color:var(--dim); flex-shrink:0; }
|
|
.log-msg { color:var(--text); }
|
|
.log-msg.ok { color:var(--ok); }
|
|
.log-msg.err { color:var(--accent2); }
|
|
.log-msg.warn { color:var(--warn); }
|
|
.log-msg.info { color:var(--accent); }
|
|
|
|
.viz-panel { background:var(--panel2); border:1px solid var(--border); padding:16px; }
|
|
.viz-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
|
|
.viz-title { font-family:var(--sans); font-size:11px; font-weight:600; letter-spacing:0.25em; text-transform:uppercase; color:var(--label); }
|
|
.viz-live { font-size:9px; letter-spacing:0.2em; color:var(--accent2); display:none; }
|
|
.viz-live.on { display:block; animation:pulse 1.5s infinite; }
|
|
#vizCanvas { display:block; width:100%; background:var(--panel2); border:1px solid var(--border); cursor:crosshair; image-rendering:pixelated; }
|
|
.viz-axes { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:10px; }
|
|
.axis-bar-wrap { display:flex; flex-direction:column; gap:3px; }
|
|
.axis-bar-label { font-size:9px; letter-spacing:0.15em; color:var(--label); text-transform:uppercase; display:flex; justify-content:space-between; }
|
|
.axis-bar-track { height:4px; background:var(--border); position:relative; }
|
|
.axis-bar-fill { position:absolute; top:0; height:100%; background:var(--accent); transition:width 0.05s, left 0.05s; }
|
|
.axis-bar-fill.neg { background:var(--accent2); }
|
|
.axis-bar-center { position:absolute; top:-2px; left:50%; width:1px; height:8px; background:var(--dim); }
|
|
|
|
.telem-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
|
|
.telem-cell { background:var(--panel2); border:1px solid var(--border); padding:12px 14px; }
|
|
.telem-val { font-family:var(--sans); font-size:24px; font-weight:700; color:var(--text); line-height:1; }
|
|
.telem-val.accent { color:var(--accent); }
|
|
.telem-val.warn { color:var(--warn); }
|
|
.telem-val.ok { color:var(--ok); }
|
|
.telem-lbl { font-size:9px; letter-spacing:0.2em; text-transform:uppercase; color:var(--label); margin-top:5px; }
|
|
|
|
.charge-info { display:grid; grid-template-columns:1fr 1fr 1fr; gap:0; margin-top:14px; border:1px solid var(--border); }
|
|
.ci-item { padding:10px 12px; text-align:center; border-right:1px solid var(--border); }
|
|
.ci-item:last-child { border-right:none; }
|
|
.ci-val { font-family:var(--sans); font-size:16px; font-weight:700; }
|
|
.ci-lbl { font-size:9px; letter-spacing:0.2em; text-transform:uppercase; color:var(--label); margin-top:3px; }
|
|
|
|
.overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.88); z-index:500; align-items:center; justify-content:center; }
|
|
.overlay.show { display:flex; }
|
|
.modal { background:var(--panel); border:1px solid var(--accent2); padding:28px; max-width:360px; width:100%; }
|
|
.modal h3 { font-family:var(--sans); font-size:18px; font-weight:700; color:var(--accent2); margin-bottom:10px; text-transform:uppercase; }
|
|
.modal p { font-size:11px; color:var(--label); line-height:1.8; margin-bottom:20px; }
|
|
.modal-btns { display:flex; gap:10px; }
|
|
.modal-btns button { flex:1; font-family:var(--sans); font-weight:700; font-size:12px; letter-spacing:0.1em; text-transform:uppercase; padding:10px; cursor:pointer; border:1px solid; transition:all 0.2s; background:transparent; }
|
|
.btn-cancel { border-color:var(--dim); color:var(--dim); }
|
|
.btn-cancel:hover { border-color:var(--text); color:var(--text); }
|
|
.btn-confirm { border-color:var(--accent2); color:var(--accent2); }
|
|
.btn-confirm:hover { background:var(--accent2); color:var(--bg); }
|
|
|
|
.no-ble { grid-column:1/-1; text-align:center; padding:80px 24px; }
|
|
.no-ble h2 { font-family:var(--sans); font-size:28px; font-weight:700; color:var(--accent2); margin-bottom:12px; }
|
|
.no-ble p { font-size:13px; color:var(--label); line-height:1.8; }
|
|
|
|
body.disconnected .card { opacity:0.45; pointer-events:none; transition:opacity 0.3s; }
|
|
body.disconnected .cmd-grid { opacity:0.45; pointer-events:none; transition:opacity 0.3s; }
|
|
|
|
.tap-flash { position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity 0.25s; }
|
|
.tap-flash.left { background:radial-gradient(circle at center, var(--tap-left) 0%, transparent 70%); }
|
|
.tap-flash.right { background:radial-gradient(circle at center, var(--tap-right) 0%, transparent 70%); }
|
|
.tap-flash.show { opacity:1; }
|
|
.viz-wrap { position:relative; }
|
|
</style>
|
|
</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>
|
|
</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>
|
|
// ── UUIDs ────────────────────────────────────────────────────────────────────
|
|
// v3.3: 4 characteristics instead of 10
|
|
const SVC_UUID = '00001234-0000-1000-8000-00805f9b34fb';
|
|
const CHR = {
|
|
configBlob: '00001235-0000-1000-8000-00805f9b34fb', // ConfigBlob R/W 16 bytes
|
|
command: '00001236-0000-1000-8000-00805f9b34fb', // Command W 1 byte
|
|
telemetry: '00001237-0000-1000-8000-00805f9b34fb', // Telemetry R/N 24 bytes
|
|
imuStream: '00001238-0000-1000-8000-00805f9b34fb', // ImuStream N 14 bytes
|
|
};
|
|
|
|
// Local shadow of the current config (kept in sync with device)
|
|
const config = { sensitivity:600, deadZone:0.06, accelStrength:0.08, curve:0, axisFlip:0, chargeMode:1 };
|
|
|
|
let device=null, server=null, chars={};
|
|
let currentChargeStatus=0, currentBattPct=null;
|
|
|
|
// ── Logging ──────────────────────────────────────────────────────────────────
|
|
function log(msg, type='') {
|
|
const el=document.getElementById('console');
|
|
const now=new Date();
|
|
const ts=`${p2(now.getHours())}:${p2(now.getMinutes())}:${p2(now.getSeconds())}.${p3(now.getMilliseconds())}`;
|
|
const d=document.createElement('div'); d.className='log-line';
|
|
d.innerHTML=`<span class="log-time">${ts}</span><span class="log-msg ${type}">${msg}</span>`;
|
|
el.appendChild(d); el.scrollTop=el.scrollHeight;
|
|
}
|
|
const p2=n=>String(n).padStart(2,'0'), p3=n=>String(n).padStart(3,'0');
|
|
function cssVar(n) { return getComputedStyle(document.documentElement).getPropertyValue(n).trim(); }
|
|
|
|
// ── Connection ───────────────────────────────────────────────────────────────
|
|
async function doConnect() {
|
|
if (!navigator.bluetooth) { log('Web Bluetooth not supported.','err'); return; }
|
|
setStatus('connecting');
|
|
log('Scanning for IMU Mouse…','info');
|
|
try {
|
|
device = await navigator.bluetooth.requestDevice({
|
|
filters:[{name:'IMU Mouse'},{name:'IMU Mouse (safe)'}],
|
|
optionalServices:[SVC_UUID,'battery_service']
|
|
});
|
|
device.addEventListener('gattserverdisconnected', onDisconnected);
|
|
log(`Found: ${device.name}`,'ok');
|
|
server = await device.gatt.connect();
|
|
log('GATT connected','ok');
|
|
await discoverServices();
|
|
setStatus('connected');
|
|
log('Ready','ok');
|
|
} catch(e) { log(`Connection failed: ${e.message}`,'err'); setStatus('disconnected'); }
|
|
}
|
|
|
|
function doDisconnect() {
|
|
if (device && device.gatt.connected) { log('Disconnecting…','warn'); device.gatt.disconnect(); }
|
|
}
|
|
|
|
async function discoverServices() {
|
|
log('Discovering services…','info');
|
|
try {
|
|
const svc = await server.getPrimaryService(SVC_UUID);
|
|
|
|
chars.configBlob = await svc.getCharacteristic(CHR.configBlob);
|
|
chars.command = await svc.getCharacteristic(CHR.command);
|
|
chars.telemetry = await svc.getCharacteristic(CHR.telemetry);
|
|
chars.imuStream = await svc.getCharacteristic(CHR.imuStream);
|
|
|
|
// Read config blob and populate UI
|
|
await readConfigBlob();
|
|
|
|
// Telemetry notify (1 Hz) — also carries chargeStatus
|
|
chars.telemetry.addEventListener('characteristicvaluechanged', e => parseTelemetry(e.target.value));
|
|
await chars.telemetry.startNotifications();
|
|
// Initial read so values show immediately
|
|
parseTelemetry(await chars.telemetry.readValue());
|
|
|
|
// IMU stream notify (~100 Hz)
|
|
chars.imuStream.addEventListener('characteristicvaluechanged', e => parseImuStream(e.target.value));
|
|
await chars.imuStream.startNotifications();
|
|
document.getElementById('vizLive').classList.add('on');
|
|
log('IMU stream subscribed','ok');
|
|
|
|
log('Config service ready (4 chars)','ok');
|
|
} catch(e) {
|
|
log(`Service discovery failed: ${e.message}`,'err');
|
|
// Safe mode device might not have config service
|
|
if (e.message.includes('not found')) log('Device may be in safe mode — basic mouse only','warn');
|
|
}
|
|
|
|
// Battery service (standard — always present)
|
|
try {
|
|
const bsvc = await server.getPrimaryService('battery_service');
|
|
const bch = await bsvc.getCharacteristic('battery_level');
|
|
bch.addEventListener('characteristicvaluechanged', e => {
|
|
currentBattPct = e.target.value.getUint8(0);
|
|
updateBatteryBar(currentBattPct, currentChargeStatus);
|
|
});
|
|
await bch.startNotifications();
|
|
const v = await bch.readValue();
|
|
currentBattPct = v.getUint8(0);
|
|
updateBatteryBar(currentBattPct, currentChargeStatus);
|
|
log(`Battery: ${currentBattPct}%`,'ok');
|
|
} catch(e) { log('Battery service unavailable','warn'); }
|
|
}
|
|
|
|
// ── ConfigBlob read / write ──────────────────────────────────────────────────
|
|
// ConfigBlob layout (16 bytes LE):
|
|
// float sensitivity [0], float deadZone [4], float accelStrength [8]
|
|
// uint8 curve [12], uint8 axisFlip [13], uint8 chargeMode [14], uint8 pad [15]
|
|
|
|
async function readConfigBlob() {
|
|
if (!chars.configBlob) return;
|
|
try {
|
|
const dv = await chars.configBlob.readValue();
|
|
const view = new DataView(dv.buffer ?? dv);
|
|
config.sensitivity = view.getFloat32(0, true);
|
|
config.deadZone = view.getFloat32(4, true);
|
|
config.accelStrength = view.getFloat32(8, true);
|
|
config.curve = view.getUint8(12);
|
|
config.axisFlip = view.getUint8(13);
|
|
config.chargeMode = view.getUint8(14);
|
|
applyConfigToUI();
|
|
log(`Config loaded — sens=${config.sensitivity.toFixed(0)} dz=${config.deadZone.toFixed(3)}`,'ok');
|
|
} catch(e) { log(`Config read error: ${e.message}`,'err'); }
|
|
}
|
|
|
|
function applyConfigToUI() {
|
|
document.getElementById('slSensitivity').value = config.sensitivity;
|
|
updateDisplay('sensitivity', config.sensitivity);
|
|
document.getElementById('slDeadZone').value = config.deadZone;
|
|
updateDisplay('deadZone', config.deadZone);
|
|
document.getElementById('slAccel').value = config.accelStrength;
|
|
updateDisplay('accel', config.accelStrength);
|
|
setCurveUI(config.curve);
|
|
document.getElementById('flipX').checked = !!(config.axisFlip & 1);
|
|
document.getElementById('flipY').checked = !!(config.axisFlip & 2);
|
|
setChargeModeUI(config.chargeMode);
|
|
}
|
|
|
|
async function writeConfigBlob() {
|
|
if (!chars.configBlob) return;
|
|
|
|
// Gather current UI values into the config shadow
|
|
config.sensitivity = +document.getElementById('slSensitivity').value;
|
|
config.deadZone = +document.getElementById('slDeadZone').value;
|
|
config.accelStrength = +document.getElementById('slAccel').value;
|
|
config.axisFlip = (document.getElementById('flipX').checked ? 1 : 0)
|
|
| (document.getElementById('flipY').checked ? 2 : 0);
|
|
// config.curve and config.chargeMode are updated directly by setCurve/setChargeMode
|
|
|
|
const buf = new ArrayBuffer(16);
|
|
const view = new DataView(buf);
|
|
view.setFloat32(0, config.sensitivity, true);
|
|
view.setFloat32(4, config.deadZone, true);
|
|
view.setFloat32(8, config.accelStrength, true);
|
|
view.setUint8(12, config.curve);
|
|
view.setUint8(13, config.axisFlip);
|
|
view.setUint8(14, config.chargeMode);
|
|
view.setUint8(15, 0);
|
|
|
|
try {
|
|
await chars.configBlob.writeValue(buf);
|
|
log(`Config written — sens=${config.sensitivity.toFixed(0)} dz=${config.deadZone.toFixed(3)} curve=${config.curve} chg=${config.chargeMode}`,'ok');
|
|
} catch(e) { log(`Config write failed: ${e.message}`,'err'); }
|
|
}
|
|
|
|
// ── Individual control handlers ───────────────────────────────────────────────
|
|
// These update the local config shadow then write the full blob
|
|
|
|
async function setCurve(val) {
|
|
config.curve = val;
|
|
setCurveUI(val);
|
|
await writeConfigBlob();
|
|
log(`Curve → ${['LINEAR','SQUARE','SQRT'][val]}`,'ok');
|
|
}
|
|
function setCurveUI(val) {
|
|
['curveLinear','curveSquare','curveSqrt'].forEach((id,i)=>
|
|
document.getElementById(id).classList.toggle('active', i===val));
|
|
}
|
|
|
|
async function setChargeMode(val) {
|
|
config.chargeMode = val;
|
|
setChargeModeUI(val);
|
|
await writeConfigBlob();
|
|
log(`Charge → ${['OFF','SLOW 50mA','FAST 100mA'][val]}`,'warn');
|
|
}
|
|
function setChargeModeUI(val) {
|
|
[['chgOff','off'],['chgSlow','slow'],['chgFast','fast']].forEach(([id,cls],i) => {
|
|
const b = document.getElementById(id);
|
|
b.classList.remove('active','off','slow','fast');
|
|
if (i===val) b.classList.add('active', cls);
|
|
});
|
|
document.getElementById('ciMode').textContent = ['Off (0mA)','50 mA','100 mA'][val] ?? '--';
|
|
}
|
|
|
|
async function sendCalibrate() {
|
|
if (!chars.command) return;
|
|
try { await chars.command.writeValue(new Uint8Array([0x01])); log('Calibration sent — hold still!','warn'); }
|
|
catch(e) { log(`Calibrate failed: ${e.message}`,'err'); }
|
|
}
|
|
function confirmReset() { document.getElementById('overlay').classList.add('show'); }
|
|
function closeModal() { document.getElementById('overlay').classList.remove('show'); }
|
|
async function doReset() {
|
|
closeModal(); if (!chars.command) return;
|
|
try {
|
|
await chars.command.writeValue(new Uint8Array([0xFF]));
|
|
log('Factory reset sent…','warn');
|
|
setTimeout(async () => { await readConfigBlob(); log('Config reloaded','ok'); }, 1500);
|
|
} catch(e) { log(`Reset failed: ${e.message}`,'err'); }
|
|
}
|
|
|
|
// ── Telemetry ────────────────────────────────────────────────────────────────
|
|
// TelemetryPacket (24 bytes LE):
|
|
// uint32 uptime [0], uint32 leftClicks [4], uint32 rightClicks [8]
|
|
// float temp [12], float biasRms [16]
|
|
// uint16 recalCount [20], uint8 chargeStatus [22], uint8 pad [23]
|
|
function parseTelemetry(dv) {
|
|
const view = new DataView(dv.buffer ?? dv);
|
|
const uptime = view.getUint32(0, true);
|
|
const leftClicks = view.getUint32(4, true);
|
|
const rightClicks = view.getUint32(8, true);
|
|
const temp = view.getFloat32(12,true);
|
|
const biasRms = view.getFloat32(16,true);
|
|
const recalCount = view.getUint16(20, true);
|
|
const chargeStatus= view.getUint8(22);
|
|
|
|
document.getElementById('telTemp').textContent = temp.toFixed(1)+'°';
|
|
document.getElementById('telUptime').textContent = formatUptime(uptime);
|
|
document.getElementById('telLeft').textContent = leftClicks.toLocaleString();
|
|
document.getElementById('telRight').textContent = rightClicks.toLocaleString();
|
|
document.getElementById('telBias').textContent = biasRms.toExponential(2);
|
|
document.getElementById('telRecal').textContent = recalCount;
|
|
const tEl = document.getElementById('telTemp');
|
|
tEl.className = 'telem-val '+(temp>40?'warn':'accent');
|
|
|
|
// chargeStatus is now delivered via telemetry (no separate characteristic)
|
|
if (chargeStatus !== currentChargeStatus) {
|
|
currentChargeStatus = chargeStatus;
|
|
updateChargeUI();
|
|
}
|
|
}
|
|
function formatUptime(s) {
|
|
const h=Math.floor(s/3600), m=Math.floor((s%3600)/60), ss=s%60;
|
|
return h>0 ? `${h}h ${p2(m)}m` : `${m}m ${p2(ss)}s`;
|
|
}
|
|
function clearTelemetry() {
|
|
['telTemp','telUptime','telLeft','telRight','telBias','telRecal'].forEach(id=>
|
|
document.getElementById(id).textContent='--');
|
|
}
|
|
|
|
// ── Battery & Charge UI ───────────────────────────────────────────────────────
|
|
function updateBatteryBar(pct, status) {
|
|
document.getElementById('battBar').style.display='flex';
|
|
document.getElementById('battPct').textContent=pct+'%';
|
|
document.getElementById('ciPct').textContent=pct+'%';
|
|
document.getElementById('badgeCharging').classList.toggle('show', status===1);
|
|
document.getElementById('badgeFull').classList.toggle('show', status===2);
|
|
const cells=document.getElementById('battCells'); cells.innerHTML='';
|
|
const filled=Math.round(pct/10);
|
|
for (let i=0;i<10;i++) {
|
|
const c=document.createElement('div'); c.className='batt-cell';
|
|
if (i<filled) c.className+=status===1?' f charging':pct<=20?' f crit':pct<=40?' f warn':' f';
|
|
cells.appendChild(c);
|
|
}
|
|
}
|
|
function updateChargeUI() {
|
|
const sl=['Discharging','Charging','Full'];
|
|
const sc=['var(--label)','var(--accent)','var(--ok)'];
|
|
const el=document.getElementById('ciStatus');
|
|
el.textContent=sl[currentChargeStatus]??'--';
|
|
el.style.color=sc[currentChargeStatus]??'var(--label)';
|
|
if (currentBattPct!==null) updateBatteryBar(currentBattPct, currentChargeStatus);
|
|
}
|
|
|
|
// ── Param display ─────────────────────────────────────────────────────────────
|
|
function updateDisplay(key, val) {
|
|
const map = {
|
|
sensitivity: ['valSensitivity', v=>parseFloat(v).toFixed(0)],
|
|
deadZone: ['valDeadZone', v=>parseFloat(v).toFixed(3)],
|
|
accel: ['valAccel', v=>parseFloat(v).toFixed(2)],
|
|
};
|
|
const [id,fmt] = map[key];
|
|
document.getElementById(id).textContent = fmt(val);
|
|
}
|
|
|
|
// ── Status UI ────────────────────────────────────────────────────────────────
|
|
function setStatus(state) {
|
|
const pill=document.getElementById('statusPill');
|
|
document.getElementById('statusText').textContent={connected:'CONNECTED',connecting:'CONNECTING…',disconnected:'DISCONNECTED'}[state];
|
|
pill.className='status-pill '+state;
|
|
document.body.className=state;
|
|
const cBtn=document.getElementById('connectBtn'), dBtn=document.getElementById('disconnectBtn');
|
|
const inputs=document.querySelectorAll('input[type=range],.seg-btn,.toggle input,.cmd-btn');
|
|
if (state==='connected') {
|
|
cBtn.style.display='none'; dBtn.style.display='';
|
|
inputs.forEach(el=>el.disabled=false);
|
|
} else if (state==='connecting') {
|
|
cBtn.disabled=true; cBtn.style.display=''; dBtn.style.display='none';
|
|
inputs.forEach(el=>el.disabled=true);
|
|
} else {
|
|
cBtn.disabled=false; cBtn.style.display=''; dBtn.style.display='none';
|
|
inputs.forEach(el=>el.disabled=true);
|
|
}
|
|
}
|
|
function onDisconnected() {
|
|
log('Device disconnected','warn');
|
|
chars={}; device=null; server=null;
|
|
setStatus('disconnected');
|
|
document.getElementById('battBar').style.display='none';
|
|
document.getElementById('badgeCharging').classList.remove('show');
|
|
document.getElementById('badgeFull').classList.remove('show');
|
|
document.getElementById('vizLive').classList.remove('on');
|
|
clearTelemetry();
|
|
}
|
|
|
|
// ── IMU Stream + Visualiser ──────────────────────────────────────────────────
|
|
// ImuPacket (14 bytes LE):
|
|
// int16 gyroY_mDPS [0], int16 gyroZ_mDPS [2]
|
|
// int16 accelX_mg [4], int16 accelY_mg [6], int16 accelZ_mg [8]
|
|
// int8 moveX [10], int8 moveY [11], uint8 flags [12], uint8 pad [13]
|
|
const canvas = document.getElementById('vizCanvas');
|
|
const ctx = canvas.getContext('2d');
|
|
const TRAIL_LEN = 120;
|
|
let cursorX = canvas.width/2, cursorY = canvas.height/2, trail = [];
|
|
|
|
function parseImuStream(dv) {
|
|
const view = new DataView(dv.buffer ?? dv);
|
|
const gyroY = view.getInt16(0, true);
|
|
const gyroZ = view.getInt16(2, true);
|
|
const moveX = view.getInt8(10);
|
|
const moveY = view.getInt8(11);
|
|
const flags = view.getUint8(12);
|
|
const idle = !!(flags & 0x01);
|
|
const single = !!(flags & 0x02);
|
|
const dbl = !!(flags & 0x04);
|
|
|
|
updateAxisBar('gy', gyroY, 30000);
|
|
updateAxisBar('gz', gyroZ, 30000);
|
|
|
|
if (!idle) {
|
|
cursorX = Math.max(4, Math.min(canvas.width - 4, cursorX + moveX * 1.5));
|
|
cursorY = Math.max(4, Math.min(canvas.height - 4, cursorY + moveY * 1.5));
|
|
}
|
|
trail.push({x:cursorX, y:cursorY, t:Date.now(), idle});
|
|
if (trail.length > TRAIL_LEN) trail.shift();
|
|
|
|
if (single) flashTap('Left');
|
|
if (dbl) flashTap('Right');
|
|
drawViz(idle);
|
|
}
|
|
|
|
function updateAxisBar(axis, val, max) {
|
|
const pct=Math.abs(val)/max*50, neg=val<0;
|
|
const bar=document.getElementById(axis+'Bar'), label=document.getElementById(axis+'Val');
|
|
bar.style.width=pct+'%';
|
|
bar.style.left=neg?(50-pct)+'%':'50%';
|
|
bar.className='axis-bar-fill'+(neg?' neg':'');
|
|
label.textContent=(val/1000).toFixed(1);
|
|
}
|
|
|
|
function drawViz(idle) {
|
|
const W=canvas.width, H=canvas.height;
|
|
ctx.fillStyle=cssVar('--canvas-fade'); ctx.fillRect(0,0,W,H);
|
|
ctx.strokeStyle=cssVar('--canvas-grid'); ctx.lineWidth=0.5;
|
|
for(let x=0;x<W;x+=40){ctx.beginPath();ctx.moveTo(x,0);ctx.lineTo(x,H);ctx.stroke();}
|
|
for(let y=0;y<H;y+=40){ctx.beginPath();ctx.moveTo(0,y);ctx.lineTo(W,y);ctx.stroke();}
|
|
ctx.strokeStyle=cssVar('--canvas-center'); ctx.lineWidth=0.5;
|
|
ctx.beginPath();ctx.moveTo(W/2,0);ctx.lineTo(W/2,H);ctx.stroke();
|
|
ctx.beginPath();ctx.moveTo(0,H/2);ctx.lineTo(W,H/2);ctx.stroke();
|
|
const now=Date.now();
|
|
const trailRgb=cssVar('--trail-rgb'), trailIdleRgb=cssVar('--trail-idle-rgb');
|
|
for(let i=1;i<trail.length;i++){
|
|
const age=(now-trail[i].t)/1200, alpha=Math.max(0,1-age); if(alpha<=0) continue;
|
|
ctx.strokeStyle=trail[i].idle?`rgba(${trailIdleRgb},${alpha*0.4})`:`rgba(${trailRgb},${alpha*0.7})`;
|
|
ctx.lineWidth=1.5;
|
|
ctx.beginPath();ctx.moveTo(trail[i-1].x,trail[i-1].y);ctx.lineTo(trail[i].x,trail[i].y);ctx.stroke();
|
|
}
|
|
const dotColor=idle?cssVar('--canvas-dot-idle'):cssVar('--canvas-dot');
|
|
const dotGlow=idle?'transparent':cssVar('--canvas-dot-glow');
|
|
ctx.shadowColor=dotGlow; ctx.shadowBlur=12;
|
|
ctx.fillStyle=dotColor;
|
|
ctx.beginPath();ctx.arc(cursorX,cursorY,idle?3:5,0,Math.PI*2);ctx.fill();
|
|
ctx.shadowBlur=0;
|
|
if(idle){ctx.fillStyle=cssVar('--canvas-idle-text');ctx.font='10px Share Tech Mono,monospace';ctx.textAlign='center';ctx.fillText('IDLE',W/2,H-10);ctx.textAlign='left';}
|
|
}
|
|
|
|
function flashTap(side){
|
|
const el=document.getElementById('tapFlash'+side);
|
|
el.classList.add('show'); setTimeout(()=>el.classList.remove('show'),300);
|
|
}
|
|
|
|
function drawInitState() {
|
|
const W=canvas.width,H=canvas.height;
|
|
ctx.fillStyle=cssVar('--canvas-bg');ctx.fillRect(0,0,W,H);
|
|
ctx.strokeStyle=cssVar('--canvas-grid');ctx.lineWidth=0.5;
|
|
for(let x=0;x<W;x+=40){ctx.beginPath();ctx.moveTo(x,0);ctx.lineTo(x,H);ctx.stroke();}
|
|
for(let y=0;y<H;y+=40){ctx.beginPath();ctx.moveTo(0,y);ctx.lineTo(W,y);ctx.stroke();}
|
|
ctx.strokeStyle=cssVar('--canvas-center');
|
|
ctx.beginPath();ctx.moveTo(W/2,0);ctx.lineTo(W/2,H);ctx.stroke();
|
|
ctx.beginPath();ctx.moveTo(0,H/2);ctx.lineTo(W,H/2);ctx.stroke();
|
|
ctx.fillStyle=cssVar('--canvas-idle-text');ctx.font='10px Share Tech Mono,monospace';
|
|
ctx.textAlign='center';ctx.fillText('connect to activate stream',W/2,H/2+4);ctx.textAlign='left';
|
|
}
|
|
// ── Theme ─────────────────────────────────────────────────────────────────────
|
|
const THEMES = ['auto','dark','light'];
|
|
const THEME_LABELS = {auto:'AUTO',dark:'DARK',light:'LIGHT'};
|
|
let themeIdx = 0;
|
|
|
|
function cycleTheme() {
|
|
themeIdx = (themeIdx + 1) % 3;
|
|
applyTheme(THEMES[themeIdx]);
|
|
}
|
|
function applyTheme(t) {
|
|
document.documentElement.classList.remove('theme-dark','theme-light');
|
|
if (t === 'dark') document.documentElement.classList.add('theme-dark');
|
|
if (t === 'light') document.documentElement.classList.add('theme-light');
|
|
document.getElementById('themeBtn').querySelector('span').textContent = THEME_LABELS[t];
|
|
localStorage.setItem('theme', t);
|
|
if (!chars.imuStream) drawInitState();
|
|
}
|
|
(function(){
|
|
const saved = localStorage.getItem('theme') ?? 'auto';
|
|
themeIdx = Math.max(0, THEMES.indexOf(saved));
|
|
applyTheme(saved);
|
|
})();
|
|
|
|
if (!navigator.bluetooth) {
|
|
document.getElementById('mainContent').innerHTML=`<div class="no-ble"><h2>⚠ Web Bluetooth Not Supported</h2><p>Use <strong>Chrome</strong> or <strong>Edge</strong> on desktop.<br>Linux: enable <code>chrome://flags/#enable-web-bluetooth</code></p></div>`;
|
|
} else {
|
|
log('Web Bluetooth ready. Click CONNECT to pair your IMU Mouse.','info');
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |