diff --git a/src/screens/OavMover/OAVMoveController.tsx b/src/screens/OavMover/OAVMoveController.tsx index 0960b04..37ec2f3 100644 --- a/src/screens/OavMover/OAVMoveController.tsx +++ b/src/screens/OavMover/OAVMoveController.tsx @@ -26,6 +26,16 @@ const arrowsBoxStyle = { gap: "10px", }; +const arrowsScreenSizing = { + minWidth: { + lg: "32px", + xl: "64px", + }, + width: { + lg: "32px", + }, +}; + function BlockMove(props: TabPanelProps) { if (props.value !== props.index) return null; @@ -75,6 +85,7 @@ function NudgeMove(props: TabPanelProps) { planName={"move_nudge_on_arrow_click"} planParams={{ direction: "up", size_of_move: "big" }} btnVariant="outlined" + sx={arrowsScreenSizing} /> } planName={"move_nudge_on_arrow_click"} planParams={{ direction: "left", size_of_move: "small" }} btnVariant="outlined" + sx={arrowsScreenSizing} /> } planName={"move_nudge_on_arrow_click"} planParams={{ direction: "right", size_of_move: "big" }} btnVariant="outlined" + sx={arrowsScreenSizing} /> ); @@ -138,6 +156,7 @@ function WindowMove(props: TabPanelProps) { planName={"move_window_on_arrow_click"} planParams={{ direction: "up", size_of_move: "big" }} btnVariant="outlined" + sx={arrowsScreenSizing} /> } planName={"move_window_on_arrow_click"} planParams={{ direction: "left", size_of_move: "small" }} btnVariant="outlined" + sx={arrowsScreenSizing} /> } planName={"move_window_on_arrow_click"} planParams={{ direction: "right", size_of_move: "big" }} btnVariant="outlined" + sx={arrowsScreenSizing} /> + + ); +} + +function FocusMove(props: TabPanelProps) { + if (props.value !== props.index) return null; + + return ( + + + + + ); @@ -211,6 +276,9 @@ export function MoveArrows() { value={value} onChange={handleChange} sx={{ + "& .MuiTab-root": { + minWidth: { xs: 80, sm: 120 }, + }, "& .MuiTab-root.Mui-selected": { color: theme.palette.secondary.main, }, @@ -223,11 +291,13 @@ export function MoveArrows() { + + ); } diff --git a/src/screens/OavMover/OAVSideBar.tsx b/src/screens/OavMover/OAVSideBar.tsx index 2bf6563..af91ee5 100644 --- a/src/screens/OavMover/OAVSideBar.tsx +++ b/src/screens/OavMover/OAVSideBar.tsx @@ -6,15 +6,7 @@ import { BacklightControl, ZoomControl } from "./OAVDeviceSettings"; export function OAVSideBar() { return ( - + <>
-
+ ); } diff --git a/src/screens/OavMover/OAVStageController.tsx b/src/screens/OavMover/OAVStageController.tsx index 55eb24b..445d2ca 100644 --- a/src/screens/OavMover/OAVStageController.tsx +++ b/src/screens/OavMover/OAVStageController.tsx @@ -1,4 +1,4 @@ -import { Box, Grid2, useTheme } from "@mui/material"; +import { Grid2, useTheme } from "@mui/material"; import { OavVideoStream } from "../../components/OavVideoStream"; import { submitAndRunPlanImmediately } from "../../blueapi/blueapi"; @@ -16,43 +16,60 @@ export function OavMover() { const fullVisit = readVisitFromPv(); return ( -
- - - - { - const [x_um, y_um] = [x / pixelsPerMicron, y / pixelsPerMicron]; + + + { + const [x_um, y_um] = [x / pixelsPerMicron, y / pixelsPerMicron]; + console.log( + `Clicked on position (${x}, ${y}) (px relative to beam centre) in original stream. Relative position in um (${x_um}, ${y_um}). Submitting to BlueAPI...`, + ); + const [x_int, y_int] = [Math.round(x), Math.round(y)]; + if (Number.isNaN(x_um) || Number.isNaN(y_um)) { + console.log("Not submitting plan while disconnected from PVs!"); + } else { + // This is an example but not useful for actual production use. + submitAndRunPlanImmediately({ + planName: "gui_gonio_move_on_click", + planParams: { position_px: [x_int, y_int] }, + instrumentSession: parseInstrumentSession(fullVisit), + }).catch((error) => { console.log( - `Clicked on position (${x}, ${y}) (px relative to beam centre) in original stream. Relative position in um (${x_um}, ${y_um}). Submitting to BlueAPI...`, + `Failed to run plan gui_gonio_move_on_click, see console and logs for full error. Reason: ${error}`, ); - const [x_int, y_int] = [Math.round(x), Math.round(y)]; - if (Number.isNaN(x_um) || Number.isNaN(y_um)) { - console.log( - "Not submitting plan while disconnected from PVs!", - ); - } else { - // This is an example but not useful for actual production use. - submitAndRunPlanImmediately({ - planName: "gui_gonio_move_on_click", - planParams: { position_px: [x_int, y_int] }, - instrumentSession: parseInstrumentSession(fullVisit), - }).catch((error) => { - console.log( - `Failed to run plan gui_gonio_move_on_click, see console and logs for full error. Reason: ${error}`, - ); - }); - } - }} - /> - - + }); + } + }} + /> + + + -
+
); } + +/* + +xs, sm, md, lg, xl + +Anything below lg (1200px) will be one column. +Lg and above will have a side bar. +Lg will still have a compact side bar like focus tab being 2x2 grid. +XL can afford to be normal like 4 button wide focus tab. +Anything larger will just have to deal with it for now. + +*/