the old fashioned bars are back

This commit is contained in:
legop3
2025-12-28 00:47:18 -05:00
parent 061d4d4689
commit ff638d84d2
5 changed files with 62 additions and 11 deletions
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
+2 -2
View File
@@ -11,8 +11,8 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="apple-mobile-web-app-title" content="Multi Roomba Rover" />
<title>Multi Roomba Rover</title>
<script type="module" crossorigin src="/assets/index-CEzIr1Vb.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-D2GpvMU5.css">
<script type="module" crossorigin src="/assets/index-CC16_icM.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-DUNdvQw9.css">
</head>
<body>
<div id="root"></div>
+55 -4
View File
@@ -382,7 +382,12 @@ export default function VideoTile({
<BatteryBarVertical visual={batteryVisual} />
) : null}
</div>
{!showVerticalBattery && <BatteryBar visual={batteryVisual} />}
{!showVerticalBattery && (
<div className="space-y-0.25">
<LightBumpBars sensors={sensors} />
<BatteryBar visual={batteryVisual} />
</div>
)}
</div>
);
}
@@ -426,6 +431,52 @@ function BatteryBarVertical({ visual }) {
);
}
function LightBumpBars({ sensors }) {
const values = [
sensors?.lightBumpLeftSignal,
sensors?.lightBumpFrontLeftSignal,
sensors?.lightBumpCenterLeftSignal,
sensors?.lightBumpCenterRightSignal,
sensors?.lightBumpFrontRightSignal,
sensors?.lightBumpRightSignal,
];
const max = values.filter((v) => v != null).reduce((acc, v) => Math.max(acc, v), 1200);
const eased = (v) => Math.pow(Math.max(0, Math.min(1, (v ?? 0) / max)), 0.35);
const hueFor = (v) => {
if (v == null || v <= 0) return 'hsl(200 60% 18%)';
const h = (200 + eased(v) * 360) % 360;
return `hsl(${h} 100% 60%)`;
};
const segments = 6;
const gap = 2;
const barHeight = 12;
return (
<div className="flex w-full items-center justify-center gap-1">
{values.map((v, idx) => {
const t = eased(v);
const dir = idx < segments / 2 ? -1 : 1; // left bars fill left, right bars fill right
const fill = `${t * 100}%`;
const color = hueFor(v);
return (
<div key={idx} className="relative flex-1 min-w-[0]" style={{ height: `${barHeight}px` }}>
<div className="h-full w-full overflow-hidden bg-slate-800" style={{ borderRadius: 0 }}>
<div
className="h-full"
style={{
width: fill,
background: color,
float: dir === -1 ? 'right' : 'left',
}}
/>
</div>
</div>
);
})}
</div>
);
}
function HudOverlay({
frame,
sensors,
@@ -545,9 +596,9 @@ function HudOverlay({
<TopDownMap sensors={sensors} size={240} overlay />
</div>
) : null}
</div>
);
}
</div>
);
}
const OVERCURRENT_LABELS = {
leftWheel: 'Left wheel',