Add contol node for the LEDs

webui/backend/main.py

@@ -73,6 +73,10 @@ async def websocket_endpoint(ws: WebSocket):
                 node.publish_cmd_vel(data.get('linear_x', 0.0), data.get('angular_z', 0.0))
             elif msg_type == 'joint_command':
                 node.publish_joint_command(data.get('pan', 0.0), data.get('tilt', 0.0))
+            elif msg_type == 'led_color':
+                node.publish_led_color(data.get('r', 0.0), data.get('g', 0.0), data.get('b', 0.0), data.get('a', 1.0))
+            elif msg_type == 'led_effect':
+                node.publish_led_effect(data.get('effect', 'off'))
     except WebSocketDisconnect:
         pass
     except Exception as e:

webui/backend/ros_node.py

@@ -4,6 +4,7 @@ import rclpy
 from geometry_msgs.msg import Twist
 from rclpy.node import Node
 from sensor_msgs.msg import JointState, Range
+from std_msgs.msg import ColorRGBA, String
 
 
 class RobotBridgeNode(Node):
@@ -12,6 +13,8 @@ class RobotBridgeNode(Node):
 
         self._cmd_vel_pub = self.create_publisher(Twist, '/cmd_vel', 10)
         self._joint_cmd_pub = self.create_publisher(JointState, '/joint_command', 10)
+        self._led_color_pub = self.create_publisher(ColorRGBA, '/led/color', 10)
+        self._led_effect_pub = self.create_publisher(String, '/led/effect', 10)
 
         self.create_subscription(JointState, '/joint_states', self._on_joint_states, 10)
         self.create_subscription(Range, '/ultrasonic/range', self._on_ultrasonic, 10)
@@ -37,6 +40,19 @@ class RobotBridgeNode(Node):
         msg.position = [float(pan), float(tilt)]
         self._joint_cmd_pub.publish(msg)
 
+    def publish_led_color(self, r: float, g: float, b: float, a: float) -> None:
+        msg = ColorRGBA()
+        msg.r = float(r)
+        msg.g = float(g)
+        msg.b = float(b)
+        msg.a = float(a)
+        self._led_color_pub.publish(msg)
+
+    def publish_led_effect(self, effect: str) -> None:
+        msg = String()
+        msg.data = effect
+        self._led_effect_pub.publish(msg)
+
     def _on_joint_states(self, msg: JointState) -> None:
         data = {'type': 'joint_states', 'positions': dict(zip(msg.name, msg.position))}
         for cb in self.on_joint_states_callbacks:

webui/frontend/src/App.jsx

@@ -1,5 +1,6 @@
 import { useState } from 'react'
 import { CameraControls } from './components/CameraControls.jsx'
+import { LedControls } from './components/LedControls.jsx'
 import { RobotControls } from './components/RobotControls.jsx'
 import { VideoStream } from './components/VideoStream.jsx'
 import { useWebSocket } from './hooks/useWebSocket.js'
@@ -34,6 +35,7 @@ export default function App() {
       <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 16, flex: 1 }}>
         <RobotControls send={send} />
         <CameraControls send={send} jointStates={jointStates} />
+        <LedControls send={send} />
       </div>
     </div>
   )

webui/frontend/src/components/LedControls.jsx

@@ -0,0 +1,93 @@
+import { useState } from 'react'
+
+const COLOURS = [
+  { label: 'Red',    r: 1,   g: 0,   b: 0   },
+  { label: 'Green',  r: 0,   g: 1,   b: 0   },
+  { label: 'Blue',   r: 0,   g: 0,   b: 1   },
+  { label: 'Yellow', r: 1,   g: 1,   b: 0   },
+  { label: 'Purple', r: 1,   g: 0,   b: 1   },
+  { label: 'Cyan',   r: 0,   g: 1,   b: 1   },
+  { label: 'White',  r: 1,   g: 1,   b: 1   },
+]
+
+const EFFECTS = ['river', 'breathing', 'gradient', 'random_running', 'starlight']
+
+const swatch = (r, g, b) =>
+  `rgb(${Math.round(r * 255)},${Math.round(g * 255)},${Math.round(b * 255)})`
+
+export function LedControls({ send }) {
+  const [active, setActive] = useState(null) // null=off, 'colour:N', 'effect:name'
+
+  function sendColour(idx) {
+    const c = COLOURS[idx]
+    send({ type: 'led_color', r: c.r, g: c.g, b: c.b, a: 1.0 })
+    setActive(`colour:${idx}`)
+  }
+
+  function sendEffect(effect) {
+    send({ type: 'led_effect', effect })
+    setActive(`effect:${effect}`)
+  }
+
+  function sendOff() {
+    send({ type: 'led_color', r: 0, g: 0, b: 0, a: 0.0 })
+    setActive(null)
+  }
+
+  const sectionLabel = {
+    fontSize: 11, color: '#666', marginBottom: 4, textTransform: 'uppercase', letterSpacing: 1,
+  }
+
+  const btn = (isActive) => ({
+    background: isActive ? '#4ade80' : '#2a2a2a',
+    color: isActive ? '#000' : '#aaa',
+    border: '1px solid ' + (isActive ? '#4ade80' : '#444'),
+    padding: '3px 7px', borderRadius: 4, cursor: 'pointer', fontSize: 11,
+  })
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 10, minWidth: 180 }}>
+      <div style={{ fontSize: 12, color: '#555', borderBottom: '1px solid #2a2a2a', paddingBottom: 4 }}>
+        LEDs
+      </div>
+
+      {/* Solid colours */}
+      <div>
+        <div style={sectionLabel}>Colour</div>
+        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 5 }}>
+          {COLOURS.map((c, i) => (
+            <button
+              key={c.label}
+              title={c.label}
+              onClick={() => sendColour(i)}
+              style={{
+                width: 22, height: 22, borderRadius: 4, cursor: 'pointer', border: 'none',
+                background: swatch(c.r, c.g, c.b),
+                outline: active === `colour:${i}` ? '2px solid #4ade80' : '2px solid transparent',
+                outlineOffset: 2,
+              }}
+            />
+          ))}
+          <button onClick={sendOff} title="Off" style={{
+            width: 22, height: 22, borderRadius: 4, cursor: 'pointer',
+            background: '#111', border: '1px solid #444',
+            outline: active === null ? '2px solid #4ade80' : '2px solid transparent',
+            outlineOffset: 2, fontSize: 10, color: '#666',
+          }}>✕</button>
+        </div>
+      </div>
+
+      {/* Effects */}
+      <div>
+        <div style={sectionLabel}>Effect</div>
+        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 4 }}>
+          {EFFECTS.map((e) => (
+            <button key={e} onClick={() => sendEffect(e)} style={btn(active === `effect:${e}`)}>
+              {e.replace('_', ' ')}
+            </button>
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}