Replace joystick with RPY sliders synced to robot state

- Roll, Pitch, Yaw sliders for absolute head control
- Sliders update live from robot state when not being controlled
- Removed joystick and all related code/CSS
- Cleaner, simpler interface

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

index.html

@@ -267,97 +267,6 @@
             padding: 12px;
         }
 
-        /* Joystick - Full Width Responsive */
-        .joystick-wrapper {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            gap: 20px;
-            padding: 10px;
-        }
-
-        .joystick-area {
-            width: min(250px, 40vw);
-            height: min(250px, 40vw);
-            min-width: 180px;
-            min-height: 180px;
-            background: radial-gradient(circle at center, var(--pollen-card-light) 0%, var(--pollen-darker) 100%);
-            border-radius: 50%;
-            position: relative;
-            border: 3px solid var(--pollen-coral);
-            touch-action: none;
-            cursor: grab;
-            flex-shrink: 0;
-        }
-
-        .joystick-knob {
-            width: 25%;
-            height: 25%;
-            background: var(--pollen-coral);
-            border-radius: 50%;
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%, -50%);
-            box-shadow: 0 4px 16px rgba(255,107,53,0.5);
-            pointer-events: none;
-        }
-
-        .joystick-label {
-            position: absolute;
-            font-size: 0.7em;
-            color: var(--text-muted);
-            font-weight: 500;
-        }
-
-        .joystick-label.top { top: 8%; left: 50%; transform: translateX(-50%); }
-        .joystick-label.bottom { bottom: 8%; left: 50%; transform: translateX(-50%); }
-        .joystick-label.left { left: 5%; top: 50%; transform: translateY(-50%); }
-        .joystick-label.right { right: 5%; top: 50%; transform: translateY(-50%); }
-
-        .roll-control {
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            gap: 8px;
-            flex-shrink: 0;
-        }
-
-        .roll-slider {
-            writing-mode: vertical-lr;
-            direction: rtl;
-            height: min(220px, 38vw);
-            min-height: 160px;
-            width: 16px;
-            -webkit-appearance: none;
-            background: var(--pollen-darker);
-            border-radius: 8px;
-            border: 2px solid var(--pollen-card-light);
-        }
-
-        .roll-slider::-webkit-slider-thumb {
-            -webkit-appearance: none;
-            width: 36px;
-            height: 36px;
-            background: var(--pollen-coral);
-            border-radius: 50%;
-            cursor: pointer;
-            box-shadow: 0 2px 10px rgba(255,107,53,0.5);
-        }
-
-        .roll-label {
-            font-size: 0.75em;
-            color: var(--text-muted);
-            font-weight: 500;
-        }
-
-        .joystick-hint {
-            text-align: center;
-            font-size: 0.75em;
-            color: var(--text-muted);
-            padding-top: 8px;
-        }
-
         /* Sliders */
         .slider-row {
             display: flex;
@@ -578,15 +487,6 @@
                 grid-column: 2;
                 grid-row: 4;
             }
-
-            .joystick-area {
-                width: 220px;
-                height: 220px;
-            }
-
-            .roll-slider {
-                height: 200px;
-            }
         }
 
         /* Login View */
@@ -716,20 +616,25 @@
                 </div>
             </div>
 
-            <!-- Joystick Control -->
+            <!-- Head Control - RPY Sliders -->
             <div class="panel">
-                <div class="panel-header">Head Control</div>
+                <div class="panel-header">Head Orientation</div>
                 <div class="panel-content">
-                    <div class="joystick-wrapper">
-                        <div class="joystick-area" id="joystick">
-                            <div class="joystick-knob" id="joystickKnob"></div>
-                            <span class="joystick-label top">Up</span>
-                            <span class="joystick-label bottom">Down</span>
-                            <span class="joystick-label left">Left</span>
-                            <span class="joystick-label right">Right</span>
-                        </div>
+                    <div class="slider-row">
+                        <span class="slider-label">Roll</span>
+                        <input type="range" class="slider" id="rollSlider" min="-20" max="20" value="0" step="0.5">
+                        <span class="slider-value" id="rollValue">0.0°</span>
+                    </div>
+                    <div class="slider-row">
+                        <span class="slider-label">Pitch</span>
+                        <input type="range" class="slider" id="pitchSlider" min="-30" max="30" value="0" step="0.5">
+                        <span class="slider-value" id="pitchValue">0.0°</span>
+                    </div>
+                    <div class="slider-row">
+                        <span class="slider-label">Yaw</span>
+                        <input type="range" class="slider" id="yawSlider" min="-45" max="45" value="0" step="0.5">
+                        <span class="slider-value" id="yawValue">0.0°</span>
                     </div>
