legop3/MultiRoombaRover
1
0
Fork 0
mirror of https://github.com/legop3/MultiRoombaRover.git synced 2026-09-16 09:31:20 -04:00
Code Issues Actions Packages Projects Releases Wiki Activity

guh

Browse Source
This commit is contained in:
legop3
2025-11-15 21:49:00 -05:00
parent 392e2f661b
commit edcb465630
13 changed files with 235 additions and 357 deletions
Download Patch File Download Diff File Expand all files Collapse all files
webui/src/components/DrivePanel.jsx
+23 -27
View File
@@ -19,25 +19,25 @@ export default function DrivePanel() {
const updated = frame?.receivedAt ? new Date(frame.receivedAt).toLocaleTimeString() : null;
return (
<section className="rounded-lg border border-slate-900 bg-slate-950/70 p-2 text-[0.8rem] text-slate-100">
<div className="flex items-center justify-between text-[0.65rem] uppercase tracking-[0.3em] text-slate-500">
<span>Drive Control</span>
<section className="rounded-sm bg-[#1b1b1b] p-1 text-sm text-slate-100">
<div className="flex items-center justify-between text-xs text-slate-400">
<span>Drive control</span>
<span>{roverId ? `Rover ${roverId}` : 'unassigned'}</span>
</div>
<div className="mt-2 space-y-2">
<div className="mt-1 space-y-1">
<div>
<button
type="button"
onClick={runStartDockFull}
disabled={!roverId}
className="w-full rounded border border-emerald-500/40 bg-emerald-500/10 py-1 text-[0.7rem] font-semibold uppercase tracking-[0.3em] text-emerald-200 disabled:opacity-40"
className="w-full rounded-sm bg-black/50 px-1 py-1 text-xs text-slate-200 disabled:opacity-30"
>
Enable Driving Mode
Enable driving mode
</button>
<p className="mt-1 text-[0.65rem] text-slate-400">Runs Start → Dock → Full commands to ready the rover.</p>
<div className="mt-1 flex flex-wrap items-center gap-1 text-[0.6rem]">
<StatusPill label="Driving mode" active={drivingMode} />
{updated && <span className="text-slate-500">Updated {updated}</span>}
<p className="mt-1 text-xs text-slate-400">Runs Start → Dock → Full to prep sensors.</p>
<div className="mt-1 flex flex-wrap items-center gap-1 text-[0.65rem]">
<StatusPill label="Driving" active={drivingMode} />
{updated && <span className="text-slate-500">Sensors {updated}</span>}
</div>
</div>
<div>
@@ -45,13 +45,11 @@ export default function DrivePanel() {
type="button"
onClick={seekDock}
disabled={!roverId}
className="w-full rounded border border-cyan-500/40 bg-cyan-500/10 py-1 text-[0.7rem] font-semibold uppercase tracking-[0.3em] text-cyan-200 disabled:opacity-40"
className="w-full rounded-sm bg-black/50 px-1 py-1 text-xs text-slate-200 disabled:opacity-30"
>
Seek Dock
Seek dock
</button>
<p className="mt-1 text-[0.65rem] text-slate-400">
Point the rover straight at the dock, about one foot away, before triggering.
</p>
<p className="mt-1 text-xs text-slate-400">Point the rover straight at the dock, about one foot away.</p>
<div className="mt-1 flex flex-wrap gap-1">
<StatusPill label={docked ? 'Docked' : 'Not docked'} active={docked} />
<StatusPill label={charging ? 'Charging' : 'Not charging'} active={charging} />
@@ -59,7 +57,7 @@ export default function DrivePanel() {
</div>
<SpeedRow left={speeds.left} right={speeds.right} />
<div>
<p className="text-[0.6rem] uppercase tracking-[0.3em] text-slate-500">Manual OI</p>
<p className="text-xs text-slate-400">Manual OI</p>
<div className="mt-1 flex flex-wrap gap-1">
{manualOiButtons.map((btn) => (
<button
@@ -67,7 +65,7 @@ export default function DrivePanel() {
type="button"
onClick={() => sendOiCommand(btn.key)}
disabled={!roverId}
className="rounded border border-slate-800 px-2 py-0.5 text-[0.65rem] uppercase tracking-[0.2em] text-slate-200 disabled:opacity-30"
className="rounded-sm bg-black/40 px-1 py-0.5 text-[0.65rem] text-slate-200 disabled:opacity-30"
>
{btn.label}
</button>
@@ -79,26 +77,26 @@ export default function DrivePanel() {
type="button"
onClick={stopMotors}
disabled={!roverId}
className="flex-1 rounded border border-red-500/50 bg-red-500/10 py-1 text-[0.7rem] font-semibold uppercase tracking-[0.3em] text-red-200 disabled:opacity-40"
className="flex-1 rounded-sm bg-red-600/60 px-1 py-1 text-xs text-white disabled:opacity-40"
>
Stop Motors
Stop motors
</button>
</div>
</div>
<p className="mt-2 text-[0.6rem] text-slate-500">Sensor streaming auto-starts after each OI change.</p>
<p className="mt-1 text-[0.65rem] text-slate-500">Sensor streaming auto-starts after each OI change.</p>
</section>
);
}
function SpeedRow({ left, right }) {
return (
<div className="grid grid-cols-2 gap-1 rounded border border-slate-900 bg-black/50 p-1 text-[0.7rem]">
<div className="grid grid-cols-2 gap-1 rounded-sm bg-black/40 p-1 text-[0.7rem]">
<div>
<p className="text-[0.55rem] uppercase tracking-[0.3em] text-slate-500">Left</p>
<p className="text-[0.6rem] text-slate-500">Left</p>
<p className="font-semibold text-slate-100">{left}</p>
</div>
<div>
<p className="text-[0.55rem] uppercase tracking-[0.3em] text-slate-500">Right</p>
<p className="text-[0.6rem] text-slate-500">Right</p>
<p className="font-semibold text-slate-100">{right}</p>
</div>
</div>
@@ -108,10 +106,8 @@ function SpeedRow({ left, right }) {
function StatusPill({ label, active }) {
return (
<span
className={`rounded-full border px-2 py-0.5 text-[0.55rem] uppercase tracking-[0.3em] ${
active
? 'border-emerald-400 bg-emerald-500/10 text-emerald-200'
: 'border-slate-700 bg-slate-900 text-slate-500'
className={`rounded-sm px-1 py-0.5 text-[0.6rem] ${
active ? 'bg-emerald-500/30 text-emerald-100' : 'bg-black/40 text-slate-500'
}`}
>
{label}