legop3/MultiRoombaRover
1
0
Fork 0
mirror of https://github.com/legop3/MultiRoombaRover.git synced 2026-09-16 17:40:46 -04:00
Code Issues Actions Packages Projects Releases Wiki Activity

the old fashioned bars are back

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files
server/public/assets/index-CEzIr1Vb.js → server/public/assets/index-CC16_icM.js
+4 -4
View File
File diff suppressed because one or more lines are too long
server/public/assets/index-D2GpvMU5.css
-1
View File
File diff suppressed because one or more lines are too long
server/public/assets/index-DUNdvQw9.css
+1
View File
File diff suppressed because one or more lines are too long
server/public/index.html
+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-status-bar-style" content="black-translucent" />
<meta name="apple-mobile-web-app-title" content="Multi Roomba Rover" /> <meta name="apple-mobile-web-app-title" content="Multi Roomba Rover" />
<title>Multi Roomba Rover</title> <title>Multi Roomba Rover</title>
<script type="module" crossorigin src="/assets/index-CEzIr1Vb.js"></script> <script type="module" crossorigin src="/assets/index-CC16_icM.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-D2GpvMU5.css"> <link rel="stylesheet" crossorigin href="/assets/index-DUNdvQw9.css">
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>
webui/src/components/VideoTile.jsx
+55 -4
View File
@@ -382,7 +382,12 @@ export default function VideoTile({
<BatteryBarVertical visual={batteryVisual} /> <BatteryBarVertical visual={batteryVisual} />
) : null} ) : null}
</div> </div>
{!showVerticalBattery && <BatteryBar visual={batteryVisual} />} {!showVerticalBattery && (
<div className="space-y-0.25">
<LightBumpBars sensors={sensors} />
<BatteryBar visual={batteryVisual} />
</div>
)}
</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({ function HudOverlay({
frame, frame,
sensors, sensors,
@@ -545,9 +596,9 @@ function HudOverlay({
<TopDownMap sensors={sensors} size={240} overlay /> <TopDownMap sensors={sensors} size={240} overlay />
</div> </div>
) : null} ) : null}
</div> </div>
); );
} }
const OVERCURRENT_LABELS = { const OVERCURRENT_LABELS = {
leftWheel: 'Left wheel', leftWheel: 'Left wheel',