Initial web ui and control for robot

2026-04-30 21:35:18 +00:00
parent d64e1c24c8
commit 91f5f4d3ab
23 changed files with 2688 additions and 4 deletions
@@ -0,0 +1,40 @@
+import { useState } from 'react'
+import { CameraControls } from './components/CameraControls.jsx'
+import { RobotControls } from './components/RobotControls.jsx'
+import { VideoStream } from './components/VideoStream.jsx'
+import { useWebSocket } from './hooks/useWebSocket.js'
+
+export default function App() {
+  const [jointStates, setJointStates] = useState({})
+  const [range, setRange] = useState(null)
+
+  const send = useWebSocket((msg) => {
+    if (msg.type === 'joint_states') setJointStates(msg.positions)
+    if (msg.type === 'ultrasonic')   setRange(msg.range)
+  })
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', height: '100vh', padding: 8, gap: 8 }}>
+      {/* Header */}
+      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexShrink: 0 }}>
+        <span style={{ fontSize: 13, color: '#4ade80', letterSpacing: 2 }}>RASPBOT</span>
+        {range !== null && (
+          <span style={{ fontSize: 12, color: range < 0.3 ? '#f87171' : '#facc15' }}>
+            &#9654; {range.toFixed(2)} m
+          </span>
+        )}
+      </div>
+
+      {/* Video */}
+      <div style={{ flexShrink: 0 }}>
+        <VideoStream />
+      </div>
+
+      {/* Controls */}
+      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 16, flex: 1 }}>
+        <RobotControls send={send} />
+        <CameraControls send={send} jointStates={jointStates} />
+      </div>
+    </div>
+  )
+}