Merge pull request #49 from DiamondLightSource/12-preset_buttons

Added preset buttons

Author: adaudon

src/screens/OavMover.tsx

@@ -1,4 +1,13 @@
-import { Box, Button, Grid2, Stack, TextField, useTheme } from "@mui/material";
+import {
+  Box,
+  Button,
+  Drawer,
+  Grid2,
+  Stack,
+  TextField,
+  Tooltip,
+  useTheme,
+} from "@mui/material";
 import { OavVideoStream } from "../components/OavVideoStream";
 import {
   ArrowBackRounded,
@@ -15,6 +24,13 @@ import { PvDescription } from "../pv/PvComponent";
 import { SelectionWithPlanRunner } from "../components/SelectionControl";
 import { BacklightPositions, ZoomLevels } from "../pv/enumPvValues";
 
+const buttonStyle = {
+  color: "white",
+  margin: "5px",
+  padding: "15px",
+  backgroundColor: "#1c2025",
+};
+
 function BacklightControl(props: PvDescription) {
   const theme = useTheme();
   return (
@@ -175,6 +191,73 @@ export function PixelsToMicrons({
   );
 }
 
+export function PresetMovements() {
+  return (
+    <Box sx={{ textAlign: `center` }}>
+      <p>
+        <b>Preset Positions</b>
+      </p>
+      <Grid2>
+        <Tooltip title={"Move into position for collection"}>
+          <Button
+            style={buttonStyle}
+            onClick={() =>
+              submitAndRunPlanImmediately("moveto_preset", {
+                place: "collect_position",
+              })
+            }
+          >
+            Collect Position
+          </Button>
+        </Tooltip>
+
+        <Tooltip title={"Move hardware for sample loading"}>
+          <Button
+            style={buttonStyle}
+            onClick={() =>
+              submitAndRunPlanImmediately("moveto_preset", {
+                place: "load_position",
+              })
+            }
+          >
+            Load Position
+          </Button>
+        </Tooltip>
+        <Tooltip title={"Align microdrop"}>
+          <Button
+            style={buttonStyle}
+            onClick={() =>
+              submitAndRunPlanImmediately("moveto_preset", {
+                place: "microdrop_position",
+              })
+            }
+          >
+            Microdrop Align
+          </Button>
+        </Tooltip>
+      </Grid2>
+    </Box>
+  );
+}
+
+export function SideDrawer() {
+  const [open, setOpen] = useState(false);
+  const toggleDrawer = (newOpen: boolean) => () => {
+    setOpen(newOpen);
+  };
+
+  return (
+    <>
+      <Button style={buttonStyle} onClick={toggleDrawer(true)}>
+        Preset Positions
+      </Button>
+      <Drawer open={open} onClose={toggleDrawer(false)}>
+        <PresetMovements />
+      </Drawer>
+    </>
+  );
+}
+
 export function OavMover() {
   const [crosshairX, setCrosshairX] = useState<number>(200);
   const [crosshairY, setCrosshairY] = useState<number>(200);
@@ -226,6 +309,7 @@ export function OavMover() {
             label="zoom-level"
             pv="ca://BL24I-EA-OAV-01:FZOOM:MP:SELECT"
           />
+          <SideDrawer />
         </Grid2>
       </Grid2>
     </div>