Refactor

reachy_mini_app_example/robot_viz.html

@@ -131,421 +131,10 @@
     </script>
 
     <script type="module">
-        import * as THREE from 'three';
-        import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
-        import URDFLoader from 'https://cdn.jsdelivr.net/npm/urdf-loader@0.12.3/+esm';
-        import { RobotStateClient } from './robot_state.js';
-
-        // WebSocket URL - can be changed via URL parameter
-        const WS_URL = new URLSearchParams(location.search).get("ws")
-            || "ws://127.0.0.1:8000/api/state/ws/full";
-        
-        const URDF_URL = new URLSearchParams(location.search).get("urdf")
-            || "http://127.0.0.1:8000/api/kinematics/urdf";
-        
-        const STL_BASE_URL = new URLSearchParams(location.search).get("stl_base")
-            || "http://127.0.0.1:8000/api/kinematics/stl";
-
-        const statusEl = document.getElementById("status");
-        const jointsListEl = document.getElementById("joints-list");
-
-        // Scene setup
-        const scene = new THREE.Scene();
-        
-        // Retro-futuristic Arizona sunset sky (deep purple → orange)
-        const bgCanvas = document.createElement('canvas');
-        bgCanvas.width = 1024;
-        bgCanvas.height = 1024;
-        const bgCtx = bgCanvas.getContext('2d');
-        const bgGradient = bgCtx.createLinearGradient(0, 0, 0, bgCanvas.height);
-        bgGradient.addColorStop(0.0, '#f7a072');  // warm orange
-        bgGradient.addColorStop(0.08, '#e97a5b'); // orange-red
-        bgGradient.addColorStop(0.18, '#cf4958'); // rose-orange
-        bgGradient.addColorStop(0.32, '#8e2a6a'); // purple-rose
-        bgGradient.addColorStop(0.55, '#4b136f'); // rich purple-magenta
-        bgGradient.addColorStop(0.78, '#1a0b4b'); // deep purple
-        bgGradient.addColorStop(1.0, '#0b032d'); // very deep purple
-        bgCtx.fillStyle = bgGradient;
-        bgCtx.fillRect(0, 0, bgCanvas.width, bgCanvas.height);
-        const bgTexture = new THREE.CanvasTexture(bgCanvas);
-        if (THREE?.SRGBColorSpace) {
-            bgTexture.colorSpace = THREE.SRGBColorSpace;
-        }
-        scene.background = bgTexture;
-
-        // Camera setup
-        const camera = new THREE.PerspectiveCamera(
-            75,
-            window.innerWidth / window.innerHeight,
-            0.01,
-            100
-        );
-        camera.position.set(0.3, 0.3, 0.3);
-        camera.lookAt(0, 0.1, 0);
-
-        // Renderer setup
-        const renderer = new THREE.WebGLRenderer({ antialias: true });
-        renderer.setSize(window.innerWidth, window.innerHeight);
-        renderer.shadowMap.enabled = true;
-        document.getElementById('container').appendChild(renderer.domElement);
-
-        // Controls
-        const controls = new OrbitControls(camera, renderer.domElement);
-        controls.target.set(0, 0.1, 0);
-        controls.enableDamping = true;
-        controls.dampingFactor = 0.05;
-
-        // Lighting
-        const ambientLight = new THREE.AmbientLight(0xffffff, 0.4);
-        scene.add(ambientLight);
-
-        const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
-        directionalLight.position.set(1, 2, 1);
-        directionalLight.castShadow = true;
-        scene.add(directionalLight);
-
-        // Spotlight to illuminate the robot nicely
-        const spotLight = new THREE.SpotLight(0xffffff, 1.5);
-        spotLight.position.set(0.5, 0.5, 0.5);
-        spotLight.angle = Math.PI / 4;
-        spotLight.penumbra = 0.3;
-        spotLight.decay = 2;
-        spotLight.distance = 3;
-        spotLight.castShadow = true;
-        spotLight.target.position.set(0, 0.1, 0);
-        scene.add(spotLight);
-        scene.add(spotLight.target);
-
-        // Grid helper
-        const gridHelper = new THREE.GridHelper(1, 10);
-        scene.add(gridHelper);
-
-        // Robot model
-        let robot = null;
-        let jointMap = {};
-        
-        // Chart setup
-        const MAX_SAMPLES = 40;
-        const chartData = {
-            labels: Array(MAX_SAMPLES).fill(''),
-            datasets: []
-        };
-        
-        const jointColors = {
-            'head yaw': '#ff6384',
-            'head pitch': '#36a2eb',
-            'head roll': '#ffce56',
-            'left antenna': '#4bc0c0',
-            'right antenna': '#9966ff',
-            'body yaw': '#ff9f40'
-        };
+        import { App } from './src/App.js';
         
