# How is the ui designed?

**URL:** <https://discourse.slicer.org/t/how-is-the-ui-designed/41111>\
**Category:** Development\
**Tags:** segmentation\
**Created:** [January 16, 2025, 6:53am UTC](https://discourse.slicer.org/t/how-is-the-ui-designed/41111 "2025-01-16T06:53:41Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![VirOrange](https://sea2.discourse-cdn.com/flex002/user_avatar/discourse.slicer.org/virorange/32/77989_2.png) [@VirOrange](https://discourse.slicer.org/u/VirOrange)\
**Post date:** [January 16, 2025, 6:53am UTC](https://discourse.slicer.org/t/how-is-the-ui-designed/41111/1 "2025-01-16T06:53:41Z")

</div>

I am curious about how the UI for existing plugins in Slicer is designed, specifically how the UI in the Segment Editor plugin is structured. For example, how is the thresholding interface (or similar new sub-interfaces) designed and implemented? Also, where exactly are these UI files stored in the source code?

I would like to review the source code for these UI interfaces in order to help me design the UI for my own plugin. Could you kindly guide me to the specific locations of these UI files within the Slicer source code?

Thank you in advance for your help.

---

<div class="post-metadata">

**Author:** ![pieper](https://sea2.discourse-cdn.com/flex002/user_avatar/discourse.slicer.org/pieper/32/8_2.png) [@pieper](https://discourse.slicer.org/u/pieper)\
**Post date:** [January 16, 2025, 9:49pm UTC](https://discourse.slicer.org/t/how-is-the-ui-designed/41111/2 "2025-01-16T21:49:06Z")

</div>

Most of these are implemented directly in python code: [Slicer/Modules/Loadable/Segmentations/EditorEffects/Python/SegmentEditorEffects/SegmentEditorThresholdEffect.py at cb4a1776f9c0687df7a13e27e0f3d5d23e02fb5f · Slicer/Slicer · GitHub](https://github.com/Slicer/Slicer/blob/cb4a1776f9c0687df7a13e27e0f3d5d23e02fb5f/Modules/Loadable/Segmentations/EditorEffects/Python/SegmentEditorEffects/SegmentEditorThresholdEffect.py#L105)

You could also use the designer to create UI files and access them from a segment editor plugin like we do in the scripted module template.

---

<div class="post-metadata">

**Author:** ![VirOrange](https://sea2.discourse-cdn.com/flex002/user_avatar/discourse.slicer.org/virorange/32/77989_2.png) [@VirOrange](https://discourse.slicer.org/u/VirOrange)\
**Post date:** [January 17, 2025, 11:04am UTC](https://discourse.slicer.org/t/how-is-the-ui-designed/41111/3 "2025-01-17T11:04:48Z")

</div>

thanks for your kind help!  
I want to understand more about how the UI in 3D Slicer works in detail. Specifically, I’d like to know how the “apply” button functions, how sample data import is implemented in Python code, and how these components are connected. Are there efficient ways to help me better understand the purpose and usage of these functions?

My supervisor has asked me to implement a very simple plugin. The UI consists of a button to import sample data, a label to display the threshold value, a slider to adjust the threshold, and an “apply” button. Once the sample data is imported, it should automatically set a threshold suitable for the skull (using the first CT scan of the brain as an example). Clicking the “apply” button should display the corresponding model in the four-pane view.

My current idea is to extract the threshold processing code from the Segment Editor module and integrate it into my new plugin. However, this seems challenging since the Segment Editor is a complete and complex module. I’m having trouble identifying which parts of the code I can reuse and how to integrate them into a new plugin generated with Extension Wizard. My plugin is written in Python.

If anyone could provide some guidance, I would greatly appreciate it. I’m new to Slicer and want to understand its functionality better by creating my own plugin. I’d be thankful for any help or insights you can share.

---

<div class="post-metadata">

**Author:** ![pieper](https://sea2.discourse-cdn.com/flex002/user_avatar/discourse.slicer.org/pieper/32/8_2.png) [@pieper](https://discourse.slicer.org/u/pieper)\
**Post date:** [January 17, 2025, 2:38pm UTC](https://discourse.slicer.org/t/how-is-the-ui-designed/41111/4 "2025-01-17T14:38:53Z")

</div>

I suggest you start by going through the developer tutorials, and use the Extension Wizard to make a sample module. It will give you a template with an Apply button and a place where you can put in custom image processing logic.

[https://training.slicer.org/#developer](https://training.slicer.org/#developer)

---

<div class="post-metadata">

**Author:** ![VirOrange](https://sea2.discourse-cdn.com/flex002/user_avatar/discourse.slicer.org/virorange/32/77989_2.png) [@VirOrange](https://discourse.slicer.org/u/VirOrange)\
**Post date:** [January 22, 2025, 3:22am UTC](https://discourse.slicer.org/t/how-is-the-ui-designed/41111/5 "2025-01-22T03:22:58Z")

</div>

First, thank you for providing such a detailed and helpful tutorial on creating a custom 3D Slicer plugin. The step-by-step instructions have given me a good understanding of the relationships between different Slicer modules, and I appreciate your effort in putting this guide together.

However, while following the tutorial to create my first plugin using Python, I encountered some issues. I would be grateful for your insights on how to address them:

1. **Missing `updateGUIFromParameterNode` Method**  
In the code generated by the Extension Wizard, the `MASSWidget` class (`class MASSWidget(ScriptedLoadableModuleWidget, VTKObservationMixin)`) does not contain the `updateGUIFromParameterNode(self, caller=None, event=None)` method referenced in the tutorial. Since the tutorial instructs replacing the body of this function, but it was missing entirely, I manually added the function.

- Is this function still necessary in recent versions of 3D Slicer?
- If it has been replaced by a different method, could you point me to an example or documentation for the current recommended approach?

1. **AttributeError with `getCenterOfMass` Method**  
I added a `markupsFiducialsNode` according to the tutorial, but when running **Reload & Test** , I encountered the following error:

```auto
Traceback (most recent call last):
  File "D:\Application\Slicer 5.6.2\bin\Python\slicer\util.py", line 3255, in tryWithErrorDisplay
    yield
  File "D:\Application\Slicer 5.6.2\bin\Python\slicer\ScriptedLoadableModule.py", line 265, in onReloadAndTest
    test(msec=int(slicer.app.userSettings().value("Developer/SelfTestDisplayMessageDelay")), **kwargs)
  File "D:\Application\Slicer 5.6.2\bin\Python\slicer\ScriptedLoadableModule.py", line 83, in runTest
    testCase.runTest(**kwargs)
  File "H:/SLICER_MODULE/MASS/MASS/MASS.py", line 363, in runTest
    self.test_MASS1()
  File "H:/SLICER_MODULE/MASS/MASS/MASS.py", line 399, in test_MASS1
    logic.process(inputVolume, outputVolume, threshold, True)
  File "H:/SLICER_MODULE/MASS/MASS/MASS.py", line 318, in process
    self.centerOfMass = self.getCenterOfMass(inputMarkups)
  File "H:/SLICER_MODULE/MASS/MASS/MASS.py", line 293, in getCenterOfMass
    for i in range(markupsNode.GetNumberOfControlPoints()):
AttributeError: 'MRMLCorePython.vtkMRMLScalarVolumeNode' object has no attribute 'GetNumberOfControlPoints'

```

I understand this error indicates that `markupsNode` is treated as a `vtkMRMLScalarVolumeNode` rather than a `vtkMRMLMarkupsFiducialNode`. Could you help me understand what might cause this, and how I can ensure that `markupsNode` is correctly initialized as a `vtkMRMLMarkupsFiducialNode`?  
3. **Additional Questions**

- Are there significant changes in the newer versions of 3D Slicer that affect the tutorial code?
- Is there an updated version of this tutorial or a similar guide compatible with 3D Slicer 5.6.2?

Thank you again for your guidance and the tutorial—it has been a great learning experience!

---

<div class="post-metadata">

**Author:** ![pieper](https://sea2.discourse-cdn.com/flex002/user_avatar/discourse.slicer.org/pieper/32/8_2.png) [@pieper](https://discourse.slicer.org/u/pieper)\
**Post date:** [January 22, 2025, 8:56pm UTC](https://discourse.slicer.org/t/how-is-the-ui-designed/41111/6 "2025-01-22T20:56:11Z")

</div>

Good questions - this tutorial was created by the team at Queens, so I suspect they can reply. @lassoan @Sunderlandkyl probably know. It says it was created for version 5.6 so I’m sure it’s mostly correct, but there were some tweaks to parameter nodes and maybe the that changed the API used by the tutorial.

Fortunately they put the tutorial in a github repo, so you can report changes there and maybe even offer a pull request with an updated powerpoint.

> **[GitHub - Slicer/SlicerProgrammingTutorial: Introduction to Python scripting and module...](https://github.com/Slicer/SlicerProgrammingTutorial?tab=readme-ov-file)**
>
> Introduction to Python scripting and module development for 3D Slicer

Another issue I noticed is that the ppt didn’t get exported quite right to pdf.

PPT:

 ![image](https://us1.discourse-cdn.com/flex002/uploads/slicer/original/3X/7/b/7b9049cd1b90558f2eda9f40e5a751c4e301d2c3.png)

PDF:

 ![image](https://us1.discourse-cdn.com/flex002/uploads/slicer/original/3X/b/c/bc2f9afa0a0f5115effd1431ed14b40d0153e8c7.png)

---

<div class="post-metadata">

**Author:** ![lassoan](https://sea2.discourse-cdn.com/flex002/user_avatar/discourse.slicer.org/lassoan/32/13_2.png) [@lassoan](https://discourse.slicer.org/u/lassoan)\
**Post date:** [January 22, 2025, 9:36pm UTC](https://discourse.slicer.org/t/how-is-the-ui-designed/41111/7 "2025-01-22T21:36:07Z")

</div>

The tutorial has not been fully updated after the parameter node wrapper updates. I’ve removed the obsolete parts now. Let us know if something does not work or unclear. I’ve also fixed the uploaded pdf.