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 22:09:56 -05:00
parent d55726eb1f
commit 0caae506f4
9 changed files with 69 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files
webui/src/components/AdminPanel.jsx
+9 -9
View File
@@ -57,13 +57,13 @@ export default function AdminPanel() {
if (!isAdmin) return null;
return (
<section className="rounded-sm bg-[#242a32] p-1 text-xs text-slate-200">
<div className="flex items-center justify-between gap-1">
<section className="rounded-sm bg-[#242a32] p-2 text-base text-slate-100">
<div className="flex items-center justify-between gap-2 text-sm">
<span>Admin controls</span>
<select
value={currentMode}
onChange={handleModeChange}
className="rounded-sm bg-black/40 px-1 py-0.5 text-[0.7rem] text-slate-200"
className="rounded-sm bg-black/40 px-2 py-1 text-sm text-slate-100"
>
{MODES.map((mode) => (
<option key={mode.key} value={mode.key}>
@@ -73,25 +73,25 @@ export default function AdminPanel() {
</select>
</div>
<div className="mt-1 space-y-1">
<div className="mt-2 space-y-2 text-sm">
{roster.map((rover) => (
<div key={rover.id} className="flex flex-wrap items-center justify-between gap-1 rounded-sm bg-black/30 px-1 py-1">
<div key={rover.id} className="flex flex-wrap items-center justify-between gap-2 rounded-sm bg-black/30 px-2 py-2">
<div>
<p className="text-slate-100">{rover.name}</p>
<p className="text-[0.6rem] text-slate-500">{lockMap[rover.id] ? 'locked' : 'unlocked'}</p>
<p className="text-xs text-slate-400">{lockMap[rover.id] ? 'locked' : 'unlocked'}</p>
</div>
<div className="flex flex-wrap gap-1 text-[0.6rem]">
<div className="flex flex-wrap gap-1 text-xs">
<button
type="button"
onClick={() => handleLockToggle(rover.id, !lockMap[rover.id])}
className="rounded-sm bg-black/50 px-1 py-0.5 text-slate-100"
className="rounded-sm bg-black/50 px-2 py-1 text-slate-100"
>
{lockMap[rover.id] ? 'Unlock' : 'Lock'}
</button>
<button
type="button"
onClick={() => handleForceControl(rover.id)}
className="rounded-sm bg-black/50 px-1 py-0.5 text-slate-100"
className="rounded-sm bg-black/50 px-2 py-1 text-slate-100"
>
Force
</button>
webui/src/components/DrivePanel.jsx
+17 -16
View File
@@ -19,17 +19,17 @@ export default function DrivePanel() {
const updated = frame?.receivedAt ? new Date(frame.receivedAt).toLocaleTimeString() : null;
return (
<section className="rounded-sm bg-[#242a32] p-1 text-sm text-slate-100">
<div className="flex items-center justify-between text-xs text-slate-300">
<section className="rounded-sm bg-[#242a32] p-2 text-base text-slate-100">
<div className="flex items-center justify-between text-sm text-slate-300">
<span>Drive control</span>
<span>{roverId ? `Rover ${roverId}` : 'unassigned'}</span>
</div>
<div className="mt-1 space-y-1">
<div className="mt-2 space-y-2">
<ActionCard
title="Start Driving"
description="Press to enable driving mode, then start moving. The headlamps should illuminate."
statuses={[{ label: drivingMode ? 'Ready!' : 'Not Ready!', active: drivingMode }]}
gradient="from-emerald-600 to-emerald-400"
tone="emerald"
onClick={runStartDockFull}
disabled={!roverId}
footnote={updated ? `Sensor ping ${updated}` : null}
@@ -41,13 +41,13 @@ export default function DrivePanel() {
{ label: docked ? 'Docked!' : 'Not Docked!', active: docked },
{ label: charging ? 'Charging!' : 'Not Charging!', active: charging },
]}
gradient="from-indigo-600 to-purple-500"
tone="indigo"
onClick={seekDock}
disabled={!roverId}
/>
<SpeedRow left={speeds.left} right={speeds.right} />
<div>
<p className="text-xs text-slate-400">Manual OI</p>
<p className="text-sm text-slate-300">Manual OI</p>
<div className="mt-1 flex flex-wrap gap-1">
{manualOiButtons.map((btn) => (
<button
@@ -55,7 +55,7 @@ export default function DrivePanel() {
type="button"
onClick={() => sendOiCommand(btn.key)}
disabled={!roverId}
className="rounded-sm bg-black/40 px-1 py-0.5 text-[0.65rem] text-slate-200 disabled:opacity-30"
className="rounded-sm bg-black/40 px-2 py-0.5 text-sm text-slate-200 disabled:opacity-30"
>
{btn.label}
</button>
@@ -67,27 +67,28 @@ export default function DrivePanel() {
type="button"
onClick={stopMotors}
disabled={!roverId}
className="flex-1 rounded-sm bg-red-600/60 px-1 py-1 text-xs text-white disabled:opacity-40"
className="flex-1 rounded-sm bg-red-600/70 px-2 py-1 text-sm text-white disabled:opacity-40"
>
Stop motors
</button>
</div>
</div>
<p className="mt-1 text-[0.65rem] text-slate-500">Sensor streaming auto-starts after each OI change.</p>
<p className="mt-2 text-sm text-slate-400">Sensor streaming auto-starts after each OI change.</p>
</section>
);
}
function ActionCard({ title, description, statuses, gradient, onClick, disabled, footnote }) {
function ActionCard({ title, description, statuses, tone, onClick, disabled, footnote }) {
const baseColor = tone === 'indigo' ? 'bg-indigo-600' : 'bg-emerald-600';
return (
<button
type="button"
onClick={onClick}
disabled={disabled}
className={`w-full rounded-lg bg-gradient-to-r ${gradient} px-2 py-2 text-left text-white disabled:opacity-40`}
className={`w-full rounded-lg ${baseColor} px-3 py-2 text-left text-white disabled:opacity-40`}
>
<p className="text-base font-semibold">{title}</p>
<p className="text-sm text-emerald-50/80">{description}</p>
<p className="text-sm text-white/90">{description}</p>
<div className="mt-2 flex flex-wrap gap-1">
{statuses.map((status) => (
<span
@@ -107,13 +108,13 @@ function ActionCard({ title, description, statuses, gradient, onClick, disabled,
function SpeedRow({ left, right }) {
return (
<div className="grid grid-cols-2 gap-1 rounded-sm bg-black/40 p-1 text-[0.7rem]">
<div className="grid grid-cols-2 gap-1 rounded-sm bg-black/40 p-2 text-base">
<div>
<p className="text-[0.6rem] text-slate-500">Left</p>
<p className="text-sm text-slate-300">Left</p>
<p className="font-semibold text-slate-100">{left}</p>
</div>
<div>
<p className="text-[0.6rem] text-slate-500">Right</p>
<p className="text-sm text-slate-300">Right</p>
<p className="font-semibold text-slate-100">{right}</p>
</div>
</div>
@@ -123,7 +124,7 @@ function SpeedRow({ left, right }) {
function StatusPill({ label, active }) {
return (
<span
className={`rounded-sm px-1 py-0.5 text-[0.6rem] ${
className={`rounded-sm px-2 py-0.5 text-xs ${
active ? 'bg-emerald-500/30 text-emerald-100' : 'bg-black/40 text-slate-500'
}`}
>
webui/src/components/TelemetryPanel.jsx
+10 -10
View File
@@ -38,8 +38,8 @@ export default function TelemetryPanel() {
}
return (
<section className="rounded-sm bg-[#242a32] p-1 text-sm text-slate-200">
<div className="text-[0.7rem] text-slate-400">
<section className="rounded-sm bg-[#242a32] p-2 text-base text-slate-100">
<div className="text-sm text-slate-400">
<span>{connected ? 'online' : 'offline'}</span>
<span> · role {session?.role || 'unknown'}</span>
<span> · mode {session?.mode || '--'}</span>
@@ -50,7 +50,7 @@ export default function TelemetryPanel() {
) : !frame ? (
<p className="mt-1 text-[0.75rem] text-slate-400">Waiting for sensor frames…</p>
) : (
<div className="mt-1 space-y-1 text-[0.75rem]">
<div className="mt-2 space-y-1 text-base">
<Metric label="Charge" value={formatMetric(charge != null && capacity != null ? `${charge}/${capacity} mAh` : null)} />
<Metric label="Charging" value={formatMetric(sensors.chargingState?.label)} />
<Metric label="OI mode" value={formatMetric(sensors.oiMode?.label)} />
@@ -59,21 +59,21 @@ export default function TelemetryPanel() {
</div>
)}
{rawSnippet && (
<pre className="mt-1 overflow-hidden rounded-sm bg-black/60 p-1 text-[0.6rem] text-lime-300">
<pre className="mt-2 overflow-hidden rounded-sm bg-black/60 p-2 text-sm text-lime-300">
{rawSnippet}
</pre>
)}
<div className="mt-1">
<p className="text-xs text-slate-400">Rovers</p>
<div className="mt-2">
<p className="text-sm text-slate-400">Rovers</p>
{roster.length === 0 ? (
<p className="text-xs text-slate-500">No roster data.</p>
<p className="text-sm text-slate-500">No roster data.</p>
) : (
<ul className="mt-1 space-y-1 text-xs">
<ul className="mt-2 space-y-1 text-sm">
{roster.map((rover) => (
<li key={rover.id} className="flex items-center justify-between gap-1">
<div>
<p className="text-slate-200">{rover.name}</p>
<p className="text-[0.6rem] text-slate-500">
<p className="text-xs text-slate-500">
{rover.locked ? 'locked' : 'free'} · {rover.lastSeen ? 'seen' : 'unknown'}
</p>
</div>
@@ -82,7 +82,7 @@ export default function TelemetryPanel() {
type="button"
onClick={() => handleRequest(rover.id)}
disabled={pending[rover.id]}
className="rounded-sm bg-black/40 px-1 py-0.5 text-[0.6rem] text-slate-200 disabled:opacity-40"
className="rounded-sm bg-black/40 px-2 py-0.5 text-xs text-slate-200 disabled:opacity-40"
>
{pending[rover.id] ? '...' : 'request'}
</button>
webui/src/components/VideoTile.jsx
+10 -7
View File
@@ -145,9 +145,12 @@ export default function VideoTile({ sessionInfo, label, forceMute = false, telem
function BatteryBar({ charge, capacity, config, label, status }) {
if (charge == null || !config?.full || config.warn == null) {
return (
<div className="flex items-center justify-between text-xs text-slate-400">
<span>{label}</span>
<span>{status}</span>
<div className="rounded-sm bg-[#1e1e1e] px-2 py-1 text-sm text-slate-200">
<div className="flex items-center justify-between text-xs text-slate-400">
<span>{label}</span>
<span>{status}</span>
</div>
<p className="mt-1 text-xs text-slate-400">Battery telemetry unavailable</p>
</div>
);
}
@@ -161,16 +164,16 @@ function BatteryBar({ charge, capacity, config, label, status }) {
const barClass = depleted ? 'bg-red-500 animate-pulse' : urgent ? 'bg-amber-400' : 'bg-emerald-500';
const capText = capacity ? `${charge}/${capacity}` : `${charge}`;
return (
<div className="space-y-1 rounded-sm bg-[#111] p-1 text-xs text-slate-200">
<div className="flex items-center justify-between text-[0.65rem] text-slate-400">
<div className="space-y-2 rounded-sm bg-[#1e1e1e] px-2 py-2 text-sm text-slate-200">
<div className="flex items-center justify-between text-xs text-slate-400">
<span>{label}</span>
<span>{status}</span>
</div>
<div className="flex items-center justify-between text-[0.7rem]">
<div className="flex items-center justify-between text-sm">
<span>Battery</span>
<span>{capText} mAh</span>
</div>
<div className="h-2 w-full rounded-full bg-slate-800">
<div className="h-4 w-full rounded-full bg-slate-800">
<div className={`h-full rounded-full transition-[width] ${barClass}`} style={{ width: `${percentDisplay}%` }} />
</div>
</div>