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

guh

Browse Source
This commit is contained in:
legop3
2025-11-18 22:24:30 -05:00
parent ed7804e0f3
commit ed233c1cb6
9 changed files with 61 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files
webui/src/components/LogPanel.jsx
+2 -2
View File
@@ -8,7 +8,7 @@ export default function LogPanel() {
<span>Server logs</span>
<span>{logs.length}</span>
</div>
<div className="surface h-64 overflow-y-auto space-y-0.5 font-mono text-xs">
<div className="surface h-64 overflow-y-auto font-mono text-xs">
{logs.length === 0 ? (
<p>No logs yet.</p>
) : (
@@ -16,7 +16,7 @@ export default function LogPanel() {
.slice()
.reverse()
.map((entry) => (
<div key={entry.id} className="surface-muted">
<div key={entry.id} className="surface">
<span className="text-amber-400">{entry.timestamp}</span>{' '}
<span className="text-lime-400">[{entry.level}]</span>{' '}
{entry.label && <span className="text-teal-400">[{entry.label}]</span>}{' '}
webui/src/components/Tabs.jsx
+1 -1
View File
@@ -14,7 +14,7 @@ const TAB_VARIANTS = {
primary: {
base: 'flex-1 px-0.5 py-0.5 text-sm font-medium transition-colors focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-1 focus-visible:outline-slate-500',
active: 'bg-sky-600 text-white',
inactive: 'bg-zinc-800 text-slate-200 hover:bg-sky-500 hover:text-white',
inactive: 'bg-zinc-900 text-slate-300 hover:bg-sky-500 hover:text-white',
},
};
webui/src/components/TelemetryPanel.jsx
+36 -14
View File
@@ -70,15 +70,23 @@ export default function TelemetryPanel() {
<Metric label="Left Encoder" value={formatMetric(sensors.encoderCountsLeft)} />
<Metric label="Right Encoder" value={formatMetric(sensors.encoderCountsRight)} />
</div>
<div className="flex gap-0.5">
<CliffBar value={sensors.cliffLeftSignal} />
<CliffBar value={sensors.cliffFrontLeftSignal} />
<CliffBar value={sensors.cliffFrontRightSignal} />
<CliffBar value={sensors.cliffRightSignal} />
<div className="surface space-y-0.5">
<div className="w-full text-center text-sm text-slate-300">Cliff Sensors</div>
<div className="flex gap-0.5 text-sm">
<CliffBar value={sensors.cliffLeftSignal} />
<CliffBar value={sensors.cliffFrontLeftSignal} />
<CliffBar value={sensors.cliffFrontRightSignal} />
<CliffBar value={sensors.cliffRightSignal} />
</div>
</div>
<MotorCurrentBar label="Left Wheel" value={sensors.wheelLeftCurrentMa} overcurrent={sensors.wheelOvercurrents.leftWheel}/>
</>
<div className="surface flex gap-0.5 text-sm">
<MotorCurrentBar label="Left Wheel" value={sensors.wheelLeftCurrentMa} overcurrent={sensors.wheelOvercurrents.leftWheel} />
<MotorCurrentBar label="Right Wheel" value={sensors.wheelRightCurrentMa} overcurrent={sensors.wheelOvercurrents.rightWheel} />
<MotorCurrentBar label="Side Brush" value={sensors.sideBrushCurrentMa} overcurrent={sensors.wheelOvercurrents.sideBrush} />
<MotorCurrentBar label="Main Brush" value={sensors.mainBrushCurrentMa} overcurrent={sensors.wheelOvercurrents.mainBrush} />
</div>
</>
)}
@@ -131,9 +139,20 @@ function CliffBar({ value }) {
const pct = value == null ? 0 : Math.max(0, Math.min(100, (value / 4095) * 100));
const height = `${pct}%`;
return (
<div className="surface-muted h-6 w-1/4">
<div className="w-full bg-amber-500" style={{ height }} />
// <div className="surface-muted h-6 w-1/4 relative">
// <div className="w-full bg-amber-500 absolute inset-0" style={{ height }} />
// </div>
<div className="flex flex-col items-center gap-0.5 w-1/4">
{/* <span className="text-sm text-slate-200">{label}</span> */}
<div className="surface-muted h-6 w-full relative">
<div className={`absolute top-0 left-0 right-0 bg-amber-500`} style={{ height }} />
<div className="absolute inset-0 flex items-center justify-center text-xs text-white">
{value != null ? `${value}` : '--'}
</div>
</div>
</div>
);
}
@@ -148,15 +167,18 @@ function Metric({ label, value }) {
// a reusable motor current bar, with overcurrent coloring. Use the overcurrent from sensors for each motor.
// include a label to indicate which motor it is, with the label to the left of the bar
function MotorCurrentBar({ label, value, overcurrent }) {
const pct = value == null ? 0 : Math.max(0, Math.min(100, (value / 5000) * 100));
const pct = value == null ? 0 : Math.max(0, Math.min(100, (value / 1000) * 100));
const height = `${pct}%`;
const barColor = overcurrent ? 'bg-red-500' : 'bg-emerald-500';
return (
<div className="flex items-center gap-0.5">
<div className="flex flex-col items-center gap-0.5 w-1/4">
<span className="text-sm text-slate-200">{label}</span>
<div className="surface-muted h-6 w-20">
<div className={barColor} style={{ height }} />
<div className="surface-muted h-6 w-full relative">
<div className={`${barColor} absolute bottom-0 left-0 right-0`} style={{ height }} />
<div className="absolute inset-0 flex items-center justify-center text-xs text-white">
{value != null ? `${value} mA` : '--'}
</div>
</div>
</div>
);
}
}
webui/src/index.css
+5 -5
View File
@@ -16,11 +16,11 @@ body {
@layer components {
.panel {
@apply bg-zinc-800 text-slate-100 p-0.5;
@apply bg-black text-white p-0.5;
}
.panel-section {
@apply bg-zinc-950 text-slate-100 p-0.5;
@apply bg-neutral-900 text-white p-0.5;
}
.panel-muted {
@@ -28,15 +28,15 @@ body {
}
.surface {
@apply bg-zinc-900/80 text-slate-100 border border-zinc-800 px-0.5 py-0.5;
@apply bg-neutral-800 text-white px-0.5 py-0.5;
}
.surface-muted {
@apply bg-zinc-950/80 text-slate-200 border border-zinc-900 px-0.5 py-0.5;
@apply bg-neutral-700 text-neutral-100 px-0.5 py-0.5;
}
.field-input {
@apply bg-zinc-900/80 text-slate-100 border border-zinc-800 px-0.5 py-0.5 focus:outline-none focus:ring-1 focus:ring-slate-500;
@apply bg-neutral-800 text-white px-0.5 py-0.5 focus:outline-none focus:ring-1 focus:ring-sky-500;
}
.button-dark {