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

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-status-bar-style" content="black-translucent" />
<meta name="apple-mobile-web-app-title" content="Multi Roomba Rover" /> <meta name="apple-mobile-web-app-title" content="Multi Roomba Rover" />
<title>Multi Roomba Rover</title> <title>Multi Roomba Rover</title>
<script type="module" crossorigin src="/assets/index-DQXlMy0M.js"></script> <script type="module" crossorigin src="/assets/index-CO1H_x4Z.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-Ddjg29wD.css"> <link rel="stylesheet" crossorigin href="/assets/index-be89mHSW.css">
</head> </head>
<body> <body>
<div id="root"></div> <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'; 'border-amber-300/70 bg-amber-900 text-amber-50 hover:bg-amber-800 focus-visible:ring-amber-300';
const indigoCta = const indigoCta =
'border-indigo-300/70 bg-indigo-900 text-indigo-50 hover:bg-indigo-800 focus-visible:ring-indigo-300'; '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 forceExpanded = dockingInProgress;
const expanded = expand || forceExpanded; const expanded = expand || forceExpanded;
const filledHeight = expanded ? 'h-full flex-1' : fill ? 'flex-1' : ''; const filledHeight = expanded ? 'h-full flex-1' : fill ? 'flex-1' : '';
const compactHeight = isMobile && !expanded ? compactHeightClass : ''; const compactHeight = isMobile && !expanded ? compactHeightClass : '';
const layoutClass = isMobile && !expanded ? compactLayout : ctaLayout; const layoutClass = isMobile && !expanded ? compactLayout : ctaLayout;
const compactDockedDriving = isMobile && !expanded && driving && docked;
if (!driving && !dockingInProgress) { if (!driving && !dockingInProgress) {
return ( return (
@@ -237,7 +240,7 @@ export default function DriveDockAction({
if (dockingInProgress) { if (dockingInProgress) {
const inProgressCopy = { 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'], 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()} onContextMenu={(event) => event.preventDefault()}
className={ className={
isMobile 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}` : `${baseCardClasses} ${filledHeight} ${ctaText} ${ctaLayout} ${ctaSize} ${indigoCta}`
} }
> >
<div className="flex w-full flex-col items-center gap-0.25"> <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 ? ( {!isMobile && expanded ? (
<div className="flex flex-wrap items-center justify-center gap-0.5"> <div className="flex flex-wrap items-center justify-center gap-0.5">
{dockKeyLabel ? <KeyPill label={dockKeyLabel} /> : null} {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]); }, [disabled, stopTracking]);
const heightClass = layout === 'landscape' ? 'h-[260px]' : 'h-[220px]'; const heightClass = 'h-full';
return ( return (
<div <div
ref={containerRef} ref={containerRef}
role="presentation" 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' }} style={{ touchAction: 'none' }}
onPointerDown={handlePointerDown} onPointerDown={handlePointerDown}
onPointerMove={handlePointerMove} onPointerMove={handlePointerMove}
@@ -102,9 +102,9 @@ function FloatingJoystick({ disabled, layout, radius, onMove, onStop }) {
onContextMenu={(event) => event.preventDefault()} onContextMenu={(event) => event.preventDefault()}
> >
{!visual.active && ( {!visual.active && (
<div className="absolute inset-0 flex flex-col items-center justify-center text-center text-xs text-slate-400"> <div className="absolute inset-x-0 top-0 flex flex-col items-center gap-0 text-center pt-0.5">
<p>Touch and hold anywhere</p> <span className="font-semibold text-slate-200">Joystick area</span>
<p>Joystick will follow your thumb</p> <span className="text-sm text-slate-300">Touch and hold to use the joystick</span>
</div> </div>
)} )}
{visual.active && ( {visual.active && (
@@ -176,7 +176,6 @@ function MobileJoystickPanel({ layout }) {
registerInputState(SOURCE, { vector: zero, lastEvent: 'stop' }); registerInputState(SOURCE, { vector: zero, lastEvent: 'stop' });
}, [disabled, registerInputState, setDriveVector]); }, [disabled, registerInputState, setDriveVector]);
const fillClass = dockedNotDriving ? 'max-h-screen self-start' : ''; const fillClass = dockedNotDriving ? 'max-h-screen self-start' : '';
const containerClass = `flex h-full flex-col gap-0.5 text-slate-100 ${fillClass}`; 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]" compactHeightClass="min-h-[5rem]"
/> />
{!expandAction ? ( {!expandAction ? (
<> <div className="flex-1 min-h-0">
<FloatingJoystick <FloatingJoystick
disabled={disabled} disabled={disabled}
layout={layout} layout={layout}
@@ -197,7 +196,7 @@ function MobileJoystickPanel({ layout }) {
onMove={handleMove} onMove={handleMove}
onStop={handleStop} onStop={handleStop}
/> />
</> </div>
) : null} ) : null}
{/* Panic stop button can be re-enabled here if needed */} {/* Panic stop button can be re-enabled here if needed */}