-                    <div class="joystick-hint">Hold and drag to move head continuously</div>
                 </div>
             </div>
 
@@ -804,14 +709,8 @@
         let sseAbortController = null;
         let stateRefreshInterval = null;
 
-        // Joystick state - track our own target position
-        let targetYaw = 0;
-        let targetPitch = 0;
-        let targetRoll = 0;
-        let joystickActive = false;
-        let joystickX = 0;
-        let joystickY = 0;
-        let joystickInterval = null;
+        // Head control state
+        let headSlidersActive = false; // True while user is dragging a slider
 
         // Audio state
         let localStream = null;
@@ -834,7 +733,7 @@
 
         document.addEventListener('DOMContentLoaded', () => {
             initAuth();
-            initJoystick();
+            initHeadSliders();
             initAntennaSliders();
         });
 
@@ -1084,7 +983,6 @@
 
         function stopStream() {
             if (stateRefreshInterval) clearInterval(stateRefreshInterval);
-            if (joystickInterval) clearInterval(joystickInterval);
             if (peerConnection) peerConnection.close();
             if (dataChannel) dataChannel.close();
             peerConnection = null;
@@ -1118,15 +1016,20 @@
                 const pitch = Math.asin(-m[2][0]) * 180 / Math.PI;
                 const yaw = Math.atan2(m[1][0], m[0][0]) * 180 / Math.PI;
                 const roll = Math.atan2(m[2][1], m[2][2]) * 180 / Math.PI;
+
+                // Update state bar
                 document.getElementById('stateYaw').textContent = yaw.toFixed(1) + '°';
                 document.getElementById('statePitch').textContent = pitch.toFixed(1) + '°';
                 document.getElementById('stateRoll').textContent = roll.toFixed(1) + '°';
 
-                // Sync target with robot state when not using joystick
-                if (!joystickActive) {
-                    targetYaw = yaw;
-                    targetPitch = pitch;
-                    targetRoll = roll;
+                // Update sliders with real position when not being controlled
+                if (!headSlidersActive) {
+                    document.getElementById('rollSlider').value = roll;
+                    document.getElementById('rollValue').textContent = roll.toFixed(1) + '°';
+                    document.getElementById('pitchSlider').value = pitch;
+                    document.getElementById('pitchValue').textContent = pitch.toFixed(1) + '°';
+                    document.getElementById('yawSlider').value = yaw;
+                    document.getElementById('yawValue').textContent = yaw.toFixed(1) + '°';
                 }
             }
             if (state.body_yaw !== undefined) {
@@ -1147,105 +1050,59 @@
             }
         }
 
