Add motor control via WebRTC data channel

- Enable/Disable Motors buttons in the UI
- Motor status display
- Query motor mode when data channel opens
- Handle motor_mode responses from robot

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

index.html

@@ -185,8 +185,19 @@
 
                 <!-- Control Panel -->
                 <div class="card">
-                    <h2>3. Head Control</h2>
-                    <p style="color: #888; font-size: 0.9em;">Send head pose commands via data channel</p>
+                    <h2>3. Motor & Head 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>
+                    </div>
+                    <div style="margin-bottom: 15px;">
+                        <span>Motors: </span>
+                        <span id="motorStatus" class="status disconnected">Unknown</span>
+                    </div>
+
+                    <p style="color: #888; font-size: 0.9em;">Head pose commands</p>
                     <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px;">
                         <div>
                             <label>Yaw (deg):</label>
@@ -238,6 +249,7 @@
         window.stopStream = stopStream;
         window.sendHeadPose = sendHeadPose;
         window.centerHead = centerHead;
+        window.setMotorMode = setMotorMode;
         window.clearLog = clearLog;
 
         // Initialize on page load
@@ -570,6 +582,8 @@
                     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;
                 } else if (peerConnection.iceConnectionState === 'failed') {
                     updateWebrtcStatus('disconnected');
                     log('Connection failed', 'error');
@@ -579,9 +593,27 @@
             peerConnection.ondatachannel = (event) => {
                 log(`Data channel: ${event.channel.label}`, 'success');
                 dataChannel = event.channel;
-                dataChannel.onopen = () => log('Data channel open', 'success');
+                dataChannel.onopen = () => {
+                    log('Data channel open', 'success');
+                    // Query motor status when channel opens
+                    dataChannel.send(JSON.stringify({ get_motor_mode: true }));
+                };
                 dataChannel.onclose = () => log('Data channel closed');
-                dataChannel.onmessage = (e) => log(`Received: ${e.data}`);
+                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}`);
+                        }
+                    } catch {
+                        log(`Received: ${e.data}`);
+                    }
+                };
             };
 
             log('Requesting session with robot...');
@@ -639,6 +671,9 @@
             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;
+            updateMotorStatus('unknown');
         }
 
         function updateWebrtcStatus(status) {
@@ -681,6 +716,30 @@
             document.getElementById('pitchInput').value = 0;
             sendHeadPose();
         }
+
+        // Motor Control
+        function setMotorMode(mode) {
+            if (!dataChannel || dataChannel.readyState !== 'open') {
+                log('Data channel not ready', 'error');
+                return;
+            }
+
+            dataChannel.send(JSON.stringify({ set_motor_mode: mode }));
+            log(`Setting motor mode to: ${mode}`);
+        }
+
+        function updateMotorStatus(mode) {
+            const el = document.getElementById('motorStatus');
+            if (!el) return;
+            el.textContent = mode.charAt(0).toUpperCase() + mode.slice(1);
+            if (mode === 'enabled') {
+                el.className = 'status connected';
+            } else if (mode === 'disabled') {
+                el.className = 'status disconnected';
+            } else {
+                el.className = 'status connecting';
+            }
+        }
     </script>
 </body>
 </html>