SCARA Map — click to move
SIMULATION
━ M1 (left)
━ M2 (right)
▪ NO-GO zone
╌ board limits
l1=${IK.ARM.l1}mm l2=${IK.ARM.l2}mm d=${IK.ARM.d}mm
Motor 1 — Left
${[10, 50, 100, 512].map(n => ``).join('')}
${[10, 50, 100, 512].map(n => ``).join('')}
Motor 2 — Right
${[10, 50, 100, 512].map(n => ``).join('')}
${[10, 50, 100, 512].map(n => ``).join('')}
`;
}
// ─────────────────────────────────────────────────────────────────
// Section lifecycle
// ─────────────────────────────────────────────────────────────────
const StepperTestSection = {
mount(container) {
syncStateFromStorage();
container.innerHTML = buildHTML();
// ── Cache refs ──────────────────────────────────────────────
svgEl = document.getElementById('scara-svg');
arm1Prox = document.getElementById('arm1-prox');
arm1Dist = document.getElementById('arm1-dist');
arm2Prox = document.getElementById('arm2-prox');
arm2Dist = document.getElementById('arm2-dist');
elbow1 = document.getElementById('elbow1');
elbow2 = document.getElementById('elbow2');
endEff = document.getElementById('end-eff');
coordLabel = document.getElementById('coord-label');
xhH = document.getElementById('xh-h');
xhV = document.getElementById('xh-v');
ghost1Prox = document.getElementById('ghost-1p');
ghost1Dist = document.getElementById('ghost-1d');
ghost2Prox = document.getElementById('ghost-2p');
ghost2Dist = document.getElementById('ghost-2d');
ghostElbow1 = document.getElementById('ghost-e1');
ghostElbow2 = document.getElementById('ghost-e2');
ghostEnd = document.getElementById('ghost-e1');
ghostLabel = document.getElementById('ghost-label');
targetMarker = document.getElementById('target-marker');
elCurrX = document.getElementById('curr-x');
elCurrY = document.getElementById('curr-y');
elTheta1 = document.getElementById('curr-t1');
elTheta2 = document.getElementById('curr-t2');
elSteps1 = document.getElementById('curr-s1');
elSteps2 = document.getElementById('curr-s2');
simBadge = document.getElementById('sim-badge');
// ── SVG coordinate helpers ───────────────────────────────────
function pointerToWorld(e) {
const rect = svgEl.getBoundingClientRect();
const sx = (e.clientX - rect.left) * (SV.W / rect.width);
const sy = (e.clientY - rect.top) * (SV.H / rect.height);
return { wx: SV.svgToWorldX(sx), wy: SV.svgToWorldY(sy), sx, sy };
}
// ── SVG hover ───────────────────────────────────────────────
svgEl.addEventListener('mousemove', (e) => {
const { wx, wy } = pointerToWorld(e);
const ws = IK.checkWorkspace(wx, wy);
if (ws.ok) {
const { theta1, theta2 } = IK.solve(wx, wy);
showGhost(theta1, theta2, `(${wx.toFixed(0)},${wy.toFixed(0)})`);
svgEl.style.cursor = 'crosshair';
} else {
hideGhost();
svgEl.style.cursor = 'not-allowed';
}
});
svgEl.addEventListener('mouseleave', () => {
hideGhost();
svgEl.style.cursor = 'crosshair';
});
// ── SVG click ───────────────────────────────────────────────
svgEl.addEventListener('click', async (e) => {
const { wx, wy, sx, sy } = pointerToWorld(e);
const ws = IK.checkWorkspace(wx, wy);
if (!ws.ok) {
UI.log(`⛔ ${ws.reason}`, 'warn');
return;
}
showTargetMarker(sx, sy);
const xi = document.getElementById('input-x');
const yi = document.getElementById('input-y');
if (xi) xi.value = wx.toFixed(1);
if (yi) yi.value = wy.toFixed(1);
await moveToXY(wx, wy);
});
// ── Move to XY button ────────────────────────────────────────
document.getElementById('btn-goto').addEventListener('click', async () => {
const x = parseFloat(document.getElementById('input-x').value);
const y = parseFloat(document.getElementById('input-y').value);
if (isNaN(x) || isNaN(y)) { UI.log('Invalid XY.', 'warn'); return; }
await moveToXY(x, y);
});
// ── Jog CW / CCW ────────────────────────────────────────────
const gs = (n) => parseInt(document.getElementById(`jog-steps-${n}`)?.value ?? '50', 10) || 50;
document.getElementById('s1-cw').addEventListener('click', () => jogMotor(1, +gs(1)));
document.getElementById('s1-ccw').addEventListener('click', () => jogMotor(1, -gs(1)));
document.getElementById('s2-cw').addEventListener('click', () => jogMotor(2, +gs(2)));
document.getElementById('s2-ccw').addEventListener('click', () => jogMotor(2, -gs(2)));
document.getElementById('s1-zero').addEventListener('click', () => zeroMotor(1));
document.getElementById('s2-zero').addEventListener('click', () => zeroMotor(2));
document.getElementById('sall-zero').addEventListener('click', () => zeroMotor('ALL'));
document.getElementById('fake-home').addEventListener('click', async () => {
localStorage.setItem('wiji_homed', 'false');
const warningEl = document.getElementById('home-warning');
if (warningEl) warningEl.style.display = 'block';
if (BLE.isConnected()) {
await BLE.write('ZEROALL').catch(e => UI.log(e.message, 'error'));
} else {
steps1 = IK.ARM.HOME_STEPS.m1;
steps2 = IK.ARM.HOME_STEPS.m2;
renderArmFromSteps();
console.log(`[sim] ZEROALL`);
UI.log(`[sim] ZEROALL (Reset Position)`, 'info');
}
});
// ── Quick-step buttons ────────────────────────────────────────
container.querySelectorAll('[data-motor][data-steps]').forEach(btn => {
btn.addEventListener('click', () =>
jogMotor(parseInt(btn.dataset.motor, 10), parseInt(btn.dataset.steps, 10)));
});
// ── Speed / Accel sliders ─────────────────────────────────────
let spdT, accT;
document.getElementById('speed-slider').addEventListener('input', (e) => {
document.getElementById('speed-val').textContent = e.target.value;
clearTimeout(spdT);
spdT = setTimeout(() => {
const cmd = `SPD:${e.target.value}`;
BLE.isConnected() ? BLE.write(cmd).catch(() => { }) : UI.log(`[sim] ${cmd}`, 'info');
}, 400);
});
document.getElementById('accel-slider').addEventListener('input', (e) => {
document.getElementById('accel-val').textContent = e.target.value;
clearTimeout(accT);
accT = setTimeout(() => {
const cmd = `ACC:${e.target.value}`;
BLE.isConnected() ? BLE.write(cmd).catch(() => { }) : UI.log(`[sim] ${cmd}`, 'info');
}, 400);
});
// ── Log clear ─────────────────────────────────────────────────
document.getElementById('clear-log-btn').addEventListener('click', UI.clearLog);
// ── BLE badge ─────────────────────────────────────────────────
function updateBadge() {
if (!simBadge) return;
const live = BLE.isConnected();
simBadge.textContent = live ? 'LIVE' : 'SIMULATION';
simBadge.style.background = live ? 'rgba(0,230,118,0.12)' : 'rgba(255,202,40,0.12)';
simBadge.style.color = live ? 'var(--accent-green)' : 'var(--accent-amber)';
simBadge.style.border = live ? '1px solid rgba(0,230,118,0.3)' : '1px solid rgba(255,202,40,0.25)';
}
BLE.on('connected', updateBadge);
BLE.on('disconnected', updateBadge);
updateBadge();
// ── BLE NOTIFY position feedback ──────────────────────────────
function onBLEStatus(e) {
const msg = e.detail;
if (msg.startsWith('P:')) {
const [s1, s2] = msg.slice(2).split(',').map(Number);
steps1 = s1; steps2 = s2;
renderArmFromSteps();
}
}
document.addEventListener('ble:status', onBLEStatus);
eventCleanup = [
() => BLE.off('connected', updateBadge),
() => BLE.off('disconnected', updateBadge),
() => document.removeEventListener('ble:status', onBLEStatus),
];
// ── Initial render ─────────────────────────────────────────────
const warningEl = document.getElementById('home-warning');
if (warningEl) warningEl.style.display = localStorage.getItem('wiji_homed') === 'true' ? 'none' : 'block';
renderArmFromSteps();
UI.log('Stepper Test ready — 5-bar parallel IK active.', 'success');
UI.log(`Arm: d=${IK.ARM.d}mm l1=${IK.ARM.l1}mm l2=${IK.ARM.l2}mm`, 'info');
if (!BLE.isConnected()) {
UI.log('Simulation mode — BLE commands logged but not sent.', 'warn');
}
},
unmount() {
eventCleanup.forEach(fn => fn());
eventCleanup = [];
},
};
export default StepperTestSection;