Skip to content

Commit 430d649

Browse files
author
Tamoor Shahid
committed
Grouped components and separated into files
1 parent 69b0d0a commit 430d649

File tree

5 files changed

+379
-382
lines changed

5 files changed

+379
-382
lines changed

‎src/screens/OavMover/CoordinateSystem.tsx‎

Lines changed: 140 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,140 @@
1+
import { Help, Close } from "@mui/icons-material";
2+
import {
3+
Box,
4+
Grid2,
5+
Dialog,
6+
DialogTitle,
7+
IconButton,
8+
DialogContent,
9+
Typography,
10+
} from "@mui/material";
11+
import React from "react";
12+
import { RunPlanButton } from "../../blueapi/BlueapiComponents";
13+
import oxfordChipDiagram from "../../assets/Oxford Chip Diagram.excalidraw.svg";
14+
15+
export function CoordinateSystem() {
16+
const [open, setOpen] = React.useState(false);
17+
18+
const handleClickOpen = () => {
19+
setOpen(true);
20+
};
21+
const handleClose = () => {
22+
setOpen(false);
23+
};
24+
25+
return (
26+
<>
27+
<Box>
28+
<Grid2 container alignItems={"center"} rowSpacing={1} spacing={0.5}>
29+
<Grid2 size={10}>
30+
<b>Co-ordinate System Setup</b>
31+
</Grid2>
32+
<Grid2>
33+
<Help onClick={handleClickOpen} />
34+
</Grid2>
35+
<Grid2 size={4}>
36+
<RunPlanButton
37+
btnLabel="Go to origin"
38+
planName="moveto"
39+
planParams={{ place: "zero" }}
40+
title="Go to Fiducial 0"
41+
btnVariant="contained"
42+
btnSize="large"
43+
/>
44+
</Grid2>
45+
<Grid2 size={4}>
46+
<RunPlanButton
47+
btnLabel="Go to Fiducial1"
48+
planName="moveto"
49+
planParams={{ place: "f1" }}
50+
title="Go to Fiducial 1"
51+
btnVariant="contained"
52+
btnSize="large"
53+
/>
54+
</Grid2>
55+
<Grid2 size={4}>
56+
<RunPlanButton
57+
btnLabel="Go to Fiducial2"
58+
planName="moveto"
59+
planParams={{ place: "f2" }}
60+
title="Go to Fiducial 2"
61+
btnVariant="contained"
62+
btnSize="large"
63+
/>
64+
</Grid2>
65+
<Grid2 size={4}>
66+
<RunPlanButton
67+
btnLabel="Set Fiducial0"
68+
planName="gui_set_fiducial_0"
69+
title="Set Fiducial 0"
70+
btnVariant="contained"
71+
/>
72+
</Grid2>
73+
<Grid2 size={4}>
74+
<RunPlanButton
75+
btnLabel="Set Fiducial1"
76+
planName="fiducial"
77+
planParams={{ point: "1" }}
78+
title="Set Fiducial 1"
79+
btnVariant="contained"
80+
/>
81+
</Grid2>
82+
<Grid2 size={4}>
83+
<RunPlanButton
84+
btnLabel="Set Fiducial2"
85+
planName="fiducial"
86+
planParams={{ point: "2" }}
87+
title="Set Fiducial 2"
88+
btnVariant="contained"
89+
/>
90+
</Grid2>
91+
<Grid2 size={6}>
92+
<RunPlanButton
93+
btnLabel="Make Coord System"
94+
planName="cs_maker"
95+
title="Create the coordinate system on the pmac."
96+
btnVariant="contained"
97+
/>
98+
</Grid2>
99+
<Grid2 size={6}>
100+
<RunPlanButton
101+
btnLabel="Run block check"
102+
planName="block_check"
103+
title="Check the coordinate system was set up correctly."
104+
btnVariant="contained"
105+
/>
106+
</Grid2>
107+
</Grid2>
108+
</Box>
109+
<Dialog
110+
onClose={handleClose}
111+
aria-labelledby="customized-dialog-title"
112+
open={open}
113+
>
114+
<DialogTitle sx={{ m: 0, p: 2 }} id="customized-dialog-title">
115+
How to use Co-ordinate System Setup
116+
</DialogTitle>
117+
<IconButton
118+
aria-label="close"
119+
onClick={handleClose}
120+
sx={(theme) => ({
121+
position: "absolute",
122+
right: 8,
123+
top: 8,
124+
color: theme.palette.grey[500],
125+
})}
126+
>
127+
<Close />
128+
</IconButton>
129+
<DialogContent dividers>
130+
<img src={oxfordChipDiagram} alt="" />
131+
<Typography gutterBottom>
132+
Fiducial alignment for an Oxford type chip. Fiducial 0 is the
133+
origin, the top left corner. Fiducial 1 is the top right corner and
134+
Fiducial 2 is the bottom left corner.
135+
</Typography>
136+
</DialogContent>
137+
</Dialog>
138+
</>
139+
);
140+
}

‎src/screens/OavMover/OavControlHelper.tsx‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
import { Box, Grid2, Stack, TextField, useTheme } from "@mui/material";
2+
import { CoordNumberInput } from "../../components/CoordNumberInput";
3+
4+
export function BeamCentre({
5+
setCrosshairX,
6+
setCrosshairY,
7+
}: {
8+
setCrosshairX: React.Dispatch<React.SetStateAction<number>>;
9+
setCrosshairY: React.Dispatch<React.SetStateAction<number>>;
10+
}) {
11+
const theme = useTheme();
12+
return (
13+
<Box
14+
bgcolor={theme.palette.background.paper}
15+
borderRadius={5}
16+
paddingTop={1}
17+
paddingBottom={1}
18+
>
19+
<Grid2 container spacing={0} columns={3}>
20+
<Grid2 size={3} padding={1}>
21+
<b>Beam center:</b>
22+
</Grid2>
23+
<Grid2 size={3}>
24+
<Stack direction="row" spacing={2} padding={2}>
25+
<CoordNumberInput
26+
placeholder="x"
27+
onChange={(_e, val) => setCrosshairX(val ? val : 0)}
28+
defaultValue={200}
29+
min={0}
30+
max={1000}
31+
aria-label="X"
32+
/>
33+
<CoordNumberInput
34+
placeholder="y"
35+
onChange={(_e, val) => setCrosshairY(val ? val : 0)}
36+
defaultValue={200}
37+
min={0}
38+
max={750}
39+
aria-label="Y"
40+
/>
41+
</Stack>
42+
</Grid2>
43+
</Grid2>
44+
</Box>
45+
);
46+
}
47+
48+
export function PixelsToMicrons({
49+
setPixelsPerMicron,
50+
}: {
51+
setPixelsPerMicron: React.Dispatch<React.SetStateAction<number>>;
52+
}) {
53+
const theme = useTheme();
54+
return (
55+
<Box
56+
bgcolor={theme.palette.background.paper}
57+
borderRadius={5}
58+
paddingTop={1}
59+
paddingBottom={1}
60+
>
61+
<Grid2 container spacing={0} columns={3}>
62+
<Grid2 size={3}>
63+
<Stack direction="row" spacing={2} padding={2}>
64+
<TextField
65+
label="Pixels per micron"
66+
onChange={(e) =>
67+
setPixelsPerMicron(
68+
Number(e.target.value) ? Number(e.target.value) : 0,
69+
)
70+
}
71+
defaultValue={1.25}
72+
aria-label="Pixels per micron"
73+
/>
74+
</Stack>
75+
</Grid2>
76+
</Grid2>
77+
</Box>
78+
);
79+
}

0 commit comments

Comments
 (0)