mirror of
https://github.com/legop3/MultiRoombaRover.git
synced 2026-09-15 17:12:59 -04:00
guhguh
This commit is contained in:
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -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-DXMuVRMQ.js"></script>
|
||||
<script type="module" crossorigin src="/assets/index-Cgpf9lLe.js"></script>
|
||||
<link rel="stylesheet" crossorigin href="/assets/index-DxO2_uri.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
@@ -3,7 +3,6 @@ import { useControlSystem } from '../controls/index.js';
|
||||
import AuthPanel from './AuthPanel.jsx';
|
||||
import AdminPanel from './AdminPanel.jsx';
|
||||
import KeymapSettings from './KeymapSettings.jsx';
|
||||
import InputSettings from './InputSettings.jsx';
|
||||
import GamepadMappingSettings from './GamepadMappingSettings.jsx';
|
||||
|
||||
const manualTabs = [
|
||||
@@ -36,7 +35,6 @@ export default function AdvancedSettings() {
|
||||
return (
|
||||
<div className="space-y-1">
|
||||
<KeymapSettings />
|
||||
{/* <InputSettings /> */}
|
||||
<GamepadMappingSettings />
|
||||
<section className="rounded-sm bg-[#242a32] p-1 text-sm text-slate-100">
|
||||
<p className="text-xs text-slate-400">Manual OI commands</p>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { useEffect, useMemo, useRef, useState } from 'react';
|
||||
import { useSettingsNamespace } from '../settings/index.js';
|
||||
import { GAMEPAD_MAPPING_DEFAULT } from '../settings/namespaces.js';
|
||||
import { GAMEPAD_MAPPING_DEFAULT, INPUT_SETTINGS_DEFAULTS } from '../settings/namespaces.js';
|
||||
|
||||
function useGamepad() {
|
||||
const [connected, setConnected] = useState(false);
|
||||
@@ -24,6 +24,8 @@ function useGamepad() {
|
||||
return connected;
|
||||
}
|
||||
|
||||
const NUMBER_FORMAT = new Intl.NumberFormat(undefined, { maximumFractionDigits: 2 });
|
||||
|
||||
const ACTIONS = [
|
||||
{ id: 'driveHorizontal', label: 'Drive horizontal', type: 'axis', section: 'Drive joystick', path: ['drive', 'horizontal'] },
|
||||
{ id: 'driveVertical', label: 'Drive vertical', type: 'axis', section: 'Drive joystick', path: ['drive', 'vertical'] },
|
||||
@@ -38,6 +40,27 @@ const ACTIONS = [
|
||||
{ id: 'dock', label: 'Dock macro button', type: 'button', section: 'Mode buttons', path: ['buttons', 'dock'] },
|
||||
];
|
||||
|
||||
function SliderField({ label, description, min, max, step, value, onChange }) {
|
||||
return (
|
||||
<label className="block rounded border border-white/5 p-1">
|
||||
<div className="flex items-center justify-between text-xs text-slate-300">
|
||||
<span className="font-semibold text-slate-100">{label}</span>
|
||||
<span className="font-mono text-slate-400">{NUMBER_FORMAT.format(value)}</span>
|
||||
</div>
|
||||
{description && <p className="text-[0.65rem] text-slate-500">{description}</p>}
|
||||
<input
|
||||
type="range"
|
||||
min={min}
|
||||
max={max}
|
||||
step={step}
|
||||
value={value}
|
||||
onChange={(event) => onChange(Number(event.target.value))}
|
||||
className="mt-1 w-full accent-emerald-400"
|
||||
/>
|
||||
</label>
|
||||
);
|
||||
}
|
||||
|
||||
function formatAxis(value) {
|
||||
if (!value) return 'Unassigned';
|
||||
return `Axis ${value.index}${value.invert ? ' (invert)' : ''}`;
|
||||
@@ -59,9 +82,18 @@ function updatePath(mapping, path, updater) {
|
||||
export default function GamepadMappingSettings() {
|
||||
const gamepadConnected = useGamepad();
|
||||
const { value: mapping, save, reset } = useSettingsNamespace('gamepadMapping', GAMEPAD_MAPPING_DEFAULT);
|
||||
const { value: inputSettings, save: saveInputSettings } = useSettingsNamespace('inputs', INPUT_SETTINGS_DEFAULTS);
|
||||
const gamepadTuning = inputSettings.gamepad ?? INPUT_SETTINGS_DEFAULTS.gamepad;
|
||||
const [capture, setCapture] = useState(null);
|
||||
const axisBaselineRef = useRef(null);
|
||||
|
||||
const updateTuning = (patch) => {
|
||||
saveInputSettings((prev) => ({
|
||||
...prev,
|
||||
gamepad: { ...(prev.gamepad ?? INPUT_SETTINGS_DEFAULTS.gamepad), ...patch },
|
||||
}));
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
axisBaselineRef.current = null;
|
||||
}, [capture]);
|
||||
@@ -152,6 +184,47 @@ export default function GamepadMappingSettings() {
|
||||
</button>
|
||||
</div>
|
||||
<div className="mt-2 space-y-2">
|
||||
<div className="rounded border border-white/5 p-1">
|
||||
<p className="text-[0.7rem] uppercase tracking-wide text-slate-500">Sensitivity & feel</p>
|
||||
<div className="mt-1 space-y-1">
|
||||
<SliderField
|
||||
label="Drive deadzone"
|
||||
description="Ignore small drive stick movement"
|
||||
min={0}
|
||||
max={0.6}
|
||||
step={0.01}
|
||||
value={gamepadTuning.driveDeadzone ?? 0.2}
|
||||
onChange={(driveDeadzone) => updateTuning({ driveDeadzone })}
|
||||
/>
|
||||
<SliderField
|
||||
label="Camera deadzone"
|
||||
description="Tilt stick sensitivity"
|
||||
min={0}
|
||||
max={0.6}
|
||||
step={0.01}
|
||||
value={gamepadTuning.cameraDeadzone ?? 0.25}
|
||||
onChange={(cameraDeadzone) => updateTuning({ cameraDeadzone })}
|
||||
/>
|
||||
<SliderField
|
||||
label="Servo step (deg)"
|
||||
description="Degrees per camera tick"
|
||||
min={0.5}
|
||||
max={6}
|
||||
step={0.25}
|
||||
value={gamepadTuning.servoStep ?? 2}
|
||||
onChange={(servoStep) => updateTuning({ servoStep })}
|
||||
/>
|
||||
<SliderField
|
||||
label="Side reverse multiplier"
|
||||
description="Scale when reversing the side brush"
|
||||
min={0.3}
|
||||
max={1}
|
||||
step={0.05}
|
||||
value={gamepadTuning.auxReverseScale ?? 0.55}
|
||||
onChange={(auxReverseScale) => updateTuning({ auxReverseScale })}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{Object.entries(grouped).map(([section, actions]) => (
|
||||
<div key={section} className="rounded border border-white/5 p-1">
|
||||
<p className="text-[0.7rem] uppercase tracking-wide text-slate-500">{section}</p>
|
||||
|
||||
@@ -1,108 +0,0 @@
|
||||
import { useSettingsNamespace } from '../settings/index.js';
|
||||
import { INPUT_SETTINGS_DEFAULTS } from '../settings/namespaces.js';
|
||||
|
||||
const NUMBER_FORMAT = new Intl.NumberFormat(undefined, { maximumFractionDigits: 2 });
|
||||
|
||||
function SliderField({ label, description, min, max, step, value, onChange }) {
|
||||
return (
|
||||
<label className="block rounded border border-white/5 p-1">
|
||||
<div className="flex items-center justify-between text-xs text-slate-300">
|
||||
<span className="font-semibold text-slate-100">{label}</span>
|
||||
<span className="font-mono text-slate-400">{NUMBER_FORMAT.format(value)}</span>
|
||||
</div>
|
||||
{description && <p className="text-[0.65rem] text-slate-500">{description}</p>}
|
||||
<input
|
||||
type="range"
|
||||
min={min}
|
||||
max={max}
|
||||
step={step}
|
||||
value={value}
|
||||
onChange={(event) => onChange(Number(event.target.value))}
|
||||
className="mt-1 w-full accent-emerald-400"
|
||||
/>
|
||||
</label>
|
||||
);
|
||||
}
|
||||
|
||||
export default function InputSettings() {
|
||||
const { value, save } = useSettingsNamespace('inputs', INPUT_SETTINGS_DEFAULTS);
|
||||
const gamepad = value.gamepad ?? INPUT_SETTINGS_DEFAULTS.gamepad;
|
||||
const mobile = value.mobile ?? INPUT_SETTINGS_DEFAULTS.mobile;
|
||||
|
||||
const updateGamepad = (patch) => {
|
||||
save((prev) => ({
|
||||
...prev,
|
||||
gamepad: { ...(prev.gamepad ?? INPUT_SETTINGS_DEFAULTS.gamepad), ...patch },
|
||||
}));
|
||||
};
|
||||
|
||||
const updateMobile = (patch) => {
|
||||
save((prev) => ({
|
||||
...prev,
|
||||
mobile: { ...(prev.mobile ?? INPUT_SETTINGS_DEFAULTS.mobile), ...patch },
|
||||
}));
|
||||
};
|
||||
|
||||
return (
|
||||
<section className="rounded-sm bg-[#1d232b] p-1 text-sm text-slate-100">
|
||||
<p className="text-xs font-semibold uppercase tracking-wide text-slate-400">Input tuning</p>
|
||||
<div className="mt-2 space-y-2">
|
||||
<div>
|
||||
<p className="text-[0.7rem] uppercase tracking-wide text-slate-500">Gamepad</p>
|
||||
<div className="mt-1 space-y-1">
|
||||
<SliderField
|
||||
label="Drive deadzone"
|
||||
description="Ignore small stick movements"
|
||||
min={0}
|
||||
max={0.5}
|
||||
step={0.01}
|
||||
value={gamepad.driveDeadzone}
|
||||
onChange={(driveDeadzone) => updateGamepad({ driveDeadzone })}
|
||||
/>
|
||||
<SliderField
|
||||
label="Camera deadzone"
|
||||
description="Tilt stick sensitivity"
|
||||
min={0}
|
||||
max={0.5}
|
||||
step={0.01}
|
||||
value={gamepad.cameraDeadzone}
|
||||
onChange={(cameraDeadzone) => updateGamepad({ cameraDeadzone })}
|
||||
/>
|
||||
<SliderField
|
||||
label="Servo step"
|
||||
description="Degrees per camera tick"
|
||||
min={0.5}
|
||||
max={6}
|
||||
step={0.25}
|
||||
value={gamepad.servoStep}
|
||||
onChange={(servoStep) => updateGamepad({ servoStep })}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-[0.7rem] uppercase tracking-wide text-slate-500">Mobile joystick</p>
|
||||
<div className="mt-1 space-y-1">
|
||||
<SliderField
|
||||
label="Joystick radius"
|
||||
description="Drag distance needed for full speed"
|
||||
min={50}
|
||||
max={140}
|
||||
step={5}
|
||||
value={mobile.joystickRadius}
|
||||
onChange={(joystickRadius) => updateMobile({ joystickRadius })}
|
||||
/>
|
||||
<SliderField
|
||||
label="Smoothing"
|
||||
description="Lower values feel more direct"
|
||||
min={0}
|
||||
max={0.6}
|
||||
step={0.02}
|
||||
value={mobile.joystickSmoothing}
|
||||
onChange={(joystickSmoothing) => updateMobile({ joystickSmoothing })}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -1,11 +1,11 @@
|
||||
import { useCallback, useEffect, useRef, useState } from 'react';
|
||||
import { useControlSystem } from '../controls/index.js';
|
||||
import { clampUnit } from '../controls/controlMath.js';
|
||||
import { useSettingsNamespace } from '../settings/index.js';
|
||||
import { INPUT_SETTINGS_DEFAULTS } from '../settings/namespaces.js';
|
||||
import DriveModeToggle from './controls/DriveModeToggle.jsx';
|
||||
|
||||
const SOURCE = 'mobile-joystick';
|
||||
const JOYSTICK_RADIUS = 80;
|
||||
const JOYSTICK_SMOOTHING = 0.15;
|
||||
const AUX_BUTTONS = [
|
||||
{ id: 'main-forward', label: 'Main +', values: { main: 127 }, hold: true, color: 'bg-emerald-600' },
|
||||
{ id: 'main-reverse', label: 'Main -', values: { main: -127 }, hold: true, color: 'bg-emerald-800' },
|
||||
@@ -135,8 +135,6 @@ function MobileJoystickPanel({ layout }) {
|
||||
state: { roverId, camera },
|
||||
actions: { setDriveVector, registerInputState, stopAllMotion, setServoAngle },
|
||||
} = useControlSystem();
|
||||
const { value: inputSettings } = useSettingsNamespace('inputs', INPUT_SETTINGS_DEFAULTS);
|
||||
const mobileSettings = inputSettings.mobile ?? INPUT_SETTINGS_DEFAULTS.mobile;
|
||||
const disabled = !roverId;
|
||||
const cameraConfig = camera?.config;
|
||||
const cameraEnabled = Boolean(roverId && camera?.enabled && cameraConfig);
|
||||
@@ -145,11 +143,11 @@ function MobileJoystickPanel({ layout }) {
|
||||
const cameraValue =
|
||||
typeof camera?.angle === 'number'
|
||||
? camera.angle
|
||||
: typeof cameraConfig?.homeAngle === 'number'
|
||||
? cameraConfig.homeAngle
|
||||
: (cameraMin + cameraMax) / 2;
|
||||
const joystickRadius = Math.max(40, mobileSettings.joystickRadius ?? INPUT_SETTINGS_DEFAULTS.mobile.joystickRadius);
|
||||
const smoothing = Math.min(Math.max(mobileSettings.joystickSmoothing ?? 0, 0), 0.85);
|
||||
: typeof cameraConfig?.homeAngle === 'number'
|
||||
? cameraConfig.homeAngle
|
||||
: (cameraMin + cameraMax) / 2;
|
||||
const joystickRadius = JOYSTICK_RADIUS;
|
||||
const smoothing = JOYSTICK_SMOOTHING;
|
||||
const smoothedVectorRef = useRef({ x: 0, y: 0, boost: false });
|
||||
|
||||
useEffect(() => {
|
||||
|
||||
@@ -10,14 +10,6 @@ function applyDeadzone(value, amount) {
|
||||
return Math.abs(value) < amount ? 0 : value;
|
||||
}
|
||||
|
||||
function computeTriggerSpeed(button, reverseButton, max = 127, reverseScale = 1) {
|
||||
if (!button) return 0;
|
||||
const value = typeof button.value === 'number' ? button.value : button.pressed ? 1 : 0;
|
||||
if (value < 0.05) return 0;
|
||||
const direction = reverseButton?.pressed ? -1 : 1;
|
||||
return Math.round(value * max * direction * reverseScale);
|
||||
}
|
||||
|
||||
function vectorsEqual(a, b) {
|
||||
return (
|
||||
a &&
|
||||
|
||||
@@ -5,10 +5,6 @@ export const INPUT_SETTINGS_DEFAULTS = {
|
||||
servoStep: 2,
|
||||
auxReverseScale: 0.55,
|
||||
},
|
||||
mobile: {
|
||||
joystickRadius: 80,
|
||||
joystickSmoothing: 0.15,
|
||||
},
|
||||
};
|
||||
|
||||
export const GAMEPAD_MAPPING_DEFAULT = {
|
||||
|
||||
Reference in New Issue
Block a user