
Introduction
The process of initializing tools involves setting up the environment, adding desired tools, and specifying their behavior. For example:
initializeCSTools(); // Prepares the default Cornerstone tools environment.
addTool("Wwwc"); // Adds the Window/Level tool for adjusting image contrast and brightness.
setToolActive("Wwwc"); // Activates the "Wwwc" tool, enabling interactive control for the user.
In this case, the "Wwwc" tool is added and set as the active tool, allowing users to adjust the contrast and brightness of the image interactively.
Alternatively, developers can load default tools (see Default and Custom Tools paragraph), including custom ones if previously registered:
store.initialize();
addViewport("viewer");
initializeCSTools(); // Prepares the default Cornerstone tools environment.
addDefaultTools("viewer"); // Adds the default tools, which can also include custom-defined tools.
setToolActive("WatershedSegmentation"); // Activates the "WatershedSegmentation" custom tool for user interaction.
Stack Tools Creation and Synchronization
The stack tools creation and synchronization process involves creating a stack object and updating it to ensure that all tools are synchronized with the current image stack.
You can create or update a stack object using the csToolsUpdateStack
function, which takes the target HTML element, image IDs, and the current image index as parameters. This function initializes and updates the stack object and prepares it for synchronization.
If you use the addDefaultTools
function, the stack tools are automatically created. This means that you need to manually call csToolsUpdateStack
only if you want to customize the stack behavior.
You can use the csToolsUpdateStack
function to update the stack object with new image IDs. This allows you to add or remove images from the stack dynamically, ensuring that all tools remain synchronized with the current image stack.
Key Concepts: Tool States
Tools can be configured with specific states to define how they interact with the imaging environment:
- Disabled: The tool is inactive and cannot interact with the image or respond to user input.
- Passive: The tool is active in the background, observing user interactions or changes, but it does not modify the image directly.
- Enabled: The tool is ready to interact with the image but is not the primary tool in focus. Users can use it alongside other tools.
- Active: The tool is the primary tool in use, allowing direct and interactive control by the user.
API Reference
initializeCSTools
Initialize cornerstone tools with default configuration (extended with custom configuration)
Syntax
initializeCSTools(
settings?: ToolSettings,
style?: ToolStyle
)
Parameters
Parameter | Type | Description |
---|---|---|
settings | ToolSettings | The settings object (default is DEFAULT_SETTINGS : Default and Custom Tools) |
style | ToolStyle | The style object (default is DEFAULT_STYLE : Default and Custom Tools) |
Example:
initializeCSTools({ showSVGCursors: false }, { color: "0000FF" });
Returns
void
csToolsUpdateStack
Create or update stack object to sync stack tools
Syntax
csToolsUpdateStack(elementId: string, { imageIds?: string[], currentImageIndex?: number })
Parameters
Parameter | Type | Description |
---|---|---|
elementId | string | The target html element id. |
stack | StackType | Stack definition |
StackType Definition
Parameter | Type | Description |
---|---|---|
imageIds | string[] | Stack image ids, optional |
currentImageIndex | number | Current image id index, optional |
Returns
void
addTool
Add a cornerstone tool (grab it from original library or dvision custom tools)
Syntax
addTool(
toolName: string,
customConfig: Partial<ToolConfig>,
targetElementId?: string
)
Parameters
Parameter | Type | Description |
---|---|---|
toolName | string | The tool name |
customConfig | ToolConfig | The tool configuration |
targetElementId | string | The target html element id. |
Example:
addTool(
"ScaleOverlay",
{ configuration: { minorTickLength: 10, majorTickLength: 25 } },
"viewer"
);
Returns
void
setToolActive
Set Tool active on all elements (ie, rendered and manipulable) and refresh cornerstone elements
Syntax
setToolActive(
toolName: string,
options?: Partial<ToolConfig["options"]>,
viewports?: string[],
doNotSetInStore?: boolean
)
Parameters
Parameter | Type | Description |
---|---|---|
toolName | string | The custom tool name |
options | ToolConfig["options"] | The custom options. @default from tools/default.js |
viewports | string[] | The hmtl element id to be used for tool initialization. |
doNotSetInStore | boolean | Flag to avoid setting in store (useful on tools initialization eg in addDefaultTools). |
Returns
void
setToolDisabled
Set Tool disabled on all elements (ie, not rendered) and refresh cornerstone elements
Syntax
setToolDisabled(
toolName: string,
viewports?: string[],
resetCursor = true
)
Parameters
Parameter | Type | Description |
---|---|---|
toolName | string | The tool name. |
viewports | string[] | The hmtl element id to be used for tool initialization. |
resetCursor | boolean | Flag to restore native cursor. @default true |
Returns
void
setToolEnabled
Set Tool enabled on all elements (ie, rendered but not manipulable) and refresh cornerstone elements
Syntax
setToolEnabled(
toolName: string,
viewports?: string[],
resetCursor = true
)
Parameters
Parameter | Type | Description |
---|---|---|
toolName | string | The tool name. |
viewports | string[] | The hmtl element id to be used for tool initialization. |
resetCursor | boolean | Flag to restore native cursor. @default true |
Returns
void
setToolPassive
Set Tool passive on all elements (ie, rendered and manipulable passively) & refresh cornerstone elements
Syntax
setToolPassive(
toolName: string,
viewports?: string[],
resetCursor = true
)
Parameters
Parameter | Type | Description |
---|---|---|
toolName | string | The tool name. |
viewports | string[] | The hmtl element id to be used for tool initialization. |
resetCursor | boolean | Flag to restore native cursor. @default true |
Returns
void
setToolsStyle
Set cornerstone tools custom configuration (extend default configuration)
Syntax
setToolsStyle(style?: ToolStyle)
Parameters
Parameter | Type | Description |
---|---|---|
style | ToolStyle | the style object (default in DEFAULT_STYLE : Default and Custom Tools) |
Returns
void
