Skip to content

Commit

Permalink
working mask stripes
Browse files Browse the repository at this point in the history
  • Loading branch information
tizayi committed Aug 15, 2024
1 parent 012da63 commit 9cdd179
Show file tree
Hide file tree
Showing 9 changed files with 186 additions and 60 deletions.
60 changes: 28 additions & 32 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
"dependencies": {
"@emotion/react": "^11.11.3",
"@emotion/styled": "^11.11.0",
"@h5web/lib": "^11.2.0",
"@h5web/lib": "^12.0.1",
"@mui/icons-material": "^5.15.3",
"@mui/material": "^5.14.17",
"@mui/system": "^5.15.9",
Expand Down
16 changes: 15 additions & 1 deletion src/app.tsx
Original file line number Diff line number Diff line change
@@ -1,14 +1,27 @@
import { Stack} from "@mui/material";
import { Stack, ThemeProvider, createTheme } from "@mui/material";
import DataSideBar from "./data-entry/dataSideBar";
import CentrePlot from "./plot/centrePlot";
import BasicAppBar from "./basicAppBar";
import CssBaseline from '@mui/material/CssBaseline';

const theme = createTheme({
breakpoints: {
values: {
xs: 0,
sm: 600,
md: 900,
lg: 1500,
xl: 1536,
},
},
});


export default function App(): JSX.Element {
return (
<>
<CssBaseline>
<ThemeProvider theme={theme}>
<Stack spacing={1}>
<BasicAppBar />
<Stack
Expand All @@ -20,6 +33,7 @@ export default function App(): JSX.Element {
<CentrePlot />
</Stack>
</Stack>
</ThemeProvider>
</CssBaseline>
</>
);
Expand Down
16 changes: 13 additions & 3 deletions src/plot/centrePlot.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ import {
} from "../results/resultsStore";
import {
convertBetweenQAndD,
convertBetweenQAndS,
convertFromQTooS,
} from "../results/scatteringQuantities";
import {
AppBeamline,
Expand All @@ -41,6 +41,7 @@ import { UnitVector, color2String, getDomains } from "./plotUtils";
import SvgAxisAlignedEllipse from "./svgEllipse";
import { useMemo } from "react";
import { formatLogMessage } from "../utils/units";
import SvgMask from "./svgMask";

/**
* A react componenet that plots the items that make up the system
Expand Down Expand Up @@ -171,7 +172,7 @@ export default function CentrePlot(): JSX.Element {
return (
<Stack direction="column" spacing={1} flexGrow={1}>
<Stack direction={{ sm: "column", md: "row"}} spacing={1} flexGrow={1}>
<Card variant="outlined" sx= {{ aspectRatio : 1.05 / 1}}>
<Card variant="outlined" sx= {{ aspectRatio : 1.07 / 1 }}>
<CardContent sx={{ width: "100%", height: "100%"}}>
<div
style={{
Expand Down Expand Up @@ -248,6 +249,15 @@ export default function CentrePlot(): JSX.Element {
id="detector"
/>
)}
{plotConfig.detector && (
<SvgMask
coords={[detectorLower, detectorUpper]}
fill={color2String(plotConfig.visibleColor)}
numModules={new Vector3(3,4)}
gapFraction= {new Vector3(0.1,0.1)}
missingSegments={[6]}
/>
)}
{plotConfig.inaccessibleRange && (
<SvgLine
coords={[beamstopCentre, visibleRangeStart]}
Expand Down Expand Up @@ -468,7 +478,7 @@ function getRange(): (state: ResultStore) => UnitRange | null {
result = convertBetweenQAndD(unit(value, state.dUnits));
break;
case ScatteringOptions.s:
result = convertBetweenQAndS(unit(value, state.sUnits));
result = convertFromQTooS(unit(value, state.sUnits));
break;
default:
result = unit(value, state.qUnits);
Expand Down
105 changes: 105 additions & 0 deletions src/plot/svgMask.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,105 @@
import { SvgRect } from '@h5web/lib';
import type { SVGProps } from 'react';
import { Vector3 } from 'three';

type Rect = [Vector3, Vector3];

interface Props extends SVGProps<SVGPathElement> {
coords: Rect;
strokePosition?: 'inside' | 'outside';
strokeWidth?: number;
numModules: Vector3,
gapFraction: Vector3,
missingSegments: number[]
}

function SvgMask(props: Props){
// watch out some crazy insane big boy maths is incoming
const [detectorUpper, detectorLower] = props.coords;
// check if clone is needed later on
const fulllength = detectorLower.clone().sub(detectorUpper);
const gaplength = fulllength.clone().multiply(props.gapFraction);
const moduleLength =
fulllength.clone()
.sub(gaplength.clone()
.multiply(props.numModules))
.divide(props.numModules);

return (
<>
{/* plot vertical stripes */}
{[...Array(props.numModules.x -1).keys()].map((i:number) =>
<SvgRect
key={i}
coords={
generateVerticalStripes(
props.coords,
moduleLength.x,
gaplength.x,
i+1)
}
fill={props.fill}
id="mask"
/>)
}
{/* plot horizontal stripes */}
{[...Array(props.numModules.y -1).keys()].map((i:number) =>
<SvgRect
key={i}
coords={
generateHorizontalStripes(
props.coords,
moduleLength.y,
gaplength.y,
i+1)
}
fill={props.fill}
id="mask"
/>)
}
</>
)
}

export type {Props as SvgMaskProps};
export default SvgMask;



function generateLowerBound(
moduleLen: number, gapLen:number, moduleNum: number): number{
return moduleNum*moduleLen + (moduleNum-1)*gapLen
}

function generateUpperBound(
moduleLen: number, gapLen:number, moduleNum: number): number{
return moduleNum*moduleLen + moduleNum*gapLen
}

function generateVerticalStripes(
coords: Rect,
moduleLenX: number,
gapLenX: number,
moduleNum: number): Rect{
return [
new Vector3(
coords[0].x + generateLowerBound(moduleLenX, gapLenX, moduleNum),
coords[0].y),
new Vector3(
coords[0].x + generateUpperBound(moduleLenX, gapLenX, moduleNum),
coords[1].y)
]
}

function generateHorizontalStripes(
coords: Rect,
moduleLenY: number,
gapLenY: number,
moduleNum: number): Rect{
return [
new Vector3(coords[0].x,
coords[0].y + generateLowerBound(moduleLenY, gapLenY, moduleNum)),
new Vector3(coords[1].x,
coords[0].y + generateUpperBound(moduleLenY, gapLenY, moduleNum))
]
}
16 changes: 8 additions & 8 deletions src/results/rangeTable.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ import { ScatteringOptions, useResultStore } from "./resultsStore";
import { ReciprocalWavelengthUnits, WavelengthUnits } from "../utils/units";
import {
convertBetweenQAndD,
convertBetweenQAndS,
convertFromQTooS,
} from "./scatteringQuantities";
import UnitRange from "../calculations/unitRange";

Expand All @@ -31,16 +31,16 @@ export default function RangeTable(props: { qRange: UnitRange }): JSX.Element {
updateQUnits(event.target.value as ReciprocalWavelengthUnits);
};

const handleSunits = (event: SelectChangeEvent<WavelengthUnits>) => {
updateSUnits(event.target.value as WavelengthUnits);
const handleSunits = (event: SelectChangeEvent<ReciprocalWavelengthUnits>) => {
updateSUnits(event.target.value as ReciprocalWavelengthUnits);
};

const handleDunits = (event: SelectChangeEvent<WavelengthUnits>) => {
updateDUnits(event.target.value as WavelengthUnits);
};
const qRange = props.qRange.to(resultsStore.qUnits as string);
const sRange = props.qRange
.apply(convertBetweenQAndS)
.apply(convertFromQTooS)
.to(resultsStore.sUnits as string);
const dRange = props.qRange
.apply(convertBetweenQAndD)
Expand Down Expand Up @@ -118,11 +118,11 @@ export default function RangeTable(props: { qRange: UnitRange }): JSX.Element {
value={resultsStore.sUnits}
onChange={handleSunits}
>
<MenuItem value={WavelengthUnits.nanometres}>
{WavelengthUnits.nanometres}
<MenuItem value={ReciprocalWavelengthUnits.nanometres}>
{"1 / nm"}
</MenuItem>
<MenuItem value={WavelengthUnits.angstroms}>
{"\u212B"}
<MenuItem value={ReciprocalWavelengthUnits.angstroms}>
{"1 / " + "\u212B"}
</MenuItem>
</Select>
</FormControl>
Expand Down
6 changes: 3 additions & 3 deletions src/results/resultsBar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ import RangeTable from "./rangeTable";
import { ResultStore, ScatteringOptions, useResultStore } from "./resultsStore";
import {
convertBetweenQAndD,
convertBetweenQAndS,
convertFromSTooQ,
} from "./scatteringQuantities";

function getVisibilitySettings(
Expand Down Expand Up @@ -55,8 +55,8 @@ function getVisibilitySettings(
textBoxUnits = resultStore.dUnits;
break;
case ScatteringOptions.s:
diagramVisible = visableQRange.apply(convertBetweenQAndS).to("nm");
diagramFull = fullQrange.apply(convertBetweenQAndS).to("nm");
diagramVisible = visableQRange.apply(convertFromSTooQ).to("nm");
diagramFull = fullQrange.apply(convertFromSTooQ).to("nm");
diagramRequested = UnitRange.fromNumericRange(
requestedRange,
resultStore.sUnits as string,
Expand Down
Loading

0 comments on commit 9cdd179

Please sign in to comment.