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.
+
+*/