47 adding coordinate system

src/screens/OavMover.tsx

@@ -1,19 +1,26 @@
 import {
   Box,
   Button,
-  Drawer,
+  Dialog,
+  DialogContent,
+  DialogTitle,
   Grid2,
+  IconButton,
   Stack,
   TextField,
-  Tooltip,
+  Typography,
   useTheme,
+  Drawer,
+  Tooltip,
 } from "@mui/material";
 import { OavVideoStream } from "../components/OavVideoStream";
 import {
   ArrowBackRounded,
   ArrowDownwardRounded,
   ArrowForwardRounded,
   ArrowUpwardRounded,
+  Close,
+  Help,
 } from "@mui/icons-material";
 import { useState } from "react";
 
@@ -23,6 +30,7 @@ import { CoordNumberInput } from "../components/CoordNumberInput";
 import { PvDescription } from "../pv/PvComponent";
 import { SelectionWithPlanRunner } from "../components/SelectionControl";
 import { BacklightPositions, ZoomLevels } from "../pv/enumPvValues";
+import oxfordChipDiagram from "../assets/Oxford Chip Diagram.excalidraw.svg";
 
 const buttonStyle = {
   color: "white",
@@ -258,6 +266,148 @@ export function SideDrawer() {
   );
 }
 
+export function CoordinateSystem() {
+  const [open, setOpen] = React.useState(false);
+
+  const handleClickOpen = () => {
+    setOpen(true);
+  };
+  const handleClose = () => {
+    setOpen(false);
+  };
+
+  const buttonStyle = {
+    color: "white",
+    padding: "12px",
+    backgroundColor: "#1c2025",
+    width: "100%",
+    height: "85%",
+  };
+
+  return (
+    <>
+      <Box>
+        <Grid2 container rowSpacing={0} spacing={1}>
+          <Grid2 size={10}>
+            <b>Co-ordinate System Setup</b>
+          </Grid2>
+          <Grid2>
+            <Help onClick={handleClickOpen} />
+          </Grid2>
+          <Grid2 size={4}>
+            <Button
+              style={buttonStyle}
+              onClick={() =>
+                submitAndRunPlanImmediately("moveto", {
+                  place: "zero",
+                })
+              }
+            >
+              Go to Origin
+            </Button>
+          </Grid2>
+          <Grid2 size={4}>
+            <Button
+              style={buttonStyle}
+              onClick={() =>
+                submitAndRunPlanImmediately("moveto", {
+                  place: "f1",
+                })
+              }
+            >
+              Go to Fiducial 1
+            </Button>
+          </Grid2>
+          <Grid2 size={4}>
+            <Button
+              style={buttonStyle}
+              onClick={() =>
+                submitAndRunPlanImmediately("moveto", {
+                  place: "f2",
+                })
+              }
+            >
+              Go to Fiducial 2
+            </Button>
+          </Grid2>
+          <Grid2 size={4}>
+            <Button style={buttonStyle}>Set Fiducial 0</Button>
+          </Grid2>
+          <Grid2 size={4}>
+            <Button
+              style={buttonStyle}
+              onClick={() =>
+                submitAndRunPlanImmediately("fiducial", {
+                  point: "1",
+                })
+              }
+            >
+              Set Fiducial 1
+            </Button>
+          </Grid2>
+          <Grid2 size={4}>
+            <Button
+              style={buttonStyle}
+              onClick={() =>
+                submitAndRunPlanImmediately("fiducial", {
+                  point: "2",
+                })
+              }
+            >
+              Set Fiducial 2
+            </Button>
+          </Grid2>
+          <Grid2 size={6}>
+            <Button
+              style={buttonStyle}
+              onClick={() => submitAndRunPlanImmediately("cs_maker", {})}
+            >
+              Make Coordinate System
+            </Button>
+          </Grid2>
+          <Grid2 size={6}>
+            <Button
+              style={buttonStyle}
+              onClick={() => submitAndRunPlanImmediately("block_check", {})}
+            >
+              Block Check
+            </Button>
+          </Grid2>
+        </Grid2>
+      </Box>
+      <Dialog
+        onClose={handleClose}
+        aria-labelledby="customized-dialog-title"
+        open={open}
+      >
+        <DialogTitle sx={{ m: 0, p: 2 }} id="customized-dialog-title">
+          How to use Co-ordinate System Setup
+        </DialogTitle>
+        <IconButton
+          aria-label="close"
+          onClick={handleClose}
+          sx={(theme) => ({
+            position: "absolute",
+            right: 8,
+            top: 8,
+            color: theme.palette.grey[500],
+          })}
+        >
+          <Close />
+        </IconButton>
+        <DialogContent dividers>
+          <img src={oxfordChipDiagram} alt="" />
+          <Typography gutterBottom>
+            Fiducial alignment for an Oxford type chip. Fiducial 0 is the
+            origin, the top left corner. Fiducial 1 is the top right corner and
+            Fiducial 2 is the bottom left corner.
+          </Typography>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+}
+
 export function OavMover() {
   const [crosshairX, setCrosshairX] = useState<number>(200);
   const [crosshairY, setCrosshairY] = useState<number>(200);
@@ -309,6 +459,9 @@ export function OavMover() {
             label="zoom-level"
             pv="ca://BL24I-EA-OAV-01:FZOOM:MP:SELECT"
           />
+          <hr />
+          <CoordinateSystem />
+          <hr />
           <SideDrawer />
         </Grid2>
       </Grid2>