-        const ctx = document.getElementById('chart').getContext('2d');
-        const chart = new Chart(ctx, {
-            type: 'line',
-            data: chartData,
-            options: {
-                responsive: true,
-                maintainAspectRatio: false,
-                animation: false,
-                plugins: {
-                    legend: {
-                        display: false
-                    }
-                },
-                scales: {
-                    x: {
-                        display: false
-                    },
-                    y: {
-                        ticks: { color: '#ffffff' },
-                        grid: { color: 'rgba(255, 255, 255, 0.1)' }
-                    }
-                },
-                elements: {
-                    point: { radius: 0 },
-                    line: { borderWidth: 2 }
-                }
-            }
-        });
-
-        // Load URDF
-        statusEl.innerHTML = '📥 Loading URDF...';
-        
-        // Fetch the URDF JSON from the daemon
-        fetch(URDF_URL)
-            .then(response => response.json())
-            .then(data => {
-                if (!data.urdf) {
-                    throw new Error('No URDF found in response');
-                }
-                
-                let urdfXml = data.urdf;
-                
-                // DON'T modify the URDF - keep package:// URIs as-is
-                // The loader will use the packages map to resolve them
-                console.log('URDF snippet:', urdfXml.substring(0, 1000));
-                
-                // Create a blob URL from the URDF XML string
-                const blob = new Blob([urdfXml], { type: 'application/xml' });
-                const blobUrl = URL.createObjectURL(blob);
-                
-                // Create loader with custom package paths that resolve to the REST API
-                // Note: Don't include trailing slash - the URDF loader will add it
-                const loader = new URDFLoader();
-                loader.packages = {
-                    'assets': STL_BASE_URL,
-                    'reachy_mini_description': STL_BASE_URL
-                };
-                
-                console.log('Package resolution:', loader.packages);
-                console.log('STL files will be fetched from REST API:', STL_BASE_URL);
-                
-                // Add a custom fetch function to handle mesh loading with better error handling
-                const originalFetch = loader.fetchOptions?.fetch || fetch;
-                loader.fetchOptions = {
-                    ...loader.fetchOptions,
-                    fetch: (url, ...args) => {
-                        console.log('Fetching mesh via API:', url);
-                        return originalFetch(url, ...args).then(response => {
-                            if (!response.ok) {
-                                console.error(`Failed to fetch ${url}: ${response.status}`);
-                            }
-                            return response;
-                        });
-                    }
-                };
-                
-                loader.load(
-                    blobUrl,
-                    (urdfRobot) => {
-                        robot = urdfRobot;
-                        
-                        robot.rotation.x = -Math.PI / 2; // Rotate 90 degrees around X axis
-                        
-                        scene.add(robot);
-                        
-                        // Build joint map
-                        robot.traverse((child) => {
-                            if (child.isURDFJoint) {
-                                jointMap[child.name] = child;
-                            }
-                        });
-                        
-                        // Convert robot to blue wireframe - delay to allow meshes to load
-                        setTimeout(() => {
-                            let meshCount = 0;
-                            scene.traverse((child) => {
-                                if (child.type === 'Mesh' || child.isMesh) {
-                                    meshCount++;
-                                    // Apply new wireframe material
-                                    child.material = new THREE.MeshBasicMaterial({
-                                        color: 0x0044ff,
-                                        wireframe: true
-                                    });
-                                    child.material.needsUpdate = true;
-                                }
-                            });
-                            console.log(`✨ Applied wireframe to ${meshCount} meshes`);
-                        }, 2500);
-
-                        // Clean up the blob URL
-                        URL.revokeObjectURL(blobUrl);
-                        
-                        statusEl.innerHTML = '✅ URDF loaded (some meshes may be missing). Connecting to WebSocket...';
-                        connectWebSocket();
-                    },
-                    undefined,
-                    (error) => {
-                        statusEl.innerHTML = `<span class="err">❌ Error loading URDF: ${error.message}</span>`;
-                        console.error('URDF load error:', error);
-                        URL.revokeObjectURL(blobUrl);
-                    }
-                );
-            })
-            .catch(error => {
-                statusEl.innerHTML = `<span class="err">❌ Error fetching URDF: ${error.message}</span>`;
-                console.error('URDF fetch error:', error);
-            });
-
-        // WebSocket connection using shared client
-        const robotClient = new RobotStateClient(WS_URL);
-        
-        function connectWebSocket() {
-            robotClient.onStateChange((event, data) => {
-                if (event === 'connected') {
-                    statusEl.innerHTML = '<span class="ok"><span class="connection-led"></span> Reachy Mini</span>';
-                } else if (event === 'disconnected') {
-                    statusEl.innerHTML = '<span class="err"><span class="connection-led"></span>Disconnected. Reconnecting...</span>';
-                } else if (event === 'error') {
-                    statusEl.innerHTML = '<span class="err"><span class="connection-led"></span>WebSocket error</span>';
-                } else if (event === 'data') {
-                    updateRobotJoints(data);
-                    updateJointsDisplay(data);
-                }
-            });
-            
-            robotClient.connect();
-        }
-
-        // Update robot joints from WebSocket data
-        function updateRobotJoints(data) {
-            if (!robot) return;
-            
-            // Log the data structure once to debug
-            if (!updateRobotJoints.logged) {
-                console.log('WebSocket data structure:', data);
-                console.log('Available joints in URDF:', Object.keys(jointMap));
-                updateRobotJoints.logged = true;
-            }
-
-            // Update head pose if available
-            if (data.head_pose && jointMap['yaw_body']) {
-                // head_pose contains x, y, z, roll, pitch, yaw
-                // Map yaw to the yaw_body joint
-                if (data.head_pose.yaw !== undefined) {
-                    jointMap['yaw_body'].setJointValue(data.head_pose.yaw);
-                }
-            }
-            
-            // Update antennas if available
-            if (data.antennas_position && Array.isArray(data.antennas_position)) {
-                if (jointMap['left_antenna'] && data.antennas_position[0] !== undefined) {
-                    jointMap['left_antenna'].setJointValue(data.antennas_position[0]);
-                }
-                if (jointMap['right_antenna'] && data.antennas_position[1] !== undefined) {
-                    jointMap['right_antenna'].setJointValue(data.antennas_position[1]);
-                }
-            }
-            
-            // Update body yaw if available
-            if (data.body_yaw !== undefined && jointMap['yaw_body']) {
-                jointMap['yaw_body'].setJointValue(data.body_yaw);
-            }
-        }
-
-        // Update the joints display overlay
-        function updateJointsDisplay(data) {
-            let html = '';
-            const jointValues = {};
-            
-            // Display head pose
-            if (data.head_pose) {
-                const yaw = data.head_pose.yaw * 180 / Math.PI;
-                const pitch = data.head_pose.pitch * 180 / Math.PI;
-                const roll = data.head_pose.roll * 180 / Math.PI;
-                
-                html += `<div class="joint-item">
-                    <span class="joint-name">
-                        <span class="joint-color-dot" style="background-color: ${jointColors['head yaw'] || '#ffffff'}"></span>
-                        head yaw
-                    </span>
-                    <span class="joint-value">${yaw.toFixed(2)}°</span>
-                </div>`;
-                html += `<div class="joint-item">
-                    <span class="joint-name">
-                        <span class="joint-color-dot" style="background-color: ${jointColors['head pitch'] || '#ffffff'}"></span>
-                        head pitch
-                    </span>
-                    <span class="joint-value">${pitch.toFixed(2)}°</span>
-                </div>`;
-                html += `<div class="joint-item">
-                    <span class="joint-name">
-                        <span class="joint-color-dot" style="background-color: ${jointColors['head roll'] || '#ffffff'}"></span>
-                        head roll
-                    </span>
-                    <span class="joint-value">${roll.toFixed(2)}°</span>
-                </div>`;
-                
-                jointValues['head yaw'] = yaw;
-                jointValues['head pitch'] = pitch;
-                jointValues['head roll'] = roll;
-            }
-            
-            // Display antennas
-            if (data.antennas_position && Array.isArray(data.antennas_position)) {
-                const leftAntenna = data.antennas_position[0] * 180 / Math.PI;
-                const rightAntenna = data.antennas_position[1] * 180 / Math.PI;
-                
-                html += `<div class="joint-item">
-                    <span class="joint-name">
-                        <span class="joint-color-dot" style="background-color: ${jointColors['left antenna'] || '#ffffff'}"></span>
-                        left antenna
-                    </span>
-                    <span class="joint-value">${leftAntenna.toFixed(2)}°</span>
-                </div>`;
-                html += `<div class="joint-item">
-                    <span class="joint-name">
-                        <span class="joint-color-dot" style="background-color: ${jointColors['right antenna'] || '#ffffff'}"></span>
-                        right antenna
-                    </span>
-                    <span class="joint-value">${rightAntenna.toFixed(2)}°</span>
-                </div>`;
-                
-                jointValues['left antenna'] = leftAntenna;
-                jointValues['right antenna'] = rightAntenna;
-            }
-            
-            // Display body yaw
-            if (data.body_yaw !== undefined) {
-                const bodyYaw = data.body_yaw * 180 / Math.PI;
-                html += `<div class="joint-item">
-                    <span class="joint-name">
-                        <span class="joint-color-dot" style="background-color: ${jointColors['body yaw'] || '#ffffff'}"></span>
-                        body yaw
-                    </span>
-                    <span class="joint-value">${bodyYaw.toFixed(2)}°</span>
-                </div>`;
-                
-                jointValues['body yaw'] = bodyYaw;
-            }
-            
-            jointsListEl.innerHTML = html || 'No joint data';
-            
-            // Update chart
-            updateChart(jointValues);
-        }
-        
-        // Update chart with new joint values
-        function updateChart(jointValues) {
-            // Ensure all datasets exist
-            for (const [name, value] of Object.entries(jointValues)) {
-                let dataset = chart.data.datasets.find(ds => ds.label === name);
-                if (!dataset) {
-                    dataset = {
-                        label: name,
-                        data: Array(MAX_SAMPLES).fill(null),
-                        borderColor: jointColors[name] || '#ffffff',
-                        backgroundColor: 'transparent',
-                        tension: 0.4
-                    };
-                    chart.data.datasets.push(dataset);
-                }
-                
-                // Shift and add new value
-                dataset.data.shift();
-                dataset.data.push(value);
-            }
-            
-            chart.update('none'); // Update without animation
-        }
-
-        // Animation loop
-        function animate() {
-            requestAnimationFrame(animate);
-            controls.update();
-            renderer.render(scene, camera);
-        }
-
-        // Handle window resize
-        window.addEventListener('resize', () => {
-            camera.aspect = window.innerWidth / window.innerHeight;
-            camera.updateProjectionMatrix();
-            renderer.setSize(window.innerWidth, window.innerHeight);
-        });
-
-        // Start animation
-        animate();
+        // Initialize the application
+        new App();
     </script>
 </body>
 </html>

