mirror of
https://github.com/legop3/MultiRoombaRover.git
synced 2026-09-16 09:31:20 -04:00
guh
This commit is contained in:
+8
-1
@@ -7,4 +7,11 @@
|
||||
- https://www.thingiverse.com/thing:4514531
|
||||
|
||||
## spectator page
|
||||
- video does not load in spectator page in admin mode
|
||||
- video does not load in spectator page in admin mode
|
||||
|
||||
## todo
|
||||
- nicknames
|
||||
- discord bot
|
||||
- turns display
|
||||
- discord link
|
||||
-
|
||||
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
@@ -5,8 +5,8 @@
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>webui</title>
|
||||
<script type="module" crossorigin src="/assets/index-CYj975_t.js"></script>
|
||||
<link rel="stylesheet" crossorigin href="/assets/index-66RVFCl0.css">
|
||||
<script type="module" crossorigin src="/assets/index-BXngvPdi.js"></script>
|
||||
<link rel="stylesheet" crossorigin href="/assets/index-DP0zs3Oi.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
|
||||
@@ -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>}{' '}
|
||||
|
||||
@@ -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',
|
||||
},
|
||||
};
|
||||
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
+5
-5
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user