98 responsive oav

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,53 +85,61 @@ function NudgeMove(props: TabPanelProps) {
         planName={"move_nudge_on_arrow_click"}
         planParams={{ direction: "up", size_of_move: "big" }}
         btnVariant="outlined"
+        sx={arrowsScreenSizing}
       />
       <Box /> <Box /> <Box /> <Box />
       <RunPlanButton
         btnLabel={<KeyboardArrowUp />}
         planName={"move_nudge_on_arrow_click"}
         planParams={{ direction: "up", size_of_move: "small" }}
         btnVariant="outlined"
+        sx={arrowsScreenSizing}
       />
       <Box /> <Box />
       <RunPlanButton
         btnLabel={<KeyboardDoubleArrowLeft />}
         planName={"move_nudge_on_arrow_click"}
         planParams={{ direction: "left", size_of_move: "big" }}
         btnVariant="outlined"
+        sx={arrowsScreenSizing}
       />
       <RunPlanButton
         btnLabel={<KeyboardArrowLeft />}
         planName={"move_nudge_on_arrow_click"}
         planParams={{ direction: "left", size_of_move: "small" }}
         btnVariant="outlined"
+        sx={arrowsScreenSizing}
       />
       <Box />
       <RunPlanButton
         btnLabel={<KeyboardArrowRight />}
         planName={"move_nudge_on_arrow_click"}
         planParams={{ direction: "right", size_of_move: "small" }}
         btnVariant="outlined"
+        sx={arrowsScreenSizing}
       />
       <RunPlanButton
         btnLabel={<KeyboardDoubleArrowRight />}
         planName={"move_nudge_on_arrow_click"}
         planParams={{ direction: "right", size_of_move: "big" }}
         btnVariant="outlined"
+        sx={arrowsScreenSizing}
       />
       <Box /> <Box />
       <RunPlanButton
         btnLabel={<KeyboardArrowDown />}
         planName={"move_nudge_on_arrow_click"}
         planParams={{ direction: "down", size_of_move: "small" }}
         btnVariant="outlined"
+        sx={arrowsScreenSizing}
       />
       <Box /> <Box /> <Box /> <Box />
       <RunPlanButton
         btnLabel={<KeyboardDoubleArrowDown />}
         planName={"move_nudge_on_arrow_click"}
         planParams={{ direction: "down", size_of_move: "big" }}
         btnVariant="outlined"
+        sx={arrowsScreenSizing}
       />
     </Box>
   );
