mirror of
https://github.com/legop3/MultiRoombaRover.git
synced 2026-09-16 17:40:46 -04:00
no more hud! (keep the telem stuff tho)
This commit is contained in:
@@ -1,114 +0,0 @@
|
|||||||
import { useMemo } from 'react';
|
|
||||||
import { useDockIr } from '../hooks/useDockIr.js';
|
|
||||||
|
|
||||||
const SVG_W = 120;
|
|
||||||
const SVG_H = 96;
|
|
||||||
const CX = SVG_W / 2;
|
|
||||||
const DOCK_Y = 14;
|
|
||||||
const ROVER_Y = 74;
|
|
||||||
|
|
||||||
function alignmentBarPath() {
|
|
||||||
return `M ${CX - 3} ${DOCK_Y + 4} L ${CX - 10} ${ROVER_Y - 6} L ${CX + 10} ${ROVER_Y - 6} Z`;
|
|
||||||
}
|
|
||||||
|
|
||||||
export default function DockAssistHUD({ sensors }) {
|
|
||||||
const state = useDockIr(sensors);
|
|
||||||
const palette = useMemo(
|
|
||||||
() => ({
|
|
||||||
green: ['rgba(16,185,129,0.6)', 'rgba(16,185,129,0.45)', 'rgba(16,185,129,0)'],
|
|
||||||
red: ['rgba(239,68,68,0.6)', 'rgba(239,68,68,0.45)', 'rgba(239,68,68,0)'],
|
|
||||||
forceOutline: 'rgba(191,219,254,0.85)',
|
|
||||||
roverBody: '#0f172a',
|
|
||||||
roverFill: '#e5e7eb',
|
|
||||||
}),
|
|
||||||
[],
|
|
||||||
);
|
|
||||||
|
|
||||||
if (!state.visible) return null;
|
|
||||||
|
|
||||||
const nudge = state.balance * 5;
|
|
||||||
const leftHit = state.left.active;
|
|
||||||
const rightHit = state.right.active;
|
|
||||||
const forceHit = state.omni.force || state.forceDetected;
|
|
||||||
const allAligned = Boolean(state.left.green && state.right.red && state.omni.force);
|
|
||||||
const hasAny = leftHit || rightHit || forceHit;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="pointer-events-none absolute inset-x-0 top-0 flex justify-center p-0.25">
|
|
||||||
<svg width={SVG_W} height={SVG_H} viewBox={`0 0 ${SVG_W} ${SVG_H}`} role="img" aria-label="Docking assist">
|
|
||||||
<defs>
|
|
||||||
<linearGradient id="alignGrad" x1="0%" y1="0%" x2="0%" y2="100%">
|
|
||||||
<stop offset="0%" stopColor="rgba(148,163,184,0.9)" />
|
|
||||||
<stop offset="100%" stopColor="rgba(148,163,184,0)" />
|
|
||||||
</linearGradient>
|
|
||||||
</defs>
|
|
||||||
|
|
||||||
{/* Alignment wedge */}
|
|
||||||
{hasAny ? (
|
|
||||||
<path
|
|
||||||
d={alignmentBarPath()}
|
|
||||||
fill="url(#alignGrad)"
|
|
||||||
transform={`translate(${nudge * 3}, 0) rotate(${state.balance * 8}, ${CX}, ${ROVER_Y - 6})`}
|
|
||||||
/>
|
|
||||||
) : null}
|
|
||||||
|
|
||||||
{/* Dock icon: simple rounded square with symmetric top corners */}
|
|
||||||
<path
|
|
||||||
d={`
|
|
||||||
M ${CX - 16} ${DOCK_Y - 10}
|
|
||||||
Q ${CX - 12} ${DOCK_Y - 14} ${CX - 6} ${DOCK_Y - 14}
|
|
||||||
H ${CX + 6}
|
|
||||||
Q ${CX + 12} ${DOCK_Y - 14} ${CX + 16} ${DOCK_Y - 10}
|
|
||||||
L ${CX + 16} ${DOCK_Y + 10}
|
|
||||||
Q ${CX + 16} ${DOCK_Y + 22} ${CX} ${DOCK_Y + 24}
|
|
||||||
Q ${CX - 16} ${DOCK_Y + 22} ${CX - 16} ${DOCK_Y + 10}
|
|
||||||
Z
|
|
||||||
`}
|
|
||||||
fill="#0b1220"
|
|
||||||
stroke="#94a3b8"
|
|
||||||
strokeWidth="0.8"
|
|
||||||
/>
|
|
||||||
{/* Force field emitter dot */}
|
|
||||||
<circle cx={CX} cy={DOCK_Y - 6} r="2.1" fill="#60a5fa" />
|
|
||||||
{/* Contacts */}
|
|
||||||
<rect x={CX - 10} y={DOCK_Y + 8} width="3.2" height="8.5" rx="1" fill="#e2e8f0" />
|
|
||||||
<rect x={CX + 6.5} y={DOCK_Y + 8} width="3.2" height="8.5" rx="1" fill="#e2e8f0" />
|
|
||||||
|
|
||||||
{/* Force field halo on top */}
|
|
||||||
<circle
|
|
||||||
cx={CX}
|
|
||||||
cy={DOCK_Y - 4}
|
|
||||||
r={18}
|
|
||||||
fill={state.forceDetected ? 'url(#halo)' : 'rgba(59,130,246,0.12)'}
|
|
||||||
stroke={state.forceDetected ? palette.forceOutline : 'none'}
|
|
||||||
strokeWidth={state.forceDetected ? 1.2 : 0}
|
|
||||||
/>
|
|
||||||
|
|
||||||
{/* Rover cue */}
|
|
||||||
<g transform={`translate(${CX + nudge}, ${ROVER_Y})`}>
|
|
||||||
<circle r="6" fill={palette.roverBody} stroke="#6b7280" strokeWidth="1" />
|
|
||||||
<path d="M 0 -5 L 4 4 L -4 4 Z" fill={palette.roverFill} />
|
|
||||||
</g>
|
|
||||||
|
|
||||||
{/* Nudge arrow */}
|
|
||||||
{state.bias !== 'center' && (
|
|
||||||
<path
|
|
||||||
d={
|
|
||||||
state.bias === 'left'
|
|
||||||
? `M ${CX - 12} ${ROVER_Y - 5} L ${CX - 18} ${ROVER_Y} L ${CX - 12} ${ROVER_Y + 5}`
|
|
||||||
: `M ${CX + 12} ${ROVER_Y - 5} L ${CX + 18} ${ROVER_Y} L ${CX + 12} ${ROVER_Y + 5}`
|
|
||||||
}
|
|
||||||
fill="none"
|
|
||||||
stroke="#e5e7eb"
|
|
||||||
strokeWidth="1.3"
|
|
||||||
strokeLinecap="round"
|
|
||||||
strokeLinejoin="round"
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Thumbs up when fully aligned */}
|
|
||||||
{allAligned ? <text x={CX + 30} y={DOCK_Y + 8} fontSize="12" fill="#fbbf24" fontFamily="sans-serif">👍</text> : null}
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,7 +1,6 @@
|
|||||||
import { useCallback, useEffect, useRef, useState } from 'react';
|
import { useCallback, useEffect, useRef, useState } from 'react';
|
||||||
import { WhepPlayer } from '../lib/whepPlayer.js';
|
import { WhepPlayer } from '../lib/whepPlayer.js';
|
||||||
import TopDownMap from './TopDownMap.jsx';
|
import TopDownMap from './TopDownMap.jsx';
|
||||||
import DockAssistHUD from './DockAssistHUD.jsx';
|
|
||||||
import { useHudMapSetting } from '../hooks/useHudMapSetting.js';
|
import { useHudMapSetting } from '../hooks/useHudMapSetting.js';
|
||||||
|
|
||||||
const RESTART_DELAY_MS = 2000;
|
const RESTART_DELAY_MS = 2000;
|
||||||
@@ -529,12 +528,6 @@ function HudOverlay({
|
|||||||
</div>
|
</div>
|
||||||
) : null}
|
) : null}
|
||||||
|
|
||||||
<div className="absolute inset-0 flex items-start justify-center">
|
|
||||||
<DockAssistHUD sensors={sensors} />
|
|
||||||
</div>
|
|
||||||
<div className="absolute inset-0 flex items-start justify-center">
|
|
||||||
<DockAssistHUD sensors={sensors} />
|
|
||||||
</div>
|
|
||||||
<div className="absolute bottom-0.5 left-1/2 flex -translate-x-1/2 gap-0.5 bg-black/80 px-0.5 py-0.5 text-slate-100">
|
<div className="absolute bottom-0.5 left-1/2 flex -translate-x-1/2 gap-0.5 bg-black/80 px-0.5 py-0.5 text-slate-100">
|
||||||
<span>Rover: "{label || 'Unnamed Rover'}"</span>
|
<span>Rover: "{label || 'Unnamed Rover'}"</span>
|
||||||
{/* <span>{pulse ? 'Sensors active' : 'No recent sensors'}</span> */}
|
{/* <span>{pulse ? 'Sensors active' : 'No recent sensors'}</span> */}
|
||||||
|
|||||||
Reference in New Issue
Block a user