View in #cornerstone3d on Slack
@Akash_Dwivedi: in this how i should import modeern tool like crosshair and cine tool because when i import directly i am getting errorimport { useEffect, useRef } from “react”;
import createImageIdsAndCacheMetaData from “./lib/createImageIdsAndCacheMetaData”;
import {
RenderingEngine,
Enums,
volumeLoader,
cornerstoneStreamingImageVolumeLoader,
setVolumesForViewports,
} from “@cornerstonejs/core”;
import { init as csRenderInit } from “@cornerstonejs/core”;
import { init as csToolsInit } from “@cornerstonejs/tools”;
import { init as dicomImageLoaderInit } from “@cornerstonejs/dicom-image-loader”;
import {
ToolGroupManager,
WindowLevelTool, // Import WindowLevelTool
Enums as csToolsEnums,
addTool,
} from “@cornerstonejs/tools”;
volumeLoader.registerUnknownVolumeLoader(cornerstoneStreamingImageVolumeLoader);
function App() {
const elementRefs = {
axial: useRef<HTMLDivElement>(null),
sagittal: useRef<HTMLDivElement>(null),
coronal: useRef<HTMLDivElement>(null),
};
const running = useRef(false);
useEffect(() => {
const setup = async () => {
if (running.current) {
return;
}
running.current = true;
// Initialize cornerstone and tools
await csRenderInit();
await csToolsInit();
dicomImageLoaderInit({ maxWebWorkers: 1 });
// Get Cornerstone imageIds and fetch metadata into RAM
_const_ imageIds = await createImageIdsAndCacheMetaData({
StudyInstanceUID:
"1.3.6.1.4.1.14519.5.2.1.7009.2403.334240657131972136850343327463",
SeriesInstanceUID:
"1.3.6.1.4.1.14519.5.2.1.7009.2403.226151125820845824875394858561",
wadoRsRoot: "<https://d3t6nz73ql33tx.cloudfront.net/dicomweb>",
});
// Instantiate a rendering engine
_const_ renderingEngineId = "mprRenderingEngine";
_const_ renderingEngine = new RenderingEngine(renderingEngineId);
// Define viewports for MPR
_const_ viewports = [
{
viewportId: "axial",
element: elementRefs.axial.current,
type: Enums.ViewportType.ORTHOGRAPHIC,
defaultOptions: { orientation: Enums.OrientationAxis.AXIAL },
},
{
viewportId: "sagittal",
element: elementRefs.sagittal.current,
type: Enums.ViewportType.ORTHOGRAPHIC,
defaultOptions: { orientation: Enums.OrientationAxis.SAGITTAL },
},
{
viewportId: "coronal",
element: elementRefs.coronal.current,
type: Enums.ViewportType.ORTHOGRAPHIC,
defaultOptions: { orientation: Enums.OrientationAxis.CORONAL },
},
];
// Enable all viewports
viewports.forEach((_viewport_) _=>_ renderingEngine.enableElement(viewport));
// Get the volume and load it
_const_ volumeId = "streamingImageVolume";
_const_ volume = await volumeLoader.createAndCacheVolume(volumeId, { imageIds });
await volume.load();
// Set the volume for all viewports
setVolumesForViewports(
renderingEngine,
[{ volumeId }],
viewports.map((_viewport_) _=>_ viewport.viewportId)
);
// Add the WindowLevelTool to the toolset
addTool(WindowLevelTool);
_const_ toolGroupId = "mprToolGroup";
_const_ toolGroup = ToolGroupManager.createToolGroup(toolGroupId);
// Add tools to the ToolGroup
toolGroup.addTool(WindowLevelTool.toolName);
// Add viewports to the toolGroup
toolGroup.addViewport("axial", renderingEngineId);
toolGroup.addViewport("sagittal", renderingEngineId);
toolGroup.addViewport("coronal", renderingEngineId);
// Set the WindowLevelTool as active
toolGroup.setToolActive(WindowLevelTool.toolName, {
bindings: [
{
mouseButton: csToolsEnums.MouseBindings.Primary, // Left Click
},
],
});
// Set volumes for viewports
setVolumesForViewports(
renderingEngine,
[
{
volumeId,
callback: ({ _volumeActor_ }) _=>_ {
// Set window level after the volumeActor is created
volumeActor
.getProperty()
.getRGBTransferFunction(0)
.setMappingRange(-180, 220);
},
},
],
["axial", "sagittal", "coronal"]
);
// Render all viewports
renderingEngine.render();
};
setup();
}, [elementRefs, running]);
return (
<div style={{ display: “flex”, flexDirection: “row” }}>
<div
ref={elementRefs.axial}
style={{ width: “512px”, height: “512px”, backgroundColor: “#000” }}
></div>
<div
ref={elementRefs.sagittal}
style={{ width: “512px”, height: “512px”, backgroundColor: “#000” }}
></div>
<div
ref={elementRefs.coronal}
style={{ width: “512px”, height: “512px”, backgroundColor: “#000” }}
></div>
</div>
);
}
export default App; in this how i should import modeern tool like crosshair and cine tool because when i import directly i am getting error
@Alireza_Sedghi: please don’t repost, and don’t repost in multiple channels
can you see the issue in viewer.ohif.org?