This commit is contained in:
legop3
2025-11-18 13:49:31 -05:00
parent ff808476a2
commit f32c2549d7
3 changed files with 11 additions and 7 deletions
File diff suppressed because one or more lines are too long
+1 -1
View File
@@ -5,7 +5,7 @@
<link rel="icon" type="image/svg+xml" href="/vite.svg" /> <link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>webui</title> <title>webui</title>
<script type="module" crossorigin src="/assets/index-CBZPpEHW.js"></script> <script type="module" crossorigin src="/assets/index-B3XJIe5i.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-DHDtmVNU.css"> <link rel="stylesheet" crossorigin href="/assets/index-DHDtmVNU.css">
</head> </head>
<body> <body>
+9 -5
View File
@@ -143,7 +143,7 @@ export default function VideoTile({ sessionInfo, label, forceMute = false, telem
controls={false} controls={false}
className="h-full w-full object-contain" className="h-full w-full object-contain"
/> />
<HudOverlay frame={telemetryFrame} /> <HudOverlay frame={telemetryFrame} session={sessionInfo}/>
<OvercurrentOverlay motors={overcurrentMotors} /> <OvercurrentOverlay motors={overcurrentMotors} />
</div> </div>
<BatteryBar charge={batteryCharge} config={batteryConfig} label={label} status={renderedStatus} /> <BatteryBar charge={batteryCharge} config={batteryConfig} label={label} status={renderedStatus} />
@@ -159,7 +159,7 @@ function BatteryBar({ charge, config, label, status }) {
return ( return (
<div className="rounded-sm bg-[#1e1e1e] px-1 py-1 text-sm text-slate-200"> <div className="rounded-sm bg-[#1e1e1e] px-1 py-1 text-sm text-slate-200">
<div className="flex items-center justify-between text-xs text-slate-400"> <div className="flex items-center justify-between text-xs text-slate-400">
<span>{label}</span> {/* <span>{label}</span> */}
<span>{status}</span> <span>{status}</span>
</div> </div>
<p className="mt-1 text-xs text-slate-400">Battery telemetry unavailable</p> <p className="mt-1 text-xs text-slate-400">Battery telemetry unavailable</p>
@@ -192,7 +192,7 @@ function BatteryBar({ charge, config, label, status }) {
); );
} }
function HudOverlay({ frame }) { function HudOverlay({ frame, session }) {
const sensors = frame?.sensors; const sensors = frame?.sensors;
const bumps = sensors?.bumpsAndWheelDrops || {}; const bumps = sensors?.bumpsAndWheelDrops || {};
const [now, setNow] = useState(() => Date.now()); const [now, setNow] = useState(() => Date.now());
@@ -212,7 +212,7 @@ function HudOverlay({ frame }) {
// { label: 'Drop L', active: bumps.wheelDropLeft }, // { label: 'Drop L', active: bumps.wheelDropLeft },
// { label: 'Drop R', active: bumps.wheelDropRight }, // { label: 'Drop R', active: bumps.wheelDropRight },
// ]; // ];
console.log('session', session);
return ( return (
<div className="pointer-events-none absolute inset-0 flex items-center justify-center"> <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
{/* <div className="flex items-center justify-between gap-1"> {/* <div className="flex items-center justify-between gap-1">
@@ -231,8 +231,12 @@ function HudOverlay({ frame }) {
<HudBadge key={badge.label} label={badge.label} active={badge.active} /> <HudBadge key={badge.label} label={badge.label} active={badge.active} />
))} ))}
</div> */} </div> */}
{/* status that tells you the name of your rover */}
{/* bump and wheel drops bar */} {/* bump and wheel drops bar */}
<div className="absolute top-3 left-1/2 -translate-x-1/2 flex gap-1 rounded-full bg-gray-900/40 px-2 py-1"> <div className="absolute top-3 left-1/2 -translate-x-1/2 flex gap-1 rounded-full bg-gray-900/40 p-0.5 text-[0.55rem] font-medium">
<div className={`px-1 py-0.5 rounded-full ${bumps.bumpLeft ? 'bg-red-500 text-white animate-pulse' : 'bg-black/40 text-slate-500'}`}> <div className={`px-1 py-0.5 rounded-full ${bumps.bumpLeft ? 'bg-red-500 text-white animate-pulse' : 'bg-black/40 text-slate-500'}`}>
Left Bump Left Bump
</div> </div>