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

a few tweaks to dock drive action

Browse Source
This commit is contained in:
legop3
2026-01-31 21:44:01 -05:00
parent cb5e5ae755
commit 3cfb2683ef
4 changed files with 32 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
server/public/assets/index-DnLILP9P.js → server/public/assets/index-DQXlMy0M.js
+9 -9
View File
File diff suppressed because one or more lines are too long
server/public/index.html
+1 -1
View File
@@ -11,7 +11,7 @@
<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-DnLILP9P.js"></script> <script type="module" crossorigin src="/assets/index-DQXlMy0M.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-Ddjg29wD.css"> <link rel="stylesheet" crossorigin href="/assets/index-Ddjg29wD.css">
</head> </head>
<body> <body>
webui/src/components/DriveDockAction.jsx
+19 -14
View File
@@ -193,9 +193,11 @@ 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 filledHeight = expand ? 'h-full flex-1' : fill ? 'flex-1' : ''; const forceExpanded = dockingInProgress;
const compactHeight = isMobile && !expand ? compactHeightClass : ''; const expanded = expand || forceExpanded;
const layoutClass = isMobile && !expand ? compactLayout : ctaLayout; const filledHeight = expanded ? 'h-full flex-1' : fill ? 'flex-1' : '';
const compactHeight = isMobile && !expanded ? compactHeightClass : '';
const layoutClass = isMobile && !expanded ? compactLayout : ctaLayout;
if (!driving && !dockingInProgress) { if (!driving && !dockingInProgress) {
return ( return (
@@ -209,21 +211,21 @@ export default function DriveDockAction({
<div className="space-y-0.5 w-full"> <div className="space-y-0.5 w-full">
<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-emerald-50 md:text-lg">Start Driving</span> <span className="text-base font-semibold text-emerald-50 md:text-lg">Start Driving</span>
{!isMobile && expand ? ( {!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">
{driveKeyLabel ? <KeyPill label={driveKeyLabel} /> : null} {driveKeyLabel ? <KeyPill label={driveKeyLabel} /> : null}
<ActionPill label="Click to start" tone="emerald" /> <ActionPill label="Click to start" tone="emerald" />
</div> </div>
) : null} ) : null}
</div> </div>
{expand ? ( {expanded ? (
<> <>
<p className="text-sm text-emerald-50/90">{startDriveInstructions.summary}</p> <p className="text-sm text-emerald-50/90">{startDriveInstructions.summary}</p>
<StepList steps={startDriveInstructions.steps} tone="emerald" /> <StepList steps={startDriveInstructions.steps} tone="emerald" />
</> </>
) : null} ) : null}
</div> </div>
{expand ? ( {expanded ? (
<div className="flex w-full flex-1 flex-col gap-0.5 self-stretch"> <div className="flex w-full flex-1 flex-col gap-0.5 self-stretch">
<StatusRow label="Dock" value={dockValue} tone={dockTone} /> <StatusRow label="Dock" value={dockValue} tone={dockTone} />
<StatusRow label="Charge" value={chargeValue} tone={chargeTone} /> <StatusRow label="Charge" value={chargeValue} tone={chargeTone} />
@@ -235,7 +237,7 @@ export default function DriveDockAction({
if (dockingInProgress) { if (dockingInProgress) {
const inProgressCopy = { const inProgressCopy = {
summary: 'Docking attempt in progress.', summary: 'if the rover is not docking, 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'],
}; };
@@ -250,21 +252,24 @@ export default function DriveDockAction({
<div className="space-y-0.5 w-full"> <div className="space-y-0.5 w-full">
<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-amber-50 md:text-lg">Docking in Progress</span> <span className="text-base font-semibold text-amber-50 md:text-lg">Docking in Progress</span>
{!isMobile && expand ? ( {/* {!isMobile && expanded ? ( */}
{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">
<ActionPill label="Click to return to driving mode" tone="amber" /> <ActionPill label="Return to driving mode" tone="emerald" />
</div> </div>
) : null} ) : null}
</div> </div>
{expand ? <p className="text-sm text-amber-50/90">{inProgressCopy.summary}</p> : null} {expanded ? <p className="text-sm text-amber-50/90">{inProgressCopy.summary}</p> : null}
</div> </div>
{expand ? ( {expanded ? (
<> <>
<div className="flex w-full flex-1 flex-col gap-0.5 self-stretch"> <div className="flex w-full flex-1 flex-col gap-0.5 self-stretch">
<StatusRow label="Dock" value={dockValue} tone={dockTone} /> <StatusRow label="Dock" value={dockValue} tone={dockTone} />
<StatusRow label="Charge" value={chargeValue} tone={chargeTone} /> <StatusRow label="Charge" value={chargeValue} tone={chargeTone} />
</div> </div>
<StepList steps={inProgressCopy.steps} tone="amber" /> {!isMobile ? (
<StepList steps={inProgressCopy.steps} tone="amber" />
) : null}
</> </>
) : null} ) : null}
</button> </button>
@@ -286,14 +291,14 @@ export default function DriveDockAction({
> >
<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">Dock and Charge</span>
{!isMobile && expand ? ( {!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}
<ActionPill label="Click to begin docking" tone="indigo" /> <ActionPill label="Click to begin docking" tone="indigo" />
</div> </div>
) : null} ) : null}
</div> </div>
{!isMobile && expand && ( {!isMobile && expanded && (
<> <>
<p className="text-sm text-indigo-50/90">{dockButtonCaption}</p> <p className="text-sm text-indigo-50/90">{dockButtonCaption}</p>
<div className="flex w-full flex-1 flex-col gap-0.5 self-stretch"> <div className="flex w-full flex-1 flex-col gap-0.5 self-stretch">
webui/src/components/MobileControls.jsx
+3 -2
View File
@@ -133,6 +133,7 @@ function MobileJoystickPanel({ layout }) {
} = useControlSystem(); } = useControlSystem();
const driveDockState = useDriveDockState(roverId); const driveDockState = useDriveDockState(roverId);
const dockedNotDriving = driveDockState.docked && !driveDockState.driving; const dockedNotDriving = driveDockState.docked && !driveDockState.driving;
const expandAction = dockedNotDriving || driveDockState.dockingInProgress;
const disabled = !roverId; const disabled = !roverId;
const joystickRadius = JOYSTICK_RADIUS; const joystickRadius = JOYSTICK_RADIUS;
const smoothing = JOYSTICK_SMOOTHING; const smoothing = JOYSTICK_SMOOTHING;
@@ -183,11 +184,11 @@ function MobileJoystickPanel({ layout }) {
<div className={containerClass}> <div className={containerClass}>
<DriveDockAction <DriveDockAction
layout="mobile" layout="mobile"
expand={dockedNotDriving} expand={expandAction}
driveDockState={driveDockState} driveDockState={driveDockState}
compactHeightClass="min-h-[5rem]" compactHeightClass="min-h-[5rem]"
/> />
{!dockedNotDriving ? ( {!expandAction ? (
<> <>
<FloatingJoystick <FloatingJoystick
disabled={disabled} disabled={disabled}