feat(webui): fleet management dashboard — Issue #139
- useFleet.js: multi-robot ROSLIB.Ros multiplexer with localStorage persistence; per-robot balance_state/control_mode/odom/diagnostics subscriptions; sendGoal, sendPatrol, scanSubnet helpers - FleetPanel.jsx: fleet sub-views (Robots/Map/Missions/Video/Alerts) plus RobotDetail overlay reusing ImuPanel/BatteryPanel/MotorPanel/ ControlMode/SystemHealth via subscribeRobot adapter pattern - App.jsx: adds FLEET tab group pointing to FleetPanel Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
parent
9281f3bc44
commit
b09f17b787
@ -1,11 +1,14 @@
|
|||||||
/**
|
/**
|
||||||
* App.jsx — Saltybot Social + Telemetry Dashboard root component.
|
* App.jsx — Saltybot Social + Telemetry + Fleet Dashboard root component.
|
||||||
*
|
*
|
||||||
* Social tabs (issue #107):
|
* Social tabs (issue #107):
|
||||||
* Status | Faces | Conversation | Personality | Navigation
|
* Status | Faces | Conversation | Personality | Navigation
|
||||||
*
|
*
|
||||||
* Telemetry tabs (issue #126):
|
* Telemetry tabs (issue #126):
|
||||||
* IMU | Battery | Motors | Map | Control | Health
|
* IMU | Battery | Motors | Map | Control | Health
|
||||||
|
*
|
||||||
|
* Fleet tabs (issue #139):
|
||||||
|
* Fleet (self-contained via useFleet)
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import { useState, useCallback } from 'react';
|
import { useState, useCallback } from 'react';
|
||||||
@ -26,6 +29,9 @@ import { MapViewer } from './components/MapViewer.jsx';
|
|||||||
import { ControlMode } from './components/ControlMode.jsx';
|
import { ControlMode } from './components/ControlMode.jsx';
|
||||||
import { SystemHealth } from './components/SystemHealth.jsx';
|
import { SystemHealth } from './components/SystemHealth.jsx';
|
||||||
|
|
||||||
|
// Fleet panel (issue #139)
|
||||||
|
import { FleetPanel } from './components/FleetPanel.jsx';
|
||||||
|
|
||||||
const TAB_GROUPS = [
|
const TAB_GROUPS = [
|
||||||
{
|
{
|
||||||
label: 'SOCIAL',
|
label: 'SOCIAL',
|
||||||
@ -50,6 +56,13 @@ const TAB_GROUPS = [
|
|||||||
{ id: 'health', label: 'Health', },
|
{ id: 'health', label: 'Health', },
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
label: 'FLEET',
|
||||||
|
color: 'text-green-600',
|
||||||
|
tabs: [
|
||||||
|
{ id: 'fleet', label: 'Fleet' },
|
||||||
|
],
|
||||||
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
const DEFAULT_WS_URL = 'ws://localhost:9090';
|
const DEFAULT_WS_URL = 'ws://localhost:9090';
|
||||||
@ -172,6 +185,8 @@ export default function App() {
|
|||||||
{activeTab === 'map' && <MapViewer subscribe={subscribe} />}
|
{activeTab === 'map' && <MapViewer subscribe={subscribe} />}
|
||||||
{activeTab === 'control' && <ControlMode subscribe={subscribe} />}
|
{activeTab === 'control' && <ControlMode subscribe={subscribe} />}
|
||||||
{activeTab === 'health' && <SystemHealth subscribe={subscribe} />}
|
{activeTab === 'health' && <SystemHealth subscribe={subscribe} />}
|
||||||
|
|
||||||
|
{activeTab === 'fleet' && <FleetPanel />}
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
{/* ── Footer ── */}
|
{/* ── Footer ── */}
|
||||||
|
|||||||
803
ui/social-bot/src/components/FleetPanel.jsx
Normal file
803
ui/social-bot/src/components/FleetPanel.jsx
Normal file
@ -0,0 +1,803 @@
|
|||||||
|
/**
|
||||||
|
* FleetPanel.jsx — Multi-robot fleet management dashboard.
|
||||||
|
*
|
||||||
|
* Sub-views (internal tab nav):
|
||||||
|
* Robots | Map | Missions | Video | Alerts | Detail
|
||||||
|
*
|
||||||
|
* Uses useFleet() for multi-robot WebSocket multiplexing.
|
||||||
|
* Robot detail re-uses single-robot panel components via subscribeRobot adapter.
|
||||||
|
*
|
||||||
|
* Video streaming:
|
||||||
|
* http://<host>:<videoPort>/stream?topic=<videoTopic>&type=ros_compressed
|
||||||
|
* (web_video_server / mjpeg_server)
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { useState, useRef, useCallback, useEffect } from 'react';
|
||||||
|
import { useFleet } from '../hooks/useFleet.js';
|
||||||
|
|
||||||
|
// Reusable single-robot detail panels (re-used via subscribeRobot adapter)
|
||||||
|
import { ImuPanel } from './ImuPanel.jsx';
|
||||||
|
import { BatteryPanel } from './BatteryPanel.jsx';
|
||||||
|
import { MotorPanel } from './MotorPanel.jsx';
|
||||||
|
import { ControlMode } from './ControlMode.jsx';
|
||||||
|
import { SystemHealth } from './SystemHealth.jsx';
|
||||||
|
|
||||||
|
// ── Constants ───────────────────────────────────────────────────────────────
|
||||||
|
|
||||||
|
const VARIANT_COLORS = {
|
||||||
|
balance: 'text-cyan-400 border-cyan-800',
|
||||||
|
rover: 'text-green-400 border-green-800',
|
||||||
|
tank: 'text-amber-400 border-amber-800',
|
||||||
|
social: 'text-purple-400 border-purple-800',
|
||||||
|
};
|
||||||
|
|
||||||
|
const FLEET_VIEWS = [
|
||||||
|
{ id: 'robots', label: 'Robots' },
|
||||||
|
{ id: 'map', label: 'Fleet Map'},
|
||||||
|
{ id: 'missions', label: 'Missions' },
|
||||||
|
{ id: 'video', label: 'Video' },
|
||||||
|
{ id: 'alerts', label: 'Alerts' },
|
||||||
|
];
|
||||||
|
|
||||||
|
// ── Add-Robot modal ──────────────────────────────────────────────────────────
|
||||||
|
|
||||||
|
function AddRobotModal({ onAdd, onClose }) {
|
||||||
|
const [form, setForm] = useState({
|
||||||
|
name: '', variant: 'balance', host: '', port: '9090',
|
||||||
|
videoPort: '8080', videoTopic: '/camera/panoramic/compressed',
|
||||||
|
});
|
||||||
|
const set = (k, v) => setForm(f => ({ ...f, [k]: v }));
|
||||||
|
|
||||||
|
const handleSubmit = (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
if (!form.host.trim()) return;
|
||||||
|
onAdd({
|
||||||
|
...form,
|
||||||
|
port: Number(form.port),
|
||||||
|
videoPort: Number(form.videoPort),
|
||||||
|
});
|
||||||
|
onClose();
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="fixed inset-0 bg-black bg-opacity-70 flex items-center justify-center z-50 p-4">
|
||||||
|
<div className="bg-gray-950 border border-cyan-800 rounded-lg p-5 w-full max-w-md">
|
||||||
|
<div className="flex items-center justify-between mb-4">
|
||||||
|
<span className="text-cyan-400 font-bold tracking-widest text-sm">ADD ROBOT</span>
|
||||||
|
<button onClick={onClose} className="text-gray-600 hover:text-gray-300">✕</button>
|
||||||
|
</div>
|
||||||
|
<form onSubmit={handleSubmit} className="space-y-3">
|
||||||
|
<div className="grid grid-cols-2 gap-3">
|
||||||
|
<label className="col-span-2 space-y-1">
|
||||||
|
<span className="text-gray-500 text-xs">Display Name</span>
|
||||||
|
<input className="w-full bg-gray-900 border border-gray-700 rounded px-2 py-1.5 text-sm text-gray-200 focus:outline-none focus:border-cyan-700"
|
||||||
|
value={form.name} onChange={e => set('name', e.target.value)} placeholder="SaltyBot #2" />
|
||||||
|
</label>
|
||||||
|
<label className="space-y-1">
|
||||||
|
<span className="text-gray-500 text-xs">Variant</span>
|
||||||
|
<select className="w-full bg-gray-900 border border-gray-700 rounded px-2 py-1.5 text-sm text-gray-200 focus:outline-none focus:border-cyan-700"
|
||||||
|
value={form.variant} onChange={e => set('variant', e.target.value)}>
|
||||||
|
<option value="balance">Balance</option>
|
||||||
|
<option value="rover">Rover</option>
|
||||||
|
<option value="tank">Tank</option>
|
||||||
|
<option value="social">Social</option>
|
||||||
|
</select>
|
||||||
|
</label>
|
||||||
|
<label className="space-y-1">
|
||||||
|
<span className="text-gray-500 text-xs">Rosbridge Host</span>
|
||||||
|
<input className="w-full bg-gray-900 border border-gray-700 rounded px-2 py-1.5 text-sm text-gray-200 focus:outline-none focus:border-cyan-700"
|
||||||
|
value={form.host} onChange={e => set('host', e.target.value)} placeholder="192.168.1.101" required />
|
||||||
|
</label>
|
||||||
|
<label className="space-y-1">
|
||||||
|
<span className="text-gray-500 text-xs">Rosbridge Port</span>
|
||||||
|
<input type="number" className="w-full bg-gray-900 border border-gray-700 rounded px-2 py-1.5 text-sm text-gray-200 focus:outline-none focus:border-cyan-700"
|
||||||
|
value={form.port} onChange={e => set('port', e.target.value)} />
|
||||||
|
</label>
|
||||||
|
<label className="space-y-1">
|
||||||
|
<span className="text-gray-500 text-xs">Video Port</span>
|
||||||
|
<input type="number" className="w-full bg-gray-900 border border-gray-700 rounded px-2 py-1.5 text-sm text-gray-200 focus:outline-none focus:border-cyan-700"
|
||||||
|
value={form.videoPort} onChange={e => set('videoPort', e.target.value)} />
|
||||||
|
</label>
|
||||||
|
<label className="space-y-1">
|
||||||
|
<span className="text-gray-500 text-xs">Video Topic</span>
|
||||||
|
<input className="w-full bg-gray-900 border border-gray-700 rounded px-2 py-1.5 text-sm text-gray-200 focus:outline-none focus:border-cyan-700"
|
||||||
|
value={form.videoTopic} onChange={e => set('videoTopic', e.target.value)} />
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div className="flex gap-2 justify-end pt-2">
|
||||||
|
<button type="button" onClick={onClose}
|
||||||
|
className="px-3 py-1.5 rounded border border-gray-700 text-gray-400 hover:text-gray-200 text-sm">Cancel</button>
|
||||||
|
<button type="submit"
|
||||||
|
className="px-3 py-1.5 rounded bg-cyan-950 border border-cyan-700 text-cyan-300 hover:bg-cyan-900 text-sm font-bold">Add Robot</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── Sub-view: Robots List ────────────────────────────────────────────────────
|
||||||
|
|
||||||
|
function SocBar({ soc }) {
|
||||||
|
const color = soc < 20 ? '#ef4444' : soc < 40 ? '#f59e0b' : '#22c55e';
|
||||||
|
return (
|
||||||
|
<div className="flex items-center gap-1.5 min-w-[60px]">
|
||||||
|
<div className="flex-1 h-1.5 bg-gray-800 rounded overflow-hidden">
|
||||||
|
<div className="h-full rounded" style={{ width: `${soc}%`, background: color }} />
|
||||||
|
</div>
|
||||||
|
<span className="text-xs w-7 text-right" style={{ color }}>{soc}%</span>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function RobotCard({ robot, connection, data, onSelect, onRemove }) {
|
||||||
|
const conn = connection ?? { connected: false, error: null };
|
||||||
|
const d = data ?? {};
|
||||||
|
const varColor = VARIANT_COLORS[robot.variant] ?? 'text-gray-400 border-gray-700';
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className="bg-gray-950 border border-gray-800 rounded-lg p-3 flex flex-col gap-2 cursor-pointer hover:border-cyan-800 transition-colors"
|
||||||
|
onClick={() => onSelect(robot.id)}
|
||||||
|
>
|
||||||
|
{/* Header row */}
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<div className={`w-2 h-2 rounded-full shrink-0 ${conn.connected ? 'bg-green-400' : conn.error ? 'bg-red-500 animate-pulse' : 'bg-gray-700'}`} />
|
||||||
|
<span className="font-bold text-sm text-gray-200 flex-1 truncate">{robot.name || robot.id}</span>
|
||||||
|
<span className={`text-xs border rounded px-1.5 py-0.5 font-mono uppercase ${varColor}`}>{robot.variant}</span>
|
||||||
|
<button
|
||||||
|
className="text-gray-700 hover:text-red-500 ml-1 text-xs"
|
||||||
|
title="Remove robot"
|
||||||
|
onClick={e => { e.stopPropagation(); onRemove(robot.id); }}
|
||||||
|
>✕</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Address */}
|
||||||
|
<div className="text-xs text-gray-600 font-mono">{robot.host}:{robot.port}</div>
|
||||||
|
|
||||||
|
{/* Telemetry row */}
|
||||||
|
{conn.connected ? (
|
||||||
|
<div className="grid grid-cols-2 gap-x-3 gap-y-1 text-xs">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<span className="text-gray-600">Battery</span>
|
||||||
|
<SocBar soc={Math.round(d.battery?.soc ?? 0)} />
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<span className="text-gray-600">State</span>
|
||||||
|
<span className={`font-bold ${
|
||||||
|
d.state === 'ARMED' ? 'text-green-400' :
|
||||||
|
d.state === 'TILT FAULT' ? 'text-red-400 animate-pulse' :
|
||||||
|
d.state ? 'text-amber-400' : 'text-gray-600'
|
||||||
|
}`}>{d.state ?? '—'}</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center justify-between col-span-2">
|
||||||
|
<span className="text-gray-600">Pipeline</span>
|
||||||
|
<span className={`font-bold ${
|
||||||
|
d.pipeline === 'speaking' ? 'text-cyan-400' :
|
||||||
|
d.pipeline === 'thinking' ? 'text-purple-400' :
|
||||||
|
d.pipeline === 'listening' ? 'text-green-400' :
|
||||||
|
'text-gray-600'
|
||||||
|
}`}>{d.pipeline ?? '—'}</span>
|
||||||
|
</div>
|
||||||
|
{d.pose && (
|
||||||
|
<div className="col-span-2 text-gray-600">
|
||||||
|
pos <span className="text-cyan-600">{d.pose.x.toFixed(1)},{d.pose.y.toFixed(1)}</span>
|
||||||
|
{' '}hdg <span className="text-cyan-600">{(d.pose.yaw * 180 / Math.PI).toFixed(0)}°</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="text-xs text-gray-700">
|
||||||
|
{conn.error ? <span className="text-red-700">⚠ {conn.error}</span> : 'Connecting…'}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{d.alerts?.length > 0 && (
|
||||||
|
<div className="flex flex-wrap gap-1">
|
||||||
|
{d.alerts.slice(0, 3).map((a, i) => (
|
||||||
|
<span key={i} className={`text-xs px-1 rounded border ${
|
||||||
|
a.level >= 2 ? 'bg-red-950 border-red-800 text-red-400' : 'bg-amber-950 border-amber-800 text-amber-400'
|
||||||
|
}`}>{a.name}</span>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function RobotsView({ robots, connections, robotData, onSelect, onRemove, onAdd, onScan, scanning }) {
|
||||||
|
return (
|
||||||
|
<div className="space-y-3">
|
||||||
|
<div className="flex items-center gap-2 flex-wrap">
|
||||||
|
<div className="text-cyan-700 text-xs font-bold tracking-widest">
|
||||||
|
FLEET — {robots.length} ROBOT{robots.length !== 1 ? 'S' : ''}
|
||||||
|
</div>
|
||||||
|
<div className="ml-auto flex gap-2">
|
||||||
|
<button
|
||||||
|
onClick={onScan}
|
||||||
|
disabled={scanning}
|
||||||
|
className="px-3 py-1 rounded border border-gray-700 text-gray-400 hover:border-cyan-700 hover:text-cyan-300 text-xs disabled:opacity-50"
|
||||||
|
>{scanning ? 'Scanning…' : 'Scan LAN'}</button>
|
||||||
|
<button
|
||||||
|
onClick={onAdd}
|
||||||
|
className="px-3 py-1 rounded bg-cyan-950 border border-cyan-700 text-cyan-300 hover:bg-cyan-900 text-xs font-bold"
|
||||||
|
>+ Add Robot</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{robots.length === 0 ? (
|
||||||
|
<div className="text-center text-gray-600 text-sm py-10 border border-dashed border-gray-800 rounded-lg">
|
||||||
|
No robots configured. Add one or scan the LAN.
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
|
||||||
|
{robots.map(r => (
|
||||||
|
<RobotCard
|
||||||
|
key={r.id}
|
||||||
|
robot={r}
|
||||||
|
connection={connections[r.id]}
|
||||||
|
data={robotData[r.id]}
|
||||||
|
onSelect={onSelect}
|
||||||
|
onRemove={onRemove}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── Sub-view: Fleet Map ──────────────────────────────────────────────────────
|
||||||
|
|
||||||
|
const ROBOT_COLORS = ['#06b6d4','#f97316','#22c55e','#a855f7','#f59e0b','#ec4899','#84cc16','#38bdf8'];
|
||||||
|
|
||||||
|
function FleetMapView({ robots, robotData, onSelect }) {
|
||||||
|
const canvasRef = useRef(null);
|
||||||
|
const [zoom, setZoom] = useState(30); // px per metre
|
||||||
|
const [pan, setPan] = useState({ x: 0, y: 0 });
|
||||||
|
const dragging = useRef(null);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const canvas = canvasRef.current;
|
||||||
|
if (!canvas) return;
|
||||||
|
const ctx = canvas.getContext('2d');
|
||||||
|
const W = canvas.width, H = canvas.height;
|
||||||
|
|
||||||
|
ctx.clearRect(0, 0, W, H);
|
||||||
|
ctx.fillStyle = '#050510';
|
||||||
|
ctx.fillRect(0, 0, W, H);
|
||||||
|
|
||||||
|
// Grid
|
||||||
|
ctx.strokeStyle = '#0d1b2a';
|
||||||
|
ctx.lineWidth = 1;
|
||||||
|
const gridSpacing = zoom;
|
||||||
|
const offX = (W / 2 + pan.x) % gridSpacing;
|
||||||
|
const offY = (H / 2 + pan.y) % gridSpacing;
|
||||||
|
for (let x = offX; x < W; x += gridSpacing) {
|
||||||
|
ctx.beginPath(); ctx.moveTo(x, 0); ctx.lineTo(x, H); ctx.stroke();
|
||||||
|
}
|
||||||
|
for (let y = offY; y < H; y += gridSpacing) {
|
||||||
|
ctx.beginPath(); ctx.moveTo(0, y); ctx.lineTo(W, y); ctx.stroke();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Origin cross
|
||||||
|
const cx = W / 2 + pan.x;
|
||||||
|
const cy = H / 2 + pan.y;
|
||||||
|
ctx.strokeStyle = '#1e3a4a';
|
||||||
|
ctx.lineWidth = 1;
|
||||||
|
ctx.beginPath(); ctx.moveTo(cx - 10, cy); ctx.lineTo(cx + 10, cy); ctx.stroke();
|
||||||
|
ctx.beginPath(); ctx.moveTo(cx, cy - 10); ctx.lineTo(cx, cy + 10); ctx.stroke();
|
||||||
|
|
||||||
|
// Draw each robot that has pose data
|
||||||
|
robots.forEach((robot, i) => {
|
||||||
|
const d = robotData[robot.id];
|
||||||
|
if (!d?.pose) return;
|
||||||
|
const color = ROBOT_COLORS[i % ROBOT_COLORS.length];
|
||||||
|
|
||||||
|
const rx = cx + d.pose.x * zoom;
|
||||||
|
const ry = cy - d.pose.y * zoom;
|
||||||
|
const arrowLen = Math.max(14, zoom * 0.5);
|
||||||
|
|
||||||
|
// Heading line
|
||||||
|
ctx.strokeStyle = color;
|
||||||
|
ctx.lineWidth = 2;
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.moveTo(rx, ry);
|
||||||
|
ctx.lineTo(rx + Math.cos(d.pose.yaw) * arrowLen, ry - Math.sin(d.pose.yaw) * arrowLen);
|
||||||
|
ctx.stroke();
|
||||||
|
|
||||||
|
// Body circle
|
||||||
|
ctx.fillStyle = color;
|
||||||
|
ctx.shadowBlur = 10;
|
||||||
|
ctx.shadowColor = color;
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.arc(rx, ry, 7, 0, Math.PI * 2);
|
||||||
|
ctx.fill();
|
||||||
|
ctx.shadowBlur = 0;
|
||||||
|
|
||||||
|
// Label
|
||||||
|
ctx.fillStyle = color;
|
||||||
|
ctx.font = '9px monospace';
|
||||||
|
ctx.textAlign = 'center';
|
||||||
|
ctx.fillText(robot.name || robot.id, rx, ry - 12);
|
||||||
|
});
|
||||||
|
}, [robots, robotData, zoom, pan]);
|
||||||
|
|
||||||
|
const onMouseDown = e => { dragging.current = { x: e.clientX - pan.x, y: e.clientY - pan.y }; };
|
||||||
|
const onMouseMove = e => {
|
||||||
|
if (!dragging.current) return;
|
||||||
|
setPan({ x: e.clientX - dragging.current.x, y: e.clientY - dragging.current.y });
|
||||||
|
};
|
||||||
|
const onMouseUp = () => { dragging.current = null; };
|
||||||
|
|
||||||
|
const botsWithPose = robots.filter(r => robotData[r.id]?.pose);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-3">
|
||||||
|
<div className="flex items-center gap-2 flex-wrap">
|
||||||
|
<div className="text-cyan-700 text-xs font-bold tracking-widest">FLEET MAP</div>
|
||||||
|
<div className="flex items-center gap-1 ml-auto">
|
||||||
|
<button onClick={() => setZoom(z => Math.min(z * 1.5, 200))}
|
||||||
|
className="px-2 py-1 rounded border border-gray-700 text-gray-300 hover:border-cyan-700 text-sm">+</button>
|
||||||
|
<span className="text-gray-500 text-xs w-16 text-center">{zoom.toFixed(0)}px/m</span>
|
||||||
|
<button onClick={() => setZoom(z => Math.max(z / 1.5, 5))}
|
||||||
|
className="px-2 py-1 rounded border border-gray-700 text-gray-300 hover:border-cyan-700 text-sm">−</button>
|
||||||
|
<button onClick={() => { setZoom(30); setPan({ x: 0, y: 0 }); }}
|
||||||
|
className="px-2 py-1 rounded border border-gray-700 text-gray-400 hover:text-gray-200 text-xs ml-2">Reset</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="bg-gray-950 rounded-lg border border-cyan-950 overflow-hidden">
|
||||||
|
<canvas
|
||||||
|
ref={canvasRef} width={600} height={400}
|
||||||
|
className="w-full cursor-grab active:cursor-grabbing block"
|
||||||
|
onMouseDown={onMouseDown} onMouseMove={onMouseMove}
|
||||||
|
onMouseUp={onMouseUp} onMouseLeave={onMouseUp}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
{/* Legend */}
|
||||||
|
<div className="flex flex-wrap gap-3 text-xs">
|
||||||
|
{robots.map((r, i) => (
|
||||||
|
<button key={r.id}
|
||||||
|
className="flex items-center gap-1.5 hover:opacity-80"
|
||||||
|
onClick={() => onSelect(r.id)}
|
||||||
|
>
|
||||||
|
<div className="w-2.5 h-2.5 rounded-full" style={{ background: ROBOT_COLORS[i % ROBOT_COLORS.length] }} />
|
||||||
|
<span className="text-gray-500">{r.name || r.id}</span>
|
||||||
|
{botsWithPose.find(b => b.id === r.id) ? null : (
|
||||||
|
<span className="text-gray-700">(no pose)</span>
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── Sub-view: Mission Dispatch ───────────────────────────────────────────────
|
||||||
|
|
||||||
|
function MissionsView({ robots, connections, sendGoal, sendPatrol }) {
|
||||||
|
const [targetId, setTargetId] = useState('');
|
||||||
|
const [mode, setMode] = useState('goal'); // 'goal' | 'patrol'
|
||||||
|
const [goalX, setGoalX] = useState('');
|
||||||
|
const [goalY, setGoalY] = useState('');
|
||||||
|
const [goalYaw, setGoalYaw] = useState('0');
|
||||||
|
const [waypoints, setWaypoints] = useState('');
|
||||||
|
const [sent, setSent] = useState(null);
|
||||||
|
|
||||||
|
const connected = robots.filter(r => connections[r.id]?.connected);
|
||||||
|
|
||||||
|
const handleSend = () => {
|
||||||
|
if (!targetId) return;
|
||||||
|
if (mode === 'goal') {
|
||||||
|
sendGoal(targetId, parseFloat(goalX), parseFloat(goalY), parseFloat(goalYaw) * Math.PI / 180);
|
||||||
|
setSent(`Goal → (${goalX}, ${goalY}) sent to ${targetId}`);
|
||||||
|
} else {
|
||||||
|
try {
|
||||||
|
const pts = waypoints.trim().split('\n').map(line => {
|
||||||
|
const [x, y, yaw = 0] = line.split(',').map(Number);
|
||||||
|
return { x, y, yaw: yaw * Math.PI / 180 };
|
||||||
|
});
|
||||||
|
sendPatrol(targetId, pts);
|
||||||
|
setSent(`Patrol (${pts.length} wpts) sent to ${targetId}`);
|
||||||
|
} catch {
|
||||||
|
setSent('Error parsing waypoints');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
setTimeout(() => setSent(null), 4000);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-4 max-w-lg">
|
||||||
|
<div className="text-cyan-700 text-xs font-bold tracking-widest">MISSION DISPATCH</div>
|
||||||
|
|
||||||
|
{connected.length === 0 && (
|
||||||
|
<div className="text-amber-700 text-xs border border-amber-900 rounded p-3">
|
||||||
|
No robots connected. Connect at least one robot to dispatch missions.
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className="space-y-3">
|
||||||
|
<label className="block space-y-1">
|
||||||
|
<span className="text-gray-500 text-xs">Target Robot</span>
|
||||||
|
<select
|
||||||
|
className="w-full bg-gray-900 border border-gray-700 rounded px-2 py-1.5 text-sm text-gray-200 focus:outline-none focus:border-cyan-700"
|
||||||
|
value={targetId} onChange={e => setTargetId(e.target.value)}
|
||||||
|
>
|
||||||
|
<option value="">— Select robot —</option>
|
||||||
|
{connected.map(r => (
|
||||||
|
<option key={r.id} value={r.id}>{r.name || r.id}</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<div className="flex gap-2">
|
||||||
|
{['goal', 'patrol'].map(m => (
|
||||||
|
<button key={m}
|
||||||
|
onClick={() => setMode(m)}
|
||||||
|
className={`px-3 py-1.5 rounded border text-xs font-bold uppercase tracking-wider ${
|
||||||
|
mode === m
|
||||||
|
? 'bg-cyan-950 border-cyan-700 text-cyan-300'
|
||||||
|
: 'border-gray-700 text-gray-500 hover:text-gray-300'
|
||||||
|
}`}
|
||||||
|
>{m === 'goal' ? 'Single Goal' : 'Patrol Route'}</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{mode === 'goal' ? (
|
||||||
|
<div className="grid grid-cols-3 gap-2">
|
||||||
|
{[['X (m)', goalX, setGoalX], ['Y (m)', goalY, setGoalY], ['Yaw (°)', goalYaw, setGoalYaw]].map(([lbl, val, setter]) => (
|
||||||
|
<label key={lbl} className="space-y-1">
|
||||||
|
<span className="text-gray-500 text-xs">{lbl}</span>
|
||||||
|
<input type="number" step="0.1"
|
||||||
|
className="w-full bg-gray-900 border border-gray-700 rounded px-2 py-1.5 text-sm text-gray-200 focus:outline-none focus:border-cyan-700"
|
||||||
|
value={val} onChange={e => setter(e.target.value)} placeholder="0" />
|
||||||
|
</label>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<label className="block space-y-1">
|
||||||
|
<span className="text-gray-500 text-xs">Waypoints (x,y,yaw° per line)</span>
|
||||||
|
<textarea
|
||||||
|
rows={5}
|
||||||
|
placeholder="0,0,0 2,0,90 2,2,180 0,2,270"
|
||||||
|
className="w-full bg-gray-900 border border-gray-700 rounded px-2 py-1.5 text-sm text-gray-200 focus:outline-none focus:border-cyan-700 font-mono"
|
||||||
|
value={waypoints} onChange={e => setWaypoints(e.target.value)}
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<button
|
||||||
|
onClick={handleSend}
|
||||||
|
disabled={!targetId}
|
||||||
|
className="w-full py-2 rounded bg-cyan-950 border border-cyan-700 text-cyan-300 hover:bg-cyan-900 font-bold text-sm tracking-wider disabled:opacity-40 disabled:cursor-not-allowed"
|
||||||
|
>SEND MISSION</button>
|
||||||
|
|
||||||
|
{sent && (
|
||||||
|
<div className="text-green-400 text-xs border border-green-900 rounded p-2">{sent}</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="bg-gray-950 border border-gray-800 rounded p-3 text-xs text-gray-600 space-y-1">
|
||||||
|
<div className="text-gray-500 font-bold">Publish targets</div>
|
||||||
|
<div>/goal_pose (geometry_msgs/PoseStamped) — single Nav2 goal</div>
|
||||||
|
<div>/outdoor/waypoints (geometry_msgs/PoseArray) — GPS follower patrol</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── Sub-view: Video Grid ─────────────────────────────────────────────────────
|
||||||
|
|
||||||
|
function VideoFeed({ robot, connected }) {
|
||||||
|
const [error, setError] = useState(false);
|
||||||
|
const src = `http://${robot.host}:${robot.videoPort}/stream?topic=${encodeURIComponent(robot.videoTopic)}&type=ros_compressed`;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="bg-gray-950 rounded-lg border border-gray-800 overflow-hidden">
|
||||||
|
<div className="flex items-center gap-2 px-2 py-1.5 border-b border-gray-800">
|
||||||
|
<div className={`w-1.5 h-1.5 rounded-full ${connected ? 'bg-green-400' : 'bg-gray-700'}`} />
|
||||||
|
<span className="text-xs text-gray-400 font-mono truncate flex-1">{robot.name || robot.id}</span>
|
||||||
|
<span className="text-xs text-gray-700">{robot.videoTopic.split('/').pop()}</span>
|
||||||
|
</div>
|
||||||
|
{!connected ? (
|
||||||
|
<div className="aspect-video flex items-center justify-center text-gray-700 text-xs">
|
||||||
|
Robot disconnected
|
||||||
|
</div>
|
||||||
|
) : error ? (
|
||||||
|
<div className="aspect-video flex items-center justify-center text-red-900 text-xs text-center px-4">
|
||||||
|
Stream unavailable<br />
|
||||||
|
<span className="text-gray-700">{robot.host}:{robot.videoPort}</span>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<img
|
||||||
|
src={src}
|
||||||
|
alt={`${robot.name} camera`}
|
||||||
|
className="w-full aspect-video object-cover block bg-black"
|
||||||
|
onError={() => setError(true)}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function VideoView({ robots, connections }) {
|
||||||
|
return (
|
||||||
|
<div className="space-y-3">
|
||||||
|
<div className="text-cyan-700 text-xs font-bold tracking-widest">VIDEO GRID</div>
|
||||||
|
{robots.length === 0 ? (
|
||||||
|
<div className="text-gray-600 text-xs text-center py-8">No robots configured.</div>
|
||||||
|
) : (
|
||||||
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
|
||||||
|
{robots.map(r => (
|
||||||
|
<VideoFeed key={r.id} robot={r} connected={connections[r.id]?.connected} />
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<div className="text-xs text-gray-700">
|
||||||
|
Streams via web_video_server on port {robots[0]?.videoPort ?? 8080}.
|
||||||
|
Start with: <code className="text-gray-600">ros2 run web_video_server web_video_server</code>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── Sub-view: Alert Panel ────────────────────────────────────────────────────
|
||||||
|
|
||||||
|
function AlertsView({ robots, robotData, connections }) {
|
||||||
|
const allAlerts = robots.flatMap(r => {
|
||||||
|
const d = robotData[r.id];
|
||||||
|
if (!d?.alerts?.length) return [];
|
||||||
|
return d.alerts.map(a => ({ ...a, robotId: r.id, robotName: r.name || r.id }));
|
||||||
|
});
|
||||||
|
|
||||||
|
const errors = allAlerts.filter(a => a.level >= 2);
|
||||||
|
const warns = allAlerts.filter(a => a.level === 1);
|
||||||
|
const offline = robots.filter(r => !connections[r.id]?.connected);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div className="text-cyan-700 text-xs font-bold tracking-widest">FLEET ALERTS</div>
|
||||||
|
|
||||||
|
{/* Summary */}
|
||||||
|
<div className="grid grid-cols-3 gap-3">
|
||||||
|
{[
|
||||||
|
{ label: 'ERRORS', count: errors.length, color: errors.length ? 'text-red-400 bg-red-950 border-red-800' : 'text-gray-600 bg-gray-900 border-gray-800' },
|
||||||
|
{ label: 'WARNINGS',count: warns.length, color: warns.length ? 'text-amber-400 bg-amber-950 border-amber-800' : 'text-gray-600 bg-gray-900 border-gray-800' },
|
||||||
|
{ label: 'OFFLINE', count: offline.length, color: offline.length ? 'text-gray-400 bg-gray-900 border-gray-700' : 'text-gray-600 bg-gray-900 border-gray-800' },
|
||||||
|
].map(({ label, count, color }) => (
|
||||||
|
<div key={label} className={`rounded-lg border p-3 text-center ${color}`}>
|
||||||
|
<div className="text-2xl font-bold">{count}</div>
|
||||||
|
<div className="text-xs tracking-widest mt-0.5">{label}</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Offline robots */}
|
||||||
|
{offline.length > 0 && (
|
||||||
|
<div className="bg-gray-950 rounded-lg border border-gray-700 p-3">
|
||||||
|
<div className="text-gray-500 text-xs font-bold mb-2">OFFLINE ROBOTS</div>
|
||||||
|
<div className="space-y-1">
|
||||||
|
{offline.map(r => (
|
||||||
|
<div key={r.id} className="flex items-center gap-2 text-xs">
|
||||||
|
<div className="w-1.5 h-1.5 rounded-full bg-gray-600" />
|
||||||
|
<span className="text-gray-400">{r.name || r.id}</span>
|
||||||
|
<span className="text-gray-700">{r.host}:{r.port}</span>
|
||||||
|
{connections[r.id]?.error && (
|
||||||
|
<span className="text-red-800">{connections[r.id].error}</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Alert list */}
|
||||||
|
{allAlerts.length === 0 ? (
|
||||||
|
<div className="text-gray-600 text-xs text-center py-6 border border-dashed border-gray-800 rounded">
|
||||||
|
{robots.length === 0 ? 'No robots configured.' : 'No active alerts across fleet.'}
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="space-y-2">
|
||||||
|
{[...allAlerts]
|
||||||
|
.sort((a, b) => b.level - a.level)
|
||||||
|
.map((a, i) => (
|
||||||
|
<div key={i} className={`flex items-start gap-2 rounded border px-3 py-2 text-xs ${
|
||||||
|
a.level >= 2 ? 'bg-red-950 border-red-800' : 'bg-amber-950 border-amber-800'
|
||||||
|
}`}>
|
||||||
|
<div className={`w-1.5 h-1.5 rounded-full mt-0.5 shrink-0 ${a.level >= 2 ? 'bg-red-400 animate-pulse' : 'bg-amber-400'}`} />
|
||||||
|
<div className="flex-1">
|
||||||
|
<span className="font-bold text-gray-300">{a.name}</span>
|
||||||
|
{a.message && <span className="text-gray-500 ml-2">{a.message}</span>}
|
||||||
|
</div>
|
||||||
|
<span className="text-gray-500 shrink-0">{a.robotName}</span>
|
||||||
|
</div>
|
||||||
|
))
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── Sub-view: Robot Detail ───────────────────────────────────────────────────
|
||||||
|
|
||||||
|
const DETAIL_TABS = [
|
||||||
|
{ id: 'imu', label: 'IMU' },
|
||||||
|
{ id: 'battery', label: 'Battery' },
|
||||||
|
{ id: 'motors', label: 'Motors' },
|
||||||
|
{ id: 'control', label: 'Control' },
|
||||||
|
{ id: 'health', label: 'Health' },
|
||||||
|
];
|
||||||
|
|
||||||
|
function RobotDetail({ robot, connection, data, subscribeRobot, onBack }) {
|
||||||
|
const [tab, setTab] = useState('imu');
|
||||||
|
|
||||||
|
// Adapter: wrap subscribeRobot(id, ...) to match subscribe(name, type, cb) signature
|
||||||
|
const subscribe = useCallback(
|
||||||
|
(name, type, cb) => subscribeRobot(robot.id, name, type, cb),
|
||||||
|
[subscribeRobot, robot.id]
|
||||||
|
);
|
||||||
|
|
||||||
|
const conn = connection ?? { connected: false };
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-3">
|
||||||
|
{/* Back + header */}
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<button
|
||||||
|
onClick={onBack}
|
||||||
|
className="text-gray-500 hover:text-cyan-300 text-xs border border-gray-700 hover:border-cyan-800 rounded px-2 py-1"
|
||||||
|
>← Back</button>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<div className={`w-2 h-2 rounded-full ${conn.connected ? 'bg-green-400' : 'bg-gray-700'}`} />
|
||||||
|
<span className="font-bold text-gray-200">{robot.name || robot.id}</span>
|
||||||
|
<span className="text-gray-600 text-sm">{robot.host}:{robot.port}</span>
|
||||||
|
<span className={`text-xs border rounded px-1.5 py-0.5 font-mono uppercase ${VARIANT_COLORS[robot.variant] ?? 'text-gray-400 border-gray-700'}`}>
|
||||||
|
{robot.variant}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
{data?.battery?.soc != null && (
|
||||||
|
<div className="ml-auto flex items-center gap-1.5">
|
||||||
|
<SocBar soc={Math.round(data.battery.soc)} />
|
||||||
|
<span className="text-xs text-gray-600">{data.battery.voltage?.toFixed(1)}V</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Detail tabs */}
|
||||||
|
<div className="flex gap-0.5 border-b border-gray-800">
|
||||||
|
{DETAIL_TABS.map(t => (
|
||||||
|
<button key={t.id} onClick={() => setTab(t.id)}
|
||||||
|
className={`px-3 py-2 text-xs font-bold tracking-wider border-b-2 transition-colors ${
|
||||||
|
tab === t.id
|
||||||
|
? 'border-cyan-500 text-cyan-300'
|
||||||
|
: 'border-transparent text-gray-600 hover:text-gray-300'
|
||||||
|
}`}
|
||||||
|
>{t.label}</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{!conn.connected ? (
|
||||||
|
<div className="text-gray-600 text-sm text-center py-10">
|
||||||
|
Robot disconnected {conn.error ? `— ${conn.error}` : ''}
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div>
|
||||||
|
{tab === 'imu' && <ImuPanel subscribe={subscribe} />}
|
||||||
|
{tab === 'battery' && <BatteryPanel subscribe={subscribe} />}
|
||||||
|
{tab === 'motors' && <MotorPanel subscribe={subscribe} />}
|
||||||
|
{tab === 'control' && <ControlMode subscribe={subscribe} />}
|
||||||
|
{tab === 'health' && <SystemHealth subscribe={subscribe} />}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── Root FleetPanel ──────────────────────────────────────────────────────────
|
||||||
|
|
||||||
|
export function FleetPanel() {
|
||||||
|
const {
|
||||||
|
robots, addRobot, removeRobot,
|
||||||
|
connections, robotData,
|
||||||
|
subscribeRobot, sendGoal, sendPatrol,
|
||||||
|
scanning, scanSubnet,
|
||||||
|
} = useFleet();
|
||||||
|
|
||||||
|
const [view, setView] = useState('robots');
|
||||||
|
const [selectedId, setSelectedId] = useState(null);
|
||||||
|
const [showAdd, setShowAdd] = useState(false);
|
||||||
|
|
||||||
|
const handleSelect = useCallback((id) => {
|
||||||
|
setSelectedId(id);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const handleBack = useCallback(() => {
|
||||||
|
setSelectedId(null);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const handleScanLan = useCallback(async () => {
|
||||||
|
const baseIp = robots[0]?.host ?? '192.168.1.100';
|
||||||
|
const found = await scanSubnet(baseIp, [9090, 9092]);
|
||||||
|
found.forEach(({ host, port }, i) => {
|
||||||
|
const existingHosts = robots.map(r => r.host);
|
||||||
|
if (!existingHosts.includes(host)) {
|
||||||
|
addRobot({
|
||||||
|
id: `discovered-${Date.now()}-${i}`,
|
||||||
|
name: `Discovered ${host}`,
|
||||||
|
variant: 'balance',
|
||||||
|
host,
|
||||||
|
port,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}, [robots, scanSubnet, addRobot]);
|
||||||
|
|
||||||
|
// If a robot is selected → show RobotDetail overlay
|
||||||
|
if (selectedId) {
|
||||||
|
const robot = robots.find(r => r.id === selectedId);
|
||||||
|
if (robot) {
|
||||||
|
return (
|
||||||
|
<RobotDetail
|
||||||
|
robot={robot}
|
||||||
|
connection={connections[robot.id]}
|
||||||
|
data={robotData[robot.id]}
|
||||||
|
subscribeRobot={subscribeRobot}
|
||||||
|
onBack={handleBack}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
setSelectedId(null);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-4">
|
||||||
|
{/* Fleet sub-nav */}
|
||||||
|
<div className="flex gap-0.5 border-b border-gray-800">
|
||||||
|
{FLEET_VIEWS.map(v => (
|
||||||
|
<button key={v.id} onClick={() => setView(v.id)}
|
||||||
|
className={`px-3 py-2 text-xs font-bold tracking-wider border-b-2 transition-colors ${
|
||||||
|
view === v.id
|
||||||
|
? 'border-cyan-500 text-cyan-300'
|
||||||
|
: 'border-transparent text-gray-600 hover:text-gray-300'
|
||||||
|
}`}
|
||||||
|
>{v.label.toUpperCase()}</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Content */}
|
||||||
|
{view === 'robots' && (
|
||||||
|
<RobotsView
|
||||||
|
robots={robots}
|
||||||
|
connections={connections}
|
||||||
|
robotData={robotData}
|
||||||
|
onSelect={handleSelect}
|
||||||
|
onRemove={removeRobot}
|
||||||
|
onAdd={() => setShowAdd(true)}
|
||||||
|
onScan={handleScanLan}
|
||||||
|
scanning={scanning}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
{view === 'map' && (
|
||||||
|
<FleetMapView robots={robots} robotData={robotData} onSelect={handleSelect} />
|
||||||
|
)}
|
||||||
|
{view === 'missions' && (
|
||||||
|
<MissionsView
|
||||||
|
robots={robots}
|
||||||
|
connections={connections}
|
||||||
|
sendGoal={sendGoal}
|
||||||
|
sendPatrol={sendPatrol}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
{view === 'video' && (
|
||||||
|
<VideoView robots={robots} connections={connections} />
|
||||||
|
)}
|
||||||
|
{view === 'alerts' && (
|
||||||
|
<AlertsView robots={robots} robotData={robotData} connections={connections} />
|
||||||
|
)}
|
||||||
|
|
||||||
|
{showAdd && (
|
||||||
|
<AddRobotModal onAdd={addRobot} onClose={() => setShowAdd(false)} />
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
347
ui/social-bot/src/hooks/useFleet.js
Normal file
347
ui/social-bot/src/hooks/useFleet.js
Normal file
@ -0,0 +1,347 @@
|
|||||||
|
/**
|
||||||
|
* useFleet.js — Multi-robot fleet connection manager.
|
||||||
|
*
|
||||||
|
* Maintains one ROSLIB.Ros WebSocket connection per robot.
|
||||||
|
* Aggregates fleet-summary telemetry (battery, pose, alerts, mode) for each.
|
||||||
|
* Persists robot registry to localStorage.
|
||||||
|
*
|
||||||
|
* API:
|
||||||
|
* const { robots, addRobot, removeRobot, updateRobot,
|
||||||
|
* connections, robotData,
|
||||||
|
* subscribeRobot, publishRobot, scanSubnet } = useFleet();
|
||||||
|
*
|
||||||
|
* Robot shape:
|
||||||
|
* { id, name, variant, host, port, videoPort, videoTopic }
|
||||||
|
* variant: 'balance' | 'rover' | 'tank' | 'social'
|
||||||
|
* videoTopic: '/camera/panoramic/compressed' (default)
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { useState, useEffect, useRef, useCallback } from 'react';
|
||||||
|
import ROSLIB from 'roslib';
|
||||||
|
|
||||||
|
// ── Storage ────────────────────────────────────────────────────────────────────
|
||||||
|
|
||||||
|
const STORAGE_KEY = 'saltybot_fleet_v2';
|
||||||
|
|
||||||
|
const DEFAULT_ROBOTS = [
|
||||||
|
{
|
||||||
|
id: 'salty-01',
|
||||||
|
name: 'SaltyBot #1',
|
||||||
|
variant: 'balance',
|
||||||
|
host: '192.168.1.100',
|
||||||
|
port: 9090,
|
||||||
|
videoPort: 8080,
|
||||||
|
videoTopic: '/camera/panoramic/compressed',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
function loadRobots() {
|
||||||
|
try {
|
||||||
|
const saved = JSON.parse(localStorage.getItem(STORAGE_KEY));
|
||||||
|
return Array.isArray(saved) && saved.length > 0 ? saved : DEFAULT_ROBOTS;
|
||||||
|
} catch {
|
||||||
|
return DEFAULT_ROBOTS;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── Robot data structure ───────────────────────────────────────────────────────
|
||||||
|
|
||||||
|
const EMPTY_DATA = () => ({
|
||||||
|
state: null, // 'DISARMED'|'ARMED'|'TILT FAULT'
|
||||||
|
stm32Mode: null, // 'MANUAL'|'ASSISTED'
|
||||||
|
controlMode: null, // 'RC'|'RAMP_TO_AUTO'|'AUTO'|'RAMP_TO_RC'
|
||||||
|
blendAlpha: 0,
|
||||||
|
pipeline: null, // 'idle'|'listening'|'thinking'|'speaking'
|
||||||
|
pitch: 0,
|
||||||
|
motorCmd: 0,
|
||||||
|
battery: { voltage: 0, soc: 0 },
|
||||||
|
pose: null, // { x, y, yaw }
|
||||||
|
alerts: [], // [{ level, name, message }]
|
||||||
|
lastSeen: null,
|
||||||
|
});
|
||||||
|
|
||||||
|
// ── Hook ──────────────────────────────────────────────────────────────────────
|
||||||
|
|
||||||
|
export function useFleet() {
|
||||||
|
const [robots, setRobots] = useState(loadRobots);
|
||||||
|
const [connections, setConnections] = useState({});
|
||||||
|
const [robotData, setRobotData] = useState(() =>
|
||||||
|
Object.fromEntries(loadRobots().map(r => [r.id, EMPTY_DATA()]))
|
||||||
|
);
|
||||||
|
const [scanning, setScanning] = useState(false);
|
||||||
|
|
||||||
|
const rosRef = useRef({}); // { [id]: ROSLIB.Ros }
|
||||||
|
const subsRef = useRef({}); // { [id]: ROSLIB.Topic[] }
|
||||||
|
|
||||||
|
// Persist robots
|
||||||
|
useEffect(() => {
|
||||||
|
localStorage.setItem(STORAGE_KEY, JSON.stringify(robots));
|
||||||
|
}, [robots]);
|
||||||
|
|
||||||
|
// ── Connection lifecycle ────────────────────────────────────────────────────
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const currentIds = new Set(robots.map(r => r.id));
|
||||||
|
|
||||||
|
// Disconnect removed robots
|
||||||
|
Object.keys(rosRef.current).forEach(id => {
|
||||||
|
if (!currentIds.has(id)) {
|
||||||
|
subsRef.current[id]?.forEach(t => { try { t.unsubscribe(); } catch {} });
|
||||||
|
delete subsRef.current[id];
|
||||||
|
try { rosRef.current[id].close(); } catch {}
|
||||||
|
delete rosRef.current[id];
|
||||||
|
setConnections(c => { const n = { ...c }; delete n[id]; return n; });
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Connect new robots
|
||||||
|
robots.forEach(robot => {
|
||||||
|
if (rosRef.current[robot.id]) return;
|
||||||
|
|
||||||
|
const ros = new ROSLIB.Ros({ url: `ws://${robot.host}:${robot.port}` });
|
||||||
|
rosRef.current[robot.id] = ros;
|
||||||
|
subsRef.current[robot.id] = [];
|
||||||
|
|
||||||
|
ros.on('connection', () => {
|
||||||
|
setConnections(c => ({ ...c, [robot.id]: { connected: true, error: null } }));
|
||||||
|
_setupSubs(robot.id, ros);
|
||||||
|
});
|
||||||
|
ros.on('error', err => {
|
||||||
|
setConnections(c => ({
|
||||||
|
...c,
|
||||||
|
[robot.id]: { connected: false, error: String(err?.message ?? err ?? 'error') }
|
||||||
|
}));
|
||||||
|
});
|
||||||
|
ros.on('close', () => {
|
||||||
|
setConnections(c => ({
|
||||||
|
...c,
|
||||||
|
[robot.id]: { connected: false, error: null }
|
||||||
|
}));
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
Object.values(subsRef.current).forEach(subs =>
|
||||||
|
subs.forEach(t => { try { t.unsubscribe(); } catch {} })
|
||||||
|
);
|
||||||
|
Object.values(rosRef.current).forEach(ros => { try { ros.close(); } catch {} });
|
||||||
|
rosRef.current = {};
|
||||||
|
subsRef.current = {};
|
||||||
|
};
|
||||||
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||||
|
}, [robots]);
|
||||||
|
|
||||||
|
// ── Fleet-summary subscriptions ────────────────────────────────────────────
|
||||||
|
|
||||||
|
function _sub(id, ros, name, type, cb) {
|
||||||
|
const t = new ROSLIB.Topic({ ros, name, messageType: type });
|
||||||
|
t.subscribe(cb);
|
||||||
|
subsRef.current[id] = [...(subsRef.current[id] ?? []), t];
|
||||||
|
}
|
||||||
|
|
||||||
|
function _update(id, patch) {
|
||||||
|
setRobotData(prev => ({
|
||||||
|
...prev,
|
||||||
|
[id]: { ...(prev[id] ?? EMPTY_DATA()), ...patch },
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
|
||||||
|
function _setupSubs(id, ros) {
|
||||||
|
// Balance state
|
||||||
|
_sub(id, ros, '/saltybot/balance_state', 'std_msgs/String', msg => {
|
||||||
|
try {
|
||||||
|
const d = JSON.parse(msg.data);
|
||||||
|
_update(id, {
|
||||||
|
state: d.state,
|
||||||
|
stm32Mode: d.mode,
|
||||||
|
pitch: d.pitch_deg ?? 0,
|
||||||
|
motorCmd: d.motor_cmd ?? 0,
|
||||||
|
lastSeen: Date.now(),
|
||||||
|
});
|
||||||
|
} catch {}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Control mode (RC ↔ AUTO blend)
|
||||||
|
_sub(id, ros, '/saltybot/control_mode', 'std_msgs/String', msg => {
|
||||||
|
try {
|
||||||
|
const d = JSON.parse(msg.data);
|
||||||
|
_update(id, { controlMode: d.mode, blendAlpha: d.blend_alpha ?? 0 });
|
||||||
|
} catch {}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Odometry → pose
|
||||||
|
_sub(id, ros, '/odom', 'nav_msgs/Odometry', msg => {
|
||||||
|
const p = msg.pose?.pose;
|
||||||
|
if (!p) return;
|
||||||
|
const o = p.orientation;
|
||||||
|
const yaw = Math.atan2(
|
||||||
|
2 * (o.w * o.z + o.x * o.y),
|
||||||
|
1 - 2 * (o.y * o.y + o.z * o.z)
|
||||||
|
);
|
||||||
|
_update(id, { pose: { x: p.position.x, y: p.position.y, yaw }, lastSeen: Date.now() });
|
||||||
|
});
|
||||||
|
|
||||||
|
// Diagnostics → battery + alerts
|
||||||
|
_sub(id, ros, '/diagnostics', 'diagnostic_msgs/DiagnosticArray', msg => {
|
||||||
|
const alerts = [];
|
||||||
|
const kv = {};
|
||||||
|
for (const status of msg.status ?? []) {
|
||||||
|
if (status.level > 0) {
|
||||||
|
alerts.push({ level: status.level, name: status.name, message: status.message });
|
||||||
|
}
|
||||||
|
for (const pair of status.values ?? []) kv[pair.key] = pair.value;
|
||||||
|
}
|
||||||
|
const patch = { alerts };
|
||||||
|
if (kv.battery_voltage_v != null) {
|
||||||
|
const v = parseFloat(kv.battery_voltage_v);
|
||||||
|
patch.battery = {
|
||||||
|
voltage: v,
|
||||||
|
soc: Math.max(0, Math.min(100, ((v - 12) / (16.8 - 12)) * 100)),
|
||||||
|
};
|
||||||
|
}
|
||||||
|
_update(id, patch);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Social pipeline state (optional)
|
||||||
|
_sub(id, ros, '/social/orchestrator/state', 'std_msgs/String', msg => {
|
||||||
|
try {
|
||||||
|
_update(id, { pipeline: JSON.parse(msg.data)?.state ?? null });
|
||||||
|
} catch {}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── Public API ─────────────────────────────────────────────────────────────
|
||||||
|
|
||||||
|
const addRobot = useCallback(robot => {
|
||||||
|
const id = robot.id ?? `bot-${Date.now()}`;
|
||||||
|
const full = {
|
||||||
|
videoPort: 8080,
|
||||||
|
videoTopic: '/camera/panoramic/compressed',
|
||||||
|
...robot,
|
||||||
|
id,
|
||||||
|
};
|
||||||
|
setRobots(r => [...r.filter(b => b.id !== id), full]);
|
||||||
|
setRobotData(d => ({ ...d, [id]: EMPTY_DATA() }));
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const removeRobot = useCallback(id => {
|
||||||
|
setRobots(r => r.filter(b => b.id !== id));
|
||||||
|
setRobotData(d => { const n = { ...d }; delete n[id]; return n; });
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const updateRobot = useCallback((id, patch) => {
|
||||||
|
// Force reconnect by dropping the existing connection
|
||||||
|
subsRef.current[id]?.forEach(t => { try { t.unsubscribe(); } catch {} });
|
||||||
|
subsRef.current[id] = [];
|
||||||
|
try { rosRef.current[id]?.close(); } catch {}
|
||||||
|
delete rosRef.current[id];
|
||||||
|
setRobots(r => r.map(b => b.id === id ? { ...b, ...patch } : b));
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
/** Subscribe to a topic on a specific robot. Returns unsubscribe fn. */
|
||||||
|
const subscribeRobot = useCallback((id, name, type, cb) => {
|
||||||
|
const ros = rosRef.current[id];
|
||||||
|
if (!ros) return () => {};
|
||||||
|
const t = new ROSLIB.Topic({ ros, name, messageType: type });
|
||||||
|
t.subscribe(cb);
|
||||||
|
subsRef.current[id] = [...(subsRef.current[id] ?? []), t];
|
||||||
|
return () => {
|
||||||
|
try { t.unsubscribe(); } catch {}
|
||||||
|
subsRef.current[id] = subsRef.current[id]?.filter(x => x !== t) ?? [];
|
||||||
|
};
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
/** Publish to a topic on a specific robot. */
|
||||||
|
const publishRobot = useCallback((id, name, type, data) => {
|
||||||
|
const ros = rosRef.current[id];
|
||||||
|
if (!ros) return;
|
||||||
|
const t = new ROSLIB.Topic({ ros, name, messageType: type });
|
||||||
|
t.publish(new ROSLIB.Message(data));
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
/** Send a single Nav2 goal pose to a robot. */
|
||||||
|
const sendGoal = useCallback((id, x, y, yaw = 0) => {
|
||||||
|
const cy2 = Math.cos(yaw / 2);
|
||||||
|
const sy2 = Math.sin(yaw / 2);
|
||||||
|
publishRobot(id, '/goal_pose', 'geometry_msgs/PoseStamped', {
|
||||||
|
header: { frame_id: 'map', stamp: { sec: 0, nanosec: 0 } },
|
||||||
|
pose: {
|
||||||
|
position: { x, y, z: 0 },
|
||||||
|
orientation: { x: 0, y: 0, z: sy2, w: cy2 },
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}, [publishRobot]);
|
||||||
|
|
||||||
|
/** Send a patrol route (array of {x,y,yaw?}) to a robot via PoseArray → GPS follower. */
|
||||||
|
const sendPatrol = useCallback((id, waypoints) => {
|
||||||
|
publishRobot(id, '/outdoor/waypoints', 'geometry_msgs/PoseArray', {
|
||||||
|
header: { frame_id: 'map', stamp: { sec: 0, nanosec: 0 } },
|
||||||
|
poses: waypoints.map(({ x, y, yaw = 0 }) => {
|
||||||
|
const cy2 = Math.cos(yaw / 2);
|
||||||
|
const sy2 = Math.sin(yaw / 2);
|
||||||
|
return {
|
||||||
|
position: { x, y, z: 0 },
|
||||||
|
orientation: { x: 0, y: 0, z: sy2, w: cy2 },
|
||||||
|
};
|
||||||
|
}),
|
||||||
|
});
|
||||||
|
}, [publishRobot]);
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Probe a list of candidate URLs to find reachable rosbridge servers.
|
||||||
|
* Reports each discovered robot back via the addRobot callback.
|
||||||
|
*/
|
||||||
|
const scanSubnet = useCallback(async (baseIp, portRange = [9090, 9097]) => {
|
||||||
|
setScanning(true);
|
||||||
|
const [portMin, portMax] = portRange;
|
||||||
|
const ipParts = baseIp.split('.');
|
||||||
|
const prefix = ipParts.slice(0, 3).join('.');
|
||||||
|
|
||||||
|
const results = [];
|
||||||
|
const probes = [];
|
||||||
|
for (let host4 = 1; host4 <= 254; host4++) {
|
||||||
|
for (let port = portMin; port <= portMax; port++) {
|
||||||
|
probes.push({ host: `${prefix}.${host4}`, port });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Probe in batches of 32 to avoid thundering-herd
|
||||||
|
const BATCH = 32;
|
||||||
|
for (let i = 0; i < probes.length; i += BATCH) {
|
||||||
|
const batch = probes.slice(i, i + BATCH);
|
||||||
|
await Promise.allSettled(
|
||||||
|
batch.map(({ host, port }) =>
|
||||||
|
new Promise(resolve => {
|
||||||
|
const ws = new WebSocket(`ws://${host}:${port}`);
|
||||||
|
const timer = setTimeout(() => { try { ws.close(); } catch {} resolve(null); }, 800);
|
||||||
|
ws.onopen = () => {
|
||||||
|
clearTimeout(timer);
|
||||||
|
results.push({ host, port });
|
||||||
|
ws.close();
|
||||||
|
resolve({ host, port });
|
||||||
|
};
|
||||||
|
ws.onerror = () => { clearTimeout(timer); resolve(null); };
|
||||||
|
})
|
||||||
|
)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
setScanning(false);
|
||||||
|
return results;
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
return {
|
||||||
|
robots,
|
||||||
|
addRobot,
|
||||||
|
removeRobot,
|
||||||
|
updateRobot,
|
||||||
|
connections,
|
||||||
|
robotData,
|
||||||
|
subscribeRobot,
|
||||||
|
publishRobot,
|
||||||
|
sendGoal,
|
||||||
|
sendPatrol,
|
||||||
|
scanning,
|
||||||
|
scanSubnet,
|
||||||
|
};
|
||||||
|
}
|
||||||
Loading…
x
Reference in New Issue
Block a user