working items on plot

DiamondLightSource · Sep 6, 2023 · 9ddf325 · 9ddf325
1 parent 04f6f29
commit 9ddf325
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 31 deletions.
diff --git a/src/plot/centrePlot.tsx b/src/plot/centrePlot.tsx
@@ -3,55 +3,48 @@ import {
   DataToHtml,
   DefaultInteractions,
   ResetZoomButton,
-  SvgCircle,
-  SvgRect,
-  SvgLine,
   SvgElement,
   VisCanvas,
 } from "@h5web/lib"
 import { Vector3 } from "three";
+import { useBeamstopStore } from "../data-entry/beamstopStore";
+import { useDetectorStore } from "../data-entry/detectorStore";
+import { useCameraTubeStore } from "../data-entry/cameraTubeStore";
 
 
 export default function CentrePlot(): JSX.Element {
+  const beamstop = useBeamstopStore();
+  const detector = useDetectorStore();
+  const cameraTube = useCameraTubeStore();
+
   return (
     <Box>
       <Card>
         <CardContent>
           <div style={{ display: "grid", height: "60vh", width: "50vw", border: "solid black" }}>
             <VisCanvas
               style={{ padding: "5px 5px 5px" }}
-              abscissaConfig={{ visDomain: [0, 10], showGrid: true }}
-              ordinateConfig={{ visDomain: [0, 10], showGrid: true }}
+              abscissaConfig={{ visDomain: [0, 10], showGrid: true, nice: true }}
+              ordinateConfig={{ visDomain: [0, 10], showGrid: true, nice: true }}
             >
               <DefaultInteractions />
               <ResetZoomButton />
               <DataToHtml
                 points={[
-                  new Vector3(2, 8),
-                  new Vector3(4, 6),
-                  new Vector3(3, 2),
-                  new Vector3(6, 4),
-                  new Vector3(6, 6),
-                  new Vector3(7, 7),
+                  new Vector3(beamstop.centre.x ?? 0, beamstop.centre.y ?? 0),
+                  new Vector3(beamstop.diameter),
+                  new Vector3(beamstop.clearance ?? 0),
+                  new Vector3(cameraTube.centre.x ?? 0, cameraTube.centre.y ?? 0),
+                  new Vector3(cameraTube.diameter),
+                  new Vector3(detector.current.resolution.height, detector.current.resolution.width),
                 ]}
               >
-                {(pt1: Vector3, pt2: Vector3, pt3: Vector3, pt4: Vector3, pt5: Vector3, pt6: Vector3) => (
+                {(beamstopCentre: Vector3, BeamstopDiameter: Vector3, clearnace: Vector3, cameraTubeCentre: Vector3, cameraTubeDiameter: Vector3, detectorResolution: Vector3) => (
                   <SvgElement>
-                    <SvgRect coords={[pt1, pt2]} fill="" />
-                    <SvgLine
-                      coords={[pt3, pt4]}
-                      stroke="darkblue"
-                      strokeWidth={5}
-                      strokeLinecap="round"
-                    />
-                    <SvgRect
-                      coords={[pt5, pt6]}
-                      fill="none"
-                      stroke="teal"
-                      strokeWidth={10}
-                      strokePosition="outside"
-                    />
-                    <SvgCircle coords={[pt5, pt6]} fill="none" stroke="lightseagreen" />
+                    <rect x={4} y={4} width={detectorResolution.y} height={detectorResolution.x} fill="rgba(255, 0, 0, 0.5)" stroke="lightseagreen" />
+                    <circle cx={beamstopCentre.x} cy={beamstopCentre.y} r={BeamstopDiameter.x + clearnace.x} fill="rgba(255,0, 255, 0.5)" stroke="lightseagreen" />
+                    <circle cx={beamstopCentre.x} cy={beamstopCentre.y} r={BeamstopDiameter.x} fill="black" stroke="lightseagreen" />
+                    <circle cx={cameraTubeCentre.x} cy={cameraTubeCentre.y} r={cameraTubeDiameter.x} fill="rgba(255,255,0, 0.5)" stroke="lightseagreen" />
                   </SvgElement>
                 )}
               </DataToHtml>
@@ -61,4 +54,4 @@ export default function CentrePlot(): JSX.Element {
       </Card>
     </Box >
   );
-}
+}
diff --git a/src/plot/legendBar.tsx b/src/plot/legendBar.tsx
@@ -2,17 +2,25 @@ import {
   Card,
   CardContent,
   Checkbox,
+  Divider,
+  FormControl,
   FormControlLabel,
   FormGroup,
+  FormLabel,
+  Radio,
+  RadioGroup,
   Stack,
   Typography,
 } from "@mui/material";
+import {
+  PlotAxes
+} from "./plotStore";
 
 export default function LegendBar(): JSX.Element {
   return (
     <Card sx={{ height: 1, width: 1 }}>
       <CardContent>
-        <Stack spacing={2}>
+        <Stack spacing={1}>
           <Typography variant="h6"> Legend</Typography>
           <Typography>Add something to do with colors here</Typography>
           <FormGroup>
@@ -23,7 +31,21 @@ export default function LegendBar(): JSX.Element {
             <FormControlLabel control={<Checkbox />} label="Mask" />
             <FormControlLabel control={<Checkbox />} label="Calibrant" />
           </FormGroup>
-          <Typography> Currently selected Calibrant is: {5}</Typography>
+          <Divider />
+          <Typography>Calibrant: {5}</Typography>
+          <Divider />
+          <FormControl>
+            <FormLabel id="demo-radio-buttons-group-label">Axes:</FormLabel>
+            <RadioGroup
+              aria-labelledby="demo-radio-buttons-group-label"
+              defaultValue="female"
+              name="radio-buttons-group"
+            >
+              <FormControlLabel value={PlotAxes.milimeter} control={<Radio />} label="Axes in mm" />
+              <FormControlLabel value={PlotAxes.pixel} control={<Radio />} label="Axes in pixels" />
+              <FormControlLabel value={PlotAxes.reciprocal} control={<Radio />} label="Axes in q(nm^-1)" />
+            </RadioGroup>
+          </FormControl>
         </Stack>
       </CardContent>
     </Card>

diff --git a/src/sideMenu.tsx b/src/sideMenu.tsx
@@ -10,7 +10,17 @@ export default function SideMenu() {
       <List>
         <ListItem>
           <Stack direction="row">
-            <Typography flexGrow={3}>Settings</Typography>
+            <Typography flexGrow={3}>Add New detector</Typography>
+          </Stack>
+        </ListItem>
+        <ListItem>
+          <Stack direction="row">
+            <Typography flexGrow={3}>Add New detector</Typography>
+          </Stack>
+        </ListItem>
+        <ListItem>
+          <Stack direction="row">
+            <Typography flexGrow={3}>Save current config as preset</Typography>
           </Stack>
         </ListItem>
       </List>