reachy_mini_app_example/src/App.js

@@ -0,0 +1,57 @@
+import { SceneManager } from './SceneManager.js';
+import { RobotManager } from './RobotManager.js';
+import { ChartManager } from './ChartManager.js';
+import { UIManager } from './UIManager.js';
+import { WebSocketManager } from './WebSocketManager.js';
+
+export class App {
+    constructor() {
+        this.sceneManager = null;
+        this.robotManager = null;
+        this.chartManager = null;
+        this.uiManager = null;
+        this.webSocketManager = null;
+        
+        this.init();
+    }
+    
+    async init() {
+        // Initialize DOM elements
+        const container = document.getElementById('container');
+        const statusEl = document.getElementById('status');
+        const jointsListEl = document.getElementById('joints-list');
+        const chartCanvas = document.getElementById('chart');
+        
+        // Initialize managers
+        this.sceneManager = new SceneManager(container);
+        this.uiManager = new UIManager(statusEl, jointsListEl);
+        this.chartManager = new ChartManager(chartCanvas);
+        
+        // Initialize robot manager with status callback
+        this.robotManager = new RobotManager((message) => {
+            this.uiManager.updateStatus(message);
+        });
+        
+        // Initialize WebSocket manager
+        this.webSocketManager = new WebSocketManager(
+            this.uiManager,
+            this.robotManager,
+            this.chartManager
+        );
+        
+        try {
+            // Load robot
+            const robot = await this.robotManager.loadRobot();
+            this.sceneManager.add(robot);
+            
+            // Connect WebSocket
+            this.webSocketManager.connect();
+            
+        } catch (error) {
+            console.error('Failed to initialize app:', error);
+        }
+        
+        // Start animation loop
+        this.sceneManager.animate();
+    }
+}

