legop3/MultiRoombaRover
1
0
Fork 0
mirror of https://github.com/legop3/MultiRoombaRover.git synced 2026-09-18 02:20:47 -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-status-bar-style" content="black-translucent" />
<meta name="apple-mobile-web-app-title" content="Multi Roomba Rover" /> <meta name="apple-mobile-web-app-title" content="Multi Roomba Rover" />
<title>Multi Roomba Rover</title> <title>Multi Roomba Rover</title>
<script type="module" crossorigin src="/assets/index-DuynkqQb.js"></script> <script type="module" crossorigin src="/assets/index-MrbP_QVu.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-Dv-S8jVC.css"> <link rel="stylesheet" crossorigin href="/assets/index-CJGsz9ZO.css">
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>
webui/src/components/DockAssistHUD.jsx
+18 -25
View File
@@ -1,17 +1,17 @@
import { useMemo } from 'react'; import { useMemo } from 'react';
import { useDockIr } from '../hooks/useDockIr.js'; import { useDockIr } from '../hooks/useDockIr.js';
const SVG_SIZE = 150; const SVG_SIZE = 120;
const SVG_HEIGHT = 150; const SVG_HEIGHT = 120;
const CENTER_X = SVG_SIZE / 2; const CENTER_X = SVG_SIZE / 2;
const DOCK_Y = 24; const DOCK_Y = 18;
const ROVER_Y = 110; const ROVER_Y = 90;
function lobePath(side = 'left') { function lobePath(side = 'left') {
if (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 }) { export default function DockAssistHUD({ sensors }) {
@@ -45,20 +45,20 @@ export default function DockAssistHUD({ sensors }) {
return null; 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 leftGlow = state.left.red || state.left.green || state.left.force;
const rightGlow = state.right.red || state.right.green || state.right.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; const aligned = state.left.red && state.left.green && state.right.red && state.right.green && state.forceDetected;
return ( return (
<div className="pointer-events-none absolute inset-x-0 top-0 flex justify-center p-0.5"> <div className="pointer-events-none absolute inset-x-0 top-0 flex justify-center p-0.25">
<div className="rounded bg-black/60 px-0.75 py-0.5 shadow-lg shadow-black/40 ring-1 ring-white/10"> <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"> <svg width={SVG_SIZE} height={SVG_HEIGHT} viewBox={`0 0 ${SVG_SIZE} ${SVG_HEIGHT}`} role="img" aria-label="Docking assist">
{/* Force field halo */} {/* Force field halo */}
<circle <circle
cx={CENTER_X} cx={CENTER_X}
cy={DOCK_Y + 6} cy={DOCK_Y + 6}
r={26} r={20}
fill={state.forceDetected ? lobe.force.haloStrong : lobe.force.halo} fill={state.forceDetected ? lobe.force.haloStrong : lobe.force.halo}
stroke={state.forceDetected ? lobe.force.outline : 'none'} stroke={state.forceDetected ? lobe.force.outline : 'none'}
strokeWidth={state.forceDetected ? 2 : 0} 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} />} {aligned && <path d={lobePath('right')} fill="none" stroke={lobe.right.outline} strokeWidth={1.5} />}
{/* Dock icon */} {/* Dock icon */}
<rect x={CENTER_X - 16} y={DOCK_Y - 10} width="32" height="12" rx="2" fill="#1f2937" stroke="#6b7280" strokeWidth="1" /> <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 - 6} cy={DOCK_Y - 4} r="1.8" fill="#9ca3af" /> <circle cx={CENTER_X - 5} cy={DOCK_Y - 3.5} r="1.5" fill="#9ca3af" />
<circle cx={CENTER_X + 6} cy={DOCK_Y - 4} r="1.8" fill="#9ca3af" /> <circle cx={CENTER_X + 5} cy={DOCK_Y - 3.5} r="1.5" fill="#9ca3af" />
{/* Rover cue */} {/* Rover cue */}
<g transform={`translate(${CENTER_X + nudge}, ${ROVER_Y})`}> <g transform={`translate(${CENTER_X + nudge}, ${ROVER_Y})`}>
<circle r="8" fill={lobe.rover.body} stroke="#6b7280" strokeWidth="1.5" /> <circle r="7" fill={lobe.rover.body} stroke="#6b7280" strokeWidth="1.2" />
<path d="M 0 -6 L 4 4 L -4 4 Z" fill={lobe.rover.fill} /> <path d="M 0 -5 L 4 4 L -4 4 Z" fill={lobe.rover.fill} />
</g> </g>
{/* Nudge arrow */} {/* Nudge arrow */}
@@ -88,24 +88,17 @@ export default function DockAssistHUD({ sensors }) {
<path <path
d={ d={
state.bias === 'left' 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 - 14} ${ROVER_Y - 6} L ${CENTER_X - 22} ${ROVER_Y} L ${CENTER_X - 14} ${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}`
} }
fill="none" fill="none"
stroke="#e5e7eb" stroke="#e5e7eb"
strokeWidth="2" strokeWidth="1.6"
strokeLinecap="round" strokeLinecap="round"
strokeLinejoin="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> </svg>
</div> </div>
</div> </div>