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

iphone safe area fixes yess

Browse Source
This commit is contained in:
legop3
2026-06-12 14:40:42 -04:00
parent 033bafeead
commit 87dc70d11d
9 changed files with 157 additions and 161 deletions
Download Patch File Download Diff File Expand all files Collapse all files
server/public/assets/index-BVKa8Zph.css → server/public/assets/index-BGz8Fj5K.css
+1 -1
View File
File diff suppressed because one or more lines are too long
server/public/assets/index-D9aVoWKy.js
+126
View File
File diff suppressed because one or more lines are too long
server/public/assets/index-Df0ksHL_.js
-126
View File
File diff suppressed because one or more lines are too long
server/public/index.html
+3 -3
View File
@@ -6,14 +6,14 @@
<link rel="apple-touch-icon" href="/bitmap.png" />
<link rel="manifest" href="/manifest.json" />
<!-- Mobile driving uses dense press controls, so the viewport opts out of browser zoom gestures that can steal touches from the controls. -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" />
<meta name="theme-color" content="#020617" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="apple-mobile-web-app-title" content="Roomba Rover" />
<title>Roomba Rover</title>
<script type="module" crossorigin src="/assets/index-Df0ksHL_.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-BVKa8Zph.css">
<script type="module" crossorigin src="/assets/index-D9aVoWKy.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-BGz8Fj5K.css">
</head>
<body>
<div id="root"></div>
webui/index.html
+1 -1
View File
@@ -6,7 +6,7 @@
<link rel="apple-touch-icon" href="/bitmap.png" />
<link rel="manifest" href="/manifest.json" />
<!-- Mobile driving uses dense press controls, so the viewport opts out of browser zoom gestures that can steal touches from the controls. -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" />
<meta name="theme-color" content="#020617" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
webui/src/App.jsx
+1 -1
View File
@@ -254,7 +254,7 @@ function App() {
const fullscreen = useFullscreenPrompt(layout);
return (
<div className={`${pageBackgroundClass} text-slate-100 ${isDesktop ? 'h-screen overflow-hidden' : 'min-h-screen'}`}>
<div className={`${pageBackgroundClass} text-slate-100 ${isDesktop ? 'h-screen overflow-hidden' : 'ios-safe-screen min-h-screen'}`}>
<AppWithProviders layout={layout} isDesktop={isDesktop} fullscreen={fullscreen} />
</div>
);
webui/src/components/HornControl/index.jsx
+7 -28
View File
@@ -25,7 +25,6 @@ export default function HornControl({
showSettingsToggle = false,
compactSettings = false,
}) {
const [pressed, setPressed] = useState(false);
const [showSettings, setShowSettings] = useState(defaultShowSettings);
const { value: hornSettings, save: saveHornSettings } = useSettingsNamespace(
'horn',
@@ -60,27 +59,6 @@ export default function HornControl({
.join(' ');
}, [className, isActive]);
const start = () => {
if (disabled) return;
if (!pressed) {
setPressed(true);
onStart?.();
}
};
const stop = () => {
if (pressed) {
setPressed(false);
onStop?.();
}
};
useEffect(() => {
if (!isActive && pressed) {
setPressed(false);
}
}, [isActive, pressed]);
const formattedWaveform = waveform === 'sine' ? 'sine' : 'saw';
const updateWaveform = useCallback(
@@ -142,7 +120,7 @@ export default function HornControl({
event.preventDefault();
activePointerIdRef.current = event.pointerId;
event.currentTarget.setPointerCapture?.(event.pointerId);
start();
onStart?.();
};
const handlePointerUp = (event) => {
@@ -152,18 +130,19 @@ export default function HornControl({
event.preventDefault();
activePointerIdRef.current = null;
event.currentTarget.releasePointerCapture?.(event.pointerId);
stop();
onStop?.();
};
const handlePointerCancel = (event) => {
if (activePointerIdRef.current !== event.pointerId) return;
activePointerIdRef.current = null;
stop();
onStop?.();
};
const handleBlur = () => {
if (activePointerIdRef.current === null) return;
activePointerIdRef.current = null;
stop();
onStop?.();
};
const settingsToggle = showSettingsToggle ? (
@@ -185,14 +164,14 @@ export default function HornControl({
<div
role="button"
tabIndex={0}
aria-pressed={pressed}
aria-pressed={isActive}
onPointerDown={handlePointerDown}
onPointerUp={handlePointerUp}
onPointerCancel={handlePointerCancel}
onLostPointerCapture={(event) => {
if (activePointerIdRef.current === event.pointerId) {
activePointerIdRef.current = null;
stop();
onStop?.();
}
}}
onContextMenu={(event) => event.preventDefault()}
webui/src/controls/ControlContext.jsx
+6 -1
View File
@@ -473,7 +473,12 @@ export function ControlSystemProvider({ children }) {
(nightVisionOn) => {
if (!pipeline.nightVision) return;
if (typeof nightVisionOn === 'boolean') {
const action = nightVisionOn ? 'on' : 'off';
/*
Rover daemon command names describe the IR LED, while the UI state
describes camera visibility. LED "off" means nightVisionOn=true, and
LED "on" means nightVisionOn=false.
*/
const action = nightVisionOn ? 'off' : 'on';
pipeline.sendNightVision(action);
} else {
pipeline.sendNightVision('toggle');
webui/src/index.css
+12
View File
@@ -262,4 +262,16 @@ body {
-webkit-text-size-adjust: 100%;
touch-action: manipulation;
}
.ios-safe-screen {
/*
viewport-fit=cover stops iOS from reserving automatic bars on both ends of
a homescreen app. We then add back only the unsafe notch edges so controls
do not sit under camera hardware, while the opposite edge stays flush.
*/
padding-top: env(safe-area-inset-top);
padding-left: env(safe-area-inset-left);
padding-right: env(safe-area-inset-right);
padding-bottom: 0;
}
}