Help for adding custom buttons

Support Development
1

Describe Your Question

First, thanks for taking the time to read this !

I am using OHIF v3.8. I want to add custom buttons to a panel in the same way that the brush and other segmentation tools are added in the segmentation mode.

  • I have created their configuration taking inspiration on the toolbarButtons.ts file
  • I have added the buttons to the toolbarService and created a button section
  • I can see the buttons in my panel (I used a Toolbox btw), but they are disabled

I looked up the code for the evaluate function (evaluate.cornerstoneTool). There I saw that the tools have to be registered in a ToolGroupā€¦

Do I have to create my own evaluate function to make my buttons available ??? If so, I wonā€™t be able to leverage the same mechanisms to know if my buttons are active or not since it uses the ToolGroupService, meaning I should develop my own mechanismā€¦

I tried registering fake tools with the right names in the default toolGroup to no avail. I couldnā€™t see my buttons in the toolGroup.

The fact that you can add buttons via a config file is cool and all, but isnā€™t it too complicated ?

What steps can we follow to reproduce the bug?

Simplified code :

In my modeā€™s index.js

ToolBarService.addButtons([
	...customButtons,
]);
ToolBarService.createButtonSection("CustomTools", [
    "CustomTools",
]);

In my modeā€™s customButtons.ts

const customButtons: Button[] = [
	{
		id: "CustomTools",
		uiType: "ohif.buttonGroup",
		props: {
			groupId: "CustomTools",
			items: [
				{
					id: "new",
					icon: "circle-add",
					label: "New",
					commands: [
						{
							commandName: <SOME COMMAND I CREATED>,
							context: "AWESOMME",
						},
					],
					options: [],
					evaluate: "evaluate.cornerstoneTool", // To be changed...
				},
                     ]
             }
       }
];

In my extensionā€™s Panel.tsx

  return (
    <Toolbox
      buttonSectionId={"CustomTools"}
      commandsManager={props.commandsManager}
      servicesManager={props.servicesManager}
      title="Custom Tools"
    />
  );
2

My workaround for the time being is to use ā€˜evaluate.actionā€™ as the evaluate method.

Note : this method is not documented, but it is the most basic (no checks)

3

Also, if I want to use the toolGroup mechanism, how do I add viewports to the toolGroup ? I see that this is done in the OHIFCornerstoneViewport, but I donā€™t understand how this worksā€¦

Can someone explain it to me, please ?

4

You should exactly do what the brush tools are doing in our segmentation mode. Basically you need to create your own panel in your extensions, that is composed of other panels. So create your own toolbox and add it to your custom panel. Take a look at the getPanelModule in the segmentation panel to understand how to use a Toolbox

5

Hi, thanks for your answer. Actually, I have done that, this was not my question ! If you look at the code I provided, I have set up everything as you said, but the problem emerges when it comes to the evaluate function.

I would like to have the same mechanism as the evaluate.cornerstoneTool evaluation function, but it does not work out of the box, there has to be some more steps. My guess is that I have to add my tools to a toolGroup, but that did not workā€¦

6

Currently, I am trying to add Freehand and Livewire Tools for segmentations (not just measurements), using the LivewireContourSegmentationTool and PlanarFreehandContourSegmentationTool (the names make me think itā€™s the tools I want).

I tried a code similar to the one on this page, but couldnā€™t make it work

7

Iā€™m wondering which version of OHIF are you using, are you using latest? since we added planar and livewire

8

I am using v3.8.0. I saw that these tools were added for annotations, but I want to use them for segmentations. Are there tools for freehand segmentation that I have missed ?

Thanks in advance !
Luc

9

Oh I see

That will come in 3.10 (not next version but next next version)
Our focus is now stack labelmap segmentation

1 Like
10

Ok thanks, I guess Iā€™ll try to create a custom version of the tools then :wink: Is there something I should know for that ?

11

These two might help

and

12

No I am not talking about that. I know how they work (I think so at least).

I can define a button via the ToolbarService like this

{
  id: 'Freehand',
  uiType: 'ohif.radioGroup',
  props: {
    icon: 'tool-freehand',
    label: 'Freehand',
    "commands": [
      {
        "commandName": "setToolActive",
        "commandOptions": {
          "toolName": "Freehand"
        },
        "context": "CORNERSTONE"
      }
    ]
    evaluate: 'evaluate.cornerstoneTool',
  },
},

No problem with that. The problem is how do I create a tool with name Freehand and add it to Ohif so that when I click on the button it is activated ?

13

if freehand your custom tool? we donā€™t have such toolname

14

Hi Billuc ,

You have to define your custom tool which should be extending a base class such as baseTool or Annotation Tool. Then you need to activate the tool using toolbarServices (SEE CORNERSTONE EXTENSION COMMANDSManager setToolActive command for reference). After activating the tool you should customize you own requirement in your custom tool

15

Hi Sudhanshu,

I will try that. Thank you for your help !

1 Like
16

I use the ā€œfind in folderā€ function in vscode for searching where the functionality is, when implementing new custom buttons.

Anyone also take that approach.
kind regards,
Scottie