legop3/MultiRoombaRover
1
0
Fork 0
mirror of https://github.com/legop3/MultiRoombaRover.git synced 2026-09-15 17:12:59 -04:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

ui

Browse Source
This commit is contained in:
legop3
2026-01-31 15:34:38 -05:00
parent 3fdb1c05e5
commit 7eeb9d13e4
4 changed files with 49 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files
server/public/assets/index-C-sPd-kA.css → server/public/assets/index-CQCz6Dh4.css
+1 -1
View File
File diff suppressed because one or more lines are too long
server/public/assets/index-CF38D5Qo.js → server/public/assets/index-DfpLHSrv.js
+10 -10
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-CF38D5Qo.js"></script> <script type="module" crossorigin src="/assets/index-DfpLHSrv.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-C-sPd-kA.css"> <link rel="stylesheet" crossorigin href="/assets/index-CQCz6Dh4.css">
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>
webui/src/components/HornControl.jsx
+36 -27
View File
@@ -36,7 +36,7 @@ export default function HornControl({
const buttonClasses = useMemo(() => { const buttonClasses = useMemo(() => {
const base = const base =
'group flex w-full items-center justify-between rounded-xl border-2 px-1 py-1.5 text-xs font-semibold'; 'group flex w-full flex-col gap-0.5 rounded-xl border-2 px-1 py-1.5 text-xs font-semibold';
const active = 'border-fuchsia-300/70 bg-fuchsia-700 text-fuchsia-50'; const active = 'border-fuchsia-300/70 bg-fuchsia-700 text-fuchsia-50';
const inactive = 'border-cyan-300/70 bg-cyan-900 text-cyan-50 hover:bg-cyan-800'; const inactive = 'border-cyan-300/70 bg-cyan-900 text-cyan-50 hover:bg-cyan-800';
return [base, pressed ? active : inactive, 'disabled:opacity-50', className] return [base, pressed ? active : inactive, 'disabled:opacity-50', className]
@@ -82,27 +82,36 @@ export default function HornControl({
[saveHornSettings], [saveHornSettings],
); );
const handlePointerDown = (event) => {
if (disabled) return;
const tag = event.target?.tagName?.toLowerCase();
if (tag === 'input' || tag === 'select' || tag === 'option' || tag === 'label') return;
event.preventDefault();
start();
};
const handlePointerUp = (event) => {
const tag = event.target?.tagName?.toLowerCase();
if (tag === 'input' || tag === 'select' || tag === 'option' || tag === 'label') return;
event.preventDefault();
stop();
};
return ( return (
<div className="space-y-0.5"> <div
<button role="button"
type="button" tabIndex={0}
onPointerDown={(event) => { aria-pressed={pressed}
event.preventDefault(); onPointerDown={handlePointerDown}
start(); onPointerUp={handlePointerUp}
}} onPointerLeave={stop}
onPointerUp={(event) => { onPointerCancel={stop}
event.preventDefault(); onBlur={stop}
stop(); className={buttonClasses}
}} >
onPointerLeave={stop} <div className="flex items-center justify-between gap-0.5">
onPointerCancel={stop} <span className="flex items-center gap-0.5 text-sm font-semibold">
onBlur={stop} <span>Horn</span>
disabled={disabled}
aria-pressed={pressed}
className={buttonClasses}
>
<span className="flex flex-1 items-center justify-center gap-0.5">
<span className="text-sm font-semibold tracking-[0.2em]">HORN</span>
{keyLabel ? ( {keyLabel ? (
<span className="rounded bg-black/40 px-1 py-0.5 text-[0.6rem] font-semibold text-white"> <span className="rounded bg-black/40 px-1 py-0.5 text-[0.6rem] font-semibold text-white">
{keyLabel} {keyLabel}
@@ -114,12 +123,12 @@ export default function HornControl({
pressed ? 'bg-fuchsia-200 text-fuchsia-900' : 'bg-slate-800 text-slate-200' pressed ? 'bg-fuchsia-200 text-fuchsia-900' : 'bg-slate-800 text-slate-200'
}`} }`}
> >
{pressed ? 'HONK' : 'HOLD'} {pressed ? 'Honk' : 'Hold'}
</span> </span>
</button> </div>
<div className="grid grid-cols-[minmax(0,1.2fr)_repeat(4,minmax(0,1fr))] items-center gap-0.5 text-[0.65rem]"> <div className="grid grid-cols-[minmax(0,1.2fr)_repeat(4,minmax(0,1fr))] items-center gap-0.5 text-[0.65rem]">
<label className="flex items-center gap-0.5 text-slate-300"> <label className="flex items-center gap-0.5 text-slate-200">
<span className="uppercase tracking-wide text-slate-400">Wave</span> <span className="text-slate-300">Wave</span>
<select <select
value={formattedWaveform} value={formattedWaveform}
onChange={updateWaveform} onChange={updateWaveform}
@@ -130,8 +139,8 @@ export default function HornControl({
</select> </select>
</label> </label>
{freqs.map((freq, idx) => ( {freqs.map((freq, idx) => (
<label key={`horn-freq-${idx}`} className="flex items-center gap-0.5 text-slate-300"> <label key={`horn-freq-${idx}`} className="flex items-center gap-0.5 text-slate-200">
<span className="text-[0.6rem] text-slate-500">{idx + 1}</span> <span className="text-[0.6rem] text-slate-400">{idx + 1}</span>
<input <input
type="number" type="number"
min={0} min={0}