Skip to content

Commit

Permalink
adding abbility to choose setup
Browse files Browse the repository at this point in the history
  • Loading branch information
@beniroquai
beniroquai committed Nov 16, 2024
1 parent bbd8091 commit eb55c80
Show file tree
Hide file tree
Showing 4 changed files with 129 additions and 66 deletions.
37 changes: 3 additions & 34 deletions src/components/HistoScanController.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -111,24 +111,7 @@ const HistoScanController = ({ hostIP, hostPort }) => {
.catch((error) => console.error("Error:", error));
};

useEffect(() => {
setMapUrl(`${hostIP}:${hostPort}/HistoScanController/fetchStageMap`);
const interval = setInterval(() => {
const url = `${hostIP}:${hostPort}/HistoScanController/getHistoStatus`;
fetch(url, { method: "GET" })
.then((response) => response.json())
.then((data) => {
setScanStatus(data.ishistoscanRunning);
setScanCount(data.mScanCount);
setScanIndex(data.mScanIndex);
setScanResultAvailable(data.stitchResultAvailable);
setCurrentPosition(data.currentPosition);
})
.catch((error) => console.error("Error:", error));
}, 1000);

return () => clearInterval(interval);
}, [hostIP, hostPort]);

// Handle right-click and open context menu at the clicked position
const handleImageRightClick = (event) => {
Expand Down Expand Up @@ -167,22 +150,7 @@ const HistoScanController = ({ hostIP, hostPort }) => {
handleCloseMenu();
};

// Fetch current XY position from the microscope every second
useEffect(() => {
const interval = setInterval(() => {
const url = `${hostIP}:${hostPort}/PositionerController/getPositionerPositions`;
fetch(url)
.then((response) => response.json())
.then((data) => {
const xPos = data.VirtualStage.X;
const yPos = data.VirtualStage.Y;
setCurrentXY({ x: xPos, y: yPos });
})
.catch((error) => console.error("Error fetching XY positions:", error));
}, 1000);

return () => clearInterval(interval);
}, [hostIP, hostPort]);

// Send both X and Y coordinates
const goToXYPosition = () => {
Expand Down Expand Up @@ -524,7 +492,7 @@ const HistoScanController = ({ hostIP, hostPort }) => {
</List>
</Grid>
</Grid>
)}
)}{/*
<Rnd
bounds="parent" // Restricts dragging within the parent container
size={{ width: videoSize.width, height: videoSize.height }}
Expand All @@ -541,6 +509,7 @@ const HistoScanController = ({ hostIP, hostPort }) => {
position: "relative",
}}
>
<iframe
src={streamUrl}
style={{
Expand All @@ -550,7 +519,6 @@ const HistoScanController = ({ hostIP, hostPort }) => {
}}
allow="autoplay"
/>
{/* Add a drag handle overlay */}
<div
className="drag-handle"
style={{
Expand All @@ -564,6 +532,7 @@ const HistoScanController = ({ hostIP, hostPort }) => {
}}
/>
</Rnd>
*/}
</Paper>
);
};
Expand Down
68 changes: 46 additions & 22 deletions src/components/LiveView.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -85,6 +85,7 @@ const LiveView = ({ hostIP, hostPort }) => {
const [isIllumination3Checked, setisIllumination3Checked] = useState(false);
const [histogrammY, setHistogrammY] = useState([]);
const [histogrammX, setHistogrammX] = useState([]);
const [histogramActive, setHistogramActive] = useState(false);
const chartContainer = useRef(null); // Ref for the chart container
const socket = useWebSocket();

Expand All @@ -108,6 +109,27 @@ const LiveView = ({ hostIP, hostPort }) => {
};
}, [socket]);

useEffect(() => {
const checkHistogramStatus = async () => {
try {
const response = await fetch(
`${hostIP}:${hostPort}/HistogrammController/histogrammActive`
);
if (response.status !== 404) {
setHistogramActive(true);
// Fetch histogram data here if needed
} else {
setHistogramActive(false);
}
} catch (error) {
console.error("Error checking histogram status:", error);
setHistogramActive(false);
}
};

checkHistogramStatus();
}, []);

