legop3/MultiRoombaRover
1
0
Fork 0
mirror of https://github.com/legop3/MultiRoombaRover.git synced 2026-09-15 17:12:59 -04:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

guh wh

Browse Source
This commit is contained in:
legop3
2025-11-17 22:58:02 -05:00
parent 12b5e18f0a
commit 9c45075cd1
7 changed files with 114 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
server/public/assets/index-Bsnm9v3l.js → server/public/assets/index-BVmkkCJ8.js
+8 -8
View File
File diff suppressed because one or more lines are too long
server/public/assets/index-CkUABVeV.css → server/public/assets/index-BaCUS21F.css
+1 -1
View File
File diff suppressed because one or more lines are too long
server/public/index.html
+2 -2
View File
@@ -5,8 +5,8 @@
<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-Bsnm9v3l.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-CkUABVeV.css">
<script type="module" crossorigin src="/assets/index-BVmkkCJ8.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-BaCUS21F.css">
</head>
<body>
<div id="root"></div>
webui/src/components/MobileControls.jsx
+36 -2
View File
@@ -131,10 +131,20 @@ function FloatingJoystick({ disabled, layout, onMove, onStop }) {
function MobileJoystickPanel({ layout }) {
const {
state: { roverId },
actions: { setDriveVector, registerInputState, stopAllMotion },
state: { roverId, camera },
actions: { setDriveVector, registerInputState, stopAllMotion, setServoAngle },
} = useControlSystem();
const disabled = !roverId;
const cameraConfig = camera?.config;
const cameraEnabled = Boolean(roverId && camera?.enabled && cameraConfig);
const cameraMin = typeof cameraConfig?.minAngle === 'number' ? cameraConfig.minAngle : -45;
const cameraMax = typeof cameraConfig?.maxAngle === 'number' ? cameraConfig.maxAngle : 45;
const cameraValue =
typeof camera?.angle === 'number'
? camera.angle
: typeof cameraConfig?.homeAngle === 'number'
? cameraConfig.homeAngle
: (cameraMin + cameraMax) / 2;
const handleMove = useCallback(
(vector = {}) => {
@@ -157,6 +167,13 @@ function MobileJoystickPanel({ layout }) {
registerInputState(SOURCE, { vector: zero, lastEvent: 'stop' });
}, [disabled, registerInputState, setDriveVector]);
const handleCameraSlider = (event) => {
if (!cameraEnabled) return;
const next = Number(event.target.value);
if (Number.isNaN(next)) return;
setServoAngle(next);
};
return (
<div className="flex flex-col gap-1 text-slate-100">
<DriveModeToggle size="compact" />
@@ -169,6 +186,23 @@ function MobileJoystickPanel({ layout }) {
>
Panic Stop
</button>
{cameraEnabled && (
<div className="rounded-lg bg-slate-900/70 p-2 text-xs">
<div className="flex items-center justify-between text-[0.7rem] uppercase tracking-wide text-slate-400">
<span>Camera Tilt</span>
<span className="font-mono text-slate-200">{cameraValue.toFixed(1)}°</span>
</div>
<input
type="range"
min={cameraMin}
max={cameraMax}
step={0.5}
value={cameraValue}
onChange={handleCameraSlider}
className="mt-1 w-full accent-cyan-400"
/>
</div>
)}
</div>
);
}
webui/src/components/controls/DriveModeToggle.jsx
+10 -3
View File
@@ -1,13 +1,19 @@
import { useState } from 'react';
import { useControlSystem } from '../../controls/index.js';
import { useTelemetryFrame } from '../../context/TelemetryContext.jsx';
export default function DriveModeToggle({ size = 'default' }) {
const {
state: { roverId, mode },
state: { roverId },
actions,
} = useControlSystem();
const [pending, setPending] = useState(null);
const disabled = !roverId || pending !== null;
const frame = useTelemetryFrame(roverId);
const oiLabel = frame?.sensors?.oiMode?.label || 'Unknown';
const oiNormalized = oiLabel.toLowerCase();
const driveReady = oiNormalized === 'full';
const currentLabel = driveReady ? 'Drive Ready' : `OI Mode: ${oiLabel}`;
const handleDrive = async () => {
if (!roverId) return;
@@ -35,12 +41,13 @@ export default function DriveModeToggle({ size = 'default' }) {
size === 'compact'
? 'text-xs px-1 py-0.5'
: 'text-sm px-1.5 py-0.5';
const currentLabel = mode === 'dock' ? 'Dock mode' : 'Drive mode';
return (
<div className="rounded-sm bg-black/30 p-1 text-slate-100">
<div className="flex items-center justify-between">
<span className={`rounded-full bg-slate-800 ${pillClass}`}>{currentLabel}</span>
<span className={`rounded-full ${driveReady ? 'bg-emerald-700' : 'bg-indigo-700'} ${pillClass}`}>
{currentLabel}
</span>
<span className="text-[0.65rem] text-slate-400">Rover {roverId ?? '—'}</span>
</div>
<div className="mt-1 grid grid-cols-2 gap-1 text-xs">
webui/src/controls/ControlContext.jsx
+13 -4
View File
@@ -1,4 +1,4 @@
import { createContext, useCallback, useContext, useEffect, useMemo, useReducer } from 'react';
import { createContext, useCallback, useContext, useEffect, useMemo, useReducer, useRef } from 'react';
import { controlReducer, initialControlState } from './controlReducer.js';
import { computeDifferentialSpeeds, clamp } from './controlMath.js';
import { useCommandPipeline } from './commandPipeline.js';
@@ -16,6 +16,7 @@ function clampServoAngle(config, value) {
export function ControlSystemProvider({ children }) {
const pipeline = useCommandPipeline();
const [state, dispatch] = useReducer(controlReducer, initialControlState);
const servoAngleRef = useRef(initialControlState.camera.angle);
useEffect(() => {
dispatch({ type: 'control/set-rover', payload: pipeline.roverId });
@@ -31,6 +32,7 @@ export function ControlSystemProvider({ children }) {
const config = pipeline.servoConfig;
if (!config) {
dispatch({ type: 'control/set-camera-config', payload: { config: null } });
servoAngleRef.current = null;
return;
}
const min = typeof config.minAngle === 'number' ? config.minAngle : -45;
@@ -40,8 +42,14 @@ export function ControlSystemProvider({ children }) {
type: 'control/set-camera-config',
payload: { config, angle: clamp(base, min, max) },
});
servoAngleRef.current = clamp(base, min, max);
}, [pipeline.servoConfig]);
useEffect(() => {
servoAngleRef.current =
typeof state.camera.angle === 'number' ? state.camera.angle : servoAngleRef.current;
}, [state.camera.angle]);
useEffect(() => {
if (pipeline.roverId) {
pipeline.enableSensorStream();
@@ -84,6 +92,7 @@ export function ControlSystemProvider({ children }) {
const clamped = clampServoAngle(pipeline.servoConfig, value);
dispatch({ type: 'control/set-camera-angle', payload: clamped });
pipeline.sendServoAngle(clamped);
servoAngleRef.current = clamped;
},
[pipeline],
);
@@ -94,14 +103,14 @@ export function ControlSystemProvider({ children }) {
if (!config) return;
const step = typeof delta === 'number' && delta !== 0 ? delta : config.nudgeDegrees || 1;
const baseline =
typeof state.camera.angle === 'number'
? state.camera.angle
typeof servoAngleRef.current === 'number'
? servoAngleRef.current
: typeof config.homeAngle === 'number'
? config.homeAngle
: 0;
setServoAngle(baseline + step);
},
[pipeline.servoConfig, setServoAngle, state.camera.angle],
[pipeline.servoConfig, setServoAngle],
);
const goServoHome = useCallback(() => {
webui/src/controls/inputs/KeyboardInputManager.jsx
+44 -3
View File
@@ -5,6 +5,30 @@ const SOURCE = 'keyboard';
const ZERO_VECTOR = { x: 0, y: 0, boost: false };
const ZERO_AUX = { main: 0, side: 0, vacuum: 0 };
const SERVO_REPEAT_MS = 110;
const KEY_ALIASES = {
'{': '[',
'}': ']',
':': ';',
'"': "'",
'<': ',',
'>': '.',
'?': '/',
'|': '\\',
'_': '-',
'+': '=',
};
const CODE_ALIASES = {
BracketLeft: '[',
BracketRight: ']',
Backslash: '\\',
Semicolon: ';',
Quote: "'",
Comma: ',',
Period: '.',
Slash: '/',
Minus: '-',
Equal: '=',
};
function shouldIgnoreEvent(event) {
const target = event.target;
@@ -18,15 +42,32 @@ function shouldIgnoreEvent(event) {
);
}
function canonicalizeBinding(value) {
if (typeof value !== 'string') return '';
const lower = value.toLowerCase();
return KEY_ALIASES[lower] ?? lower;
}
function normalizeKeymap(keymap = {}) {
const entries = Object.entries(keymap).map(([action, bindings]) => {
const values = Array.isArray(bindings) ? bindings : [bindings];
const normalized = new Set(values.map((value) => String(value).toLowerCase()));
const normalized = new Set(values.map((value) => canonicalizeBinding(String(value))));
return [action, normalized];
});
return Object.fromEntries(entries);
}
function canonicalizeEventKey(event) {
if (!event) return '';
const code = event.code;
if (code && CODE_ALIASES[code]) {
return CODE_ALIASES[code];
}
const key = event.key ?? '';
const lower = key.toLowerCase();
return KEY_ALIASES[lower] ?? lower;
}
function bindingHas(bindingSet, key) {
if (!bindingSet || bindingSet.size === 0) return false;
return bindingSet.has(key);
@@ -194,7 +235,7 @@ export default function KeyboardInputManager() {
useEffect(() => {
function handleKeyDown(event) {
if (shouldIgnoreEvent(event)) return;
const key = event.key?.toLowerCase();
const key = canonicalizeEventKey(event);
if (!key) return;
if (actionKeys.has(key)) {
event.preventDefault();
@@ -221,7 +262,7 @@ export default function KeyboardInputManager() {
}
function handleKeyUp(event) {
const key = event.key?.toLowerCase();
const key = canonicalizeEventKey(event);
if (!key || !pressedKeysRef.current.has(key)) {
if (bindingHas(keymap.cameraUp, key)) {
cameraHoldRef.current.delete('up');