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

tweak

Browse Source
This commit is contained in:
legop3
2025-12-27 03:35:52 -05:00
parent 293b73dc20
commit 588305184e
4 changed files with 27 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files
server/public/assets/index-Dv-S8jVC.css → server/public/assets/index-CJGsz9ZO.css
+1 -1
View File
File diff suppressed because one or more lines are too long
server/public/assets/index-DuynkqQb.js → server/public/assets/index-MrbP_QVu.js
+6 -6
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-title" content="Multi Roomba Rover" />
<title>Multi Roomba Rover</title>
<script type="module" crossorigin src="/assets/index-DuynkqQb.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-Dv-S8jVC.css">
<script type="module" crossorigin src="/assets/index-MrbP_QVu.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-CJGsz9ZO.css">
</head>
<body>
<div id="root"></div>
webui/src/components/DockAssistHUD.jsx
+18 -25
View File
@@ -1,17 +1,17 @@
import { useMemo } from 'react';
import { useDockIr } from '../hooks/useDockIr.js';
const SVG_SIZE = 150;
const SVG_HEIGHT = 150;
const SVG_SIZE = 120;
const SVG_HEIGHT = 120;
const CENTER_X = SVG_SIZE / 2;
const DOCK_Y = 24;
const ROVER_Y = 110;
const DOCK_Y = 18;
const ROVER_Y = 90;
function lobePath(side = 'left') {
if (side === 'left') {
return `M ${CENTER_X} ${DOCK_Y} C ${CENTER_X - 28} ${DOCK_Y + 24} ${CENTER_X - 36} ${ROVER_Y - 18} ${CENTER_X - 10} ${ROVER_Y} L ${CENTER_X} ${ROVER_Y} Z`;
return `M ${CENTER_X} ${DOCK_Y} C ${CENTER_X - 22} ${DOCK_Y + 18} ${CENTER_X - 28} ${ROVER_Y - 16} ${CENTER_X - 8} ${ROVER_Y} L ${CENTER_X} ${ROVER_Y} Z`;
}
return `M ${CENTER_X} ${DOCK_Y} C ${CENTER_X + 28} ${DOCK_Y + 24} ${CENTER_X + 36} ${ROVER_Y - 18} ${CENTER_X + 10} ${ROVER_Y} L ${CENTER_X} ${ROVER_Y} Z`;
return `M ${CENTER_X} ${DOCK_Y} C ${CENTER_X + 22} ${DOCK_Y + 18} ${CENTER_X + 28} ${ROVER_Y - 16} ${CENTER_X + 8} ${ROVER_Y} L ${CENTER_X} ${ROVER_Y} Z`;
}
export default function DockAssistHUD({ sensors }) {
@@ -45,20 +45,20 @@ export default function DockAssistHUD({ sensors }) {
return null;
}
const nudge = state.balance * 8; // pixels to offset rover cue
const nudge = state.balance * 6; // pixels to offset rover cue
const leftGlow = state.left.red || state.left.green || state.left.force;
const rightGlow = state.right.red || state.right.green || state.right.force;
const aligned = state.left.red && state.left.green && state.right.red && state.right.green && state.forceDetected;
return (
<div className="pointer-events-none absolute inset-x-0 top-0 flex justify-center p-0.5">
<div className="rounded bg-black/60 px-0.75 py-0.5 shadow-lg shadow-black/40 ring-1 ring-white/10">
<div className="pointer-events-none absolute inset-x-0 top-0 flex justify-center p-0.25">
<div className="rounded bg-black/70 px-0.5 py-0.25 shadow-md shadow-black/40 ring-1 ring-white/5">
<svg width={SVG_SIZE} height={SVG_HEIGHT} viewBox={`0 0 ${SVG_SIZE} ${SVG_HEIGHT}`} role="img" aria-label="Docking assist">
{/* Force field halo */}
<circle
cx={CENTER_X}
cy={DOCK_Y + 6}
r={26}
r={20}
fill={state.forceDetected ? lobe.force.haloStrong : lobe.force.halo}
stroke={state.forceDetected ? lobe.force.outline : 'none'}
strokeWidth={state.forceDetected ? 2 : 0}
@@ -73,14 +73,14 @@ export default function DockAssistHUD({ sensors }) {
{aligned && <path d={lobePath('right')} fill="none" stroke={lobe.right.outline} strokeWidth={1.5} />}
{/* Dock icon */}
<rect x={CENTER_X - 16} y={DOCK_Y - 10} width="32" height="12" rx="2" fill="#1f2937" stroke="#6b7280" strokeWidth="1" />
<circle cx={CENTER_X - 6} cy={DOCK_Y - 4} r="1.8" fill="#9ca3af" />
<circle cx={CENTER_X + 6} cy={DOCK_Y - 4} r="1.8" fill="#9ca3af" />
<rect x={CENTER_X - 12} y={DOCK_Y - 8} width="24" height="10" rx="2" fill="#1f2937" stroke="#6b7280" strokeWidth="0.8" />
<circle cx={CENTER_X - 5} cy={DOCK_Y - 3.5} r="1.5" fill="#9ca3af" />
<circle cx={CENTER_X + 5} cy={DOCK_Y - 3.5} r="1.5" fill="#9ca3af" />
{/* Rover cue */}
<g transform={`translate(${CENTER_X + nudge}, ${ROVER_Y})`}>
<circle r="8" fill={lobe.rover.body} stroke="#6b7280" strokeWidth="1.5" />
<path d="M 0 -6 L 4 4 L -4 4 Z" fill={lobe.rover.fill} />
<circle r="7" fill={lobe.rover.body} stroke="#6b7280" strokeWidth="1.2" />
<path d="M 0 -5 L 4 4 L -4 4 Z" fill={lobe.rover.fill} />
</g>
{/* Nudge arrow */}
@@ -88,24 +88,17 @@ export default function DockAssistHUD({ sensors }) {
<path
d={
state.bias === 'left'
? `M ${CENTER_X - 18} ${ROVER_Y - 6} L ${CENTER_X - 28} ${ROVER_Y} L ${CENTER_X - 18} ${ROVER_Y + 6}`
: `M ${CENTER_X + 18} ${ROVER_Y - 6} L ${CENTER_X + 28} ${ROVER_Y} L ${CENTER_X + 18} ${ROVER_Y + 6}`
? `M ${CENTER_X - 14} ${ROVER_Y - 6} L ${CENTER_X - 22} ${ROVER_Y} L ${CENTER_X - 14} ${ROVER_Y + 6}`
: `M ${CENTER_X + 14} ${ROVER_Y - 6} L ${CENTER_X + 22} ${ROVER_Y} L ${CENTER_X + 14} ${ROVER_Y + 6}`
}
fill="none"
stroke="#e5e7eb"
strokeWidth="2"
strokeWidth="1.6"
strokeLinecap="round"
strokeLinejoin="round"
/>
)}
{/* Raw code badge for debugging */}
<g transform={`translate(${CENTER_X}, ${ROVER_Y + 18})`} className="text-xs">
<rect x="-32" y="-10" width="64" height="18" rx="4" fill="rgba(0,0,0,0.6)" stroke="rgba(255,255,255,0.15)" />
<text x="0" y="3" fill="#e5e7eb" fontSize="9" textAnchor="middle">
{`L:${state.left.code ?? 0} O:${state.omni.code ?? 0} R:${state.right.code ?? 0}`}
</text>
</g>
</svg>
</div>
</div>