diff --git a/web/app.js b/web/app.js index c106ef6..c0c8c9f 100644 --- a/web/app.js +++ b/web/app.js @@ -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); diff --git a/web/style.css b/web/style.css index 571f1fd..5c2da5e 100644 --- a/web/style.css +++ b/web/style.css @@ -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; } \ No newline at end of file + .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; }