-
Notifications
You must be signed in to change notification settings - Fork 327
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: camera sync canvas relative (#167)
* feat(cameraSync):Sync on raw camera or just pan/zoom * feat(zoomPanSync):Add a separate zoom/pan synchronizer * fix(synchronizers):Some cleanup on the synchronizers * fix(cameraSync):PR review changes * fix(sync):Move the options into a per-viewport store instead of info * small edits * update api
- Loading branch information
1 parent
5fb1562
commit 2fd6c98
Showing
14 changed files
with
456 additions
and
40 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,162 @@ | ||
| import { | ||
| getRenderingEngine, | ||
| RenderingEngine, | ||
| Types, | ||
| Enums, | ||
| } from '@cornerstonejs/core'; | ||
| import { | ||
| initDemo, | ||
| createImageIdsAndCacheMetaData, | ||
| setTitleAndDescription, | ||
| ctVoiRange, | ||
| addButtonToToolbar, | ||
| } from '../../../../utils/demo/helpers'; | ||
|
|
||
| // This is for debugging purposes | ||
| console.warn( | ||
| 'Click on index.ts to open source code for this example --------->' | ||
| ); | ||
|
|
||
| const { ViewportType } = Enums; | ||
| const renderingEngineId = 'myRenderingEngine'; | ||
| const viewportId = 'CT_STACK'; | ||
|
|
||
| // ======== Set up page ======== // | ||
| setTitleAndDescription( | ||
| 'Programmatic Pan and Zoom with initial pan and zoom', | ||
| 'Displays an image at the top of the viewport, half off the screen, and has pan/zoom buttons.' | ||
| ); | ||
|
|
||
| const content = document.getElementById('content'); | ||
| const element = document.createElement('div'); | ||
| element.id = 'cornerstone-element'; | ||
| element.style.width = '500px'; | ||
| element.style.height = '500px'; | ||
|
|
||
| content.appendChild(element); | ||
| // ============================= // | ||
| addButtonToToolbar({ | ||
| title: 'Set Pan (+5,0)', | ||
| onClick: () => { | ||
| // Get the rendering engine | ||
| const renderingEngine = getRenderingEngine(renderingEngineId); | ||
|
|
||
| // Get the stack viewport | ||
| const viewport = <Types.IVolumeViewport>( | ||
| renderingEngine.getViewport(viewportId) | ||
| ); | ||
|
|
||
| const pan = viewport.getPan(); | ||
| console.log('Current pan', JSON.stringify(pan)); | ||
| viewport.setPan([pan[0] + 5, pan[1]]); | ||
| viewport.render(); | ||
| }, | ||
| }); | ||
|
|
||
| addButtonToToolbar({ | ||
| title: 'Set zoom * 1.05 ', | ||
| onClick: () => { | ||
| // Get the rendering engine | ||
| const renderingEngine = getRenderingEngine(renderingEngineId); | ||
|
|
||
| // Get the stack viewport | ||
| const viewport = <Types.IVolumeViewport>( | ||
| renderingEngine.getViewport(viewportId) | ||
| ); | ||
|
|
||
| const zoom = viewport.getZoom(); | ||
| console.log('Current zoom', zoom); | ||
| viewport.setZoom(zoom * 1.05); | ||
| viewport.render(); | ||
| }, | ||
| }); | ||
|
|
||
| addButtonToToolbar({ | ||
| title: 'Reset Original', | ||
| onClick: () => { | ||
| // Get the rendering engine | ||
| const renderingEngine = getRenderingEngine(renderingEngineId); | ||
|
|
||
| // Get the stack viewport | ||
| const viewport = <Types.IVolumeViewport>( | ||
| renderingEngine.getViewport(viewportId) | ||
| ); | ||
| //viewport.resetCamera(); | ||
| viewport.setZoom(1); | ||
| viewport.setPan([0, 0]); | ||
| viewport.render(); | ||
| }, | ||
| }); | ||
|
|
||
| // This can be used to see how the reset works | ||
| // Compare a reset before and after having done this | ||
| addButtonToToolbar({ | ||
| title: 'Set current offset/size as pan 0,0/zoom 1', | ||
| onClick: () => { | ||
| // Get the rendering engine | ||
| const renderingEngine = getRenderingEngine(renderingEngineId); | ||
|
|
||
| // Get the stack viewport | ||
| const viewport = <Types.IVolumeViewport>( | ||
| renderingEngine.getViewport(viewportId) | ||
| ); | ||
| viewport.setZoom(viewport.getZoom(), true); | ||
| }, | ||
| }); | ||
|
|
||
| /** | ||
| * Runs the demo | ||
| */ | ||
| async function run() { | ||
| // Init Cornerstone and related libraries | ||
| await initDemo(); | ||
|
|
||
| // 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://d1qmxk7r72ysft.cloudfront.net/dicomweb', | ||
| type: 'STACK', | ||
| }); | ||
|
|
||
| // Instantiate a rendering engine | ||
| const renderingEngine = new RenderingEngine(renderingEngineId); | ||
|
|
||
| // Create a stack viewport | ||
| const viewportInput = { | ||
| viewportId, | ||
| type: ViewportType.STACK, | ||
| element, | ||
| defaultOptions: { | ||
| background: <Types.Point3>[0.2, 0, 0.2], | ||
| }, | ||
| }; | ||
|
|
||
| renderingEngine.enableElement(viewportInput); | ||
|
|
||
| // Get the stack viewport that was created | ||
| const viewport = <Types.IStackViewport>( | ||
| renderingEngine.getViewport(viewportId) | ||
| ); | ||
|
|
||
| // Define a stack containing a single image | ||
| const stack = [imageIds[0]]; | ||
|
|
||
| // Set the stack on the viewport | ||
| await viewport.setStack(stack); | ||
|
|
||
| // Set the VOI of the stack | ||
| viewport.setProperties({ voiRange: ctVoiRange }); | ||
|
|
||
| // Render the image | ||
| viewport.render(); | ||
|
|
||
| viewport.setZoom(0.8); | ||
| viewport.setPan([-128, 0]); | ||
| // Second one should have no affect | ||
| viewport.setPan([-128, 0]); | ||
| } | ||
|
|
||
| run(); |
Oops, something went wrong.