Initial physical button mapping implementation #4
This commit is contained in:
Nik Rozman
@@ -1,6 +1,7 @@
|
||||
#include "ble_config.h"
|
||||
#include "tap.h"
|
||||
#include "battery.h"
|
||||
#include "buttons.h"
|
||||
#include <Adafruit_LittleFS.h>
|
||||
#include <InternalFileSystem.h>
|
||||
|
||||
@@ -77,6 +78,9 @@ void pushConfigBlob() {
|
||||
b.tapFreezeEnabled = cfg.tapFreezeEnabled;
|
||||
b.jerkThreshold = cfg.jerkThreshold;
|
||||
b.featureFlags = cfg.featureFlags;
|
||||
b.btnLeftPin = cfg.btnLeftPin;
|
||||
b.btnRightPin = cfg.btnRightPin;
|
||||
b.btnMiddlePin = cfg.btnMiddlePin;
|
||||
cfgBlob.write((uint8_t*)&b, sizeof(b));
|
||||
}
|
||||
#endif
|
||||
@@ -122,6 +126,13 @@ void onConfigBlobWrite(uint16_t h, BLECharacteristic* c, uint8_t* d, uint16_t l)
|
||||
cfg.tapFreezeEnabled = b->tapFreezeEnabled ? 1 : 0;
|
||||
if (b->jerkThreshold >= 100.0f && b->jerkThreshold <= 50000.0f) cfg.jerkThreshold = b->jerkThreshold;
|
||||
cfg.featureFlags = b->featureFlags & (FLAG_TAP_ENABLED | FLAG_TEMP_COMP_ENABLED | FLAG_AUTO_RECAL_ENABLED);
|
||||
// btnXPin: accept BTN_PIN_NONE (0xFF) or a valid Arduino pin number (0-10 = D0-D10)
|
||||
cfg.btnLeftPin = (b->btnLeftPin <= 10 || b->btnLeftPin == BTN_PIN_NONE) ? b->btnLeftPin : BTN_PIN_NONE;
|
||||
cfg.btnRightPin = (b->btnRightPin <= 10 || b->btnRightPin == BTN_PIN_NONE) ? b->btnRightPin : BTN_PIN_NONE;
|
||||
cfg.btnMiddlePin = (b->btnMiddlePin <= 10 || b->btnMiddlePin == BTN_PIN_NONE) ? b->btnMiddlePin : BTN_PIN_NONE;
|
||||
#ifdef FEATURE_PHYSICAL_BUTTONS
|
||||
setupPhysicalButtons(); // reconfigure pins immediately (no restart needed)
|
||||
#endif
|
||||
saveConfig();
|
||||
Serial.print("[CFG] Written — sens="); Serial.print(cfg.sensitivity,0);
|
||||
Serial.print(" dz="); Serial.print(cfg.deadZone,3);
|
||||
|
||||
52
source/buttons.cpp
Normal file
52
source/buttons.cpp
Normal file
@@ -0,0 +1,52 @@
|
||||
#include "buttons.h"
|
||||
|
||||
#ifdef FEATURE_PHYSICAL_BUTTONS
|
||||
#include <bluefruit.h>
|
||||
|
||||
extern BLEHidAdafruit blehid;
|
||||
|
||||
static uint8_t physBtnMask = 0; // bitmask of currently-pressed physical buttons
|
||||
|
||||
// ─── Setup ────────────────────────────────────────────────────────────────────
|
||||
void setupPhysicalButtons() {
|
||||
// Release any held physical buttons before reconfiguring
|
||||
if (physBtnMask && Bluefruit.connected()) { blehid.mouseButtonRelease(); }
|
||||
physBtnMask = 0;
|
||||
|
||||
if (cfg.btnLeftPin != BTN_PIN_NONE) pinMode(cfg.btnLeftPin, INPUT_PULLUP);
|
||||
if (cfg.btnRightPin != BTN_PIN_NONE) pinMode(cfg.btnRightPin, INPUT_PULLUP);
|
||||
if (cfg.btnMiddlePin != BTN_PIN_NONE) pinMode(cfg.btnMiddlePin, INPUT_PULLUP);
|
||||
|
||||
bool any = (cfg.btnLeftPin != BTN_PIN_NONE) || (cfg.btnRightPin != BTN_PIN_NONE)
|
||||
|| (cfg.btnMiddlePin != BTN_PIN_NONE);
|
||||
if (any) {
|
||||
Serial.print("[BTN] L=");
|
||||
cfg.btnLeftPin == BTN_PIN_NONE ? Serial.print("--") : Serial.print(cfg.btnLeftPin);
|
||||
Serial.print(" R=");
|
||||
cfg.btnRightPin == BTN_PIN_NONE ? Serial.print("--") : Serial.print(cfg.btnRightPin);
|
||||
Serial.print(" M=");
|
||||
cfg.btnMiddlePin == BTN_PIN_NONE ? Serial.print("--") : Serial.print(cfg.btnMiddlePin);
|
||||
Serial.println();
|
||||
}
|
||||
}
|
||||
|
||||
// ─── Poll and report ──────────────────────────────────────────────────────────
|
||||
// Called every loop iteration (before rate limiter) for immediate response.
|
||||
// Uses active-low logic: INPUT_PULLUP, button connects pin to GND.
|
||||
void processPhysicalButtons() {
|
||||
if (!Bluefruit.connected()) return;
|
||||
|
||||
uint8_t newMask = 0;
|
||||
if (cfg.btnLeftPin != BTN_PIN_NONE && digitalRead(cfg.btnLeftPin) == LOW) newMask |= MOUSE_BUTTON_LEFT;
|
||||
if (cfg.btnRightPin != BTN_PIN_NONE && digitalRead(cfg.btnRightPin) == LOW) newMask |= MOUSE_BUTTON_RIGHT;
|
||||
if (cfg.btnMiddlePin != BTN_PIN_NONE && digitalRead(cfg.btnMiddlePin) == LOW) newMask |= MOUSE_BUTTON_MIDDLE;
|
||||
|
||||
if (newMask != physBtnMask) {
|
||||
physBtnMask = newMask;
|
||||
if (physBtnMask) blehid.mouseButtonPress(physBtnMask);
|
||||
else blehid.mouseButtonRelease();
|
||||
Serial.print("[BTN] mask=0x"); Serial.println(physBtnMask, HEX);
|
||||
}
|
||||
}
|
||||
|
||||
#endif // FEATURE_PHYSICAL_BUTTONS
|
||||
7
source/buttons.h
Normal file
7
source/buttons.h
Normal file
@@ -0,0 +1,7 @@
|
||||
#pragma once
|
||||
#include "config.h"
|
||||
|
||||
#ifdef FEATURE_PHYSICAL_BUTTONS
|
||||
void setupPhysicalButtons();
|
||||
void processPhysicalButtons();
|
||||
#endif
|
||||
@@ -10,6 +10,7 @@
|
||||
#define FEATURE_AUTO_RECAL
|
||||
#define FEATURE_BATTERY_MONITOR
|
||||
#define FEATURE_BOOT_LOOP_DETECT
|
||||
#define FEATURE_PHYSICAL_BUTTONS
|
||||
|
||||
// ─── Debug ────────────────────────────────────────────────────────────────────
|
||||
// #define DEBUG
|
||||
@@ -53,7 +54,10 @@
|
||||
|
||||
// ─── Persistence ──────────────────────────────────────────────────────────────
|
||||
#define CONFIG_FILENAME "/imu_mouse_cfg.bin"
|
||||
#define CONFIG_MAGIC 0xDEAD123CUL
|
||||
#define CONFIG_MAGIC 0xDEAD123DUL
|
||||
|
||||
// ─── Physical button sentinel ─────────────────────────────────────────────────
|
||||
#define BTN_PIN_NONE 0xFF // Stored in btn*Pin when that button is disabled
|
||||
|
||||
// ─── Runtime feature-override flags (cfg.featureFlags bitmask) ───────────────
|
||||
// These mirror the compile-time FEATURE_* defines but can be toggled at runtime
|
||||
@@ -94,6 +98,9 @@ struct Config {
|
||||
float jerkThreshold; // jerk² threshold for tap-freeze detection
|
||||
uint8_t tapFreezeEnabled; // 1 = enable jerk-based cursor freeze during taps
|
||||
uint8_t featureFlags; // bitmask of FLAG_* — runtime feature overrides
|
||||
uint8_t btnLeftPin; // BTN_PIN_NONE or Arduino pin number (0-10 = D0-D10)
|
||||
uint8_t btnRightPin;
|
||||
uint8_t btnMiddlePin;
|
||||
};
|
||||
extern Config cfg;
|
||||
extern const Config CFG_DEFAULTS;
|
||||
@@ -113,8 +120,11 @@ struct __attribute__((packed)) ConfigBlob {
|
||||
uint8_t tapFreezeEnabled; // [19] 1 = enable jerk-based cursor freeze during taps
|
||||
float jerkThreshold; // [20] jerk² tap-freeze threshold
|
||||
uint8_t featureFlags; // [24] FLAG_* bitmask — runtime feature overrides
|
||||
uint8_t btnLeftPin; // [25] BTN_PIN_NONE or Arduino pin (0-10 = D0-D10)
|
||||
uint8_t btnRightPin; // [26]
|
||||
uint8_t btnMiddlePin; // [27]
|
||||
};
|
||||
static_assert(sizeof(ConfigBlob) == 25, "ConfigBlob must be 25 bytes");
|
||||
static_assert(sizeof(ConfigBlob) == 28, "ConfigBlob must be 28 bytes");
|
||||
|
||||
// ─── TelemetryPacket (24 bytes) ───────────────────────────────────────────────
|
||||
#ifdef FEATURE_TELEMETRY
|
||||
|
||||
@@ -33,6 +33,7 @@
|
||||
#include "ble_config.h"
|
||||
#include "battery.h"
|
||||
#include "tap.h"
|
||||
#include "buttons.h"
|
||||
#include <bluefruit.h>
|
||||
#include <Adafruit_LittleFS.h>
|
||||
#include <InternalFileSystem.h>
|
||||
@@ -60,7 +61,8 @@ Config cfg;
|
||||
const Config CFG_DEFAULTS = {
|
||||
CONFIG_MAGIC, 600.0f, 0.060f, 0.08f, CURVE_LINEAR, 0x00, CHARGE_SLOW,
|
||||
/*tapThreshold=*/12, /*tapAction=*/TAP_ACTION_LEFT, /*tapKey=*/0, /*tapMod=*/0,
|
||||
/*jerkThreshold=*/2000.0f, /*tapFreezeEnabled=*/1, /*featureFlags=*/FLAG_ALL_DEFAULT
|
||||
/*jerkThreshold=*/2000.0f, /*tapFreezeEnabled=*/1, /*featureFlags=*/FLAG_ALL_DEFAULT,
|
||||
/*btnLeftPin=*/BTN_PIN_NONE, /*btnRightPin=*/BTN_PIN_NONE, /*btnMiddlePin=*/BTN_PIN_NONE
|
||||
};
|
||||
|
||||
// ─── Telemetry definition ─────────────────────────────────────────────────────
|
||||
@@ -224,6 +226,10 @@ void setup() {
|
||||
if (cfg.featureFlags & FLAG_TAP_ENABLED) setupTapDetection();
|
||||
#endif
|
||||
|
||||
#ifdef FEATURE_PHYSICAL_BUTTONS
|
||||
setupPhysicalButtons();
|
||||
#endif
|
||||
|
||||
cachedTempC = readIMUTemp();
|
||||
|
||||
#ifdef FEATURE_BATTERY_MONITOR
|
||||
@@ -280,6 +286,9 @@ void setup() {
|
||||
#ifdef FEATURE_BOOT_LOOP_DETECT
|
||||
Serial.print(" BOOTDET");
|
||||
#endif
|
||||
#ifdef FEATURE_PHYSICAL_BUTTONS
|
||||
Serial.print(" PHYSBTN");
|
||||
#endif
|
||||
Serial.println();
|
||||
|
||||
bootStartMs = millis();
|
||||
@@ -323,6 +332,10 @@ void loop() {
|
||||
if (cfg.featureFlags & FLAG_TAP_ENABLED) processTaps(now);
|
||||
#endif
|
||||
|
||||
#ifdef FEATURE_PHYSICAL_BUTTONS
|
||||
processPhysicalButtons();
|
||||
#endif
|
||||
|
||||
if (now - lastTime < (unsigned long)LOOP_RATE_MS) return;
|
||||
float dt = (now - lastTime) / 1000.0f;
|
||||
lastTime = now;
|
||||
|
||||
53
web/app.js
53
web/app.js
@@ -18,7 +18,8 @@ const FLAG_ALL_DEFAULT = FLAG_TAP_ENABLED | FLAG_TEMP_COMP_ENABLED | FLAG
|
||||
// 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, tapFreezeEnabled:1, jerkThreshold:2000,
|
||||
featureFlags:FLAG_ALL_DEFAULT };
|
||||
featureFlags:FLAG_ALL_DEFAULT,
|
||||
btnLeftPin:0xFF, btnRightPin:0xFF, btnMiddlePin:0xFF };
|
||||
|
||||
let device=null, server=null, chars={}, userDisconnected=false;
|
||||
let currentChargeStatus=0, currentBattPct=null, currentBattVoltage=null;
|
||||
@@ -239,6 +240,13 @@ async function readConfigBlob() {
|
||||
} else {
|
||||
config.featureFlags = FLAG_ALL_DEFAULT; // old firmware — assume all on
|
||||
}
|
||||
if (view.byteLength >= 28) {
|
||||
config.btnLeftPin = view.getUint8(25);
|
||||
config.btnRightPin = view.getUint8(26);
|
||||
config.btnMiddlePin = view.getUint8(27);
|
||||
} else {
|
||||
config.btnLeftPin = config.btnRightPin = config.btnMiddlePin = 0xFF; // disabled
|
||||
}
|
||||
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'); }
|
||||
@@ -270,6 +278,37 @@ function applyConfigToUI() {
|
||||
document.getElementById('capTapEnabled').checked = !!(config.featureFlags & FLAG_TAP_ENABLED);
|
||||
document.getElementById('capTempComp').checked = !!(config.featureFlags & FLAG_TEMP_COMP_ENABLED);
|
||||
document.getElementById('capAutoRecal').checked = !!(config.featureFlags & FLAG_AUTO_RECAL_ENABLED);
|
||||
document.getElementById('btnLeftPin').value = config.btnLeftPin;
|
||||
document.getElementById('btnRightPin').value = config.btnRightPin;
|
||||
document.getElementById('btnMiddlePin').value = config.btnMiddlePin;
|
||||
updatePinDiagram();
|
||||
}
|
||||
|
||||
// ── XIAO pin diagram ──────────────────────────────────────────────────────────
|
||||
function updatePinDiagram() {
|
||||
const st = getComputedStyle(document.documentElement);
|
||||
const COL_L = st.getPropertyValue('--ok').trim();
|
||||
const COL_R = st.getPropertyValue('--accent2').trim();
|
||||
const COL_M = st.getPropertyValue('--accent').trim();
|
||||
const DEF_F = '#0c1828', DEF_S = '#162234';
|
||||
|
||||
for (let i = 0; i <= 10; i++) {
|
||||
const el = document.getElementById(`xiaoPin${i}`);
|
||||
if (el) { el.setAttribute('fill', DEF_F); el.setAttribute('stroke', DEF_S); }
|
||||
}
|
||||
|
||||
const apply = (pin, col) => {
|
||||
if (pin > 10) return;
|
||||
const el = document.getElementById(`xiaoPin${pin}`);
|
||||
if (el) { el.setAttribute('fill', col); el.setAttribute('stroke', col); }
|
||||
};
|
||||
|
||||
const l = parseInt(document.getElementById('btnLeftPin').value, 10);
|
||||
const r = parseInt(document.getElementById('btnRightPin').value, 10);
|
||||
const m = parseInt(document.getElementById('btnMiddlePin').value, 10);
|
||||
if (l <= 10) apply(l, COL_L);
|
||||
if (r <= 10) apply(r, COL_R);
|
||||
if (m <= 10) apply(m, COL_M);
|
||||
}
|
||||
|
||||
let _writeConfigTimer = null;
|
||||
@@ -298,7 +337,11 @@ async function _doWriteConfigBlob() {
|
||||
| (document.getElementById('capAutoRecal').checked ? FLAG_AUTO_RECAL_ENABLED : 0);
|
||||
// config.curve, config.chargeMode, config.tapAction, config.tapKey updated directly
|
||||
|
||||
const buf = new ArrayBuffer(25);
|
||||
config.btnLeftPin = parseInt(document.getElementById('btnLeftPin').value, 10);
|
||||
config.btnRightPin = parseInt(document.getElementById('btnRightPin').value, 10);
|
||||
config.btnMiddlePin = parseInt(document.getElementById('btnMiddlePin').value, 10);
|
||||
|
||||
const buf = new ArrayBuffer(28);
|
||||
const view = new DataView(buf);
|
||||
view.setFloat32(0, config.sensitivity, true);
|
||||
view.setFloat32(4, config.deadZone, true);
|
||||
@@ -313,6 +356,9 @@ async function _doWriteConfigBlob() {
|
||||
view.setUint8(19, config.tapFreezeEnabled);
|
||||
view.setFloat32(20, config.jerkThreshold, true);
|
||||
view.setUint8(24, config.featureFlags);
|
||||
view.setUint8(25, config.btnLeftPin);
|
||||
view.setUint8(26, config.btnRightPin);
|
||||
view.setUint8(27, config.btnMiddlePin);
|
||||
|
||||
try {
|
||||
await gattWrite(chars.configBlob, buf);
|
||||
@@ -605,7 +651,7 @@ function setStatus(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');
|
||||
const inputs=document.querySelectorAll('input[type=range],.seg-btn,.toggle input,.cmd-btn,#tapKeyHex,.mod-btn input,.pin-select');
|
||||
if (state==='connected') {
|
||||
cBtn.style.display='none'; dBtn.style.display='';
|
||||
inputs.forEach(el=>el.disabled=false);
|
||||
@@ -972,6 +1018,7 @@ function applyTheme(t) {
|
||||
localStorage.setItem('theme', t);
|
||||
if (!chars.imuStream) drawInitState();
|
||||
orientUpdateColors();
|
||||
updatePinDiagram();
|
||||
}
|
||||
(function(){
|
||||
const saved = localStorage.getItem('theme') ?? 'auto';
|
||||
|
||||
176
web/index.html
176
web/index.html
@@ -38,6 +38,8 @@
|
||||
</header>
|
||||
|
||||
<main id="mainContent">
|
||||
|
||||
<!-- ── col-left: cursor motion ──────────────────────────────── -->
|
||||
<div class="col-left">
|
||||
|
||||
<div class="section-label">Motion Parameters</div>
|
||||
@@ -97,6 +99,44 @@
|
||||
</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 Capabilities</div>
|
||||
<div class="card">
|
||||
<div class="flip-row">
|
||||
<div class="flip-label">Tap Detection</div>
|
||||
<div class="param-desc" style="flex:1;font-size:9px;color:var(--label)">Double-tap click action <span class="restart-note">· restart to apply</span></div>
|
||||
<label class="toggle"><input type="checkbox" id="capTapEnabled" onchange="onCapTapChange(this.checked)" disabled><div class="toggle-track"></div><div class="toggle-thumb"></div></label>
|
||||
</div>
|
||||
<div class="flip-row">
|
||||
<div class="flip-label">Temp Compensation</div>
|
||||
<div class="param-desc" style="flex:1;font-size:9px;color:var(--label)">Gyro drift correction by temperature</div>
|
||||
<label class="toggle"><input type="checkbox" id="capTempComp" 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">Auto Recalibration</div>
|
||||
<div class="param-desc" style="flex:1;font-size:9px;color:var(--label)">Recalibrate gyro after long idle period</div>
|
||||
<label class="toggle"><input type="checkbox" id="capAutoRecal" onchange="writeConfigBlob()" disabled><div class="toggle-track"></div><div class="toggle-thumb"></div></label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div><!-- /col-left -->
|
||||
|
||||
<!-- ── col-mid: button configuration ───────────────────────── -->
|
||||
<div class="col-mid">
|
||||
|
||||
<div class="section-label">Tap Configuration</div>
|
||||
<div class="card">
|
||||
<div class="param">
|
||||
@@ -141,36 +181,119 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section-label">Axis Configuration</div>
|
||||
<div class="section-label">Physical Buttons</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>
|
||||
<!-- ── XIAO nRF52840 Sense pin diagram ─────────────────── -->
|
||||
<div class="xiao-wrap">
|
||||
<svg id="xiaoSvg" viewBox="0 0 200 278" xmlns="http://www.w3.org/2000/svg" style="display:block;width:100%;max-width:200px">
|
||||
<!-- USB-C connector -->
|
||||
<rect x="72" y="4" width="56" height="28" rx="7" fill="#080e18" stroke="#162234" stroke-width="1.5"/>
|
||||
<rect x="82" y="10" width="36" height="5" rx="1.5" fill="#0e1c30"/><rect x="82" y="18" width="36" height="5" rx="1.5" fill="#0e1c30"/>
|
||||
<text x="100" y="30" text-anchor="middle" font-size="5.5" fill="#162234" font-family="Share Tech Mono,monospace">USB·C</text>
|
||||
<!-- PCB board -->
|
||||
<rect x="22" y="29" width="156" height="244" rx="9" fill="#080e18" stroke="#142030" stroke-width="1.5"/>
|
||||
<!-- Corner holes -->
|
||||
<circle cx="34" cy="41" r="3.5" fill="#040810" stroke="#0e1c2c" stroke-width="0.8"/>
|
||||
<circle cx="166" cy="41" r="3.5" fill="#040810" stroke="#0e1c2c" stroke-width="0.8"/>
|
||||
<circle cx="34" cy="261" r="3.5" fill="#040810" stroke="#0e1c2c" stroke-width="0.8"/>
|
||||
<circle cx="166" cy="261" r="3.5" fill="#040810" stroke="#0e1c2c" stroke-width="0.8"/>
|
||||
<!-- Board silk label -->
|
||||
<text x="100" y="52" text-anchor="middle" font-size="5.5" fill="#142030" font-family="Share Tech Mono,monospace">XIAO nRF52840 Sense</text>
|
||||
<!-- Antenna outline -->
|
||||
<rect x="130" y="34" width="34" height="22" rx="2" fill="none" stroke="#0e1c2c" stroke-width="0.7" stroke-dasharray="2,2"/>
|
||||
<text x="147" y="48" text-anchor="middle" font-size="5" fill="#0e1c2c" font-family="Share Tech Mono,monospace">ANT</text>
|
||||
<!-- SoC -->
|
||||
<rect x="60" y="78" width="80" height="72" rx="3" fill="#0c1828" stroke="#142030" stroke-width="0.8"/>
|
||||
<text x="100" y="112" text-anchor="middle" font-size="7" fill="#1e3858" font-family="Share Tech Mono,monospace" font-weight="bold">nRF52840</text>
|
||||
<text x="100" y="123" text-anchor="middle" font-size="5.5" fill="#102030" font-family="Share Tech Mono,monospace">HOLYIOT</text>
|
||||
<!-- BGA dots (decorative) -->
|
||||
<g fill="#0c1a2a"><circle cx="74" cy="94" r="1.8"/><circle cx="82" cy="94" r="1.8"/><circle cx="90" cy="94" r="1.8"/><circle cx="98" cy="94" r="1.8"/><circle cx="106" cy="94" r="1.8"/><circle cx="114" cy="94" r="1.8"/><circle cx="74" cy="102" r="1.8"/><circle cx="82" cy="102" r="1.8"/><circle cx="90" cy="102" r="1.8"/><circle cx="98" cy="102" r="1.8"/><circle cx="106" cy="102" r="1.8"/><circle cx="114" cy="102" r="1.8"/><circle cx="74" cy="140" r="1.8"/><circle cx="82" cy="140" r="1.8"/><circle cx="90" cy="140" r="1.8"/><circle cx="98" cy="140" r="1.8"/><circle cx="106" cy="140" r="1.8"/><circle cx="114" cy="140" r="1.8"/></g>
|
||||
<!-- IMU chip -->
|
||||
<rect x="72" y="176" width="56" height="44" rx="3" fill="#0a1420" stroke="#122030" stroke-width="0.8"/>
|
||||
<text x="100" y="196" text-anchor="middle" font-size="5.5" fill="#142030" font-family="Share Tech Mono,monospace">LSM6DS3</text>
|
||||
<text x="100" y="207" text-anchor="middle" font-size="5" fill="#0e1c2c" font-family="Share Tech Mono,monospace">IMU</text>
|
||||
<!-- Charger IC -->
|
||||
<rect x="36" y="228" width="30" height="26" rx="2" fill="#0a1420" stroke="#122030" stroke-width="0.8"/>
|
||||
<text x="51" y="244" text-anchor="middle" font-size="4.5" fill="#0e1c2c" font-family="Share Tech Mono,monospace">BQ25100</text>
|
||||
<!-- LED indicators -->
|
||||
<circle cx="142" cy="168" r="3.5" fill="#0a1a0a" stroke="#0e180e" stroke-width="0.8"/>
|
||||
<circle cx="152" cy="168" r="3.5" fill="#1a0a0a" stroke="#180e0e" stroke-width="0.8"/>
|
||||
<circle cx="162" cy="168" r="3.5" fill="#0a0a1a" stroke="#0e0e18" stroke-width="0.8"/>
|
||||
<text x="152" y="178" text-anchor="middle" font-size="4.5" fill="#0e1c2c" font-family="Share Tech Mono,monospace">LED</text>
|
||||
<!-- Left traces -->
|
||||
<g stroke="#142030" stroke-width="2"><line x1="22" y1="62" x2="9" y2="62"/><line x1="22" y1="94" x2="9" y2="94"/><line x1="22" y1="126" x2="9" y2="126"/><line x1="22" y1="158" x2="9" y2="158"/><line x1="22" y1="190" x2="9" y2="190"/><line x1="22" y1="222" x2="9" y2="222"/><line x1="22" y1="254" x2="9" y2="254"/></g>
|
||||
<!-- Right traces -->
|
||||
<g stroke="#142030" stroke-width="2"><line x1="178" y1="62" x2="191" y2="62"/><line x1="178" y1="94" x2="191" y2="94"/><line x1="178" y1="126" x2="191" y2="126"/><line x1="178" y1="158" x2="191" y2="158"/><line x1="178" y1="190" x2="191" y2="190"/><line x1="178" y1="222" x2="191" y2="222"/><line x1="178" y1="254" x2="191" y2="254"/></g>
|
||||
<!-- Left pads D0-D6 (arduino 0-6) -->
|
||||
<circle id="xiaoPin0" cx="9" cy="62" r="7" fill="#0c1828" stroke="#162234" stroke-width="1.5"/>
|
||||
<circle id="xiaoPin1" cx="9" cy="94" r="7" fill="#0c1828" stroke="#162234" stroke-width="1.5"/>
|
||||
<circle id="xiaoPin2" cx="9" cy="126" r="7" fill="#0c1828" stroke="#162234" stroke-width="1.5"/>
|
||||
<circle id="xiaoPin3" cx="9" cy="158" r="7" fill="#0c1828" stroke="#162234" stroke-width="1.5"/>
|
||||
<circle id="xiaoPin4" cx="9" cy="190" r="7" fill="#0c1828" stroke="#162234" stroke-width="1.5"/>
|
||||
<circle id="xiaoPin5" cx="9" cy="222" r="7" fill="#0c1828" stroke="#162234" stroke-width="1.5"/>
|
||||
<circle id="xiaoPin6" cx="9" cy="254" r="7" fill="#0c1828" stroke="#162234" stroke-width="1.5"/>
|
||||
<!-- Right pads D7-D10 (arduino 7-10) -->
|
||||
<circle id="xiaoPin7" cx="191" cy="62" r="7" fill="#0c1828" stroke="#162234" stroke-width="1.5"/>
|
||||
<circle id="xiaoPin8" cx="191" cy="94" r="7" fill="#0c1828" stroke="#162234" stroke-width="1.5"/>
|
||||
<circle id="xiaoPin9" cx="191" cy="126" r="7" fill="#0c1828" stroke="#162234" stroke-width="1.5"/>
|
||||
<circle id="xiaoPin10" cx="191" cy="158" r="7" fill="#0c1828" stroke="#162234" stroke-width="1.5"/>
|
||||
<!-- RST / GND / 3V3 (non-configurable) -->
|
||||
<circle cx="191" cy="190" r="7" fill="#0c1828" stroke="#102028" stroke-width="1.5"/>
|
||||
<circle cx="191" cy="222" r="7" fill="#0c1828" stroke="#201010" stroke-width="1.5"/>
|
||||
<circle cx="191" cy="254" r="7" fill="#0c1828" stroke="#102010" stroke-width="1.5"/>
|
||||
<!-- Left labels D0-D6 -->
|
||||
<g font-size="7" font-family="Share Tech Mono,monospace" fill="#1e3858"><text x="24" y="65">D0</text><text x="24" y="97">D1</text><text x="24" y="129">D2</text><text x="24" y="161">D3</text><text x="24" y="193">D4</text><text x="24" y="225">D5</text><text x="24" y="257">D6</text></g>
|
||||
<g font-size="5.5" font-family="Share Tech Mono,monospace" fill="#112030"><text x="36" y="65">A0</text><text x="36" y="97">A1</text><text x="36" y="129">A2</text><text x="36" y="161">A3</text><text x="36" y="193">SDA</text><text x="36" y="225">SCL</text><text x="36" y="257">TX</text></g>
|
||||
<!-- Right labels D7-D10 -->
|
||||
<g font-size="7" font-family="Share Tech Mono,monospace" text-anchor="end" fill="#1e3858"><text x="176" y="65">D7</text><text x="176" y="97">D8</text><text x="176" y="129">D9</text><text x="176" y="161">D10</text></g>
|
||||
<g font-size="5.5" font-family="Share Tech Mono,monospace" text-anchor="end" fill="#112030"><text x="162" y="65">RX</text><text x="162" y="97">SCK</text><text x="162" y="129">MISO</text><text x="162" y="161">MOSI</text></g>
|
||||
<!-- RST/GND/3V3 labels -->
|
||||
<g font-size="7" font-family="Share Tech Mono,monospace" text-anchor="end" fill="#0e1c2c"><text x="176" y="193">RST</text></g>
|
||||
<g font-size="7" font-family="Share Tech Mono,monospace" text-anchor="end" fill="#1a0808"><text x="176" y="225">GND</text></g>
|
||||
<g font-size="7" font-family="Share Tech Mono,monospace" text-anchor="end" fill="#081a08"><text x="176" y="257">3V3</text></g>
|
||||
</svg>
|
||||
<div class="pin-legend">
|
||||
<span class="pleg left">● Left</span>
|
||||
<span class="pleg right">● Right</span>
|
||||
<span class="pleg mid">● Middle</span>
|
||||
</div>
|
||||
</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>
|
||||
<hr class="xiao-divider">
|
||||
<div class="flip-row" style="align-items:center;padding-top:4px">
|
||||
<div class="flip-label">Left Click</div>
|
||||
<div class="param-desc" style="flex:1;font-size:9px;color:var(--label)">Pin wired to GND when pressed</div>
|
||||
<select class="pin-select" id="btnLeftPin" onchange="updatePinDiagram();writeConfigBlob()" disabled>
|
||||
<option value="255">None</option>
|
||||
<option value="0">D0</option><option value="1">D1</option><option value="2">D2</option>
|
||||
<option value="3">D3</option><option value="4">D4</option><option value="5">D5</option>
|
||||
<option value="6">D6</option><option value="7">D7</option><option value="8">D8</option>
|
||||
<option value="9">D9</option><option value="10">D10</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section-label">Device Capabilities</div>
|
||||
<div class="card">
|
||||
<div class="flip-row">
|
||||
<div class="flip-label">Tap Detection</div>
|
||||
<div class="param-desc" style="flex:1;font-size:9px;color:var(--label)">Double-tap click action <span class="restart-note">· restart to apply</span></div>
|
||||
<label class="toggle"><input type="checkbox" id="capTapEnabled" onchange="onCapTapChange(this.checked)" disabled><div class="toggle-track"></div><div class="toggle-thumb"></div></label>
|
||||
<div class="flip-row" style="align-items:center">
|
||||
<div class="flip-label">Right Click</div>
|
||||
<div class="param-desc" style="flex:1;font-size:9px;color:var(--label)">Pin wired to GND when pressed</div>
|
||||
<select class="pin-select" id="btnRightPin" onchange="updatePinDiagram();writeConfigBlob()" disabled>
|
||||
<option value="255">None</option>
|
||||
<option value="0">D0</option><option value="1">D1</option><option value="2">D2</option>
|
||||
<option value="3">D3</option><option value="4">D4</option><option value="5">D5</option>
|
||||
<option value="6">D6</option><option value="7">D7</option><option value="8">D8</option>
|
||||
<option value="9">D9</option><option value="10">D10</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="flip-row">
|
||||
<div class="flip-label">Temp Compensation</div>
|
||||
<div class="param-desc" style="flex:1;font-size:9px;color:var(--label)">Gyro drift correction by temperature</div>
|
||||
<label class="toggle"><input type="checkbox" id="capTempComp" onchange="writeConfigBlob()" disabled><div class="toggle-track"></div><div class="toggle-thumb"></div></label>
|
||||
<div class="flip-row" style="align-items:center;border-bottom:none">
|
||||
<div class="flip-label">Middle Click</div>
|
||||
<div class="param-desc" style="flex:1;font-size:9px;color:var(--label)">Pin wired to GND when pressed</div>
|
||||
<select class="pin-select" id="btnMiddlePin" onchange="updatePinDiagram();writeConfigBlob()" disabled>
|
||||
<option value="255">None</option>
|
||||
<option value="0">D0</option><option value="1">D1</option><option value="2">D2</option>
|
||||
<option value="3">D3</option><option value="4">D4</option><option value="5">D5</option>
|
||||
<option value="6">D6</option><option value="7">D7</option><option value="8">D8</option>
|
||||
<option value="9">D9</option><option value="10">D10</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="flip-row" style="border-bottom:none">
|
||||
<div class="flip-label">Auto Recalibration</div>
|
||||
<div class="param-desc" style="flex:1;font-size:9px;color:var(--label)">Recalibrate gyro after long idle period</div>
|
||||
<label class="toggle"><input type="checkbox" id="capAutoRecal" onchange="writeConfigBlob()" disabled><div class="toggle-track"></div><div class="toggle-thumb"></div></label>
|
||||
<div style="padding:8px 0 2px;font-size:9px;color:var(--label);font-family:var(--mono)">
|
||||
Pull-up built-in · wire button between chosen pin and GND
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -189,8 +312,9 @@
|
||||
<div class="section-label" style="margin-top:8px">Event Log</div>
|
||||
<div class="console" id="console"></div>
|
||||
|
||||
</div>
|
||||
</div><!-- /col-mid -->
|
||||
|
||||
<!-- ── col-right: live monitoring ───────────────────────────── -->
|
||||
<div class="col-right">
|
||||
|
||||
<div class="section-label">Live Cursor Visualiser</div>
|
||||
|
||||
@@ -148,10 +148,32 @@
|
||||
.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; }
|
||||
main { max-width:1440px; margin:0 auto; padding:32px 20px 80px; display:grid; grid-template-columns:1fr 1fr 380px; gap:16px; align-items:start; }
|
||||
.col-left { display:grid; gap:12px; }
|
||||
.col-mid { display:grid; gap:12px; }
|
||||
.col-right { display:grid; gap:12px; position:sticky; top:80px; }
|
||||
|
||||
/* ── XIAO pin diagram ─────────────────────────────────────── */
|
||||
.xiao-wrap { display:flex; flex-direction:column; align-items:center; padding:8px 0 14px; }
|
||||
.pin-legend { display:flex; gap:20px; justify-content:center; font-family:var(--mono); font-size:9px; margin-top:10px; letter-spacing:0.08em; }
|
||||
.pleg.left { color:var(--ok); }
|
||||
.pleg.right { color:var(--accent2); }
|
||||
.pleg.mid { color:var(--accent); }
|
||||
.xiao-divider { border:none; border-top:1px solid var(--border); margin:0 -20px 12px; }
|
||||
|
||||
/* ── Responsive ───────────────────────────────────────────── */
|
||||
@media (max-width:1100px) {
|
||||
main { grid-template-columns:1fr 380px; grid-template-rows:auto auto; }
|
||||
.col-left { grid-column:1; grid-row:1; }
|
||||
.col-mid { grid-column:1; grid-row:2; }
|
||||
.col-right { grid-column:2; grid-row:1/3; }
|
||||
}
|
||||
@media (max-width:700px) {
|
||||
main { grid-template-columns:1fr; }
|
||||
.col-left, .col-mid, .col-right { grid-column:1; grid-row:auto; }
|
||||
.col-right { position:static; }
|
||||
}
|
||||
|
||||
.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; }
|
||||
|
||||
@@ -304,6 +326,8 @@
|
||||
.mod-btn input:disabled + span { opacity:0.35; cursor:not-allowed; }
|
||||
|
||||
.restart-note { color:var(--warn); font-family:var(--mono); font-size:9px; }
|
||||
.pin-select { background:var(--bg); color:var(--text); border:1px solid var(--border); font-family:var(--mono); font-size:11px; padding:3px 6px; cursor:pointer; min-width:80px; }
|
||||
.pin-select:disabled { color:var(--dim); border-color:var(--dim); cursor:not-allowed; }
|
||||
|
||||
.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%); }
|
||||
|
||||
Reference in New Issue
Block a user