Add full robot control panel via WebRTC

New controls:
- Motor: enable/disable/gravity compensation
- Head: yaw/pitch with smooth goto option
- Body yaw rotation
- Antennas: sliders for right/left
- Animations: wake up / go to sleep
- Audio: play sound files
- Recording: start/stop movement recording
- State: refresh current robot state

All commands sent via WebRTC data channel for low latency.

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

index.html

@@ -95,7 +95,30 @@
         }
 
         .controls { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 15px; }
-        .controls button { flex: 1; min-width: 120px; }
+        .controls button { flex: 1; min-width: 100px; }
+        .control-btn { min-width: 80px; }
+
+        input[type="range"] {
+            -webkit-appearance: none;
+            height: 8px;
+            background: #0f3460;
+            border-radius: 4px;
+            margin-top: 8px;
+        }
+        input[type="range"]::-webkit-slider-thumb {
+            -webkit-appearance: none;
+            width: 18px;
+            height: 18px;
+            background: #00d4ff;
+            border-radius: 50%;
+            cursor: pointer;
+        }
+
+        input[type="checkbox"] {
+            width: 18px;
+            height: 18px;
+            vertical-align: middle;
+        }
 
         .producer-list { margin: 10px 0; }
         .producer-item {
@@ -185,20 +208,26 @@
 
                 <!-- Control Panel -->
                 <div class="card">
-                    <h2>3. Motor & Head Control</h2>
+                    <h2>3. Motor Control</h2>
 
                     <p style="color: #888; font-size: 0.9em; margin-bottom: 10px;">Motor control (must enable before moving)</p>
                     <div class="controls" style="margin-bottom: 15px;">
-                        <button id="enableMotorsBtn" onclick="setMotorMode('enabled')" disabled style="background: #00c853;">Enable Motors</button>
-                        <button id="disableMotorsBtn" onclick="setMotorMode('disabled')" disabled style="background: #ff5252;">Disable Motors</button>
+                        <button id="enableMotorsBtn" onclick="setMotorMode('enabled')" disabled style="background: #00c853;">Enable</button>
+                        <button id="disableMotorsBtn" onclick="setMotorMode('disabled')" disabled style="background: #ff5252;">Disable</button>
+                        <button id="gravityBtn" onclick="setMotorMode('gravity_compensation')" disabled style="background: #ffc107; color: #000;">Gravity Comp</button>
                     </div>
                     <div style="margin-bottom: 15px;">
                         <span>Motors: </span>
                         <span id="motorStatus" class="status disconnected">Unknown</span>
+                        <button onclick="getState()" style="margin-left: 10px; padding: 4px 8px; font-size: 0.8em;">Refresh State</button>
                     </div>
+                </div>
+
+                <!-- Head & Body Control -->
+                <div class="card">
+                    <h2>4. Head & Body Control</h2>
 
-                    <p style="color: #888; font-size: 0.9em;">Head pose commands</p>
-                    <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px;">
+                    <div style="display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin-bottom: 15px;">
                         <div>
                             <label>Yaw (deg):</label>
                             <input type="number" id="yawInput" value="0" min="-45" max="45">
@@ -207,10 +236,77 @@
                             <label>Pitch (deg):</label>
                             <input type="number" id="pitchInput" value="0" min="-30" max="30">
                         </div>
+                        <div>
+                            <label>Body Yaw (deg):</label>
+                            <input type="number" id="bodyYawInput" value="0" min="-45" max="45">
+                        </div>
+                    </div>
+
+                    <div style="margin-bottom: 15px;">
+                        <label>Duration (s): </label>
+                        <input type="number" id="durationInput" value="0.5" min="0.1" max="5" step="0.1" style="width: 80px;">
+                        <label style="margin-left: 10px;">
+                            <input type="checkbox" id="smoothMoveCheck"> Smooth move (goto)
+                        </label>
+                    </div>
+
+                    <div class="controls">
+                        <button class="control-btn" onclick="sendHeadPose()" disabled>Send Pose</button>
+                        <button class="control-btn" onclick="centerHead()" disabled>Center</button>
+                        <button class="control-btn" onclick="setBodyYaw()" disabled>Set Body Yaw</button>
+                    </div>
+                </div>
+
+                <!-- Antennas Control -->
+                <div class="card">
+                    <h2>5. Antennas</h2>
+
+                    <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom: 15px;">
+                        <div>
+                            <label>Right Antenna: <span id="rightAntennaVal">0</span>°</label>
+                            <input type="range" id="rightAntennaInput" value="0" min="-175" max="175" style="width: 100%;" oninput="document.getElementById('rightAntennaVal').textContent = this.value">
+                        </div>
+                        <div>
+                            <label>Left Antenna: <span id="leftAntennaVal">0</span>°</label>
+                            <input type="range" id="leftAntennaInput" value="0" min="-175" max="175" style="width: 100%;" oninput="document.getElementById('leftAntennaVal').textContent = this.value">
+                        </div>
                     </div>
+
                     <div class="controls">
-                        <button id="sendPoseBtn" onclick="sendHeadPose()" disabled>Send Pose</button>
-                        <button id="centerBtn" onclick="centerHead()" disabled>Center</button>
+                        <button class="control-btn" onclick="sendAntennas()" disabled>Set Antennas</button>
+                        <button class="control-btn" onclick="resetAntennas()" disabled>Reset (0°)</button>
+                    </div>
+                </div>
+
+                <!-- Animations & Audio -->
+                <div class="card">
+                    <h2>6. Animations & Audio</h2>
+
+                    <p style="color: #888; font-size: 0.9em; margin-bottom: 10px;">Pre-built animations</p>
+                    <div class="controls" style="margin-bottom: 15px;">
+                        <button class="control-btn" onclick="wakeUp()" disabled style="background: #00c853;">Wake Up</button>
+                        <button class="control-btn" onclick="goToSleep()" disabled style="background: #9c27b0;">Go to Sleep</button>
+                    </div>
+
+                    <p style="color: #888; font-size: 0.9em; margin-bottom: 10px;">Play sound</p>
+                    <div style="display: flex; gap: 10px;">
+                        <input type="text" id="soundFileInput" placeholder="Sound file (e.g., wake_up.wav)" style="flex: 1;">
+                        <button class="control-btn" onclick="playSound()" disabled>Play</button>
+                    </div>
+                </div>
+
+                <!-- Recording -->
+                <div class="card">
+                    <h2>7. Recording</h2>
+
+                    <div style="margin-bottom: 15px;">
+                        <span>Recording: </span>
+                        <span id="recordingStatus" class="status disconnected">Stopped</span>
+                    </div>
+
+                    <div class="controls">
+                        <button class="control-btn" onclick="startRecording()" disabled style="background: #f44336;">Start Recording</button>
+                        <button class="control-btn" onclick="stopRecording()" disabled>Stop Recording</button>
                     </div>
                 </div>
 
@@ -249,7 +345,16 @@
         window.stopStream = stopStream;
         window.sendHeadPose = sendHeadPose;
         window.centerHead = centerHead;
+        window.setBodyYaw = setBodyYaw;
         window.setMotorMode = setMotorMode;
+        window.sendAntennas = sendAntennas;
+        window.resetAntennas = resetAntennas;
+        window.wakeUp = wakeUp;
+        window.goToSleep = goToSleep;
+        window.playSound = playSound;
+        window.getState = getState;
+        window.startRecording = startRecording;
+        window.stopRecording = stopRecording;
         window.clearLog = clearLog;
 
         // Initialize on page load
@@ -579,11 +684,7 @@
                 if (peerConnection.iceConnectionState === 'connected' ||
                     peerConnection.iceConnectionState === 'completed') {
                     updateWebrtcStatus('connected');
-                    document.getElementById('stopStreamBtn').disabled = false;
-                    document.getElementById('sendPoseBtn').disabled = false;
-                    document.getElementById('centerBtn').disabled = false;
-                    document.getElementById('enableMotorsBtn').disabled = false;
-                    document.getElementById('disableMotorsBtn').disabled = false;
+                    enableAllControls(true);
                 } else if (peerConnection.iceConnectionState === 'failed') {
                     updateWebrtcStatus('disconnected');
                     log('Connection failed', 'error');
@@ -595,21 +696,14 @@
                 dataChannel = event.channel;
                 dataChannel.onopen = () => {
                     log('Data channel open', 'success');
-                    // Query motor status when channel opens
-                    dataChannel.send(JSON.stringify({ get_motor_mode: true }));
+                    // Query full state when channel opens
+                    dataChannel.send(JSON.stringify({ get_state: true }));
                 };
                 dataChannel.onclose = () => log('Data channel closed');
                 dataChannel.onmessage = (e) => {
                     try {
                         const data = JSON.parse(e.data);
-                        if (data.motor_mode) {
-                            updateMotorStatus(data.motor_mode);
-                            log(`Motor mode: ${data.motor_mode}`, 'info');
-                        } else if (data.error) {
-                            log(`Error: ${data.error}`, 'error');
-                        } else {
-                            log(`Received: ${e.data}`);
-                        }
+                        handleRobotResponse(data);
                     } catch {
                         log(`Received: ${e.data}`);
                     }
@@ -668,12 +762,21 @@
             currentSessionId = null;
             document.getElementById('remoteVideo').srcObject = null;
             updateWebrtcStatus('disconnected');
-            document.getElementById('stopStreamBtn').disabled = true;
-            document.getElementById('sendPoseBtn').disabled = true;
-            document.getElementById('centerBtn').disabled = true;
-            document.getElementById('enableMotorsBtn').disabled = true;
-            document.getElementById('disableMotorsBtn').disabled = true;
+            enableAllControls(false);
             updateMotorStatus('unknown');
+            updateRecordingStatus(false);
+        }
+
+        function enableAllControls(enabled) {
+            // All control buttons
+            const buttons = document.querySelectorAll('.control-btn');
+            buttons.forEach(btn => btn.disabled = !enabled);
+
+            // Specific buttons
+            document.getElementById('stopStreamBtn').disabled = !enabled;
+            document.getElementById('enableMotorsBtn').disabled = !enabled;
+            document.getElementById('disableMotorsBtn').disabled = !enabled;
+            document.getElementById('gravityBtn').disabled = !enabled;
         }
 
         function updateWebrtcStatus(status) {
@@ -684,54 +787,105 @@
             el.textContent = labels[status] || status;
         }
 
-        // Head Control
-        function sendHeadPose() {
+        // === RESPONSE HANDLER ===
+        function handleRobotResponse(data) {
+            if (data.state) {
+                // Full state response
+                if (data.state.motor_mode) updateMotorStatus(data.state.motor_mode);
+                if (data.state.is_recording !== undefined) updateRecordingStatus(data.state.is_recording);
+                log(`State: motors=${data.state.motor_mode}, recording=${data.state.is_recording}`, 'info');
+            } else if (data.motor_mode) {
+                updateMotorStatus(data.motor_mode);
+                log(`Motor mode: ${data.motor_mode}`, 'info');
+            } else if (data.error) {
+                log(`Error: ${data.error}`, 'error');
+            } else if (data.status === 'ok') {
+                const cmd = data.command || 'command';
+                if (data.completed) {
+                    log(`${cmd} completed`, 'success');
+                } else {
+                    log(`${cmd} sent`, 'info');
+                }
+                if (data.is_recording !== undefined) updateRecordingStatus(data.is_recording);
+            } else {
+                log(`Response: ${JSON.stringify(data)}`);
+            }
+        }
+
+        // === HELPER: Send command via data channel ===
+        function sendCommand(cmd) {
             if (!dataChannel || dataChannel.readyState !== 'open') {
                 log('Data channel not ready', 'error');
-                return;
+                return false;
             }
+            dataChannel.send(JSON.stringify(cmd));
+            return true;
+        }
 
-            const yaw = parseFloat(document.getElementById('yawInput').value) || 0;
-            const pitch = parseFloat(document.getElementById('pitchInput').value) || 0;
-            const yawRad = yaw * Math.PI / 180;
-            const pitchRad = pitch * Math.PI / 180;
-
+        // === HEAD CONTROL ===
+        function buildPoseMatrix(yawDeg, pitchDeg) {
+            const yawRad = yawDeg * Math.PI / 180;
+            const pitchRad = pitchDeg * Math.PI / 180;
             const cy = Math.cos(yawRad), sy = Math.sin(yawRad);
             const cp = Math.cos(pitchRad), sp = Math.sin(pitchRad);
-
-            // 4x4 transformation matrix (nested array for numpy compatibility)
-            const matrix = [
+            return [
                 [cy * cp, -sy, cy * sp, 0],
                 [sy * cp,  cy, sy * sp, 0],
                 [-sp,       0,      cp, 0],
                 [0,         0,       0, 1]
             ];
+        }
 
-            dataChannel.send(JSON.stringify({ set_target: matrix }));
-            log(`Sent pose: yaw=${yaw}, pitch=${pitch}`);
+        function sendHeadPose() {
+            const yaw = parseFloat(document.getElementById('yawInput').value) || 0;
+            const pitch = parseFloat(document.getElementById('pitchInput').value) || 0;
+            const smooth = document.getElementById('smoothMoveCheck').checked;
+            const duration = parseFloat(document.getElementById('durationInput').value) || 0.5;
+
+            const matrix = buildPoseMatrix(yaw, pitch);
+
+            if (smooth) {
+                // Smooth goto movement
+                sendCommand({
+                    goto_target: {
+                        head: matrix,
+                        duration: duration
+                    }
+                });
+                log(`Goto pose: yaw=${yaw}, pitch=${pitch}, duration=${duration}s`);
+            } else {
+                // Instant set_target
+                sendCommand({ set_target: matrix });
+                log(`Set pose: yaw=${yaw}, pitch=${pitch}`);
+            }
         }
 
         function centerHead() {
             document.getElementById('yawInput').value = 0;
             document.getElementById('pitchInput').value = 0;
+            document.getElementById('bodyYawInput').value = 0;
             sendHeadPose();
         }
 
-        // Motor Control
-        function setMotorMode(mode) {
-            if (!dataChannel || dataChannel.readyState !== 'open') {
-                log('Data channel not ready', 'error');
-                return;
-            }
+        // === BODY YAW ===
+        function setBodyYaw() {
+            const yaw = parseFloat(document.getElementById('bodyYawInput').value) || 0;
+            const yawRad = yaw * Math.PI / 180;
+            sendCommand({ set_body_yaw: yawRad });
+            log(`Set body yaw: ${yaw}°`);
+        }
 
-            dataChannel.send(JSON.stringify({ set_motor_mode: mode }));
-            log(`Setting motor mode to: ${mode}`);
+        // === MOTOR CONTROL ===
+        function setMotorMode(mode) {
+            sendCommand({ set_motor_mode: mode });
+            log(`Setting motor mode: ${mode}`);
         }
 
         function updateMotorStatus(mode) {
             const el = document.getElementById('motorStatus');
             if (!el) return;
-            el.textContent = mode.charAt(0).toUpperCase() + mode.slice(1);
+            const label = mode.replace('_', ' ');
+            el.textContent = label.charAt(0).toUpperCase() + label.slice(1);
             if (mode === 'enabled') {
                 el.className = 'status connected';
             } else if (mode === 'disabled') {
@@ -740,6 +894,76 @@
                 el.className = 'status connecting';
             }
         }
+
+        // === ANTENNAS ===
+        function sendAntennas() {
+            const right = parseFloat(document.getElementById('rightAntennaInput').value) || 0;
+            const left = parseFloat(document.getElementById('leftAntennaInput').value) || 0;
+            const rightRad = right * Math.PI / 180;
+            const leftRad = left * Math.PI / 180;
+            sendCommand({ set_antennas: [rightRad, leftRad] });
+            log(`Set antennas: right=${right}°, left=${left}°`);
+        }
+
+        function resetAntennas() {
+            document.getElementById('rightAntennaInput').value = 0;
+            document.getElementById('leftAntennaInput').value = 0;
+            document.getElementById('rightAntennaVal').textContent = '0';
+            document.getElementById('leftAntennaVal').textContent = '0';
+            sendCommand({ set_antennas: [0, 0] });
+            log('Reset antennas to 0°');
+        }
+
+        // === ANIMATIONS ===
+        function wakeUp() {
+            sendCommand({ wake_up: true });
+            log('Starting wake up animation...', 'info');
+        }
+
+        function goToSleep() {
+            sendCommand({ goto_sleep: true });
+            log('Starting sleep animation...', 'info');
+        }
+
+        // === AUDIO ===
+        function playSound() {
+            const file = document.getElementById('soundFileInput').value.trim();
+            if (!file) {
+                log('Please enter a sound file name', 'error');
+                return;
+            }
+            sendCommand({ play_sound: file });
+            log(`Playing sound: ${file}`);
+        }
+
+        // === STATE ===
+        function getState() {
+            sendCommand({ get_state: true });
+            log('Requesting state...');
+        }
+
+        // === RECORDING ===
+        function startRecording() {
+            sendCommand({ start_recording: true });
+            log('Starting recording...', 'info');
+        }
+
+        function stopRecording() {
+            sendCommand({ stop_recording: true });
+            log('Stopping recording...', 'info');
+        }
+
+        function updateRecordingStatus(isRecording) {
+            const el = document.getElementById('recordingStatus');
+            if (!el) return;
+            if (isRecording) {
+                el.textContent = 'Recording';
+                el.className = 'status connected';
+            } else {
+                el.textContent = 'Stopped';
+                el.className = 'status disconnected';
+            }
+        }
     </script>
 </body>
 </html>