const histogramData = {
labels: histogrammX,
datasets: [
Expand Down Expand Up @@ -463,19 +485,6 @@ const LiveView = ({ hostIP, hostPort }) => {
<Container component="main" sx={{ flexGrow: 1, p: 3, pt: 10 }}>
<Grid container spacing={3}>
<Grid item xs={12} sm={8}>
<Typography variant="h6" gutterBottom>
Video Display
</Typography>
{streamUrl ? (
<img
style={{ width: "100%", height: "auto" }}
allow="autoplay"
src={streamUrl}
ref={videoRef}
alt={"Live Stream"}
></img>
) : null}

<Box mb={5}>
<Typography variant="h6" gutterBottom>
Stream Control
Expand Down Expand Up @@ -530,8 +539,21 @@ const LiveView = ({ hostIP, hostPort }) => {
: "Manual Camera Settings"
}
/>
<Typography variant="h6" gutterBottom>
Video Display
</Typography>
{streamUrl ? (
<img
style={{ width: "100%", height: "auto" }}
allow="autoplay"
src={streamUrl}
ref={videoRef}
alt={"Live Stream"}
></img>
) : null}

<Grid item xs={12}>
{histogramActive && (
<Box
sx={{
width: "100%",
Expand All @@ -552,17 +574,19 @@ const LiveView = ({ hostIP, hostPort }) => {
Histogram
</Typography>
<Box sx={{ height: 400 }}>
{histogrammX.length && histogrammY.length ? ( // Render only if data is available
<Bar
id="histogramChart"
data={histogramData}
options={options}
/>
) : (
<Typography align="center">Loading data...</Typography>
)}

histogrammX.length && histogrammY.length ? ( // Render only if data is available
<Bar
id="histogramChart"
data={histogramData}
options={options}
/>
) : (
<Typography align="center">Loading data...</Typography>
)
</Box>
</Box>
)}
</Grid>

<TextField
Expand Down
4 changes: 2 additions & 2 deletions src/components/Tab_Widgets.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import FlowStopController from './FlowStopController';
import HistoScanController from './HistoScanController';
import MCTController from './MCTController';
import { MCTProvider } from '../context/MCTContext'; // Import the context provider
import ReconnectController from './ReconnectController';
import UC2Controller from './UC2Controller';
import AutofocusController from './AutofocusController';
import LiveViewController from './LiveViewController';
import './Tab_Widgets.css'; // Import the CSS file
Expand All @@ -22,7 +22,7 @@ const Tab_Widgets = ({ hostIP, hostPort }) => {
<FlowStopController hostIP={hostIP} hostPort={hostPort} title="Flow Stop" />
</Grid>
<Grid item xs={12} sm={6} md={4} className="grid-item">
<ReconnectController hostIP={hostIP} hostPort={hostPort} title="Reconnect" />
<UC2Controller hostIP={hostIP} hostPort={hostPort} title="Reconnect" />
</Grid>
<Grid item xs={12} sm={6} md={4} className="grid-item">
<AutofocusController hostIP={hostIP} hostPort={hostPort} title="Autofocus" />
Expand Down
86 changes: 78 additions & 8 deletions src/components/ReconnectController.js → src/components/UC2Controller.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,14 +5,13 @@ import {
Tab,
Box,
Typography,
TextField,
Button,
Slider,
MenuItem,
Select,
FormControl,
InputLabel,
Grid,
} from "@mui/material";
import { green, red } from "@mui/material/colors";
import CheckCircleIcon from "@mui/icons-material/CheckCircle";
import CancelIcon from "@mui/icons-material/Cancel";

const TabPanel = (props) => {
const { children, value, index, ...other } = props;
Expand All @@ -31,16 +30,33 @@ const TabPanel = (props) => {
};

const goToWebsite = () => {
window.open('https://youseetoo.github.io', '_blank');
window.open("https://youseetoo.github.io", "_blank");
};

const ReconnectController = ({ hostIP, hostPort, WindowTitle }) => {
const UC2Controller = ({ hostIP, hostPort, WindowTitle }) => {
const [tabIndex, setTabIndex] = useState(0);
const [availableSetups, setAvailableSetups] = useState([]);
const [selectedSetup, setSelectedSetup] = useState("");

const handleTabChange = (event, newValue) => {
setTabIndex(newValue);
};

const fetchAvailableSetups = () => {
const url = `${hostIP}:${hostPort}/UC2ConfigController/returnAvailableSetups`;

fetch(url)
.then((response) => response.json())
.then((data) => {
setAvailableSetups(data.available_setups || []);
})
.catch((error) => console.error("Error fetching setups:", error));
};

const handleSetupChange = (event) => {
setSelectedSetup(event.target.value);
};

const reconnect = () => {
const url = `${hostIP}:${hostPort}/UC2ConfigController/reconnect`;

Expand All @@ -65,6 +81,30 @@ const ReconnectController = ({ hostIP, hostPort, WindowTitle }) => {
.catch((error) => console.error("Error:", error));
};


const handleSetSetup = () => {
if (!selectedSetup) {
alert("Please select a setup before proceeding.");
return;
}

const url = `${hostIP}:${hostPort}/UC2ConfigController/setSetupFileName?setupFileName=${encodeURIComponent(
selectedSetup
)}`;

fetch(url, { method: "get" })
.then((response) => response.json())
.then((data) => {
console.log("Setup selected:", data);
// Handle response if needed
})
.catch((error) => console.error("Error setting setup:", error));
};

useEffect(() => {
fetchAvailableSetups();
}, []);

return (
<Paper>
<Tabs
Expand All @@ -73,6 +113,7 @@ const ReconnectController = ({ hostIP, hostPort, WindowTitle }) => {
aria-label="settings tabs"
>
<Tab label="Reconnect to UC2 board" />
<Tab label="Select Setup" />
</Tabs>

<TabPanel value={tabIndex} index={0}>
Expand Down Expand Up @@ -111,8 +152,37 @@ const ReconnectController = ({ hostIP, hostPort, WindowTitle }) => {
</Grid>
</Grid>
</TabPanel>

<TabPanel value={tabIndex} index={1}>
<Grid container spacing={2}>
<Grid item xs={12}>
<Typography variant="h6">Select Available Setup</Typography>
<FormControl fullWidth style={{ marginBottom: "20px" }}>
<InputLabel id="setup-select-label">Available Setups</InputLabel>
<Select
labelId="setup-select-label"
value={selectedSetup}
onChange={handleSetupChange}
>
{availableSetups.map((setup, index) => (
<MenuItem key={index} value={setup}>
{setup}
</MenuItem>
))}
</Select>
</FormControl>
<Button
style={{ marginBottom: "20px" }}
variant="contained"
onClick={handleSetSetup}
>
OK
</Button>
</Grid>
</Grid>
</TabPanel>
</Paper>
);
};

export default ReconnectController;
export default UC2Controller;

0 comments on commit eb55c80

Please sign in to comment.