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

guh!

Browse Source
This commit is contained in:
legop3
2025-11-15 23:14:29 -05:00
parent f645390c92
commit aa6808a400
8 changed files with 30 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files
server/public/assets/index-BLqBO1Eu.css
-1
View File
File diff suppressed because one or more lines are too long
server/public/assets/index-Bd9-jciT.js
-11
View File
File diff suppressed because one or more lines are too long
server/public/assets/index-D4pzotAD.js
+11
View File
File diff suppressed because one or more lines are too long
server/public/assets/index-D4wUVUN4.css
+1
View File
File diff suppressed because one or more lines are too long
server/public/index.html
+2 -2
View File
@@ -5,8 +5,8 @@
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>webui</title>
<script type="module" crossorigin src="/assets/index-Bd9-jciT.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-BLqBO1Eu.css">
<script type="module" crossorigin src="/assets/index-D4pzotAD.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-D4wUVUN4.css">
</head>
<body>
<div id="root"></div>
webui/src/App.jsx
+7 -7
View File
@@ -1,4 +1,4 @@
import { useEffect, useMemo, useState } from 'react';
import { useEffect, useState } from 'react';
import { useSession } from './context/SessionContext.jsx';
import { useTelemetryFrame } from './context/TelemetryContext.jsx';
import TelemetryPanel from './components/TelemetryPanel.jsx';
@@ -84,16 +84,16 @@ function DriverVideoPanel() {
const sources = useVideoRequests(roverId ? [roverId] : []);
const info = roverId ? sources[roverId] : null;
const frame = useTelemetryFrame(roverId);
const batteryConfig = useMemo(() => {
if (!roverId || !session?.roster) return null;
const record = session.roster.find((item) => String(item.id) === String(roverId));
return record?.battery ?? null;
}, [session?.roster, roverId]);
const batteryRecord =
roverId && session?.roster
? session.roster.find((item) => String(item.id) === String(roverId))
: null;
const batteryConfig = batteryRecord?.battery ?? null;
return (
<section className="rounded-sm bg-[#242a32] p-1">
{roverId ? (
<div className="min-h-[70vh]">
<div className="lg:min-h-[70vh]">
<VideoTile
sessionInfo={info}
label={roverId}
webui/src/components/MobileControls.jsx
+7 -3
View File
@@ -118,9 +118,13 @@ function AuxMotorControls() {
export default function MobileControlsStack() {
return (
<div className="flex flex-col gap-1">
<MobileJoystick />
<AuxMotorControls />
<div className="flex flex-col gap-1 sm:flex-row">
<div className="flex-1">
<MobileJoystick />
</div>
<div className="flex-1">
<AuxMotorControls />
</div>
</div>
);
}
webui/src/components/VideoTile.jsx
+2 -8
View File
@@ -14,7 +14,6 @@ export default function VideoTile({ sessionInfo, label, forceMute = false, telem
const [muted, setMuted] = useState(true);
const sensors = telemetryFrame?.sensors;
const batteryCharge = sensors?.batteryChargeMah ?? null;
const batteryCapacity = sensors?.batteryCapacityMah ?? null;
// console.log('[BatteryBarDebug]', {
// frameSensors: sensors,
// batteryCharge,
@@ -143,12 +142,12 @@ export default function VideoTile({ sessionInfo, label, forceMute = false, telem
<HudOverlay frame={telemetryFrame} />
<OvercurrentOverlay active={overcurrentActive} />
</div>
<BatteryBar charge={batteryCharge} capacity={batteryCapacity} config={batteryConfig} label={label} status={renderedStatus} />
<BatteryBar charge={batteryCharge} config={batteryConfig} label={label} status={renderedStatus} />
</div>
);
}
function BatteryBar({ charge, capacity, config, label, status }) {
function BatteryBar({ charge, config, label, status }) {
const full = config?.Full;
const warn = config?.Warn;
const urgent = config?.Urgent ?? null;
@@ -173,17 +172,12 @@ function BatteryBar({ charge, capacity, config, label, status }) {
const depleted = normalized <= 0;
const warnTriggered = urgent != null && charge <= urgent;
const barClass = depleted ? 'bg-red-500 animate-pulse' : warnTriggered ? 'bg-amber-400' : 'bg-emerald-500';
const capText = capacity ? `${charge}/${capacity}` : `${charge}`;
return (
<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-sm">
<span>Battery</span>
<span>{capText} mAh</span>
</div> */}
<div className="relative h-4 w-full rounded-full bg-slate-800">
<div className={`h-full rounded-full transition-[width] ${barClass}`} style={{ width: `${percentDisplay}%` }} />
<span className="absolute inset-0 flex items-center justify-center text-xs font-semibold text-black/80">