reachy_mini_app_example/src/ChartManager.js

@@ -0,0 +1,77 @@
+export class ChartManager {
+    constructor(canvasElement) {
+        this.canvas = canvasElement;
+        this.ctx = canvasElement.getContext('2d');
+        this.chart = null;
+        this.MAX_SAMPLES = 40;
+        
+        this.jointColors = {
+            'head yaw': '#ff6384',
+            'head pitch': '#36a2eb',
+            'head roll': '#ffce56',
+            'left antenna': '#4bc0c0',
+            'right antenna': '#9966ff',
+            'body yaw': '#ff9f40'
+        };
+        
+        this.init();
+    }
+    
+    init() {
+        const chartData = {
+            labels: Array(this.MAX_SAMPLES).fill(''),
+            datasets: []
+        };
+        
+        this.chart = new Chart(this.ctx, {
+            type: 'line',
+            data: chartData,
+            options: {
+                responsive: true,
+                maintainAspectRatio: false,
+                animation: false,
+                plugins: {
+                    legend: {
+                        display: false
+                    }
+                },
+                scales: {
+                    x: {
+                        display: false
+                    },
+                    y: {
+                        ticks: { color: '#ffffff' },
+                        grid: { color: 'rgba(255, 255, 255, 0.1)' }
+                    }
+                },
+                elements: {
+                    point: { radius: 0 },
+                    line: { borderWidth: 2 }
+                }
+            }
+        });
+    }
+    
+    updateChart(jointValues) {
+        // Ensure all datasets exist
+        for (const [name, value] of Object.entries(jointValues)) {
+            let dataset = this.chart.data.datasets.find(ds => ds.label === name);
+            if (!dataset) {
+                dataset = {
+                    label: name,
+                    data: Array(this.MAX_SAMPLES).fill(null),
+                    borderColor: this.jointColors[name] || '#ffffff',
+                    backgroundColor: 'transparent',
+                    tension: 0.4
+                };
+                this.chart.data.datasets.push(dataset);
+            }
+            
+            // Shift and add new value
+            dataset.data.shift();
+            dataset.data.push(value);
+        }
+        
+        this.chart.update('none'); // Update without animation
+    }
+}

