nikrozman/air-mouse
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects 2 Releases Activity

Better connection handling, CSS

Browse Source
This commit is contained in:
Nik Rozman
2026-03-01 18:38:06 +01:00
parent 0ad07ac8ce
commit b8e3658f66
2 changed files with 85 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
web/app.js
View File

@@ -215,14 +215,28 @@ async function doReset() {
// 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);
let view;
try {
view = dv instanceof DataView ? new DataView(dv.buffer, dv.byteOffset, dv.byteLength) : new DataView(dv);
} catch(e) { log(`parseTelemetry: DataView wrap failed — ${e.message}`,'err'); return; }
if (view.byteLength < 24) {
const bytes = new Uint8Array(view.buffer, view.byteOffset, view.byteLength);
const hex = Array.from(bytes).map(b=>b.toString(16).padStart(2,'0')).join(' ');
log(`TELEM: expected 24B, got ${view.byteLength}B — MTU too small? raw: ${hex}`,'err');
return;
}
let uptime, leftClicks, rightClicks, temp, biasRms, recalCount, chargeStatus;
try {
uptime = view.getUint32(0, true);
leftClicks = view.getUint32(4, true);
rightClicks = view.getUint32(8, true);
temp = view.getFloat32(12,true);
biasRms = view.getFloat32(16,true);
recalCount = view.getUint16(20, true);
chargeStatus= view.getUint8(22);
} catch(e) { log(`parseTelemetry: parse error at offset — ${e.message}`,'err'); return; }
document.getElementById('telTemp').textContent = temp.toFixed(1)+'°';
document.getElementById('telUptime').textContent = formatUptime(uptime);
@@ -342,12 +356,26 @@ 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);
let view;
try {
view = dv instanceof DataView ? new DataView(dv.buffer, dv.byteOffset, dv.byteLength) : new DataView(dv);
} catch(e) { log(`parseImuStream: DataView wrap failed — ${e.message}`,'err'); return; }
if (view.byteLength < 14) {
const bytes = new Uint8Array(view.buffer, view.byteOffset, view.byteLength);
const hex = Array.from(bytes).map(b=>b.toString(16).padStart(2,'0')).join(' ');
log(`IMU raw (${view.byteLength}B, expected 14): ${hex}`,'err');
return;
}
let gyroY, gyroZ, moveX, moveY, flags;
try {
gyroY = view.getInt16(0, true);
gyroZ = view.getInt16(2, true);
moveX = view.getInt8(10);
moveY = view.getInt8(11);
flags = view.getUint8(12);
} catch(e) { log(`parseImuStream: parse error — ${e.message}`,'err'); return; }
const idle = !!(flags & 0x01);
const single = !!(flags & 0x02);
const dbl = !!(flags & 0x04);

86
web/style.css
View File

@@ -194,7 +194,7 @@
.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::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); }
@@ -221,53 +221,53 @@
.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-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); }
.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; }
.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; }
.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 { 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); }
.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; }
.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; }
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; }
.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; }