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

dock drive action and joystick tweaks

Browse Source
This commit is contained in:
legop3
2026-01-31 22:00:09 -05:00
parent 3cfb2683ef
commit b4c122d914
6 changed files with 28 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
server/public/assets/index-DQXlMy0M.js → server/public/assets/index-CO1H_x4Z.js
+8 -8
View File
File diff suppressed because one or more lines are too long
server/public/assets/index-Ddjg29wD.css
-1
View File
File diff suppressed because one or more lines are too long
server/public/assets/index-be89mHSW.css
+1
View File
File diff suppressed because one or more lines are too long
server/public/index.html
+2 -2
View File
@@ -11,8 +11,8 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="apple-mobile-web-app-title" content="Multi Roomba Rover" />
<title>Multi Roomba Rover</title>
<script type="module" crossorigin src="/assets/index-DQXlMy0M.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-Ddjg29wD.css">
<script type="module" crossorigin src="/assets/index-CO1H_x4Z.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-be89mHSW.css">
</head>
<body>
<div id="root"></div>
webui/src/components/DriveDockAction.jsx
+10 -3
View File
@@ -193,11 +193,14 @@ export default function DriveDockAction({
'border-amber-300/70 bg-amber-900 text-amber-50 hover:bg-amber-800 focus-visible:ring-amber-300';
const indigoCta =
'border-indigo-300/70 bg-indigo-900 text-indigo-50 hover:bg-indigo-800 focus-visible:ring-indigo-300';
const orangeCta =
'border-amber-300/70 bg-amber-900 text-amber-50 hover:bg-amber-800 focus-visible:ring-amber-300';
const forceExpanded = dockingInProgress;
const expanded = expand || forceExpanded;
const filledHeight = expanded ? 'h-full flex-1' : fill ? 'flex-1' : '';
const compactHeight = isMobile && !expanded ? compactHeightClass : '';
const layoutClass = isMobile && !expanded ? compactLayout : ctaLayout;
const compactDockedDriving = isMobile && !expanded && driving && docked;
if (!driving && !dockingInProgress) {
return (
@@ -237,7 +240,7 @@ export default function DriveDockAction({
if (dockingInProgress) {
const inProgressCopy = {
summary: 'if the rover is not docking, click to drive and try again.',
summary: 'If the rover is failing to dock, click to drive and try again.',
steps: ['The rover should be slowly wiggling towards the dock', 'If it is obviously not working, press this button to enter driving mode and try again'],
};
@@ -285,12 +288,16 @@ export default function DriveDockAction({
onContextMenu={(event) => event.preventDefault()}
className={
isMobile
? `flex w-full ${baseCardClasses} ${compactHeight} ${ctaText} ${layoutClass} ${ctaSize} ${indigoCta}`
? `flex w-full ${baseCardClasses} ${compactHeight} ${ctaText} ${layoutClass} ${ctaSize} ${
compactDockedDriving ? orangeCta : indigoCta
}`
: `${baseCardClasses} ${filledHeight} ${ctaText} ${ctaLayout} ${ctaSize} ${indigoCta}`
}
>
<div className="flex w-full flex-col items-center gap-0.25">
<span className="text-base font-semibold text-indigo-50 md:text-lg">Dock and Charge</span>
<span className="text-base font-semibold text-indigo-50 md:text-lg">
{compactDockedDriving ? 'Docked!' : 'Dock and Charge'}
</span>
{!isMobile && expanded ? (
<div className="flex flex-wrap items-center justify-center gap-0.5">
{dockKeyLabel ? <KeyPill label={dockKeyLabel} /> : null}
webui/src/components/MobileControls.jsx
+7 -8
View File
@@ -86,13 +86,13 @@ function FloatingJoystick({ disabled, layout, radius, onMove, onStop }) {
}
}, [disabled, stopTracking]);
const heightClass = layout === 'landscape' ? 'h-[260px]' : 'h-[220px]';
const heightClass = 'h-full';
return (
<div
ref={containerRef}
role="presentation"
className={`relative w-full ${heightClass} select-none overflow-hidden bg-zinc-950`}
className={`relative w-full ${heightClass} select-none overflow-hidden rounded-xl border-2 border-slate-700 bg-slate-900/70 text-slate-100 shadow-md`}
style={{ touchAction: 'none' }}
onPointerDown={handlePointerDown}
onPointerMove={handlePointerMove}
@@ -102,9 +102,9 @@ function FloatingJoystick({ disabled, layout, radius, onMove, onStop }) {
onContextMenu={(event) => event.preventDefault()}
>
{!visual.active && (
<div className="absolute inset-0 flex flex-col items-center justify-center text-center text-xs text-slate-400">
<p>Touch and hold anywhere</p>
<p>Joystick will follow your thumb</p>
<div className="absolute inset-x-0 top-0 flex flex-col items-center gap-0 text-center pt-0.5">
<span className="font-semibold text-slate-200">Joystick area</span>
<span className="text-sm text-slate-300">Touch and hold to use the joystick</span>
</div>
)}
{visual.active && (
@@ -176,7 +176,6 @@ function MobileJoystickPanel({ layout }) {
registerInputState(SOURCE, { vector: zero, lastEvent: 'stop' });
}, [disabled, registerInputState, setDriveVector]);
const fillClass = dockedNotDriving ? 'max-h-screen self-start' : '';
const containerClass = `flex h-full flex-col gap-0.5 text-slate-100 ${fillClass}`;
@@ -189,7 +188,7 @@ function MobileJoystickPanel({ layout }) {
compactHeightClass="min-h-[5rem]"
/>
{!expandAction ? (
<>
<div className="flex-1 min-h-0">
<FloatingJoystick
disabled={disabled}
layout={layout}
@@ -197,7 +196,7 @@ function MobileJoystickPanel({ layout }) {
onMove={handleMove}
onStop={handleStop}
/>
</>
</div>
) : null}
{/* Panic stop button can be re-enabled here if needed */}