reachy_mini_app_example/src/RobotManager.js

@@ -0,0 +1,153 @@
+import * as THREE from 'three';
+import URDFLoader from 'https://cdn.jsdelivr.net/npm/urdf-loader@0.12.3/+esm';
+
+export class RobotManager {
+    constructor(statusCallback) {
+        this.robot = null;
+        this.jointMap = {};
+        this.statusCallback = statusCallback;
+        this.logged = false;
+        
+        // URL configuration
+        this.URDF_URL = new URLSearchParams(location.search).get("urdf")
+            || "http://127.0.0.1:8000/api/kinematics/urdf";
+        this.STL_BASE_URL = new URLSearchParams(location.search).get("stl_base")
+            || "http://127.0.0.1:8000/api/kinematics/stl";
+    }
+    
+    async loadRobot() {
+        this.statusCallback('📥 Loading URDF...');
+        
+        try {
+            const response = await fetch(this.URDF_URL);
+            const data = await response.json();
+            
+            if (!data.urdf) {
+                throw new Error('No URDF found in response');
+            }
+            
+            const urdfXml = data.urdf;
+            console.log('URDF snippet:', urdfXml.substring(0, 1000));
+            
+            // Create a blob URL from the URDF XML string
+            const blob = new Blob([urdfXml], { type: 'application/xml' });
+            const blobUrl = URL.createObjectURL(blob);
+            
+            // Create loader with custom package paths
+            const loader = new URDFLoader();
+            loader.packages = {
+                'assets': this.STL_BASE_URL,
+                'reachy_mini_description': this.STL_BASE_URL
+            };
+            
+            console.log('Package resolution:', loader.packages);
+            console.log('STL files will be fetched from REST API:', this.STL_BASE_URL);
+            
+            // Add custom fetch function for better error handling
+            const originalFetch = loader.fetchOptions?.fetch || fetch;
+            loader.fetchOptions = {
+                ...loader.fetchOptions,
+                fetch: (url, ...args) => {
+                    console.log('Fetching mesh via API:', url);
+                    return originalFetch(url, ...args).then(response => {
+                        if (!response.ok) {
+                            console.error(`Failed to fetch ${url}: ${response.status}`);
+                        }
+                        return response;
+                    });
+                }
+            };
+            
+            return new Promise((resolve, reject) => {
+                loader.load(
+                    blobUrl,
+                    (urdfRobot) => {
+                        this.robot = urdfRobot;
+                        this.robot.rotation.x = -Math.PI / 2; // Rotate 90 degrees around X axis
+                        
+                        // Build joint map
+                        this.robot.traverse((child) => {
+                            if (child.isURDFJoint) {
+                                this.jointMap[child.name] = child;
+                            }
+                        });
+                        
+                        // Convert robot to blue wireframe after delay
+                        this.applyWireframeMaterial();
+                        
+                        // Clean up the blob URL
+                        URL.revokeObjectURL(blobUrl);
+                        
+                        this.statusCallback('✅ URDF loaded (some meshes may be missing). Connecting to WebSocket...');
+                        resolve(this.robot);
+                    },
+                    undefined,
+                    (error) => {
+                        this.statusCallback(`❌ Error loading URDF: ${error.message}`);
+                        console.error('URDF load error:', error);
+                        URL.revokeObjectURL(blobUrl);
+                        reject(error);
+                    }
+                );
+            });
+        } catch (error) {
+            this.statusCallback(`❌ Error fetching URDF: ${error.message}`);
+            console.error('URDF fetch error:', error);
+            throw error;
+        }
+    }
+    
+    applyWireframeMaterial() {
+        setTimeout(() => {
+            let meshCount = 0;
+            this.robot.traverse((child) => {
+                if (child.type === 'Mesh' || child.isMesh) {
+                    meshCount++;
+                    child.material = new THREE.MeshBasicMaterial({
+                        color: 0x0044ff,
+                        wireframe: true
+                    });
+                    child.material.needsUpdate = true;
+                }
+            });
+            console.log(`✨ Applied wireframe to ${meshCount} meshes`);
+        }, 2500);
+    }
+    
+    updateJoints(data) {
+        if (!this.robot) return;
+        
+        // Log the data structure once for debugging
+        if (!this.logged) {
+            console.log('WebSocket data structure:', data);
+            console.log('Available joints in URDF:', Object.keys(this.jointMap));
+            this.logged = true;
+        }
+        
+        // Update head pose if available
+        if (data.head_pose && this.jointMap['yaw_body']) {
+            if (data.head_pose.yaw !== undefined) {
+                this.jointMap['yaw_body'].setJointValue(data.head_pose.yaw);
+            }
+        }
+        
+        // Update antennas if available
+        if (data.antennas_position && Array.isArray(data.antennas_position)) {
+            if (this.jointMap['left_antenna'] && data.antennas_position[0] !== undefined) {
+                this.jointMap['left_antenna'].setJointValue(data.antennas_position[0]);
+            }
+            if (this.jointMap['right_antenna'] && data.antennas_position[1] !== undefined) {
+                this.jointMap['right_antenna'].setJointValue(data.antennas_position[1]);
+            }
+        }
+        
+        // Update body yaw if available
+        if (data.body_yaw !== undefined && this.jointMap['yaw_body']) {
+            this.jointMap['yaw_body'].setJointValue(data.body_yaw);
+        }
+    }
+    
+    getRobot() {
+        return this.robot;
+    }
+}