@@ -138,53 +156,100 @@ function WindowMove(props: TabPanelProps) {
         planName={"move_window_on_arrow_click"}
         planParams={{ direction: "up", size_of_move: "big" }}
         btnVariant="outlined"
+        sx={arrowsScreenSizing}
       />
       <Box /> <Box /> <Box /> <Box />
       <RunPlanButton
         btnLabel={<KeyboardArrowUp />}
         planName={"move_window_on_arrow_click"}
         planParams={{ direction: "up", size_of_move: "small" }}
         btnVariant="outlined"
+        sx={arrowsScreenSizing}
       />
       <Box /> <Box />
       <RunPlanButton
         btnLabel={<KeyboardDoubleArrowLeft />}
         planName={"move_window_on_arrow_click"}
         planParams={{ direction: "left", size_of_move: "big" }}
         btnVariant="outlined"
+        sx={arrowsScreenSizing}
       />
       <RunPlanButton
         btnLabel={<KeyboardArrowLeft />}
         planName={"move_window_on_arrow_click"}
         planParams={{ direction: "left", size_of_move: "small" }}
         btnVariant="outlined"
+        sx={arrowsScreenSizing}
       />
       <Box />
       <RunPlanButton
         btnLabel={<KeyboardArrowRight />}
         planName={"move_window_on_arrow_click"}
         planParams={{ direction: "right", size_of_move: "small" }}
         btnVariant="outlined"
+        sx={arrowsScreenSizing}
       />
       <RunPlanButton
         btnLabel={<KeyboardDoubleArrowRight />}
         planName={"move_window_on_arrow_click"}
         planParams={{ direction: "right", size_of_move: "big" }}
         btnVariant="outlined"
+        sx={arrowsScreenSizing}
       />
       <Box /> <Box />
       <RunPlanButton
         btnLabel={<KeyboardArrowDown />}
         planName={"move_window_on_arrow_click"}
         planParams={{ direction: "down", size_of_move: "small" }}
         btnVariant="outlined"
+        sx={arrowsScreenSizing}
       />
       <Box /> <Box /> <Box /> <Box />
       <RunPlanButton
         btnLabel={<KeyboardDoubleArrowDown />}
         planName={"move_window_on_arrow_click"}
         planParams={{ direction: "down", size_of_move: "big" }}
         btnVariant="outlined"
+        sx={arrowsScreenSizing}
+      />
+    </Box>
+  );
+}
+
+function FocusMove(props: TabPanelProps) {
+  if (props.value !== props.index) return null;
+
+  return (
+    <Box
+      sx={{
+        ...arrowsBoxStyle,
+        py: 2,
+        gridTemplateColumns: { lg: "repeat(2, 1fr)", xl: "repeat(4, 1fr)" },
+      }}
+    >
+      <RunPlanButton
+        btnLabel={"IN x3"}
+        planName={"focus_on_oav_view"}
+        planParams={{ direction: "in", size_of_move: "big" }}
+        btnVariant="outlined"
+      />
+      <RunPlanButton
+        btnLabel={"IN"}
+        planName={"focus_on_oav_view"}
+        planParams={{ direction: "in", size_of_move: "small" }}
+        btnVariant="outlined"
+      />
+      <RunPlanButton
+        btnLabel={"OUT"}
+        planName={"focus_on_oav_view"}
+        planParams={{ direction: "out", size_of_move: "small" }}
+        btnVariant="outlined"
+      />
+      <RunPlanButton
+        btnLabel={"OUT x3"}
+        planName={"focus_on_oav_view"}
+        planParams={{ direction: "out", size_of_move: "big" }}
+        btnVariant="outlined"
       />
     </Box>
   );
@@ -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() {
           <Tab label="Nudge" />
           <Tab label="Window" />
           <Tab label="Block" />
+          <Tab label="Focus" />
         </Tabs>
       </Box>
       <NudgeMove value={value} index={0} />
       <WindowMove value={value} index={1} />
       <BlockMove value={value} index={2} />
+      <FocusMove value={value} index={3} />
     </Box>
   );
 }

src/screens/OavMover/OAVSideBar.tsx

@@ -6,15 +6,7 @@ import { BacklightControl, ZoomControl } from "./OAVDeviceSettings";
 
 export function OAVSideBar() {
   return (
-    <Grid2
-      size={3}
-      sx={{
-        height: "95vh", // Height set to 95vh to span height of screen but to also leave 5vh space for the top navigation header.
-        overflowY: "auto",
-        padding: 2,
-        boxSizing: "border-box",
-      }}
-    >
+    <>
       <MoveArrows />
       <Grid2 size={3} padding={1} />
       <BacklightControl
@@ -29,6 +21,6 @@ export function OAVSideBar() {
       <CoordinateSystem />
       <hr />
       <PresetPositionsSideDrawer />
-    </Grid2>
+    </>
   );
 }

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 (
-    <div>
-      <Grid2 container spacing={2} columns={12}>
-        <Grid2 size={9} sx={{ bgcolor: bgColor }}>
-          <Box width={"100%"}>
-            <OavVideoStream
-              pv="ca://BL24I-DI-OAV-01:"
-              label="I24 OAV image stream"
-              crosshairX={crosshairX}
-              crosshairY={crosshairY}
-              onCoordClick={(x: number, y: number) => {
-                const [x_um, y_um] = [x / pixelsPerMicron, y / pixelsPerMicron];
+    <Grid2 container spacing={2} columns={12}>
+      <Grid2 size={8} sx={{ bgcolor: bgColor }}>
+        <OavVideoStream
+          pv="ca://BL24I-DI-OAV-01:"
+          label="I24 OAV image stream"
+          crosshairX={crosshairX}
+          crosshairY={crosshairY}
+          onCoordClick={(x: number, y: number) => {
+            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}`,
-                    );
-                  });
-                }
-              }}
-            />
-          </Box>
-        </Grid2>
+              });
+            }
+          }}
+        />
+      </Grid2>
+
+      <Grid2
+        size={4}
+        sx={{
+          height: "95vh", // Height set to 95vh to span height of screen but to also leave 5vh space for the top navigation header.
+          overflowY: "auto",
+          padding: 2,
+          boxSizing: "border-box",
+        }}
+      >
         <OAVSideBar />
       </Grid2>
-    </div>
+    </Grid2>
   );
 }
+
+/*
+
+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.
+
+*/