mirror of
https://github.com/legop3/MultiRoombaRover.git
synced 2026-09-16 01:21:20 -04:00
mobile bobile
This commit is contained in:
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -78,8 +78,8 @@
|
|||||||
<script defer src="https://analytics.otter.land/script.js" data-website-id="82dd56a5-db44-4279-bd1e-a4d9fee39af7" data-domains="rover.otter.land"></script>
|
<script defer src="https://analytics.otter.land/script.js" data-website-id="82dd56a5-db44-4279-bd1e-a4d9fee39af7" data-domains="rover.otter.land"></script>
|
||||||
<script defer src="https://analytics.otter.land/recorder.js" data-website-id="82dd56a5-db44-4279-bd1e-a4d9fee39af7" data-domains="rover.otter.land" data-sample-rate="0.15" data-mask-level="moderate" data-max-duration="300000"></script>
|
<script defer src="https://analytics.otter.land/recorder.js" data-website-id="82dd56a5-db44-4279-bd1e-a4d9fee39af7" data-domains="rover.otter.land" data-sample-rate="0.15" data-mask-level="moderate" data-max-duration="300000"></script>
|
||||||
<title>Roomba Rover</title>
|
<title>Roomba Rover</title>
|
||||||
<script type="module" crossorigin src="/assets/index-Dp_4HZ7O.js"></script>
|
<script type="module" crossorigin src="/assets/index-CLAMBTKs.js"></script>
|
||||||
<link rel="stylesheet" crossorigin href="/assets/index-LTXnNyH3.css">
|
<link rel="stylesheet" crossorigin href="/assets/index-B_1KvRVw.css">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="root"></div>
|
<div id="root"></div>
|
||||||
|
|||||||
@@ -5,6 +5,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
|||||||
import { createPortal } from 'react-dom';
|
import { createPortal } from 'react-dom';
|
||||||
import CardFrame from '../CardFrame/index.jsx';
|
import CardFrame from '../CardFrame/index.jsx';
|
||||||
import GPIOToggleControl from '../GPIOToggleControl/index.jsx';
|
import GPIOToggleControl from '../GPIOToggleControl/index.jsx';
|
||||||
|
import ControlPadPanel from '../MobileControls/ControlPadPanel.jsx';
|
||||||
import ReplaySourcesPanel from '../ReplaySourcesPanel/index.jsx';
|
import ReplaySourcesPanel from '../ReplaySourcesPanel/index.jsx';
|
||||||
import KeyPill from './VipAudioUploadCard/KeyPill.jsx';
|
import KeyPill from './VipAudioUploadCard/KeyPill.jsx';
|
||||||
import { useSessionActions, useSessionSelector } from '../../context/SessionContext.jsx';
|
import { useSessionActions, useSessionSelector } from '../../context/SessionContext.jsx';
|
||||||
@@ -351,6 +352,25 @@ function PtzMobileZoomButtons({ disabled = false }) {
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function PtzMobileControlsPanel({ ptz, disabled = false }) {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<PtzMobileZoomButtons disabled={disabled} />
|
||||||
|
<CardFrame title="Movement" bodyClassName="h-56 min-h-0 p-0.5">
|
||||||
|
{/*
|
||||||
|
Reuse the rover mobile movement card instead of building a second PTZ
|
||||||
|
joystick. Its drive vector goes through the shared internal control
|
||||||
|
layer, where the PTZ adapter already converts movement plus speed mode
|
||||||
|
into camera pan/tilt commands.
|
||||||
|
*/}
|
||||||
|
<ControlPadPanel disabled={disabled} />
|
||||||
|
</CardFrame>
|
||||||
|
<PtzMobileZoomButtons disabled={disabled} />
|
||||||
|
<PtzLightingControls ptz={ptz} disabled={disabled} />
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
function keyLabelFor(keymap, actionId) {
|
function keyLabelFor(keymap, actionId) {
|
||||||
return formatKeyLabel(keymap?.[actionId]?.[0]);
|
return formatKeyLabel(keymap?.[actionId]?.[0]);
|
||||||
}
|
}
|
||||||
@@ -437,6 +457,12 @@ function PtzController({ open, onClose, layout = 'desktop' }) {
|
|||||||
|
|
||||||
const mobileSidebar = (
|
const mobileSidebar = (
|
||||||
<>
|
<>
|
||||||
|
<div className="shrink-0">
|
||||||
|
<PtzMobileControlsPanel ptz={ptz} disabled={!isOperator} />
|
||||||
|
</div>
|
||||||
|
<div className="shrink-0">
|
||||||
|
<ReplaySourcesPanel panelId="ptz-controller-replay-mobile" />
|
||||||
|
</div>
|
||||||
<div className="shrink-0">
|
<div className="shrink-0">
|
||||||
<PtzStatePanel
|
<PtzStatePanel
|
||||||
ptz={ptz}
|
ptz={ptz}
|
||||||
@@ -445,33 +471,14 @@ function PtzController({ open, onClose, layout = 'desktop' }) {
|
|||||||
releaseDisabled={releasePending}
|
releaseDisabled={releasePending}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
{isOperator ? (
|
|
||||||
<>
|
|
||||||
<div className="shrink-0">
|
|
||||||
<PtzLightingControls ptz={ptz} />
|
|
||||||
</div>
|
|
||||||
<div className="shrink-0">
|
|
||||||
<PtzMobileZoomButtons />
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
) : (
|
|
||||||
<div className="shrink-0">
|
|
||||||
<CardFrame title="Controls" bodyClassName="p-1 text-xs text-slate-400">
|
|
||||||
Live PTZ controls unlock when your camera turn is active.
|
|
||||||
</CardFrame>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
<div className="shrink-0">
|
<div className="shrink-0">
|
||||||
<PtzQueueList queue={ptz?.queue} operatorLabel={ptz?.operatorLabel} />
|
<PtzQueueList queue={ptz?.queue} operatorLabel={ptz?.operatorLabel} />
|
||||||
</div>
|
</div>
|
||||||
<div className="shrink-0">
|
|
||||||
<ReplaySourcesPanel panelId="ptz-controller-replay-mobile" />
|
|
||||||
</div>
|
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
|
|
||||||
const sidebarWidthClass = isMobile
|
const sidebarWidthClass = isMobile
|
||||||
? 'grid-cols-[minmax(0,1fr)_12rem]'
|
? 'grid-cols-[minmax(0,1fr)_14rem]'
|
||||||
: 'grid-cols-[minmax(0,1fr)_20rem]';
|
: 'grid-cols-[minmax(0,1fr)_20rem]';
|
||||||
|
|
||||||
const controller = (
|
const controller = (
|
||||||
|
|||||||
Reference in New Issue
Block a user