simpler

README.md

@@ -14,11 +14,11 @@ A lightweight, static HTML/JS control panel for Reachy Mini robot using WebSocke
 ## Features
 
 - **Real-time WebSocket Control**: Instant response using WebSocket streaming
-- **Wake Up / Go to Sleep**: Movement command buttons
 - **Task Space Control**: Real-time head pose control (X, Y, Z, Roll, Pitch, Yaw)
 - **Body & Antennas**: Control body yaw and antenna positions
 - **Auto-reconnect**: Automatically reconnects if connection is lost
 - **No Dependencies**: Pure HTML/CSS/JavaScript
+- **100% Client-Side**: No backend needed, runs entirely in the browser
 
 ## How to Use
 
@@ -67,16 +67,15 @@ php -S localhost:7860
 
 - Reachy Mini daemon running on `localhost:8000`
 - Modern web browser with WebSocket support
-- Motors must be enabled before using wake/sleep commands
 
 ## Architecture
 
 This app uses:
 - **WebSocket** (`ws://localhost:8000/api/move/ws/set_target`) for real-time pose streaming
-- **HTTP POST** for wake_up and goto_sleep commands
 - Pure client-side JavaScript (no backend needed)
+- Automatic reconnection if connection is lost
 
-The app automatically connects to the robot when loaded and reconnects if the connection is lost.
+**Note**: Due to browser security (Mixed Content policy), the WebSocket connection from HuggingFace Spaces (HTTPS) to localhost (HTTP) may be blocked. For best results, run the app locally.
 
 ## Technical Details
 

app.js

@@ -1,9 +1,8 @@
 // Reachy Mini Control Panel - WebSocket Version
-// Connects to localhost:8000 WebSocket and HTTP APIs
+// Connects to localhost:8000 WebSocket API for real-time control
 
 const ROBOT_URL = 'localhost:8000';
 const WS_URL = `ws://${ROBOT_URL}/api/move/ws/set_target`;
-const HTTP_URL = `http://${ROBOT_URL}`;
 
 // Global state
 const state = {
@@ -20,8 +19,6 @@ const state = {
 // DOM elements
 const elements = {
     status: document.getElementById('connectionStatus'),
-    wakeUpBtn: document.getElementById('wakeUpBtn'),
-    sleepBtn: document.getElementById('sleepBtn'),
     sliders: {
         headX: document.getElementById('headX'),
         headY: document.getElementById('headY'),
@@ -98,9 +95,6 @@ function updateConnectionStatus(connected) {
 
 // Enable/disable controls
 function enableControls(enabled) {
-    elements.wakeUpBtn.disabled = !enabled;
-    elements.sleepBtn.disabled = !enabled;
-
     Object.values(elements.sliders).forEach(slider => {
         slider.disabled = !enabled;
     });
@@ -206,57 +200,11 @@ function setupSliderHandlers() {
     });
 }
 
-// HTTP API calls for movement commands
-async function playWakeUp() {
-    try {
-        const response = await fetch(`${HTTP_URL}/api/move/play/wake_up`, {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' }
-        });
-
-        if (!response.ok) {
-            throw new Error(`HTTP ${response.status}`);
-        }
-
-        const result = await response.json();
-        console.log('Wake up started:', result.uuid);
-    } catch (error) {
-        console.error('Wake up failed:', error);
-        alert('Failed to wake up robot: ' + error.message);
-    }
-}
-
-async function playGotoSleep() {
-    try {
-        const response = await fetch(`${HTTP_URL}/api/move/play/goto_sleep`, {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' }
-        });
-
-        if (!response.ok) {
-            throw new Error(`HTTP ${response.status}`);
-        }
-
-        const result = await response.json();
-        console.log('Go to sleep started:', result.uuid);
-    } catch (error) {
-        console.error('Go to sleep failed:', error);
-        alert('Failed to put robot to sleep: ' + error.message);
-    }
-}
-
-// Button handlers
-function setupButtonHandlers() {
-    elements.wakeUpBtn.addEventListener('click', playWakeUp);
-    elements.sleepBtn.addEventListener('click', playGotoSleep);
-}
-
 // Initialize app
 function init() {
     console.log('Initializing Reachy Mini Control Panel');
 
     setupSliderHandlers();
-    setupButtonHandlers();
     connectWebSocket();
 
     console.log('Control panel ready');

index.html

@@ -229,15 +229,6 @@
             </div>
         </div>
 
-        <!-- Movement Commands -->
-        <div class="section">
-            <h2>Movement Commands</h2>
-            <div class="button-row">
-                <button id="wakeUpBtn" disabled>Wake Up</button>
-                <button id="sleepBtn" class="secondary" disabled>Go to Sleep</button>
-            </div>
-        </div>
-
         <!-- Head Pose Control -->
         <div class="section">
             <h2>Head Pose Control</h2>