osiu97
494 lines
18 KiB
JavaScript
494 lines
18 KiB
JavaScript
import BLE from '../ble.js';
|
|
import UI from '../ui.js';
|
|
import IK from '../kinematics.js';
|
|
import Settings from '../settings.js';
|
|
import Motion from '../motion.js';
|
|
import { buildQuickSequencesHTML, initQuickSequences } from '../quick-sequences.js';
|
|
|
|
let eventCleanup = [];
|
|
let isHomed = false;
|
|
let spots = [];
|
|
let bounds = { xMin: -150, xMax: 150, yMin: -30, yMax: 145 };
|
|
let currentBg = localStorage.getItem('wiji_input_bg') || 'default';
|
|
let steps1 = 0;
|
|
let steps2 = 0;
|
|
let isSpelling = false;
|
|
|
|
function syncStateFromStorage() {
|
|
isHomed = localStorage.getItem('wiji_homed') === 'true';
|
|
steps1 = isHomed ? parseInt(localStorage.getItem('wiji_steps1') || IK.ARM.HOME_STEPS.m1) : IK.ARM.HOME_STEPS.m1;
|
|
steps2 = isHomed ? parseInt(localStorage.getItem('wiji_steps2') || IK.ARM.HOME_STEPS.m2) : IK.ARM.HOME_STEPS.m2;
|
|
currentBg = localStorage.getItem('wiji_input_bg') || 'default';
|
|
Motion.setSteps(steps1, steps2);
|
|
}
|
|
|
|
function saveSteps() {
|
|
if (isHomed) {
|
|
localStorage.setItem('wiji_steps1', steps1);
|
|
localStorage.setItem('wiji_steps2', steps2);
|
|
}
|
|
}
|
|
|
|
function buildHTML() {
|
|
return `
|
|
<style>
|
|
.board-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 280px;
|
|
gap: 16px;
|
|
height: 100%;
|
|
align-items: stretch;
|
|
}
|
|
@media (max-width: 900px) { .board-grid { grid-template-columns: 1fr; } }
|
|
.homing-banner {
|
|
padding: 10px;
|
|
border-radius: var(--radius-sm);
|
|
font-weight: bold;
|
|
text-align: center;
|
|
margin-bottom: 12px;
|
|
transition: all 0.3s;
|
|
}
|
|
.homing-banner.homed {
|
|
background: rgba(0, 230, 118, 0.1);
|
|
color: var(--accent-green);
|
|
border: 1px solid rgba(0, 230, 118, 0.3);
|
|
}
|
|
.homing-banner.not-homed {
|
|
background: rgba(255, 82, 82, 0.1);
|
|
color: var(--accent-red, #ff5252);
|
|
border: 1px solid rgba(255, 82, 82, 0.3);
|
|
}
|
|
.pos-marker {
|
|
position: absolute;
|
|
width: 14px;
|
|
height: 14px;
|
|
border-radius: 50%;
|
|
background: var(--accent-blue);
|
|
border: 2px solid white;
|
|
transform: translate(-50%, -50%);
|
|
transition: left 0.1s linear, top 0.1s linear;
|
|
box-shadow: 0 0 10px rgba(0,0,0,0.5);
|
|
z-index: 10;
|
|
pointer-events: none;
|
|
}
|
|
.setting-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 4px;
|
|
}
|
|
</style>
|
|
|
|
<div class="section-page fade-in" style="display:flex; flex-direction:column; height: 100%;">
|
|
<div class="section-header">
|
|
<h2>Input Text</h2>
|
|
<p>Type a word and the arm will spell it out on backgrounds that support an alphabet.</p>
|
|
</div>
|
|
|
|
<div class="board-grid">
|
|
<!-- ── Map Area ─────────────────────────────────────── -->
|
|
<div class="card" style="display:flex; flex-direction:column; padding: 12px; position:relative;">
|
|
<div class="card-header"><span class="card-title">Live Position</span></div>
|
|
|
|
<div style="flex:1; display:flex; align-items:flex-start; justify-content:center; overflow:hidden;">
|
|
<div id="map-container" style="position: relative; width: 100%; max-width: 800px; background: #111; border-radius: 8px; box-shadow: 0 4px 20px rgba(0,0,0,0.5);">
|
|
<img id="bg-image" src="web/assets/backgrounds/${currentBg}/bg.svg" style="width: 100%; display: block; height: auto; border-radius: 8px;" />
|
|
<div id="pos-marker" class="pos-marker" style="display:none;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ── Control Panel ──────────────────────────────── -->
|
|
<div style="display:flex; flex-direction:column; gap: 12px;">
|
|
|
|
<!-- Homing Card -->
|
|
<div class="card">
|
|
<div class="card-header" style="display:flex; justify-content:space-between; align-items:center;">
|
|
<span class="card-title">System Status</span>
|
|
<div style="display:flex; gap: 12px;">
|
|
<div style="text-align:right"><div style="font-size:0.6rem; color:var(--text-muted); text-transform:uppercase;">X (mm)</div><div id="pos-x" style="font-weight:bold; font-size:1rem; color:var(--accent-green);">0.0</div></div>
|
|
<div style="text-align:right"><div style="font-size:0.6rem; color:var(--text-muted); text-transform:uppercase;">Y (mm)</div><div id="pos-y" style="font-weight:bold; font-size:1rem; color:var(--accent-green);">0.0</div></div>
|
|
</div>
|
|
</div>
|
|
<div id="homing-banner" class="homing-banner ${isHomed ? 'homed' : 'not-homed'}">
|
|
${isHomed ? '✓ HOMED' : '⚠ NOT HOMED! Movement Locked.'}
|
|
</div>
|
|
<div style="display:flex; gap: 8px;">
|
|
<button id="btn-force-home" class="btn btn-danger" style="flex:1; padding: 10px; font-weight:bold;">
|
|
${isHomed ? 'FORCE HOME ALL' : 'HOME ALL MOTORS'}
|
|
</button>
|
|
<button id="btn-park" class="btn btn-secondary" style="flex:1; padding: 10px; font-weight:bold;">
|
|
GO TO PARK
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Controls Card -->
|
|
<div class="card" style="flex:1; display:flex; flex-direction:column;">
|
|
<div class="card-header"><span class="card-title">Spell Text</span></div>
|
|
|
|
<div class="form-group" style="margin-bottom: 12px;">
|
|
<label class="form-label">Background Map</label>
|
|
<select id="bg-select" class="form-input" style="width:100%;">
|
|
<option value="default">Default Spirit Board (Landscape)</option>
|
|
<option value="portrait-right">Right Side Test (Portrait)</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="form-group" style="margin-bottom: 12px;">
|
|
<label class="form-label">Movement Mode</label>
|
|
<select id="text-mode-select" class="form-input" style="width:100%;">
|
|
<option value="direct">Direct (Normal)</option>
|
|
<option value="snaky">Snaky</option>
|
|
<option value="erratic">Erratic</option>
|
|
<option value="jumpy">Jumpy</option>
|
|
<option value="hesitant">Hesitant</option>
|
|
<option value="overshoot">Overshoot</option>
|
|
<option value="random">Random</option>
|
|
</select>
|
|
</div>
|
|
|
|
<!-- Settings -->
|
|
<div style="background: var(--surface-2); padding: 10px; border-radius: var(--radius-sm); margin-bottom: 12px;">
|
|
<div class="setting-row">
|
|
<label class="form-label" style="margin:0;">Speed</label>
|
|
<span id="speed-val" style="font-size: 0.8rem; color: var(--text-muted);">${Settings.speed}</span>
|
|
</div>
|
|
<input type="range" id="slider-speed" min="100" max="2000" step="100" value="${Settings.speed}" style="width:100%; margin-bottom: 8px;">
|
|
|
|
<div class="setting-row">
|
|
<label class="form-label" style="margin:0;">Accel</label>
|
|
<span id="accel-val" style="font-size: 0.8rem; color: var(--text-muted);">${Settings.accel}</span>
|
|
</div>
|
|
<input type="range" id="slider-accel" min="50" max="2000" step="50" value="${Settings.accel}" style="width:100%; margin-bottom: 8px;">
|
|
|
|
<div class="setting-row">
|
|
<label class="form-label" style="margin:0;">Global Delay (ms)</label>
|
|
<span id="delay-val" style="font-size: 0.8rem; color: var(--text-muted);">${Settings.delay}</span>
|
|
</div>
|
|
<input type="range" id="slider-delay" min="500" max="5000" step="100" value="${Settings.delay}" style="width:100%;">
|
|
</div>
|
|
|
|
<div class="form-group" style="margin-bottom: 12px;">
|
|
<label class="form-label">Input Text</label>
|
|
<div style="position: relative;">
|
|
<input type="text" id="text-input" class="form-input" style="width:100%; font-size: 1.1rem; padding: 10px; padding-right: 40px; text-transform: uppercase;" placeholder="Enter word to spell...">
|
|
<button id="btn-clear-text" style="position: absolute; right: 8px; top: 50%; transform: translateY(-50%); background: transparent; border: none; color: var(--text-muted); font-size: 1.2rem; cursor: pointer; padding: 4px; display: flex; align-items: center; justify-content: center;">✕</button>
|
|
</div>
|
|
</div>
|
|
|
|
<button id="btn-spell" class="btn btn-success btn-full" style="padding: 12px; font-weight:bold; font-size: 1.1rem;">
|
|
SPELL
|
|
</button>
|
|
<button id="btn-stop" class="btn btn-danger btn-full" style="padding: 12px; font-weight:bold; font-size: 1.1rem; display:none; margin-top: 8px;">
|
|
STOP
|
|
</button>
|
|
</div>
|
|
|
|
${buildQuickSequencesHTML()}
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
function updatePosMarker() {
|
|
const marker = document.getElementById('pos-marker');
|
|
if (!marker) return;
|
|
|
|
const t1 = IK.stepsToRad(steps1);
|
|
const t2 = IK.stepsToRad(steps2);
|
|
const { endX, endY, valid } = IK.forward(t1, t2);
|
|
|
|
if (valid && isFinite(endX) && isFinite(endY)) {
|
|
const px = document.getElementById('pos-x');
|
|
const py = document.getElementById('pos-y');
|
|
if (px) px.textContent = endX.toFixed(1);
|
|
if (py) py.textContent = endY.toFixed(1);
|
|
|
|
const w = bounds.xMax - bounds.xMin;
|
|
const h = bounds.yMax - bounds.yMin;
|
|
|
|
// Bounds check to avoid marker flying off screen entirely
|
|
if (endX >= bounds.xMin && endX <= bounds.xMax && endY >= bounds.yMin && endY <= bounds.yMax) {
|
|
const xPct = ((endX - bounds.xMin) / w) * 100;
|
|
const yPct = ((bounds.yMax - endY) / h) * 100;
|
|
|
|
marker.style.left = `${xPct}%`;
|
|
marker.style.top = `${yPct}%`;
|
|
marker.style.display = 'block';
|
|
} else {
|
|
marker.style.display = 'none'; // Out of bounds visually
|
|
}
|
|
} else {
|
|
marker.style.display = 'none';
|
|
}
|
|
}
|
|
|
|
function updateHomingUI() {
|
|
const banner = document.getElementById('homing-banner');
|
|
const btn = document.getElementById('btn-force-home');
|
|
if (!banner || !btn) return;
|
|
|
|
if (isHomed) {
|
|
banner.className = 'homing-banner homed';
|
|
banner.textContent = '✓ HOMED';
|
|
btn.textContent = 'FORCE HOME ALL';
|
|
} else {
|
|
banner.className = 'homing-banner not-homed';
|
|
banner.textContent = '⚠ NOT HOMED! Movement Locked.';
|
|
btn.textContent = 'HOME ALL MOTORS';
|
|
}
|
|
}
|
|
|
|
async function loadSpots() {
|
|
try {
|
|
const res = await fetch(`web/assets/backgrounds/${currentBg}/spots.json?v=${Date.now()}`);
|
|
const data = await res.json();
|
|
|
|
if (!data.hasAlphabet) {
|
|
UI.log(`Background '${currentBg}' does not support an alphabet.`, 'warn');
|
|
}
|
|
|
|
let parsedSpots = [];
|
|
let parkPosition = { x: 0, y: 80 };
|
|
|
|
if (Array.isArray(data)) {
|
|
parsedSpots = data;
|
|
} else {
|
|
parsedSpots = data.spots || [];
|
|
if (data.bounds) bounds = data.bounds;
|
|
if (data.parkPosition) parkPosition = data.parkPosition;
|
|
}
|
|
|
|
if (!parsedSpots.find(s => s.id === 'PARK')) {
|
|
parsedSpots.push({ id: 'PARK', label: 'Park Position', x: parkPosition.x, y: parkPosition.y });
|
|
}
|
|
spots = parsedSpots;
|
|
|
|
document.getElementById('bg-image').src = `web/assets/backgrounds/${currentBg}/bg.svg?v=${Date.now()}`;
|
|
|
|
const mapContainer = document.getElementById('map-container');
|
|
if (mapContainer) {
|
|
const w = bounds.xMax - bounds.xMin;
|
|
const h = bounds.yMax - bounds.yMin;
|
|
// mapContainer.style.aspectRatio = `${w}/${h}`; // Let natural image aspect ratio dictate container height
|
|
}
|
|
updatePosMarker();
|
|
} catch(e) {
|
|
UI.log('Failed to load spots.json', 'error');
|
|
}
|
|
}
|
|
|
|
async function sendSettings() {
|
|
if (!BLE.isConnected()) return;
|
|
try {
|
|
await BLE.write(`SPD:${Settings.speed}`);
|
|
await BLE.write(`ACC:${Settings.accel}`);
|
|
} catch (e) {
|
|
console.error('Failed to send settings', e);
|
|
}
|
|
}
|
|
|
|
function delay(ms) {
|
|
return new Promise(resolve => setTimeout(resolve, ms));
|
|
}
|
|
|
|
async function executeMove(spot, forceDirect = false) {
|
|
UI.log(`Spelling: ${spot.label}`, 'info');
|
|
const modeEl = document.getElementById('text-mode-select');
|
|
const mode = forceDirect ? 'direct' : (modeEl ? modeEl.value : 'direct');
|
|
return await Motion.goto(spot.x, spot.y, mode);
|
|
}
|
|
|
|
async function spellText(text) {
|
|
const btnSpell = document.getElementById('btn-spell');
|
|
const btnStop = document.getElementById('btn-stop');
|
|
const inputEl = document.getElementById('text-input');
|
|
|
|
if (!isHomed) {
|
|
UI.log('Cannot move: System is not homed! Please click HOME ALL.', 'error');
|
|
return;
|
|
}
|
|
|
|
text = text.toUpperCase().replace(/\s+/g, '');
|
|
if (!text) return;
|
|
|
|
isSpelling = true;
|
|
btnSpell.style.display = 'none';
|
|
btnStop.style.display = 'block';
|
|
inputEl.disabled = true;
|
|
|
|
// Send speed/accel right before moving just in case
|
|
await sendSettings();
|
|
|
|
for (let i = 0; i < text.length; i++) {
|
|
if (!isSpelling) break;
|
|
|
|
const char = text[i];
|
|
// Find spot by ID (assuming ID is the uppercase letter)
|
|
const spot = spots.find(s => s.id.toUpperCase() === char);
|
|
|
|
if (spot) {
|
|
await executeMove(spot, i === 0);
|
|
// Wait for delay
|
|
await delay(Settings.delay);
|
|
} else {
|
|
UI.log(`Character '${char}' not found on this board.`, 'warn');
|
|
}
|
|
}
|
|
|
|
isSpelling = false;
|
|
btnSpell.style.display = 'block';
|
|
btnStop.style.display = 'none';
|
|
inputEl.disabled = false;
|
|
UI.log('Finished spelling text', 'success');
|
|
}
|
|
|
|
export default {
|
|
mount(container) {
|
|
syncStateFromStorage();
|
|
container.innerHTML = buildHTML();
|
|
|
|
updateHomingUI();
|
|
loadSpots();
|
|
|
|
// ── Background Selection ──────────────────────────────────
|
|
const bgSelect = document.getElementById('bg-select');
|
|
if (bgSelect) {
|
|
bgSelect.value = currentBg;
|
|
bgSelect.addEventListener('change', () => {
|
|
currentBg = bgSelect.value;
|
|
localStorage.setItem('wiji_input_bg', currentBg);
|
|
loadSpots();
|
|
initQuickSequences(
|
|
currentBg,
|
|
() => spots,
|
|
() => ({ steps1, steps2 }),
|
|
(s1, s2) => {
|
|
steps1 = s1; steps2 = s2;
|
|
updatePosMarker();
|
|
}
|
|
);
|
|
});
|
|
}
|
|
|
|
// ── Settings Sliders ──────────────────────────────────────
|
|
const sSpeed = document.getElementById('slider-speed');
|
|
const sAccel = document.getElementById('slider-accel');
|
|
const sDelay = document.getElementById('slider-delay');
|
|
|
|
sSpeed.addEventListener('input', (e) => {
|
|
Settings.speed = parseInt(e.target.value);
|
|
document.getElementById('speed-val').textContent = Settings.speed;
|
|
sendSettings();
|
|
});
|
|
|
|
sAccel.addEventListener('input', (e) => {
|
|
Settings.accel = parseInt(e.target.value);
|
|
document.getElementById('accel-val').textContent = Settings.accel;
|
|
sendSettings();
|
|
});
|
|
|
|
sDelay.addEventListener('input', (e) => {
|
|
Settings.delay = parseInt(e.target.value);
|
|
document.getElementById('delay-val').textContent = Settings.delay;
|
|
});
|
|
|
|
// ── Homing Logic ──────────────────────────────────────────
|
|
document.getElementById('btn-force-home').addEventListener('click', async () => {
|
|
isHomed = true;
|
|
localStorage.setItem('wiji_homed', 'true');
|
|
updateHomingUI();
|
|
|
|
UI.log('Homing all motors...', 'info');
|
|
if (BLE.isConnected()) {
|
|
try {
|
|
await BLE.write('HOMEALL');
|
|
} catch (e) {
|
|
UI.log(e.message, 'error');
|
|
}
|
|
} else {
|
|
steps1 = IK.ARM.HOME_STEPS.m1;
|
|
steps2 = IK.ARM.HOME_STEPS.m2;
|
|
Motion.setSteps(steps1, steps2);
|
|
saveSteps();
|
|
updatePosMarker();
|
|
UI.log('[sim] HOMEALL', 'info');
|
|
}
|
|
});
|
|
|
|
document.getElementById('btn-park').addEventListener('click', () => {
|
|
const parkSpot = spots.find(s => s.id === 'PARK');
|
|
if (parkSpot) executeMove(parkSpot);
|
|
});
|
|
|
|
// ── Spelling Logic ────────────────────────────────────────
|
|
const btnSpell = document.getElementById('btn-spell');
|
|
const btnStop = document.getElementById('btn-stop');
|
|
const inputEl = document.getElementById('text-input');
|
|
|
|
btnSpell.addEventListener('click', () => {
|
|
spellText(inputEl.value);
|
|
});
|
|
|
|
inputEl.addEventListener('keypress', (e) => {
|
|
if (e.key === 'Enter') {
|
|
spellText(inputEl.value);
|
|
}
|
|
});
|
|
|
|
const btnClearText = document.getElementById('btn-clear-text');
|
|
if (btnClearText) {
|
|
btnClearText.addEventListener('click', () => {
|
|
inputEl.value = '';
|
|
inputEl.focus();
|
|
});
|
|
}
|
|
|
|
btnStop.addEventListener('click', () => {
|
|
isSpelling = false;
|
|
UI.log('Spelling stopped', 'info');
|
|
});
|
|
|
|
// ── Sync Steps from BLE ───────────────────────────────────
|
|
const onBLEStatus = (e) => {
|
|
const msg = e.detail;
|
|
if (msg.startsWith('P:')) {
|
|
const [s1, s2] = msg.slice(2).split(',').map(Number);
|
|
steps1 = s1; steps2 = s2;
|
|
saveSteps();
|
|
updatePosMarker();
|
|
}
|
|
};
|
|
document.addEventListener('ble:status', onBLEStatus);
|
|
|
|
// Sync position on mount if connected
|
|
if (BLE.isConnected()) {
|
|
BLE.write('POS').catch(() => {});
|
|
sendSettings();
|
|
} else {
|
|
updatePosMarker();
|
|
}
|
|
|
|
initQuickSequences(
|
|
currentBg,
|
|
() => spots,
|
|
() => ({ steps1, steps2 }),
|
|
(s1, s2) => {
|
|
steps1 = s1; steps2 = s2;
|
|
updatePosMarker();
|
|
}
|
|
);
|
|
|
|
eventCleanup.push(() => document.removeEventListener('ble:status', onBLEStatus));
|
|
},
|
|
|
|
unmount() {
|
|
isSpelling = false;
|
|
eventCleanup.forEach(fn => fn());
|
|
eventCleanup = [];
|
|
}
|
|
};
|