Skip to content

ViSR: replace camera view with actual video feed from dcam3 #158

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
tomkane-dls wants to merge 5 commits into
base: main
Choose a base branch
from
Open

ViSR: replace camera view with actual video feed from dcam3 #158

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
a773acf
replace camera view with actual video feed from dcam3
tomkane-dls Aug 14, 2026
1044fe8
add titles in TomographyPlots to make viewers more generic
Abigail-Yates Aug 17, 2026
4f411d9
remove typography import to fix linting
Abigail-Yates Aug 17, 2026
956a779
remove extra <Box> parent objects in sliceViewer and VolumeViewer
Abigail-Yates Aug 17, 2026
90c1deb
remove VolumeViewer and show VolumeRenderer directly in TomographyPlots
Abigail-Yates Aug 17, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
55 changes: 0 additions & 55 deletions apps/visr/src/components/tomography/CameraViewer.tsx
View file
Open in desktop

This file was deleted.

48 changes: 8 additions & 40 deletions apps/visr/src/components/tomography/SliceViewer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Box, Typography } from "@mui/material";
import { Box } from "@mui/material";
import { Plane } from "./PlaneEnum";
import { HeatmapPlot } from "@diamondlightsource/davidia";
import ndarray from "ndarray";
Expand Down Expand Up @@ -39,44 +39,12 @@ export default function SliceViewer({
}

return (
<Box
sx={{
display: "flex",
flexDirection: "column",
height: "100%",
borderRight: 1,
borderColor: "divider",
}}
>
<Box
sx={{
px: 2,
py: 1.25,
display: "flex",
justifyContent: "space-between",
alignItems: "center",
borderBottom: 1,
borderColor: "divider",
}}
>
<Typography variant="overline" color="primary">
Slice View
</Typography>
</Box>
<div
style={{
flex: 1,
justifyContent: "center",
}}
>
<HeatmapPlot
aspect="auto"
plotConfig={{}}
values={sliceNdarray}
domain={[0, 255]}
customToolbarChildren={null}
/>
</div>
</Box>
<HeatmapPlot
aspect="auto"
plotConfig={{}}
values={sliceNdarray}
domain={[0, 255]}
customToolbarChildren={null}
/>
);
}
36 changes: 28 additions & 8 deletions apps/visr/src/components/tomography/TomographyPlots.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,8 @@
import { Box } from "@mui/material";
import CameraViewer from "./CameraViewer";
import VolumeViewer from "./VolumeViewer";
import { Box, Typography } from "@mui/material";
import SliceViewer from "./SliceViewer";
import { Plane } from "./PlaneEnum";
import { ReactGridLayout, useContainerWidth } from "react-grid-layout";
import VolumeRenderer from "./VolumeRenderer";

interface Props {
volumeData: Uint8Array;
Expand All @@ -17,7 +16,6 @@ interface Props {
function TomographyPlots({
volumeData,
volumeShape,
volumeVisible,
plane,
slice,
drawerOpen,
Expand All @@ -35,11 +33,14 @@ function TomographyPlots({
if (!volumeData) return <Box />;

const views = [
<CameraViewer />,
<VolumeViewer
<img
src="https://visr-pvws.diamond.ac.uk/mjpg/BL01B-DI-CAM-01:PVA:OUTPUT"
alt="Detector"
/>,
Comment on lines +37 to +40

@EmsArnold EmsArnold Aug 18, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is there a benefit to just using an img over something more complex like the webcam from cs-web-lib (already in use in i15-1 app)?

Additionally, there is currently no handler for this, so MSW complains when testing locally. Would be good to mock this somehow and handle errors if the stream is ever unavailable.

@tomkane-dls tomkane-dls Aug 19, 2026

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In terms of implementing something more complex I think that is a good idea in the future. For now I would just like to improve from our static placeholder image to the actual camera feed. It would also help us to check how the tomography camera is doing given the question marks before.

<VolumeRenderer
volumeData={volumeData}
volumeShape={volumeShape}
visible={volumeVisible}
// revolve={revolve}
/>,
<SliceViewer
volumeData={volumeData}
Expand All @@ -48,14 +49,33 @@ function TomographyPlots({
plane={plane}
/>,
];
const titles = ["Camera View", "Reconstruction", "Slice View"];
const plots = views.map((view, i) => (
<Box
key={i}
sx={{
flex: 1,
display: "flex",
flexDirection: "column",
borderRight: 1,
borderColor: "divider",
minWidth: 260,
}}
>
<Box
sx={{
px: 2,
py: 1.25,
display: "flex",
justifyContent: "space-between",
alignItems: "center",
borderBottom: 1,
borderColor: "divider",
}}
>
<Typography variant="overline" color="primary">
{titles[i]}
</Typography>
</Box>
{view}
</Box>
));
Expand Down
64 changes: 0 additions & 64 deletions apps/visr/src/components/tomography/VolumeViewer.tsx
View file
Open in desktop

This file was deleted.

Loading