reachy_mini_app_example/src/SceneManager.js

@@ -0,0 +1,120 @@
+import * as THREE from 'three';
+import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
+
+export class SceneManager {
+    constructor(container) {
+        this.container = container;
+        this.scene = null;
+        this.camera = null;
+        this.renderer = null;
+        this.controls = null;
+        
+        this.init();
+    }
+    
+    init() {
+        // Scene setup
+        this.scene = new THREE.Scene();
+        
+        // Create retro-futuristic Arizona sunset sky
+        this.createSkyBackground();
+        
+        // Camera setup
+        this.camera = new THREE.PerspectiveCamera(
+            75,
+            window.innerWidth / window.innerHeight,
+            0.01,
+            100
+        );
+        this.camera.position.set(0.3, 0.3, 0.3);
+        this.camera.lookAt(0, 0.1, 0);
+        
+        // Renderer setup
+        this.renderer = new THREE.WebGLRenderer({ antialias: true });
+        this.renderer.setSize(window.innerWidth, window.innerHeight);
+        this.renderer.shadowMap.enabled = true;
+        this.container.appendChild(this.renderer.domElement);
+        
+        // Controls
+        this.controls = new OrbitControls(this.camera, this.renderer.domElement);
+        this.controls.target.set(0, 0.1, 0);
+        this.controls.enableDamping = true;
+        this.controls.dampingFactor = 0.05;
+        
+        // Lighting
+        this.setupLighting();
+        
+        // Grid helper
+        const gridHelper = new THREE.GridHelper(1, 10);
+        this.scene.add(gridHelper);
+        
+        // Handle window resize
+        window.addEventListener('resize', () => this.onWindowResize());
+    }
+    
+    createSkyBackground() {
+        const bgCanvas = document.createElement('canvas');
+        bgCanvas.width = 1024;
+        bgCanvas.height = 1024;
+        const bgCtx = bgCanvas.getContext('2d');
+        const bgGradient = bgCtx.createLinearGradient(0, 0, 0, bgCanvas.height);
+        bgGradient.addColorStop(0.0, '#f7a072');  // warm orange
+        bgGradient.addColorStop(0.08, '#e97a5b'); // orange-red
+        bgGradient.addColorStop(0.18, '#cf4958'); // rose-orange
+        bgGradient.addColorStop(0.32, '#8e2a6a'); // purple-rose
+        bgGradient.addColorStop(0.55, '#4b136f'); // rich purple-magenta
+        bgGradient.addColorStop(0.78, '#1a0b4b'); // deep purple
+        bgGradient.addColorStop(1.0, '#0b032d'); // very deep purple
+        bgCtx.fillStyle = bgGradient;
+        bgCtx.fillRect(0, 0, bgCanvas.width, bgCanvas.height);
+        const bgTexture = new THREE.CanvasTexture(bgCanvas);
+        if (THREE?.SRGBColorSpace) {
+            bgTexture.colorSpace = THREE.SRGBColorSpace;
+        }
+        this.scene.background = bgTexture;
+    }
+    
+    setupLighting() {
+        // Ambient light
+        const ambientLight = new THREE.AmbientLight(0xffffff, 0.4);
+        this.scene.add(ambientLight);
+        
+        // Directional light
+        const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
+        directionalLight.position.set(1, 2, 1);
+        directionalLight.castShadow = true;
+        this.scene.add(directionalLight);
+        
+        // Spotlight to illuminate the robot nicely
+        const spotLight = new THREE.SpotLight(0xffffff, 1.5);
+        spotLight.position.set(0.5, 0.5, 0.5);
+        spotLight.angle = Math.PI / 4;
+        spotLight.penumbra = 0.3;
+        spotLight.decay = 2;
+        spotLight.distance = 3;
+        spotLight.castShadow = true;
+        spotLight.target.position.set(0, 0.1, 0);
+        this.scene.add(spotLight);
+        this.scene.add(spotLight.target);
+    }
+    
+    onWindowResize() {
+        this.camera.aspect = window.innerWidth / window.innerHeight;
+        this.camera.updateProjectionMatrix();
+        this.renderer.setSize(window.innerWidth, window.innerHeight);
+    }
+    
+    add(object) {
+        this.scene.add(object);
+    }
+    
+    render() {
+        this.controls.update();
+        this.renderer.render(this.scene, this.camera);
+    }
+    
+    animate() {
+        requestAnimationFrame(() => this.animate());
+        this.render();
+    }
+}

