mirror of
https://github.com/legop3/MultiRoombaRover.git
synced 2026-09-16 01:21:20 -04:00
the old fashioned bars are back
This commit is contained in:
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
@@ -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>
|
||||
|
||||
@@ -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',
|
||||
|
||||
Reference in New Issue
Block a user