582 lines
26 KiB
JavaScript
582 lines
26 KiB
JavaScript
// ── 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,
|
|
tapThreshold:12, tapAction:0, tapKey:0, tapMod:0 };
|
|
|
|
let device=null, server=null, chars={}, userDisconnected=false;
|
|
let currentChargeStatus=0, currentBattPct=null;
|
|
|
|
// ── GATT write queue (prevents "operation already in progress") ───────────────
|
|
let _gattQueue = Promise.resolve();
|
|
function gattWrite(char, value) {
|
|
const p = _gattQueue.then(() => char.writeValueWithResponse(value));
|
|
_gattQueue = p.catch(() => {});
|
|
return p;
|
|
}
|
|
function gattCmd(char, value) {
|
|
const p = _gattQueue.then(() => char.writeValueWithoutResponse(value));
|
|
_gattQueue = p.catch(() => {});
|
|
return p;
|
|
}
|
|
|
|
// ── Logging ──────────────────────────────────────────────────────────────────
|
|
(function() {
|
|
const _methods = { log: '', warn: 'warn', error: 'err' };
|
|
for (const [method, type] of Object.entries(_methods)) {
|
|
const orig = console[method].bind(console);
|
|
console[method] = (...args) => {
|
|
orig(...args);
|
|
log(args.map(a => typeof a === 'object' ? JSON.stringify(a) : String(a)).join(' '), type);
|
|
};
|
|
}
|
|
})();
|
|
|
|
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; }
|
|
userDisconnected = false;
|
|
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) {
|
|
userDisconnected = true;
|
|
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 — subscribed on demand via play button
|
|
chars.imuStream.addEventListener('characteristicvaluechanged', e => parseImuStream(e.target.value));
|
|
|
|
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 (20 bytes LE):
|
|
// float sensitivity [0], float deadZone [4], float accelStrength [8]
|
|
// uint8 curve [12], uint8 axisFlip [13], uint8 chargeMode [14]
|
|
// uint8 tapThreshold [15], uint8 tapAction [16], uint8 tapKey [17], uint8 tapMod [18], uint8 pad [19]
|
|
|
|
async function readConfigBlob() {
|
|
if (!chars.configBlob) return;
|
|
try {
|
|
const dv = await chars.configBlob.readValue();
|
|
const view = dv instanceof DataView ? new DataView(dv.buffer, dv.byteOffset, dv.byteLength) : new DataView(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);
|
|
if (view.byteLength >= 20) {
|
|
config.tapThreshold = view.getUint8(15);
|
|
config.tapAction = view.getUint8(16);
|
|
config.tapKey = view.getUint8(17);
|
|
config.tapMod = view.getUint8(18);
|
|
}
|
|
applyConfigToUI();
|
|
log(`Config loaded — sens=${config.sensitivity.toFixed(0)} dz=${config.deadZone.toFixed(3)} tapThr=${config.tapThreshold}`,'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);
|
|
document.getElementById('slTapThreshold').value = config.tapThreshold;
|
|
updateDisplay('tapThreshold', config.tapThreshold);
|
|
setTapActionUI(config.tapAction);
|
|
document.getElementById('tapKeyHex').value = config.tapKey ? config.tapKey.toString(16).padStart(2,'0') : '';
|
|
document.getElementById('tapModCtrl').checked = !!(config.tapMod & 0x01);
|
|
document.getElementById('tapModShift').checked = !!(config.tapMod & 0x02);
|
|
document.getElementById('tapModAlt').checked = !!(config.tapMod & 0x04);
|
|
document.getElementById('tapModGui').checked = !!(config.tapMod & 0x08);
|
|
}
|
|
|
|
let _writeConfigTimer = null;
|
|
function writeConfigBlob() {
|
|
clearTimeout(_writeConfigTimer);
|
|
_writeConfigTimer = setTimeout(_doWriteConfigBlob, 150);
|
|
}
|
|
async function _doWriteConfigBlob() {
|
|
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.tapThreshold = +document.getElementById('slTapThreshold').value;
|
|
config.tapMod = (document.getElementById('tapModCtrl').checked ? 0x01 : 0)
|
|
| (document.getElementById('tapModShift').checked ? 0x02 : 0)
|
|
| (document.getElementById('tapModAlt').checked ? 0x04 : 0)
|
|
| (document.getElementById('tapModGui').checked ? 0x08 : 0);
|
|
// config.curve, config.chargeMode, config.tapAction, config.tapKey updated directly
|
|
|
|
const buf = new ArrayBuffer(20);
|
|
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, config.tapThreshold);
|
|
view.setUint8(16, config.tapAction);
|
|
view.setUint8(17, config.tapKey);
|
|
view.setUint8(18, config.tapMod);
|
|
view.setUint8(19, 0);
|
|
|
|
try {
|
|
await gattWrite(chars.configBlob, buf);
|
|
log(`Config written — sens=${config.sensitivity.toFixed(0)} tapThr=${config.tapThreshold} tapAction=${config.tapAction}`,'ok');
|
|
} catch(e) { log(`Config write failed: ${e.message}`,'err'); }
|
|
}
|
|
|
|
// ── Individual control handlers ───────────────────────────────────────────────
|
|
// These update the local config shadow then write the full blob
|
|
|
|
function setCurve(val) {
|
|
config.curve = val;
|
|
setCurveUI(val);
|
|
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));
|
|
}
|
|
|
|
function setChargeMode(val) {
|
|
config.chargeMode = val;
|
|
setChargeModeUI(val);
|
|
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] ?? '--';
|
|
}
|
|
|
|
function setTapAction(val) {
|
|
config.tapAction = val;
|
|
setTapActionUI(val);
|
|
writeConfigBlob();
|
|
}
|
|
function setTapActionUI(val) {
|
|
['tapActLeft','tapActRight','tapActMiddle','tapActKey'].forEach((id,i) =>
|
|
document.getElementById(id).classList.toggle('active', i===val));
|
|
document.getElementById('tapKeyRow').style.display = val===3 ? 'flex' : 'none';
|
|
}
|
|
function onTapKeyInput() {
|
|
const hex = document.getElementById('tapKeyHex').value.trim();
|
|
const code = parseInt(hex, 16);
|
|
config.tapKey = (isNaN(code) || code < 0 || code > 255) ? 0 : code;
|
|
writeConfigBlob();
|
|
}
|
|
|
|
async function sendCalibrate() {
|
|
if (!chars.command) return;
|
|
try { await gattCmd(chars.command, 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 gattCmd(chars.command, 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) {
|
|
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);
|
|
document.getElementById('telLeft').textContent = leftClicks.toLocaleString();
|
|
document.getElementById('telRight').textContent = rightClicks.toLocaleString();
|
|
document.getElementById('telBias').textContent = biasRms.toFixed(4);
|
|
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)],
|
|
tapThreshold: ['valTapThreshold', v=>(parseFloat(v)*62.5).toFixed(0)+' mg'],
|
|
};
|
|
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,#tapKeyHex,.mod-btn input');
|
|
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');
|
|
const savedDevice = device;
|
|
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');
|
|
imuSubscribed = false; vizPaused = true; vizUpdateIndicator();
|
|
clearTelemetry();
|
|
if (!userDisconnected && document.getElementById('autoReconnect').checked && savedDevice) {
|
|
log('Auto-reconnecting…','info');
|
|
setTimeout(async () => {
|
|
try {
|
|
setStatus('connecting');
|
|
server = await savedDevice.gatt.connect();
|
|
device = savedDevice;
|
|
userDisconnected = false;
|
|
log('GATT reconnected','ok');
|
|
await discoverServices();
|
|
setStatus('connected');
|
|
log('Ready','ok');
|
|
} catch(e) { log(`Reconnect failed: ${e.message}`,'err'); setStatus('disconnected'); }
|
|
}, 1000);
|
|
} else {
|
|
userDisconnected = false;
|
|
}
|
|
}
|
|
|
|
// ── 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 = [];
|
|
let vizPaused = true;
|
|
let imuSubscribed = false;
|
|
|
|
function vizUpdateIndicator() {
|
|
const el = document.getElementById('vizLive');
|
|
if (!imuSubscribed || vizPaused) {
|
|
el.classList.remove('on');
|
|
el.classList.add('paused');
|
|
el.textContent = '⏸ PAUSED';
|
|
} else {
|
|
el.classList.add('on');
|
|
el.classList.remove('paused');
|
|
el.textContent = '● LIVE';
|
|
}
|
|
document.getElementById('vizPauseBtn').style.display = (!vizPaused && imuSubscribed) ? '' : 'none';
|
|
document.getElementById('vizPlayBtn').style.display = (vizPaused || !imuSubscribed) ? '' : 'none';
|
|
}
|
|
|
|
async function vizSetPaused(paused) {
|
|
vizPaused = paused;
|
|
if (!paused && chars.imuStream && !imuSubscribed) {
|
|
try {
|
|
await chars.imuStream.startNotifications();
|
|
imuSubscribed = true;
|
|
log('IMU stream subscribed','ok');
|
|
} catch(e) { log(`IMU stream start failed: ${e.message}`,'err'); vizPaused = true; }
|
|
} else if (paused && imuSubscribed) {
|
|
try {
|
|
await chars.imuStream.stopNotifications();
|
|
imuSubscribed = false;
|
|
} catch(e) { log(`IMU stream stop failed: ${e.message}`,'err'); }
|
|
}
|
|
vizUpdateIndicator();
|
|
}
|
|
|
|
function parseImuStream(dv) {
|
|
if (vizPaused) return;
|
|
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);
|
|
|
|
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');
|
|
}
|