reachy_mini_app_example/src/UIManager.js

@@ -0,0 +1,81 @@
+export class UIManager {
+    constructor(statusElement, jointsListElement) {
+        this.statusEl = statusElement;
+        this.jointsListEl = jointsListElement;
+        
+        this.jointColors = {
+            'head yaw': '#ff6384',
+            'head pitch': '#36a2eb',
+            'head roll': '#ffce56',
+            'left antenna': '#4bc0c0',
+            'right antenna': '#9966ff',
+            'body yaw': '#ff9f40'
+        };
+    }
+    
+    updateStatus(message, type = '') {
+        if (type === 'connected') {
+            this.statusEl.innerHTML = '<span class="ok"><span class="connection-led"></span> Reachy Mini</span>';
+        } else if (type === 'disconnected') {
+            this.statusEl.innerHTML = '<span class="err"><span class="connection-led"></span>Disconnected. Reconnecting...</span>';
+        } else if (type === 'error') {
+            this.statusEl.innerHTML = '<span class="err"><span class="connection-led"></span>WebSocket error</span>';
+        } else {
+            this.statusEl.innerHTML = message;
+        }
+    }
+    
+    updateJointsDisplay(data) {
+        let html = '';
+        const jointValues = {};
+        
+        // Display head pose
+        if (data.head_pose) {
+            const yaw = data.head_pose.yaw * 180 / Math.PI;
+            const pitch = data.head_pose.pitch * 180 / Math.PI;
+            const roll = data.head_pose.roll * 180 / Math.PI;
+            
+            html += this.createJointItemHTML('head yaw', yaw);
+            html += this.createJointItemHTML('head pitch', pitch);
+            html += this.createJointItemHTML('head roll', roll);
+            
+            jointValues['head yaw'] = yaw;
+            jointValues['head pitch'] = pitch;
+            jointValues['head roll'] = roll;
+        }
+        
+        // Display antennas
+        if (data.antennas_position && Array.isArray(data.antennas_position)) {
+            const leftAntenna = data.antennas_position[0] * 180 / Math.PI;
+            const rightAntenna = data.antennas_position[1] * 180 / Math.PI;
+            
+            html += this.createJointItemHTML('left antenna', leftAntenna);
+            html += this.createJointItemHTML('right antenna', rightAntenna);
+            
+            jointValues['left antenna'] = leftAntenna;
+            jointValues['right antenna'] = rightAntenna;
+        }
+        
+        // Display body yaw
+        if (data.body_yaw !== undefined) {
+            const bodyYaw = data.body_yaw * 180 / Math.PI;
+            html += this.createJointItemHTML('body yaw', bodyYaw);
+            jointValues['body yaw'] = bodyYaw;
+        }
+        
+        this.jointsListEl.innerHTML = html || 'No joint data';
+        
+        return jointValues;
+    }
+    
+    createJointItemHTML(jointName, value) {
+        const color = this.jointColors[jointName] || '#ffffff';
+        return `<div class="joint-item">
+            <span class="joint-name">
+                <span class="joint-color-dot" style="background-color: ${color}"></span>
+                ${jointName}
+            </span>
+            <span class="joint-value">${value.toFixed(2)}°</span>
+        </div>`;
+    }
+}