-        // ===================== Joystick =====================
-        function initJoystick() {
-            const joystick = document.getElementById('joystick');
-            const knob = document.getElementById('joystickKnob');
-
-            function getPosition(e) {
-                const rect = joystick.getBoundingClientRect();
-                const size = rect.width;
-                const centerX = size / 2;
-                const centerY = size / 2;
-                const touch = e.touches ? e.touches[0] : e;
-                let x = touch.clientX - rect.left - centerX;
-                let y = touch.clientY - rect.top - centerY;
-                const maxRadius = centerX * 0.7;
-                const dist = Math.sqrt(x * x + y * y);
-                if (dist > maxRadius) {
-                    x = (x / dist) * maxRadius;
-                    y = (y / dist) * maxRadius;
-                }
-                return {
-                    x, y,
-                    normX: x / maxRadius,  // -1 to 1 (left to right)
-                    normY: y / maxRadius   // -1 to 1 (top to bottom)
-                };
-            }
-
-            function updateKnob(pos) {
-                const rect = joystick.getBoundingClientRect();
-                knob.style.left = (rect.width / 2 + pos.x) + 'px';
-                knob.style.top = (rect.height / 2 + pos.y) + 'px';
-            }
-
-            function startJoystick(e) {
-                e.preventDefault();
-                joystickActive = true;
-                const pos = getPosition(e);
-                updateKnob(pos);
-                joystickX = pos.normX;
-                joystickY = pos.normY;
-                startContinuousMovement();
+        // ===================== Head Sliders =====================
+        function initHeadSliders() {
+            const rollSlider = document.getElementById('rollSlider');
+            const pitchSlider = document.getElementById('pitchSlider');
+            const yawSlider = document.getElementById('yawSlider');
+            const rollValue = document.getElementById('rollValue');
+            const pitchValue = document.getElementById('pitchValue');
+            const yawValue = document.getElementById('yawValue');
+
+            function sendHeadPose() {
+                const roll = parseFloat(rollSlider.value);
+                const pitch = parseFloat(pitchSlider.value);
+                const yaw = parseFloat(yawSlider.value);
+                sendCommand({ set_target: buildMatrix(yaw, pitch, roll) });
             }
 
-            function moveJoystick(e) {
-                if (!joystickActive) return;
-                e.preventDefault();
-                const pos = getPosition(e);
-                updateKnob(pos);
-                joystickX = pos.normX;
-                joystickY = pos.normY;
+            function onSliderStart() {
+                headSlidersActive = true;
             }
 
-            function endJoystick() {
-                joystickActive = false;
-                knob.style.left = '50%';
-                knob.style.top = '50%';
-                joystickX = 0;
-                joystickY = 0;
-                stopContinuousMovement();
+            function onSliderEnd() {
+                headSlidersActive = false;
             }
 
-            joystick.addEventListener('mousedown', startJoystick);
-            joystick.addEventListener('touchstart', startJoystick, { passive: false });
-            document.addEventListener('mousemove', moveJoystick);
-            document.addEventListener('touchmove', moveJoystick, { passive: false });
-            document.addEventListener('mouseup', endJoystick);
-            document.addEventListener('touchend', endJoystick);
-
-        }
-
-        function startContinuousMovement() {
-            if (joystickInterval) return;
-
-            joystickInterval = setInterval(() => {
-                if (!joystickActive) return;
-
-                const speed = 1.5; // degrees per tick
-
-                // Joystick mapping:
-                // Left/Right (X) controls Yaw: right = turn right (negative yaw)
-                // Up/Down (Y) controls Pitch: up = look up (negative pitch)
-                targetYaw += -joystickX * speed;
-                targetPitch += joystickY * speed;
-
-                // Clamp to limits
-                targetYaw = Math.max(-45, Math.min(45, targetYaw));
-                targetPitch = Math.max(-30, Math.min(30, targetPitch));
-                targetRoll = Math.max(-20, Math.min(20, targetRoll));
-
-                // Send command
-                sendCommand({ set_target: buildMatrix(targetYaw, targetPitch, targetRoll) });
+            // Roll slider
+            rollSlider.addEventListener('mousedown', onSliderStart);
+            rollSlider.addEventListener('touchstart', onSliderStart);
+            rollSlider.addEventListener('mouseup', onSliderEnd);
+            rollSlider.addEventListener('touchend', onSliderEnd);
+            rollSlider.addEventListener('input', () => {
+                rollValue.textContent = parseFloat(rollSlider.value).toFixed(1) + '°';
+                sendHeadPose();
+            });
 
-            }, 50);
-        }
+            // Pitch slider
+            pitchSlider.addEventListener('mousedown', onSliderStart);
+            pitchSlider.addEventListener('touchstart', onSliderStart);
+            pitchSlider.addEventListener('mouseup', onSliderEnd);
+            pitchSlider.addEventListener('touchend', onSliderEnd);
+            pitchSlider.addEventListener('input', () => {
+                pitchValue.textContent = parseFloat(pitchSlider.value).toFixed(1) + '°';
+                sendHeadPose();
+            });
 
-        function stopContinuousMovement() {
-            if (joystickInterval) {
-                clearInterval(joystickInterval);
-                joystickInterval = null;
-            }
+            // Yaw slider
+            yawSlider.addEventListener('mousedown', onSliderStart);
+            yawSlider.addEventListener('touchstart', onSliderStart);
+            yawSlider.addEventListener('mouseup', onSliderEnd);
+            yawSlider.addEventListener('touchend', onSliderEnd);
+            yawSlider.addEventListener('input', () => {
+                yawValue.textContent = parseFloat(yawSlider.value).toFixed(1) + '°';
+                sendHeadPose();
+            });
         }
 
         function buildMatrix(yawDeg, pitchDeg, rollDeg) {