legop3/MultiRoombaRover
1
0
Fork 0
mirror of https://github.com/legop3/MultiRoombaRover.git synced 2026-09-16 09:31:20 -04:00
Code Issues Actions Packages Projects Releases Wiki Activity

guh

Browse Source
This commit is contained in:
legop3
2025-11-15 13:26:30 -05:00
parent 0de8fb9633
commit 248fe3eef1
4 changed files with 73 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files
server/public/assets/index-BrexHw5K.js → server/public/assets/index-n1qWThah.js
+8 -8
View File
File diff suppressed because one or more lines are too long
server/public/index.html
+1 -1
View File
@@ -5,7 +5,7 @@
<link rel="icon" type="image/svg+xml" href="/vite.svg" /> <link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>webui</title> <title>webui</title>
<script type="module" crossorigin src="/assets/index-BrexHw5K.js"></script> <script type="module" crossorigin src="/assets/index-n1qWThah.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-Cyy-WeOF.css"> <link rel="stylesheet" crossorigin href="/assets/index-Cyy-WeOF.css">
</head> </head>
<body> <body>
webui/src/components/DrivePanel.jsx
+27 -11
View File
@@ -1,5 +1,13 @@
import { useDriveControls } from '../hooks/useDriveControls.js'; import { useDriveControls } from '../hooks/useDriveControls.js';
const oiButtons = [
{ key: 'start', label: 'Start OI' },
{ key: 'safe', label: 'Safe' },
{ key: 'full', label: 'Full' },
{ key: 'passive', label: 'Passive' },
{ key: 'dock', label: 'Dock' },
];
function SpeedMeter({ left, right }) { function SpeedMeter({ left, right }) {
return ( return (
<div className="grid grid-cols-2 gap-4 rounded-2xl border border-slate-800/60 bg-slate-950/40 p-4 text-sm"> <div className="grid grid-cols-2 gap-4 rounded-2xl border border-slate-800/60 bg-slate-950/40 p-4 text-sm">
@@ -16,7 +24,7 @@ function SpeedMeter({ left, right }) {
} }
export default function DrivePanel() { export default function DrivePanel() {
const { roverId, speeds, sensorEnabled, toggleSensorStream, stopMotors } = useDriveControls(); const { roverId, speeds, stopMotors, sendOiCommand } = useDriveControls();
return ( return (
<section className="rounded-2xl border border-slate-800 bg-slate-900/60 p-4"> <section className="rounded-2xl border border-slate-800 bg-slate-900/60 p-4">
@@ -30,7 +38,6 @@ export default function DrivePanel() {
<div className="flex flex-wrap items-center gap-2 text-xs text-slate-400"> <div className="flex flex-wrap items-center gap-2 text-xs text-slate-400">
<span>W/A/S/D: move</span> <span>W/A/S/D: move</span>
<span>Shift: boost</span> <span>Shift: boost</span>
<span>Space: browser handles scroll</span>
</div> </div>
</header> </header>
@@ -45,18 +52,27 @@ export default function DrivePanel() {
> >
Stop Motors Stop Motors
</button> </button>
<button </div>
type="button"
onClick={toggleSensorStream} <div className="mt-6 space-y-2">
className="rounded-lg border border-slate-700 px-4 py-2 text-sm font-semibold text-slate-200 disabled:opacity-50" <p className="text-xs uppercase tracking-[0.3em] text-slate-500">OI Modes</p>
disabled={!roverId} <div className="flex flex-wrap gap-2">
> {oiButtons.map((btn) => (
{sensorEnabled ? 'Disable Sensor Stream' : 'Enable Sensor Stream'} <button
</button> key={btn.key}
type="button"
onClick={() => sendOiCommand(btn.key)}
disabled={!roverId}
className="rounded-lg border border-slate-700 px-3 py-1 text-sm font-semibold text-slate-200 disabled:opacity-50"
>
{btn.label}
</button>
))}
</div>
</div> </div>
<p className="mt-4 text-xs text-slate-500"> <p className="mt-4 text-xs text-slate-500">
Keep this tab focused to drive. Keyboard input is ignored while typing in form fields. Sensor streaming starts automatically after each OI change. Keep this tab focused while driving.
</p> </p>
</section> </section>
); );
webui/src/hooks/useDriveControls.js
+37 -14
View File
@@ -2,6 +2,14 @@ import { useCallback, useEffect, useRef, useState } from 'react';
import { useSocket } from '../context/SocketContext.jsx'; import { useSocket } from '../context/SocketContext.jsx';
import { useSession } from '../context/SessionContext.jsx'; import { useSession } from '../context/SessionContext.jsx';
const OI_COMMANDS = {
start: [128],
safe: [131],
full: [132],
passive: [128],
dock: [143],
};
function clamp(value, min, max) { function clamp(value, min, max) {
return Math.max(min, Math.min(max, value)); return Math.max(min, Math.min(max, value));
} }
@@ -55,6 +63,12 @@ function shouldIgnoreEvent(event) {
); );
} }
function bytesToBase64(bytes) {
const binary = String.fromCharCode(...bytes);
if (typeof btoa === 'function') return btoa(binary);
return Buffer.from(bytes).toString('base64');
}
export function useDriveControls() { export function useDriveControls() {
const socket = useSocket(); const socket = useSocket();
const { session } = useSession(); const { session } = useSession();
@@ -62,7 +76,6 @@ export function useDriveControls() {
const keysRef = useRef(new Set()); const keysRef = useRef(new Set());
const lastSpeedsRef = useRef({ left: 0, right: 0 }); const lastSpeedsRef = useRef({ left: 0, right: 0 });
const [currentSpeeds, setCurrentSpeeds] = useState(lastSpeedsRef.current); const [currentSpeeds, setCurrentSpeeds] = useState(lastSpeedsRef.current);
const [sensorEnabled, setSensorEnabled] = useState(false);
const emitCommand = useCallback( const emitCommand = useCallback(
(payload, cb) => { (payload, cb) => {
@@ -72,6 +85,14 @@ export function useDriveControls() {
[socket, roverId], [socket, roverId],
); );
const enableSensorStream = useCallback(() => {
if (!roverId) return;
emitCommand({
type: 'sensorStream',
data: { sensorStream: { enable: true } },
});
}, [emitCommand, roverId]);
const sendDriveUpdate = useCallback(() => { const sendDriveUpdate = useCallback(() => {
if (!roverId) return; if (!roverId) return;
const speeds = computeSpeeds(keysRef.current); const speeds = computeSpeeds(keysRef.current);
@@ -96,24 +117,25 @@ export function useDriveControls() {
}); });
}, [emitCommand, roverId]); }, [emitCommand, roverId]);
const toggleSensorStream = useCallback(() => { const sendOiCommand = useCallback(
if (!roverId) return; (key) => {
setSensorEnabled((prev) => { if (!roverId) return;
const next = !prev; const bytes = OI_COMMANDS[key];
if (!bytes) return;
emitCommand({ emitCommand({
type: 'sensorStream', type: 'raw',
data: { sensorStream: { enable: next } }, data: { raw: bytesToBase64(bytes) },
}); });
return next; enableSensorStream();
}); },
}, [emitCommand, roverId]); [emitCommand, enableSensorStream, roverId],
);
useEffect(() => { useEffect(() => {
if (!roverId) { if (!roverId) {
keysRef.current.clear(); keysRef.current.clear();
lastSpeedsRef.current = { left: 0, right: 0 }; lastSpeedsRef.current = { left: 0, right: 0 };
setCurrentSpeeds(lastSpeedsRef.current); setCurrentSpeeds(lastSpeedsRef.current);
setSensorEnabled(false);
return undefined; return undefined;
} }
@@ -136,17 +158,18 @@ export function useDriveControls() {
window.addEventListener('keydown', onKeyDown); window.addEventListener('keydown', onKeyDown);
window.addEventListener('keyup', onKeyUp); window.addEventListener('keyup', onKeyUp);
enableSensorStream();
return () => { return () => {
window.removeEventListener('keydown', onKeyDown); window.removeEventListener('keydown', onKeyDown);
window.removeEventListener('keyup', onKeyUp); window.removeEventListener('keyup', onKeyUp);
}; };
}, [roverId, sendDriveUpdate]); }, [roverId, sendDriveUpdate, enableSensorStream]);
return { return {
roverId, roverId,
speeds: currentSpeeds, speeds: currentSpeeds,
sensorEnabled,
toggleSensorStream,
stopMotors, stopMotors,
sendOiCommand,
}; };
} }