-
Notifications
You must be signed in to change notification settings - Fork 326
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: Add CINE tool via playClip (#99)
* feat: Add CINE tool via playClip * apply review comments * apply review comments * fix api build * update default value for loop
- Loading branch information
Showing
10 changed files
with
577 additions
and
6 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,179 @@ | ||
| import { | ||
| RenderingEngine, | ||
| Types, | ||
| Enums, | ||
| utilities as csUtils, | ||
| } from '@cornerstonejs/core'; | ||
| import { | ||
| initDemo, | ||
| createImageIdsAndCacheMetaData, | ||
| setTitleAndDescription, | ||
| addButtonToToolbar, | ||
| addSliderToToolbar, | ||
| } from '../../../../utils/demo/helpers'; | ||
| import * as cornerstoneTools from '@cornerstonejs/tools'; | ||
|
|
||
| // This is for debugging purposes | ||
| console.warn( | ||
| 'Click on index.ts to open source code for this example --------->' | ||
| ); | ||
|
|
||
| const { | ||
| WindowLevelTool, | ||
| PanTool, | ||
| ZoomTool, | ||
| ToolGroupManager, | ||
| Enums: csToolsEnums, | ||
| utilities: csToolsUtilities, | ||
| } = cornerstoneTools; | ||
|
|
||
| const { ViewportType } = Enums; | ||
| const { MouseBindings } = csToolsEnums; | ||
|
|
||
| // ======== Set up page ======== // | ||
| setTitleAndDescription('CINE Tool', 'Show the usage of the CINE Tool.'); | ||
|
|
||
| const content = document.getElementById('content'); | ||
| const element = document.createElement('div'); | ||
|
|
||
| // Disable right click context menu so we can have right click tools | ||
| element.oncontextmenu = (e) => e.preventDefault(); | ||
|
|
||
| element.id = 'cornerstone-element'; | ||
| element.style.width = '500px'; | ||
| element.style.height = '500px'; | ||
|
|
||
| content.appendChild(element); | ||
|
|
||
| const instructions = document.createElement('p'); | ||
| instructions.innerText = ` | ||
| - Click on Play Clip to start the CINE tool | ||
| - Click on Stop Clip to stop the CINE tool | ||
| - Drag the frame slider to change the frames per second rate | ||
| `; | ||
|
|
||
| content.append(instructions); | ||
| // ============================= // | ||
|
|
||
| const toolGroupId = 'STACK_TOOL_GROUP_ID'; | ||
| let framesPerSecond = 24; | ||
|
|
||
| addButtonToToolbar({ | ||
| title: 'Play Clip', | ||
| onClick: () => { | ||
| csToolsUtilities.cine.playClip(element, { framesPerSecond }); | ||
| }, | ||
| }); | ||
|
|
||
| addButtonToToolbar({ | ||
| title: 'Stop Clip', | ||
| onClick: () => { | ||
| csToolsUtilities.cine.stopClip(element); | ||
| }, | ||
| }); | ||
|
|
||
| addSliderToToolbar({ | ||
| title: `Frame per second`, | ||
| range: [1, 100], | ||
| defaultValue: framesPerSecond, | ||
| onSelectedValueChange: (value) => { | ||
| csToolsUtilities.cine.stopClip(element); | ||
| framesPerSecond = Number(value); | ||
| csToolsUtilities.cine.playClip(element, { framesPerSecond }); | ||
| }, | ||
| updateLabelOnChange: (value, label) => { | ||
| label.innerText = `Frames per second: ${value}`; | ||
| }, | ||
| }); | ||
| /** | ||
| * Runs the demo | ||
| */ | ||
| async function run() { | ||
| // Init Cornerstone and related libraries | ||
| await initDemo(); | ||
|
|
||
| // Add tools to Cornerstone3D | ||
| cornerstoneTools.addTool(WindowLevelTool); | ||
| cornerstoneTools.addTool(PanTool); | ||
| cornerstoneTools.addTool(ZoomTool); | ||
|
|
||
| // Define a tool group, which defines how mouse events map to tool commands for | ||
| // Any viewport using the group | ||
| const toolGroup = ToolGroupManager.createToolGroup(toolGroupId); | ||
|
|
||
| // Add the tools to the tool group | ||
| toolGroup.addTool(WindowLevelTool.toolName); | ||
| toolGroup.addTool(PanTool.toolName); | ||
| toolGroup.addTool(ZoomTool.toolName); | ||
|
|
||
| // Set the initial state of the tools, here we set one tool active on left click. | ||
| // This means left click will draw that tool. | ||
| toolGroup.setToolActive(WindowLevelTool.toolName, { | ||
| bindings: [ | ||
| { | ||
| mouseButton: MouseBindings.Primary, // Left Click | ||
| }, | ||
| ], | ||
| }); | ||
|
|
||
| toolGroup.setToolActive(PanTool.toolName, { | ||
| bindings: [ | ||
| { | ||
| mouseButton: MouseBindings.Auxiliary, | ||
| }, | ||
| ], | ||
| }); | ||
|
|
||
| toolGroup.setToolActive(ZoomTool.toolName, { | ||
| bindings: [ | ||
| { | ||
| mouseButton: MouseBindings.Secondary, | ||
| }, | ||
| ], | ||
| }); | ||
|
|
||
| // 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 renderingEngineId = 'myRenderingEngine'; | ||
| const renderingEngine = new RenderingEngine(renderingEngineId); | ||
|
|
||
| // Create a stack viewport | ||
| const viewportId = 'CT_STACK'; | ||
| const viewportInput = { | ||
| viewportId, | ||
| type: ViewportType.STACK, | ||
| element, | ||
| defaultOptions: { | ||
| background: <Types.Point3>[0.2, 0, 0.2], | ||
| }, | ||
| }; | ||
|
|
||
| renderingEngine.enableElement(viewportInput); | ||
|
|
||
| // Set the tool group on the viewport | ||
| toolGroup.addViewport(viewportId, renderingEngineId); | ||
|
|
||
| // Get the stack viewport that was created | ||
| const viewport = <Types.IStackViewport>( | ||
| renderingEngine.getViewport(viewportId) | ||
| ); | ||
|
|
||
| // Set the stack on the viewport | ||
| viewport.setStack(imageIds).then(() => { | ||
| csUtils.prefetchStack(imageIds); | ||
| }); | ||
|
|
||
| // Render the image | ||
| viewport.render(); | ||
| } | ||
|
|
||
| run(); |
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,21 @@ | ||
| type PlayClipOptions = { | ||
| framesPerSecond?: number; | ||
| frameTimeVector?: number[]; | ||
| reverse?: boolean; | ||
| loop?: boolean; | ||
| frameTimeVectorSpeedMultiplier?: number; | ||
| }; | ||
|
|
||
| interface ToolData { | ||
| intervalId: number | undefined; | ||
| framesPerSecond: number; | ||
| lastFrameTimeStamp: number | undefined; | ||
| frameTimeVector: number[] | undefined; | ||
| ignoreFrameTimeVector: boolean; | ||
| usingFrameTimeVector: boolean; | ||
| speed: number; | ||
| reverse: boolean; | ||
| loop: boolean; | ||
| } | ||
|
|
||
| export type { PlayClipOptions, ToolData }; |
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,9 @@ | ||
| /** | ||
| * CINE Tool Events | ||
| */ | ||
| enum Events { | ||
| CLIP_STOPPED = 'CORNERSTONE_CINE_TOOL_STOPPED', | ||
| CLIP_STARTED = 'CORNERSTONE_CINE_TOOL_STARTED', | ||
| } | ||
|
|
||
| export default Events; |
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,5 @@ | ||
| import { playClip, stopClip } from './playClip'; | ||
| import Events from './events'; | ||
| import { getToolState, addToolState } from './state'; | ||
|
|
||
| export { playClip, stopClip, Events, getToolState, addToolState }; |
Oops, something went wrong.