wip

app.py

@@ -100,15 +100,26 @@ def create_app():
                         url: 'http://localhost:8000',
                         connected: false,
                         controlling: false,
+                        isRefreshing: false,
+                        currentHeadPose: {{ x: 0, y: 0, z: 0, roll: 0, pitch: 0, yaw: 0 }},
+                        currentBodyYaw: 0,
+                        currentAntennas: [0, 0],
                         request: async function(endpoint, method = 'GET', body = null) {{
                             try {{
                                 const options = {{
                                     method: method,
                                     headers: {{'Content-Type': 'application/json'}},
                                 }};
-                                if (body) options.body = JSON.stringify(body);
+                                if (body) {{
+                                    options.body = JSON.stringify(body);
+                                    console.log('Request body:', JSON.stringify(body, null, 2));
+                                }}
                                 const response = await fetch(window.reachyApi.url + endpoint, options);
-                                if (!response.ok) throw new Error(`HTTP ${{response.status}}`);
+                                if (!response.ok) {{
+                                    const errorText = await response.text();
+                                    console.error('API Error Response:', errorText);
+                                    throw new Error(`HTTP ${{response.status}}: ${{errorText}}`);
+                                }}
                                 return await response.json();
                             }} catch (error) {{
                                 console.error('API Error:', error);
@@ -146,6 +157,18 @@ def create_app():
                     const antennas = state.antennas_position || [0, 0];
                     const motorMode = state.control_mode || 'unknown';
 
+                    // Initialize current state
+                    window.reachyApi.currentHeadPose = {
+                        x: headPose.x || 0,
+                        y: headPose.y || 0,
+                        z: headPose.z || 0,
+                        roll: headPose.roll || 0,
+                        pitch: headPose.pitch || 0,
+                        yaw: headPose.yaw || 0
+                    };
+                    window.reachyApi.currentBodyYaw = bodyYaw;
+                    window.reachyApi.currentAntennas = [antennas[0] || 0, antennas[1] || 0];
+
                     return [
                         statusMsg,
                         `Motor Mode: ${motorMode}`,
@@ -266,28 +289,107 @@ def create_app():
             """)
         )
 
-        # Slider change handlers
-        all_sliders = [head_x, head_y, head_z, head_roll, head_pitch, head_yaw,
-                      body_yaw, antenna_left, antenna_right]
-
-        slider_js = wrap_js("""
-        async (x, y, z, roll, pitch, yaw, bodyYaw, antLeft, antRight) => {
-            if (!window.reachyApi.connected) return;
-            window.reachyApi.controlling = true;
-            try {
-                await window.reachyApi.request('/api/move/set_target', 'POST', {
-                    target_head_pose: {x, y, z, roll, pitch, yaw},
-                    target_body_yaw: bodyYaw,
-                    target_antennas: [antLeft, antRight]
-                });
-            } catch (error) {
-                console.error('Set target error:', error);
+        # Head pose slider handlers - individual handlers like in working control panel
+        def create_pose_handler(key):
+            return wrap_js(f"""
+            async (value) => {{
+                if (!window.reachyApi.connected) return;
+                if (window.reachyApi.isRefreshing) return;
+                window.reachyApi.controlling = true;
+                window.reachyApi.currentHeadPose.{key} = value;
+                try {{
+                    await window.reachyApi.request('/api/move/set_target', 'POST', {{
+                        target_head_pose: window.reachyApi.currentHeadPose,
+                        target_body_yaw: window.reachyApi.currentBodyYaw,
+                        target_antennas: window.reachyApi.currentAntennas
+                    }});
+                }} catch (error) {{
+                    console.error('Set target error:', error);
+                }}
+            }}
+            """)
+
+        head_x.input(fn=None, inputs=[head_x], outputs=[], js=create_pose_handler('x'))
+        head_y.input(fn=None, inputs=[head_y], outputs=[], js=create_pose_handler('y'))
+        head_z.input(fn=None, inputs=[head_z], outputs=[], js=create_pose_handler('z'))
+        head_roll.input(fn=None, inputs=[head_roll], outputs=[], js=create_pose_handler('roll'))
+        head_pitch.input(fn=None, inputs=[head_pitch], outputs=[], js=create_pose_handler('pitch'))
+        head_yaw.input(fn=None, inputs=[head_yaw], outputs=[], js=create_pose_handler('yaw'))
+
+        # Body yaw handler
+        body_yaw.input(
+            fn=None,
+            inputs=[body_yaw],
+            outputs=[],
+            js=wrap_js("""
+            async (value) => {
+                if (!window.reachyApi.connected) return;
+                if (window.reachyApi.isRefreshing) return;
+                window.reachyApi.controlling = true;
+                window.reachyApi.currentBodyYaw = value;
+                try {
+                    await window.reachyApi.request('/api/move/set_target', 'POST', {
+                        target_head_pose: window.reachyApi.currentHeadPose,
+                        target_body_yaw: window.reachyApi.currentBodyYaw,
+                        target_antennas: window.reachyApi.currentAntennas
+                    });
+                } catch (error) {
+                    console.error('Set target error:', error);
+                }
             }
-        }
-        """)
+            """)
+        )
 
+        # Antenna handlers
+        antenna_left.input(
+            fn=None,
+            inputs=[antenna_left],
+            outputs=[],
+            js=wrap_js("""
+            async (value) => {
+                if (!window.reachyApi.connected) return;
+                if (window.reachyApi.isRefreshing) return;
+                window.reachyApi.controlling = true;
+                window.reachyApi.currentAntennas[0] = value;
+                try {
+                    await window.reachyApi.request('/api/move/set_target', 'POST', {
+                        target_head_pose: window.reachyApi.currentHeadPose,
+                        target_body_yaw: window.reachyApi.currentBodyYaw,
+                        target_antennas: window.reachyApi.currentAntennas
+                    });
+                } catch (error) {
+                    console.error('Set target error:', error);
+                }
+            }
+            """)
+        )
+
+        antenna_right.input(
+            fn=None,
+            inputs=[antenna_right],
+            outputs=[],
+            js=wrap_js("""
+            async (value) => {
+                if (!window.reachyApi.connected) return;
+                if (window.reachyApi.isRefreshing) return;
+                window.reachyApi.controlling = true;
+                window.reachyApi.currentAntennas[1] = value;
+                try {
+                    await window.reachyApi.request('/api/move/set_target', 'POST', {
+                        target_head_pose: window.reachyApi.currentHeadPose,
+                        target_body_yaw: window.reachyApi.currentBodyYaw,
+                        target_antennas: window.reachyApi.currentAntennas
+                    });
+                } catch (error) {
+                    console.error('Set target error:', error);
+                }
+            }
+            """)
+        )
+
+        # Release handler to stop controlling
+        all_sliders = [head_x, head_y, head_z, head_roll, head_pitch, head_yaw, body_yaw, antenna_left, antenna_right]
         for slider in all_sliders:
-            slider.input(fn=None, inputs=all_sliders, outputs=[], js=slider_js)
             slider.release(
                 fn=None,
                 inputs=[],
@@ -320,12 +422,30 @@ def create_app():
                 }
 
                 try {
+                    // Set flag to prevent input handlers from triggering during update
+                    window.reachyApi.isRefreshing = true;
+
                     const state = await window.reachyApi.request('/api/state/full?with_control_mode=true&with_head_pose=true&with_body_yaw=true&with_antenna_positions=true');
                     const headPose = state.head_pose || {};
                     const bodyYaw = state.body_yaw || 0;
                     const antennas = state.antennas_position || [0, 0];
                     const motorMode = state.control_mode || 'unknown';
 
+                    // Update current state
+                    window.reachyApi.currentHeadPose = {
+                        x: headPose.x || 0,
+                        y: headPose.y || 0,
+                        z: headPose.z || 0,
+                        roll: headPose.roll || 0,
+                        pitch: headPose.pitch || 0,
+                        yaw: headPose.yaw || 0
+                    };
+                    window.reachyApi.currentBodyYaw = bodyYaw;
+                    window.reachyApi.currentAntennas = [antennas[0] || 0, antennas[1] || 0];
+
+                    // Clear flag after a short delay
+                    setTimeout(() => { window.reachyApi.isRefreshing = false; }, 100);
+
                     return [
                         'Connected',
                         `Motor Mode: ${motorMode}`,
@@ -341,6 +461,7 @@ def create_app():
                     ];
                 } catch (error) {
                     window.reachyApi.connected = false;
+                    window.reachyApi.isRefreshing = false;
                     return ['Connection lost', 'Disconnected', 0, 0, 0, 0, 0, 0, 0, 0, 0];
                 }
             }