simplitif

This commit is contained in:
legop3
2025-11-15 22:57:39 -05:00
parent e87938746c
commit f645390c92
3 changed files with 25 additions and 40 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-CFSn5fM6.js"></script> <script type="module" crossorigin src="/assets/index-Bd9-jciT.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-BLqBO1Eu.css"> <link rel="stylesheet" crossorigin href="/assets/index-BLqBO1Eu.css">
</head> </head>
<body> <body>
+18 -33
View File
@@ -13,22 +13,14 @@ export default function VideoTile({ sessionInfo, label, forceMute = false, telem
const [restartToken, setRestartToken] = useState(0); const [restartToken, setRestartToken] = useState(0);
const [muted, setMuted] = useState(true); const [muted, setMuted] = useState(true);
const sensors = telemetryFrame?.sensors; const sensors = telemetryFrame?.sensors;
const batteryCharge = const batteryCharge = sensors?.batteryChargeMah ?? null;
sensors?.batteryChargeMah ?? const batteryCapacity = sensors?.batteryCapacityMah ?? null;
sensors?.batteryCharge ?? // console.log('[BatteryBarDebug]', {
sensors?.battery?.charge ?? // frameSensors: sensors,
null; // batteryCharge,
const batteryCapacity = // batteryCapacity,
sensors?.batteryCapacityMah ?? // config: batteryConfig,
sensors?.batteryCapacity ?? // });
sensors?.battery?.capacity ??
null;
console.log('[BatteryBarDebug]', {
frameSensors: sensors,
batteryCharge,
batteryCapacity,
config: batteryConfig,
});
const wheelOvercurrents = sensors?.wheelOvercurrents || null; const wheelOvercurrents = sensors?.wheelOvercurrents || null;
const overcurrentActive = Boolean( const overcurrentActive = Boolean(
wheelOvercurrents && Object.values(wheelOvercurrents).some((value) => Boolean(value)), wheelOvercurrents && Object.values(wheelOvercurrents).some((value) => Boolean(value)),
@@ -157,17 +149,10 @@ export default function VideoTile({ sessionInfo, label, forceMute = false, telem
} }
function BatteryBar({ charge, capacity, config, label, status }) { function BatteryBar({ charge, capacity, config, label, status }) {
if (!config) { const full = config?.Full;
return null; const warn = config?.Warn;
} const urgent = config?.Urgent ?? null;
if (charge == null || full == null || warn == null) {
const normalizedConfig = {
full: config.full ?? config.Full ?? 0,
warn: config.warn ?? config.Warn ?? 0,
urgent: config.urgent ?? config.Urgent ?? null,
};
if (charge == null || normalizedConfig.full === 0 || normalizedConfig.warn == null) {
return ( return (
<div className="rounded-sm bg-[#1e1e1e] px-2 py-1 text-sm text-slate-200"> <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"> <div className="flex items-center justify-between text-xs text-slate-400">
@@ -179,15 +164,15 @@ function BatteryBar({ charge, capacity, config, label, status }) {
); );
} }
const span = normalizedConfig.full - normalizedConfig.warn; const span = full - warn;
if (span <= 0) return null; if (span <= 0) return null;
const normalized = (charge - normalizedConfig.warn) / span; const normalized = (charge - warn) / span;
const percent = Math.min(1, Math.max(0, normalized)); const percent = Math.min(1, Math.max(0, normalized));
const percentDisplay = Math.round(percent * 100); const percentDisplay = Math.round(percent * 100);
const percentText = `${percentDisplay}%`; const percentText = `${percentDisplay}%`;
const depleted = normalized <= 0; const depleted = normalized <= 0;
const urgent = normalizedConfig.urgent != null && charge <= normalizedConfig.urgent; const warnTriggered = urgent != null && charge <= urgent;
const barClass = depleted ? 'bg-red-500 animate-pulse' : urgent ? 'bg-amber-400' : 'bg-emerald-500'; const barClass = depleted ? 'bg-red-500 animate-pulse' : warnTriggered ? 'bg-amber-400' : 'bg-emerald-500';
const capText = capacity ? `${charge}/${capacity}` : `${charge}`; const capText = capacity ? `${charge}/${capacity}` : `${charge}`;
return ( return (
<div className="space-y-2 rounded-sm bg-[#1e1e1e] px-2 py-2 text-sm text-slate-200"> <div className="space-y-2 rounded-sm bg-[#1e1e1e] px-2 py-2 text-sm text-slate-200">
@@ -195,10 +180,10 @@ function BatteryBar({ charge, capacity, config, label, status }) {
<span>{label}</span> <span>{label}</span>
<span>{status}</span> <span>{status}</span>
</div> </div>
<div className="flex items-center justify-between text-sm"> {/* <div className="flex items-center justify-between text-sm">
<span>Battery</span> <span>Battery</span>
<span>{capText} mAh</span> <span>{capText} mAh</span>
</div> </div> */}
<div className="relative h-4 w-full rounded-full bg-slate-800"> <div className="relative h-4 w-full rounded-full bg-slate-800">
<div className={`h-full rounded-full transition-[width] ${barClass}`} style={{ width: `${percentDisplay}%` }} /> <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"> <span className="absolute inset-0 flex items-center justify-center text-xs font-semibold text-black/80">