scaling working i think

src/data-entry/beamstop.tsx

@@ -10,6 +10,7 @@ import {
 } from "@mui/material";
 import { DistanceUnits } from "../utils/units";
 import { useBeamstopStore } from "./beamstopStore";
+import { useDetectorStore } from "./detectorStore";
 
 export default function BeamStopDataEntry(): JSX.Element {
   const centre = useBeamstopStore((state) => state.centre);
@@ -43,6 +44,16 @@ export default function BeamStopDataEntry(): JSX.Element {
     );
   };
 
+
+  const detector = useDetectorStore((state) => state.current)
+  const centreDetector = () => {
+    updateCentre({ x: detector.resolution.width / 2, y: detector.resolution.height / 2 })
+  }
+
+  const centreTopEdge = () => {
+    updateCentre({ x: detector.resolution.width / 2, y: 0 })
+  }
+
   return (
     <Stack spacing={2}>
       <Typography variant="h6"> Beamstop </Typography>
@@ -80,7 +91,7 @@ export default function BeamStopDataEntry(): JSX.Element {
           {" "}
           px
         </Typography>
-        <Button size="small" variant="outlined">
+        <Button size="small" variant="outlined" onClick={centreDetector}>
           Centre detector
         </Button>
       </Stack>
@@ -96,7 +107,7 @@ export default function BeamStopDataEntry(): JSX.Element {
           {" "}
           px
         </Typography>
-        <Button size="small" variant="outlined">
+        <Button size="small" variant="outlined" onClick={centreTopEdge}>
           Centre top edge
         </Button>
       </Stack>

src/plot/centrePlot.tsx

@@ -12,40 +12,66 @@ import { Vector3 } from "three";
 import { useBeamstopStore } from "../data-entry/beamstopStore";
 import { useDetectorStore } from "../data-entry/detectorStore";
 import { useCameraTubeStore } from "../data-entry/cameraTubeStore";
+import { getDomains } from "./plotUtils";
+import { PlotAxes, usePlotStore } from "./plotStore";
+import { Beamstop, CircularDevice, Detector } from "../utils/types";
 
 
 export default function CentrePlot(): JSX.Element {
-  const beamstop = useBeamstopStore();
-  const detector = useDetectorStore();
-  const cameraTube = useCameraTubeStore();
+  const plotConfig = usePlotStore();
+  const detector = useDetectorStore((state): Detector => {
+    if (plotConfig.plotAxes === PlotAxes.milimeter) {
+      return { resolution: { height: state.current.resolution.height * state.current.pixelSize, width: state.current.resolution.width * state.current.pixelSize }, pixelSize: state.current.pixelSize }
+    }
+    return state.current
+  });
+  const beamstop = useBeamstopStore((state): Beamstop => {
+    if (plotConfig.plotAxes === PlotAxes.milimeter) {
+      return { centre: { x: (state.centre.x ?? 0) * detector.pixelSize, y: (state.centre.y ?? 0) * detector.pixelSize }, diameter: state.diameter, clearance: (state.clearance ?? 0) * detector.pixelSize }
+    }
+    return {
+      centre: state.centre, diameter: (state.diameter / detector.pixelSize), clearance: state.clearance
+    }
+  });
+
+  const cameraTube = useCameraTubeStore((state): CircularDevice => {
+    if (plotConfig.plotAxes === PlotAxes.milimeter) {
+      return { centre: { x: (state.centre.x ?? 0) * detector.pixelSize, y: (state.centre.y ?? 0) * detector.pixelSize }, diameter: state.diameter }
+    }
+    return { centre: state.centre, diameter: (state.diameter / detector.pixelSize) }
+  });
+
+
+  //const cameraTube = useCameraTubeStore();
+  const domains = getDomains(detector, { centre: cameraTube.centre, diameter: cameraTube.diameter })
+
 
   return (
     <Box>
       <Card>
         <CardContent>
           <div style={{ display: "grid", height: "60vh", width: "50vw", border: "solid black" }}>
             <VisCanvas
-              style={{ padding: "5px 5px 5px" }}
-              abscissaConfig={{ visDomain: [-10, 10], showGrid: true, nice: true }}
-              ordinateConfig={{ visDomain: [-10, 10], showGrid: true, nice: true }}
+              abscissaConfig={{ visDomain: [domains.xAxis.min, domains.xAxis.max], showGrid: true, nice: true }}
+              ordinateConfig={{ visDomain: [domains.yAxis.max, domains.yAxis.min], showGrid: true, nice: true }}
             >
               <DefaultInteractions />
               <ResetZoomButton />
               <DataToHtml
                 points={[
                   new Vector3(beamstop.centre.x ?? 0, beamstop.centre.y ?? 0),
-                  new Vector3((beamstop.centre.x ?? 0) + beamstop.diameter / 2, beamstop.centre.y ?? 0),
-                  new Vector3((beamstop.centre.x ?? 0) + beamstop.diameter / 2 + (beamstop.clearance ?? 0), beamstop.centre.y ?? 0),
+                  new Vector3((beamstop.centre.x ?? 0) + (beamstop.diameter / 2), beamstop.centre.y ?? 0),
+                  new Vector3((beamstop.centre.x ?? 0) + (beamstop.diameter / 2) + (beamstop.clearance ?? 0), beamstop.centre.y ?? 0),
                   new Vector3(cameraTube.centre.x ?? 0, cameraTube.centre.y ?? 0),
-                  new Vector3((cameraTube.centre.x ?? 0) + cameraTube.diameter, cameraTube.centre.y ?? 0),
+                  new Vector3((cameraTube.centre.x ?? 0) + (cameraTube.diameter / 2), cameraTube.centre.y ?? 0),
                   new Vector3(0, 0),
-                  new Vector3(4, 4)
+                  new Vector3(detector.resolution.width, detector.resolution.height)
                 ]}
               >
                 {(beamstopCentre: Vector3, beamstopPerimeter: Vector3, clearance: Vector3, cameraTubeCentre: Vector3, cameraTubePerimeter: Vector3, detectorLower: Vector3, detectorUpper: Vector3) => (
                   <SvgElement>
-                    <SvgCircle coords={[cameraTubeCentre, cameraTubePerimeter]} fill="rgba(255, 0, 0, 0.5)" id="camera tube" />
-                    <SvgCircle coords={[beamstopCentre, clearance]} fill="rgba(255, 255, 0, 0.5)" id="clearance" />
+                    <SvgCircle coords={[cameraTubeCentre, cameraTubePerimeter]} fill="rgba(0, 255, 0, 0.5)" id="camera tube" />
+                    <SvgCircle coords={[beamstopCentre, clearance]} fill="rgba(0, 0, 255, 0.5)" id="clearance" />
                     <SvgCircle coords={[beamstopCentre, beamstopPerimeter]} fill="black" id="beamstop" />
                     <SvgRect coords={[detectorLower, detectorUpper]} fill="rgba(255, 0, 0, 0.5)" id="detector" stroke="black" strokePosition="outside" strokeWidth={0} />
                   </SvgElement>

src/plot/legendBar.tsx

@@ -26,12 +26,12 @@ export default function LegendBar(): JSX.Element {
           <Typography variant="h6"> Legend</Typography>
           <Typography>Add something to do with colors here</Typography>
           <FormGroup>
-            <FormControlLabel control={<Checkbox />} label="Detector" />
-            <FormControlLabel control={<Checkbox />} label="Beamstop" />
-            <FormControlLabel control={<Checkbox />} label="Camera tube" />
-            <FormControlLabel control={<Checkbox />} label="Q range" />
-            <FormControlLabel control={<Checkbox />} label="Mask" />
-            <FormControlLabel control={<Checkbox />} label="Calibrant" />
+            <FormControlLabel control={<Checkbox checked={plotConfig.detector.inPlot} />} label="Detector" />
+            <FormControlLabel control={<Checkbox checked={plotConfig.beamstop.inPlot} />} label="Beamstop" />
+            <FormControlLabel control={<Checkbox checked={plotConfig.cameraTube.inPlot} />} label="Camera tube" />
+            <FormControlLabel control={<Checkbox checked={plotConfig.qrange} />} label="Q range" />
+            <FormControlLabel control={<Checkbox checked={plotConfig.mask} />} label="Mask" />
+            <FormControlLabel control={<Checkbox checked={plotConfig.calibrantInPlot} />} label="Calibrant" />
           </FormGroup>
           <Divider />
           <Typography>Current calibrant: {5}</Typography>

src/plot/plotStore.ts

@@ -25,7 +25,7 @@ export interface PlotConfig {
 }
 
 export const usePlotStore = create<PlotConfig>((set) => ({
-    detector: { inPlot: true, colour: "red" },
+    detector: { inPlot: false, colour: "red" },
     beamstop: { inPlot: true, colour: "blue" },
     cameraTube: { inPlot: true, colour: "green" },
     clearnace: { inPlot: true, colour: "pink" },

src/plot/plotUtils.ts

@@ -0,0 +1,9 @@
+import { CircularDevice, Detector } from "../utils/types";
+import NumericRange from "../calculations/numericRange";
+
+const offset = 10;
+
+export const getDomains = (detector: Detector, cameraTube: CircularDevice): { xAxis: NumericRange, yAxis: NumericRange } => {
+    const maxLength = Math.max(detector.resolution.height, detector.resolution.width, cameraTube.diameter)
+    return { xAxis: new NumericRange(-offset, Math.round(maxLength + offset)), yAxis: new NumericRange(-offset, Math.round(maxLength + offset)) }
+}

src/presets/presetConfigs.json

@@ -23,28 +23,28 @@
     "minCameraLength": 10,
     "maxCameraLength": 100
   },
-  "second": {
+  "I22 SAXS Isotropic": {
     "detector": "Pilatus P3-2M",
     "beamstop": {
       "centre": {
-        "x": 2,
-        "y": 2
+        "x": 738,
+        "y": 100
       },
       "diameter": 4,
-      "clearance": 1
+      "clearance": 10
     },
     "cameraTube": {
       "centre": {
-        "x": 2,
-        "y": 2
+        "x": 738,
+        "y": 840
       },
-      "diameter": 2
+      "diameter": 310
     },
-    "angle": 1,
+    "angle": 1.57,
     "cameraLength": 1,
     "minWavelength": 1,
     "maxWavelength": 1,
-    "minCameraLength": 10,
+    "minCameraLength": 1.9,
     "maxCameraLength": 100
   }
 }