reachy_mini_app_example/src/WebSocketManager.js

@@ -0,0 +1,46 @@
+import { RobotStateClient } from './RobotState.js';
+
+export class WebSocketManager {
+    constructor(uiManager, robotManager, chartManager) {
+        this.uiManager = uiManager;
+        this.robotManager = robotManager;
+        this.chartManager = chartManager;
+        
+        this.WS_URL = new URLSearchParams(location.search).get("ws")
+            || "ws://127.0.0.1:8000/api/state/ws/full";
+            
+        this.robotClient = new RobotStateClient(this.WS_URL);
+    }
+    
+    connect() {
+        this.robotClient.onStateChange((event, data) => {
+            switch (event) {
+                case 'connected':
+                    this.uiManager.updateStatus('', 'connected');
+                    break;
+                case 'disconnected':
+                    this.uiManager.updateStatus('', 'disconnected');
+                    break;
+                case 'error':
+                    this.uiManager.updateStatus('', 'error');
+                    break;
+                case 'data':
+                    this.handleDataUpdate(data);
+                    break;
+            }
+        });
+        
+        this.robotClient.connect();
+    }
+    
+    handleDataUpdate(data) {
+        // Update robot joints
+        this.robotManager.updateJoints(data);
+        
+        // Update UI and get joint values
+        const jointValues = this.uiManager.updateJointsDisplay(data);
+        
+        // Update chart
+        this.chartManager.updateChart(jointValues);
+    }
+}