| import { connectToHost } from '@pollen-robotics/reachy-mini-sdk/host/embed'; |
| import { safelyReturnToPose } from '@pollen-robotics/reachy-mini-sdk/animation'; |
| import { Gate, Motion, idle, readPad, type Input } from './control'; |
| import './style.css'; |
|
|
| async function main() { |
| const handle = await connectToHost(); |
| const { reachy } = handle; |
| |
| document.documentElement.dataset.theme = handle.theme; |
| const offTheme = handle.onThemeChange(theme => { document.documentElement.dataset.theme = theme; }); |
| document.querySelector<HTMLDivElement>('#root')!.innerHTML = ` |
| <main> |
| <header><div class="eyebrow">REACHY MINI</div><h1>Joystick control</h1> |
| <p>1. Choose your controller. 2. Check the input indicators. 3. Center the sticks and start.</p></header> |
| <section class="session" aria-label="Session controls"> |
| <div class="status"><span id="signal" class="dot"></span><span id="phase" role="status">Waiting for telemetry</span></div> |
| <div class="session-actions"><button id="start" class="primary">Start controls</button><button id="stop">Stop & center</button></div> |
| <div class="options"><label>Input<select id="source"><option value="gamepad">Gamepad</option><option value="touch">Touch / mouse</option></select></label> |
| <label class="mode"><input id="turbo" type="checkbox"> Turbo <small>2× speed</small></label></div> |
| <p id="pad-name" class="hint">Pair your controller with this device, then press any controller button.</p> |
| </section> |
| <section class="controller-check" aria-label="Controller input test"> |
| <label>Controller<select id="controller"><option value="">Press a controller button to detect it</option></select></label> |
| <p id="input-status" role="status">Move a stick to test detection. Testing while paused does not move the robot.</p> |
| <div class="input-values"><span>Left stick <output id="left-input">0.00 / 0.00</output></span><span>Right stick <output id="right-input">0.00 / 0.00</output></span><span>Triggers L / R <output id="trigger-input">0% / 0%</output></span></div> |
| </section> |
| <div class="controls-grid"> |
| <section class="card"><div class="section-title"><span class="index">01</span><h2>Look</h2><span class="chip">LEFT STICK</span></div> |
| <p>Head yaw & pitch, relative to the body.</p><div class="stick" id="look" role="group" aria-label="Head touch joystick"><span class="cross horizontal"></span><span class="cross vertical"></span><span class="puck"></span></div><div class="stick-labels"><span>← Look →</span><span>↑ Tilt ↓</span></div> |
| </section> |
| <section class="card"><div class="section-title"><span class="index">02</span><h2>Turn & stretch</h2><span class="chip">RIGHT STICK</span></div> |
| <p>Body rotation & head height.</p><div class="stick" id="body" role="group" aria-label="Body and height touch joystick"><span class="cross horizontal"></span><span class="cross vertical"></span><span class="puck"></span></div><div class="stick-labels"><span>← Turn →</span><span>↑ Raise ↓</span></div> |
| </section> |
| <section class="card antennas"><div class="section-title"><span class="index">03</span><h2>Antennas</h2><span class="chip">TRIGGERS / SHOULDERS</span></div> |
| <p>Hold to move. Release to keep the expression.</p> |
| <div class="antenna-grid"><div><span class="antenna-label">LEFT</span><button data-hold="left-out">↖ Outward <small>LT / L2</small></button><button data-hold="left-in">↘ Inward <small>LB / L1</small></button></div> |
| <div><span class="antenna-label">RIGHT</span><button data-hold="right-out">Outward ↗ <small>RT / R2</small></button><button data-hold="right-in">Inward ↙ <small>RB / R1</small></button></div></div> |
| <div class="readouts"><div><small>HEIGHT</small><strong id="height">—</strong></div><div><small>LEFT ANTENNA</small><strong id="left-angle">—</strong></div><div><small>RIGHT ANTENNA</small><strong id="right-angle">—</strong></div></div> |
| </section> |
| </div> |
| <footer><p><strong>Make a little room.</strong> Start with centered sticks and released triggers. D-pad ↑ / ↓ switches Turbo / Precision.</p> |
| <p>Stop centers the robot; use the host’s Leave button to end the session. Changing tabs or losing the controller pauses controls. No camera or microphone is requested.</p><p class="hint">Readouts show commanded positions. Software limits are not collision sensors.</p></footer> |
| </main>`; |
| const $ = <T extends HTMLElement = HTMLElement>(id: string) => document.getElementById(id) as T; |
| const source = $<HTMLSelectElement>('source'), turbo = $<HTMLInputElement>('turbo'), start = $<HTMLButtonElement>('start'); |
| const controllerSelect = $<HTMLSelectElement>('controller'); |
| if (matchMedia('(pointer: coarse)').matches) { |
| source.value = 'touch'; |
| $('pad-name').textContent = 'Drag the circles; hold antenna buttons. Controls stay on this device.'; |
| } |
| const gate = new Gate(); |
| let motion: Motion | null = null, lastState = -Infinity, lastTick = performance.now(), restUntil = 0; |
| let leaving = false, selectedPad = -1, worker: Worker | null = null; |
| let sourceChosen = false, padSignature = '', inputMessage = '', preview = idle(); |
| let touch = idle(); |
| const held = new Set<string>(); |
| const pointerIds = new Map<string, number>(); |
| const abort = new AbortController(); |
| const signal = abort.signal; |
| function clearInput() { |
| touch = idle(); held.clear(); pointerIds.clear(); |
| document.querySelectorAll<HTMLElement>('.puck').forEach(p => { p.style.transform = 'translate(0,0)'; }); |
| document.querySelectorAll('[data-hold]').forEach(b => b.classList.remove('held')); |
| } |
| const fresh = () => performance.now() - lastState < 2500; |
| function stop(reason: string, returnHome = true, forceHome = false) { |
| const wasActive = gate.active; |
| gate.pause(reason); clearInput(); motion = null; |
| if (returnHome && (wasActive || forceHome) && performance.now() >= restUntil && reachy.state === 'streaming' && fresh()) { |
| try { |
| const plan = safelyReturnToPose(reachy); |
| restUntil = performance.now() + plan.duration * 1000 + 400; |
| } catch (error) { gate.reason = `Paused; centering failed: ${String(error)}`; } |
| } |
| } |
| function pads() { |
| try { return Array.from(navigator.getGamepads?.() ?? []).filter((pad): pad is Gamepad => Boolean(pad?.connected)); } |
| catch { throw new Error('Gamepad access is blocked here. Open the direct Space URL or choose Touch.'); } |
| } |
| function scanControllers() { |
| const all = pads(); |
| const signature = all.map(p => `${p.index}:${p.id}:${p.mapping}`).join('|'); |
| if (signature !== padSignature) { |
| padSignature = signature; |
| controllerSelect.replaceChildren(); |
| const placeholder = new Option(all.length ? 'Choose your controller' : 'Press a controller button to detect it', ''); |
| controllerSelect.add(placeholder); |
| for (const pad of all) { |
| const option = new Option(`${pad.id}${pad.mapping === 'standard' ? '' : ' (unsupported mapping)'}`, String(pad.index)); |
| option.disabled = pad.mapping !== 'standard'; controllerSelect.add(option); |
| } |
| const supported = all.filter(p => p.mapping === 'standard'); |
| if (!gate.active && !all.some(p => p.index === selectedPad)) selectedPad = supported.length === 1 ? supported[0].index : -1; |
| controllerSelect.value = selectedPad < 0 ? '' : String(selectedPad); |
| |
| |
| |
| if (!sourceChosen && supported.length) source.value = 'gamepad'; |
| } |
| } |
| function getInput(): Input { |
| if (source.value === 'gamepad') { |
| const pad = pads().find(p => p.index === selectedPad); |
| if (!pad) throw new Error(gate.active ? 'Controller disconnected — reconnect and press Start.' : 'No mapped gamepad. Press a controller button or choose Touch / mouse.'); |
| $('pad-name').textContent = pad.id; |
| return readPad(pad); |
| } |
| return { ...touch, triggers: [Number(held.has('left-out')), Number(held.has('right-out'))], |
| shoulders: [held.has('left-in'), held.has('right-in')] }; |
| } |
| start.addEventListener('click', () => { |
| try { |
| if (!worker) throw new Error('Control clock unavailable — reload the app in a browser that supports Web Workers.'); |
| if (leaving || document.hidden || performance.now() < restUntil || reachy.robotState.is_move_running) { |
| throw new Error('Wait for centering to finish, then press Start.'); |
| } |
| const input = getInput(); |
| const next = new Motion(reachy.robotState); |
| gate.arm(input, performance.now(), lastState, reachy.state === 'streaming'); |
| if (!reachy.setMotorMode('enabled')) throw new Error('Robot connection is unavailable.'); |
| motion = next; lastTick = performance.now(); |
| } catch (error) { gate.pause(String(error instanceof Error ? error.message : error)); } |
| }, {signal}); |
| $('stop').addEventListener('click', () => stop('Paused — press Start after centering to resume.', true, true), {signal}); |
| source.addEventListener('change', () => { |
| sourceChosen = true; |
| stop('Input changed — press Start to resume.'); |
| $('pad-name').textContent = source.value === 'touch' ? 'Drag the circles; hold antenna buttons. Controls stay on this device.' : 'Press a gamepad button, then Start.'; |
| }, {signal}); |
| controllerSelect.addEventListener('change', () => { |
| stop('Controller changed — test the sticks, then press Start.'); |
| selectedPad = controllerSelect.value === '' ? -1 : Number(controllerSelect.value); |
| sourceChosen = true; source.value = 'gamepad'; |
| }, {signal}); |
| function makeStick(id: string, offset: number) { |
| const el = $(id), puck = el.querySelector<HTMLElement>('.puck')!; |
| const reset = () => { touch.axes[offset] = touch.axes[offset+1] = 0; puck.style.transform = 'translate(0,0)'; }; |
| const move = (event: PointerEvent) => { |
| if (pointerIds.get(id) !== event.pointerId) return; |
| const box = el.getBoundingClientRect(), radius = box.width * .34; |
| let x = (event.clientX-box.left-box.width/2)/radius, y = (event.clientY-box.top-box.height/2)/radius; |
| const magnitude = Math.max(1, Math.hypot(x,y)); x /= magnitude; y /= magnitude; |
| touch.axes[offset] = x; touch.axes[offset+1] = y; |
| puck.style.transform = `translate(${x*radius}px,${y*radius}px)`; |
| }; |
| el.addEventListener('pointerdown', event => { |
| if (source.value !== 'touch' || !gate.active || pointerIds.has(id)) return; |
| event.preventDefault(); pointerIds.set(id, event.pointerId); el.setPointerCapture(event.pointerId); move(event); |
| }, {signal}); |
| el.addEventListener('pointermove', move, {signal}); |
| el.addEventListener('pointerup', event => { if (pointerIds.get(id) === event.pointerId) { pointerIds.delete(id); reset(); } }, {signal}); |
| for (const name of ['pointercancel', 'lostpointercapture'] as const) el.addEventListener(name, () => { |
| if (pointerIds.has(id)) { reset(); stop('Touch interrupted — press Start to resume.'); } |
| }, {signal}); |
| } |
| makeStick('look', 0); makeStick('body', 2); |
| document.querySelectorAll<HTMLButtonElement>('[data-hold]').forEach(button => { |
| const name = button.dataset.hold!; |
| button.addEventListener('pointerdown', event => { |
| if (source.value !== 'touch' || !gate.active) return; |
| event.preventDefault(); held.add(name); button.classList.add('held'); button.setPointerCapture(event.pointerId); |
| }, {signal}); |
| const release = () => { held.delete(name); button.classList.remove('held'); }; |
| button.addEventListener('pointerup', release, {signal}); |
| button.addEventListener('pointercancel', () => { release(); stop('Touch interrupted — press Start to resume.'); }, {signal}); |
| button.addEventListener('lostpointercapture', release, {signal}); |
| button.addEventListener('keydown', event => { |
| if ((event.key === ' ' || event.key === 'Enter') && source.value === 'touch' && gate.active) { |
| event.preventDefault(); held.add(name); button.classList.add('held'); |
| } |
| }, {signal}); |
| button.addEventListener('keyup', release, {signal}); |
| button.addEventListener('blur', release, {signal}); |
| }); |
| const onState = () => { lastState = performance.now(); }; |
| reachy.addEventListener('state', onState); |
| reachy.requestState(); |
| const lost = () => stop('Robot session ended — reconnect through the host.', false); |
| for (const event of ['disconnected','sessionStopped','error'] as const) reachy.addEventListener(event, lost); |
| document.addEventListener('visibilitychange', () => { |
| if (document.hidden) stop('Tab hidden — press Start to resume.'); |
| else reachy.requestState(); |
| }, {signal}); |
| window.addEventListener('blur', () => stop('Window lost focus — press Start to resume.'), {signal}); |
| window.addEventListener('gamepaddisconnected', event => { |
| if (source.value === 'gamepad' && event.gamepad.index === selectedPad) stop('Controller disconnected — reconnect and press Start.'); |
| }, {signal}); |
| try { worker = new Worker(new URL('./heartbeat.worker.ts', import.meta.url), {type: 'module'}); } |
| catch { gate.pause('Control clock unavailable — this browser cannot start Web Workers.'); } |
| if (worker) worker.onmessage = () => { |
| const now = performance.now(), dt = (now-lastTick)/1000; lastTick = now; |
| try { |
| scanControllers(); |
| preview = getInput(); inputMessage = ''; |
| if (!gate.active || !motion) return; |
| if (document.hidden || !fresh() || reachy.state !== 'streaming') { stop('Connection stale or tab hidden — press Start after reconnecting.', false); return; } |
| if (dt > .25) { stop('Controls stalled — press Start to resume.'); return; } |
| const input = preview; |
| if (input.turbo !== undefined) turbo.checked = input.turbo; |
| if (!reachy.setTarget(motion.step(input, dt, turbo.checked))) stop('Robot connection interrupted.', false); |
| } catch (error) { |
| preview = idle(); inputMessage = String(error instanceof Error ? error.message : error); |
| if (gate.active) stop(inputMessage); |
| } |
| }; |
| if (worker) worker.onerror = () => { |
| stop('Control clock failed — reload this app.'); worker?.terminate(); worker = null; |
| }; |
| let frame = 0; |
| function render() { |
| $('phase').textContent = gate.reason; |
| $('signal').classList.toggle('live', gate.active); |
| start.disabled = gate.active || leaving || !worker || performance.now() < restUntil; |
| start.textContent = performance.now() < restUntil ? 'Centering…' : 'Start controls'; |
| document.body.dataset.input = source.value; |
| controllerSelect.disabled = gate.active; |
| $('left-input').textContent = `${preview.axes[0].toFixed(2)} / ${preview.axes[1].toFixed(2)}`; |
| $('right-input').textContent = `${preview.axes[2].toFixed(2)} / ${preview.axes[3].toFixed(2)}`; |
| $('trigger-input').textContent = `${Math.round(preview.triggers[0]*100)}% / ${Math.round(preview.triggers[1]*100)}%`; |
| const moving = preview.axes.some(n => Math.abs(n) > .15) || preview.triggers.some(n => n > .15) || preview.shoulders.some(Boolean); |
| $('input-status').textContent = inputMessage || (source.value === 'touch' |
| ? 'Touch mode: the physical gamepad is ignored. Choose Gamepad to use your controller.' |
| : moving ? (gate.active ? 'Controller input received — sending movement commands.' : 'Controller input received. Release controls, then press Start.') |
| : 'Controller connected. Move a stick or trigger to check the indicators below.'); |
| if (source.value === 'gamepad') { |
| for (const [id, offset] of [['look',0],['body',2]] as const) { |
| const el = $(id), puck = el.querySelector<HTMLElement>('.puck')!; |
| const radius = el.clientWidth * .34; |
| puck.style.transform = `translate(${preview.axes[offset]*radius}px,${preview.axes[offset+1]*radius}px)`; |
| } |
| for (const [name, active] of [['left-out',preview.triggers[0]>.15],['right-out',preview.triggers[1]>.15],['left-in',preview.shoulders[0]],['right-in',preview.shoulders[1]]] as const) { |
| document.querySelector(`[data-hold="${name}"]`)?.classList.toggle('held',active); |
| } |
| } |
| const values = motion?.current; |
| $('height').textContent = values ? `${(values[2]*1000).toFixed(0)} mm` : '—'; |
| $('left-angle').textContent = values ? `${(values[5]*180/Math.PI).toFixed(0)}°` : '—'; |
| $('right-angle').textContent = values ? `${(values[4]*180/Math.PI).toFixed(0)}°` : '—'; |
| frame = requestAnimationFrame(render); |
| } |
| frame = requestAnimationFrame(render); |
| handle.onLeave(() => { |
| leaving = true; gate.pause('Leaving'); clearInput(); |
| worker?.terminate(); worker = null; cancelAnimationFrame(frame); abort.abort(); offTheme(); |
| reachy.removeEventListener('state', onState); |
| for (const event of ['disconnected','sessionStopped','error'] as const) reachy.removeEventListener(event, lost); |
| safelyReturnToPose(reachy); |
| }); |
| } |
|
|
| void main().catch(error => { |
| console.error('[teleop] startup failed', error); |
| const root = document.querySelector('#root'); |
| if (root) root.textContent = `Unable to open Teleop: ${String(error)}`; |
| window.parent.postMessage({source:'reachy-mini',type:'embed:error',version:1,message:String(error),fatal:true}, location.origin); |
| }); |
|
|
