legop3/MultiRoombaRover
1
0
Fork 0
mirror of https://github.com/legop3/MultiRoombaRover.git synced 2026-09-16 01:21: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" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<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">
</head>
<body>
webui/src/components/DrivePanel.jsx
+27 -11
View File
@@ -1,5 +1,13 @@
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 }) {
return (
<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() {
const { roverId, speeds, sensorEnabled, toggleSensorStream, stopMotors } = useDriveControls();
const { roverId, speeds, stopMotors, sendOiCommand } = useDriveControls();
return (
<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">
<span>W/A/S/D: move</span>
<span>Shift: boost</span>
<span>Space: browser handles scroll</span>
</div>
</header>
@@ -45,18 +52,27 @@ export default function DrivePanel() {
>
Stop Motors
</button>
<button
type="button"
onClick={toggleSensorStream}
className="rounded-lg border border-slate-700 px-4 py-2 text-sm font-semibold text-slate-200 disabled:opacity-50"
disabled={!roverId}
>
{sensorEnabled ? 'Disable Sensor Stream' : 'Enable Sensor Stream'}
</button>
</div>
<div className="mt-6 space-y-2">
<p className="text-xs uppercase tracking-[0.3em] text-slate-500">OI Modes</p>
<div className="flex flex-wrap gap-2">
{oiButtons.map((btn) => (
<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>
<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>
</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 { useSession } from '../context/SessionContext.jsx';
const OI_COMMANDS = {
start: [128],
safe: [131],
full: [132],
passive: [128],
dock: [143],
};
function clamp(value, min, max) {
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() {
const socket = useSocket();
const { session } = useSession();
@@ -62,7 +76,6 @@ export function useDriveControls() {
const keysRef = useRef(new Set());
const lastSpeedsRef = useRef({ left: 0, right: 0 });
const [currentSpeeds, setCurrentSpeeds] = useState(lastSpeedsRef.current);
const [sensorEnabled, setSensorEnabled] = useState(false);
const emitCommand = useCallback(
(payload, cb) => {
@@ -72,6 +85,14 @@ export function useDriveControls() {
[socket, roverId],
);
const enableSensorStream = useCallback(() => {
if (!roverId) return;
emitCommand({
type: 'sensorStream',
data: { sensorStream: { enable: true } },
});
}, [emitCommand, roverId]);
const sendDriveUpdate = useCallback(() => {
if (!roverId) return;
const speeds = computeSpeeds(keysRef.current);
@@ -96,24 +117,25 @@ export function useDriveControls() {
});
}, [emitCommand, roverId]);
const toggleSensorStream = useCallback(() => {
if (!roverId) return;
setSensorEnabled((prev) => {
const next = !prev;
const sendOiCommand = useCallback(
(key) => {
if (!roverId) return;
const bytes = OI_COMMANDS[key];
if (!bytes) return;
emitCommand({
type: 'sensorStream',
data: { sensorStream: { enable: next } },
type: 'raw',
data: { raw: bytesToBase64(bytes) },
});
return next;
});
}, [emitCommand, roverId]);
enableSensorStream();
},
[emitCommand, enableSensorStream, roverId],
);
useEffect(() => {
if (!roverId) {
keysRef.current.clear();
lastSpeedsRef.current = { left: 0, right: 0 };
setCurrentSpeeds(lastSpeedsRef.current);
setSensorEnabled(false);
return undefined;
}
@@ -136,17 +158,18 @@ export function useDriveControls() {
window.addEventListener('keydown', onKeyDown);
window.addEventListener('keyup', onKeyUp);
enableSensorStream();
return () => {
window.removeEventListener('keydown', onKeyDown);
window.removeEventListener('keyup', onKeyUp);
};
}, [roverId, sendDriveUpdate]);
}, [roverId, sendDriveUpdate, enableSensorStream]);
return {
roverId,
speeds: currentSpeeds,
sensorEnabled,
toggleSensorStream,
stopMotors,
sendOiCommand,
};
}