376 lines
13 KiB
HTML
376 lines
13 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>SaltyLab Balance Bot</title>
|
|
<style>
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
body { background: #0a0a0f; color: #e0e0e0; font-family: 'SF Mono', 'Fira Code', monospace; overflow: hidden; }
|
|
#hud { position: fixed; top: 20px; left: 20px; z-index: 10; }
|
|
#hud h1 { font-size: 18px; color: #ff4444; margin-bottom: 8px; letter-spacing: 2px; }
|
|
.stat { font-size: 13px; line-height: 1.8; color: #888; }
|
|
.stat .val { color: #0ff; font-weight: bold; }
|
|
.stat .label { color: #666; width: 80px; display: inline-block; }
|
|
.btn {
|
|
margin-top: 8px; margin-right: 6px; padding: 10px 20px;
|
|
color: #fff; border: none;
|
|
font-family: inherit; font-size: 13px; cursor: pointer;
|
|
border-radius: 4px; letter-spacing: 1px;
|
|
}
|
|
#connect-btn { background: #ff4444; }
|
|
#connect-btn:hover { background: #ff6666; }
|
|
#connect-btn.connected { background: #00cc66; }
|
|
#arm-btn { background: #cc8800; display: none; }
|
|
#arm-btn:hover { background: #ddaa22; }
|
|
#arm-btn.armed { background: #ff2222; }
|
|
#dfu-btn { background: #555; display: none; }
|
|
#dfu-btn:hover { background: #777; }
|
|
#status { margin-top: 8px; font-size: 12px; color: #666; }
|
|
#state-badge {
|
|
display: inline-block; padding: 2px 8px; border-radius: 3px;
|
|
font-size: 11px; font-weight: bold; margin-left: 8px;
|
|
}
|
|
.state-disarmed { background: #333; color: #888; }
|
|
.state-armed { background: #442200; color: #ffaa00; }
|
|
.state-fault { background: #440000; color: #ff4444; }
|
|
#horizon { position: fixed; bottom: 20px; left: 20px; z-index: 10; }
|
|
.bar-container { margin: 4px 0; }
|
|
.bar-label { font-size: 11px; color: #666; width: 50px; display: inline-block; }
|
|
.bar-bg { display: inline-block; width: 200px; height: 8px; background: #1a1a2e; border-radius: 4px; vertical-align: middle; }
|
|
.bar-fill { height: 100%; border-radius: 4px; transition: width 0.05s; }
|
|
.bar-pitch .bar-fill { background: #ff4444; }
|
|
.bar-motor .bar-fill { background: #44ff44; }
|
|
canvas { display: block; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="hud">
|
|
<h1>⚡ SALTYLAB <span id="state-badge" class="state-disarmed">DISARMED</span></h1>
|
|
<div class="stat"><span class="label">PITCH</span> <span class="val" id="v-pitch">--</span>°</div>
|
|
<div class="stat"><span class="label">ROLL</span> <span class="val" id="v-roll">--</span>°</div>
|
|
<div class="stat"><span class="label">MOTOR</span> <span class="val" id="v-motor">--</span></div>
|
|
<div class="stat"><span class="label">ACCEL</span> <span class="val" id="v-accel">--</span></div>
|
|
<div class="stat"><span class="label">GYRO</span> <span class="val" id="v-gyro">--</span></div>
|
|
<div class="stat"><span class="label">HZ</span> <span class="val" id="v-hz">--</span></div>
|
|
<div>
|
|
<button class="btn" id="connect-btn" onclick="toggleSerial()">CONNECT USB</button>
|
|
<button class="btn" id="arm-btn" onclick="toggleArm()">ARM</button>
|
|
<button class="btn" id="dfu-btn" onclick="enterDFU()">DFU</button>
|
|
</div>
|
|
<div id="status">WebSerial ready</div>
|
|
</div>
|
|
|
|
<div id="horizon">
|
|
<div class="bar-container bar-pitch">
|
|
<span class="bar-label">PITCH</span>
|
|
<span class="bar-bg"><span class="bar-fill" id="bar-pitch" style="width:50%"></span></span>
|
|
</div>
|
|
<div class="bar-container bar-motor">
|
|
<span class="bar-label">MOTOR</span>
|
|
<span class="bar-bg"><span class="bar-fill" id="bar-motor" style="width:50%"></span></span>
|
|
</div>
|
|
</div>
|
|
|
|
<script type="importmap">
|
|
{ "imports": { "three": "https://cdn.jsdelivr.net/npm/three@0.170.0/build/three.module.js" } }
|
|
</script>
|
|
<script type="module">
|
|
import * as THREE from 'three';
|
|
|
|
// --- Three.js scene ---
|
|
const scene = new THREE.Scene();
|
|
const camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.1, 100);
|
|
camera.position.set(0, 2, 5);
|
|
camera.lookAt(0, 0, 0);
|
|
|
|
const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
|
|
renderer.setSize(window.innerWidth, window.innerHeight);
|
|
renderer.setPixelRatio(window.devicePixelRatio);
|
|
renderer.setClearColor(0x0a0a0f);
|
|
document.body.appendChild(renderer.domElement);
|
|
|
|
// Lighting
|
|
scene.add(new THREE.AmbientLight(0x404040, 2));
|
|
const dirLight = new THREE.DirectionalLight(0xffffff, 3);
|
|
dirLight.position.set(5, 10, 7);
|
|
scene.add(dirLight);
|
|
const pointLight = new THREE.PointLight(0xff4444, 2, 20);
|
|
pointLight.position.set(-3, 3, 3);
|
|
scene.add(pointLight);
|
|
|
|
// Grid
|
|
scene.add(new THREE.GridHelper(10, 20, 0x222244, 0x111122));
|
|
|
|
// FC Board model
|
|
const boardGroup = new THREE.Group();
|
|
|
|
// PCB
|
|
boardGroup.add(new THREE.Mesh(
|
|
new THREE.BoxGeometry(1.6, 0.08, 1.6),
|
|
new THREE.MeshPhongMaterial({ color: 0x1a1a1a, specular: 0x333333 })
|
|
));
|
|
|
|
// Copper traces
|
|
const traceMat = new THREE.MeshPhongMaterial({ color: 0xcc8833, specular: 0xffaa44 });
|
|
for (let i = -0.6; i <= 0.6; i += 0.3) {
|
|
const trace = new THREE.Mesh(new THREE.BoxGeometry(1.4, 0.005, 0.02), traceMat);
|
|
trace.position.set(0, 0.043, i);
|
|
boardGroup.add(trace);
|
|
}
|
|
|
|
// MCU chip
|
|
const mcu = new THREE.Mesh(
|
|
new THREE.BoxGeometry(0.5, 0.06, 0.5),
|
|
new THREE.MeshPhongMaterial({ color: 0x222222, specular: 0x444444 })
|
|
);
|
|
mcu.position.set(0, 0.07, 0);
|
|
boardGroup.add(mcu);
|
|
|
|
// IMU chip
|
|
const imuChip = new THREE.Mesh(
|
|
new THREE.BoxGeometry(0.2, 0.04, 0.2),
|
|
new THREE.MeshPhongMaterial({ color: 0x331111, specular: 0x442222 })
|
|
);
|
|
imuChip.position.set(-0.4, 0.06, -0.3);
|
|
boardGroup.add(imuChip);
|
|
|
|
// USB connector
|
|
const usb = new THREE.Mesh(
|
|
new THREE.BoxGeometry(0.35, 0.1, 0.15),
|
|
new THREE.MeshPhongMaterial({ color: 0x888888, specular: 0xaaaaaa })
|
|
);
|
|
usb.position.set(0, 0.06, -0.85);
|
|
boardGroup.add(usb);
|
|
|
|
// Status LED
|
|
const ledMat = new THREE.MeshBasicMaterial({ color: 0xff0000 });
|
|
const led = new THREE.Mesh(new THREE.SphereGeometry(0.03, 8, 8), ledMat);
|
|
led.position.set(0.5, 0.06, 0.5);
|
|
boardGroup.add(led);
|
|
|
|
// Mounting holes
|
|
const holeMat = new THREE.MeshPhongMaterial({ color: 0x444444 });
|
|
[[-0.55, -0.55], [-0.55, 0.55], [0.55, -0.55], [0.55, 0.55]].forEach(([x, z]) => {
|
|
const ring = new THREE.Mesh(new THREE.TorusGeometry(0.06, 0.015, 8, 16), holeMat);
|
|
ring.rotation.x = Math.PI / 2;
|
|
ring.position.set(x, 0.05, z);
|
|
boardGroup.add(ring);
|
|
});
|
|
|
|
// Forward arrow
|
|
const arrow = new THREE.Mesh(
|
|
new THREE.ConeGeometry(0.08, 0.2, 8),
|
|
new THREE.MeshBasicMaterial({ color: 0xff4444, transparent: true, opacity: 0.8 })
|
|
);
|
|
arrow.rotation.x = -Math.PI / 2;
|
|
arrow.position.set(0, 0.06, -0.65);
|
|
boardGroup.add(arrow);
|
|
|
|
scene.add(boardGroup);
|
|
|
|
// --- State ---
|
|
let targetPitch = 0, targetRoll = 0;
|
|
let currentPitch = 0, currentRoll = 0;
|
|
|
|
// Complementary filter (client-side, for roll — firmware sends pitch)
|
|
let roll = 0, lastTime = 0;
|
|
|
|
const stateNames = ['DISARMED', 'ARMED', 'TILT FAULT'];
|
|
const stateClasses = ['state-disarmed', 'state-armed', 'state-fault'];
|
|
|
|
window.updateIMU = function(data) {
|
|
const ax = data.ax || 0, ay = data.ay || 0, az = data.az || 0;
|
|
const gx = data.gx || 0, gy = data.gy || 0, gz = data.gz || 0;
|
|
|
|
// Firmware sends pitch as p (x10), motor as m, state as s
|
|
const fwPitch = (data.p !== undefined) ? data.p / 10.0 : null;
|
|
const motorCmd = data.m || 0;
|
|
const state = data.s || 0;
|
|
|
|
const now = performance.now();
|
|
const dt = lastTime ? (now - lastTime) / 1000 : 0.02;
|
|
lastTime = now;
|
|
|
|
// Use firmware pitch if available, otherwise compute from accel
|
|
let pitch;
|
|
if (fwPitch !== null) {
|
|
pitch = fwPitch;
|
|
} else {
|
|
pitch = Math.atan2(-ax, Math.sqrt(ay*ay + az*az)) * 180 / Math.PI;
|
|
}
|
|
|
|
// Roll from client-side complementary filter
|
|
const accelRoll = Math.atan2(ay, az) * 180 / Math.PI;
|
|
if (Math.abs(roll) < 0.01) {
|
|
roll = accelRoll;
|
|
} else {
|
|
roll = 0.98 * (roll + (gx / 131.0) * dt) + 0.02 * accelRoll;
|
|
}
|
|
|
|
targetPitch = pitch * Math.PI / 180;
|
|
targetRoll = roll * Math.PI / 180;
|
|
|
|
document.getElementById('v-pitch').textContent = pitch.toFixed(1);
|
|
document.getElementById('v-roll').textContent = roll.toFixed(1);
|
|
document.getElementById('v-motor').textContent = motorCmd;
|
|
document.getElementById('v-accel').textContent = `${ax},${ay},${az}`;
|
|
document.getElementById('v-gyro').textContent = `${gx},${gy},${gz}`;
|
|
|
|
// Pitch bar: center at 50%, ±90°
|
|
document.getElementById('bar-pitch').style.width = ((pitch + 90) / 180 * 100) + '%';
|
|
// Motor bar: center at 50%, ±1000
|
|
document.getElementById('bar-motor').style.width = ((motorCmd + 1000) / 2000 * 100) + '%';
|
|
|
|
// State badge
|
|
const badge = document.getElementById('state-badge');
|
|
badge.textContent = stateNames[state] || 'UNKNOWN';
|
|
badge.className = stateClasses[state] || 'state-disarmed';
|
|
|
|
// Arm button state
|
|
const armBtn = document.getElementById('arm-btn');
|
|
if (state === 1) {
|
|
armBtn.textContent = 'DISARM';
|
|
armBtn.classList.add('armed');
|
|
} else {
|
|
armBtn.textContent = 'ARM';
|
|
armBtn.classList.remove('armed');
|
|
}
|
|
|
|
// LED color based on state
|
|
if (state === 1) {
|
|
ledMat.color.setRGB(0, 1, 0); // green when armed
|
|
} else if (state === 2) {
|
|
const blink = Math.sin(Date.now() / 100) > 0 ? 1 : 0;
|
|
ledMat.color.setRGB(blink, 0, 0); // fast red blink on fault
|
|
} else {
|
|
const intensity = 0.5 + 0.5 * Math.sin(Date.now() / 500);
|
|
ledMat.color.setRGB(intensity, 0, 0); // slow red pulse disarmed
|
|
}
|
|
};
|
|
|
|
// Animation
|
|
function animate() {
|
|
requestAnimationFrame(animate);
|
|
currentPitch += (targetPitch - currentPitch) * 0.15;
|
|
currentRoll += (targetRoll - currentRoll) * 0.15;
|
|
boardGroup.rotation.x = currentPitch;
|
|
boardGroup.rotation.z = currentRoll;
|
|
renderer.render(scene, camera);
|
|
}
|
|
animate();
|
|
|
|
window.addEventListener('resize', () => {
|
|
camera.aspect = window.innerWidth / window.innerHeight;
|
|
camera.updateProjectionMatrix();
|
|
renderer.setSize(window.innerWidth, window.innerHeight);
|
|
});
|
|
|
|
// --- WebSerial ---
|
|
let port = null, reader = null, writer = null, lineBuffer = '', opening = false;
|
|
let msgCount = 0, lastHzTime = Date.now();
|
|
let currentState = 0;
|
|
|
|
async function sendCmd(cmd) {
|
|
if (!port?.writable) return;
|
|
try {
|
|
const w = port.writable.getWriter();
|
|
await w.write(new TextEncoder().encode(cmd));
|
|
w.releaseLock();
|
|
} catch(e) {
|
|
console.error('Send failed:', e);
|
|
}
|
|
}
|
|
|
|
window.toggleSerial = async function() {
|
|
if (opening) return;
|
|
if (port) {
|
|
try { await sendCmd('S'); } catch(e) {} // Stop streaming before disconnect
|
|
try { reader?.cancel(); } catch(e) {}
|
|
try { await port.close(); } catch(e) {}
|
|
port = null; reader = null;
|
|
document.getElementById('connect-btn').textContent = 'CONNECT USB';
|
|
document.getElementById('connect-btn').classList.remove('connected');
|
|
document.getElementById('arm-btn').style.display = 'none';
|
|
document.getElementById('dfu-btn').style.display = 'none';
|
|
document.getElementById('status').textContent = 'Disconnected';
|
|
return;
|
|
}
|
|
try {
|
|
opening = true;
|
|
port = await navigator.serial.requestPort();
|
|
await port.open({ baudRate: 115200 });
|
|
|
|
opening = false;
|
|
document.getElementById('connect-btn').textContent = 'DISCONNECT';
|
|
document.getElementById('connect-btn').classList.add('connected');
|
|
document.getElementById('arm-btn').style.display = 'inline-block';
|
|
document.getElementById('dfu-btn').style.display = 'inline-block';
|
|
document.getElementById('status').textContent = 'Connected — streaming';
|
|
|
|
readLoop();
|
|
} catch (e) {
|
|
opening = false;
|
|
port = null; writer = null;
|
|
document.getElementById('status').textContent = 'Error: ' + e.message;
|
|
}
|
|
};
|
|
|
|
window.toggleArm = async function() {
|
|
if (currentState === 1) {
|
|
await sendCmd('D');
|
|
} else {
|
|
await sendCmd('A');
|
|
}
|
|
};
|
|
|
|
window.enterDFU = async function() {
|
|
if (!confirm('Reboot to DFU mode? You will lose connection.')) return;
|
|
await sendCmd('R');
|
|
document.getElementById('status').textContent = 'Rebooting to DFU...';
|
|
};
|
|
|
|
async function readLoop() {
|
|
const decoder = new TextDecoderStream();
|
|
port.readable.pipeTo(decoder.writable);
|
|
reader = decoder.readable.getReader();
|
|
try {
|
|
while (true) {
|
|
const { value, done } = await reader.read();
|
|
if (done) break;
|
|
lineBuffer += value;
|
|
const lines = lineBuffer.split('\n');
|
|
lineBuffer = lines.pop();
|
|
for (const line of lines) {
|
|
if (!line.trim()) continue;
|
|
try {
|
|
const data = JSON.parse(line);
|
|
if (data.init) {
|
|
document.getElementById('status').textContent =
|
|
`Connected — IMU:${data.imu === 0 ? 'OK' : 'ERR'} WHO:0x${(data.who||0).toString(16)}`;
|
|
continue;
|
|
}
|
|
if (data.err !== undefined) {
|
|
document.getElementById('status').textContent = `IMU error: ${data.err}`;
|
|
continue;
|
|
}
|
|
currentState = data.s || 0;
|
|
window.updateIMU(data);
|
|
msgCount++;
|
|
const now = Date.now();
|
|
if (now - lastHzTime >= 1000) {
|
|
document.getElementById('v-hz').textContent = msgCount;
|
|
msgCount = 0;
|
|
lastHzTime = now;
|
|
}
|
|
} catch(e) {}
|
|
}
|
|
}
|
|
} catch (e) {
|
|
document.getElementById('status').textContent = 'Read error: ' + e.message;
|
|
}
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|