In this tutorial I will show you the library QT and CTK
which will be necessary for our modules GUI in Slicer3D
Also I will present the raw structure of Slicer3D's layout for GUI elements
and show you how you can test with less effort a few graphical elements
Both, QT and CTK, are generally the same: a library for building graphical user interfaces
for example drop-down boxes, textfields, buttons or checkboxes
can be created using QT or CTK
Primary CTK was developed for usage in medical software, QT is more universal
 
Also the layout of single GUI elements can be influenced using these libraries
 
But how do elements and layout work together?
 
Well, in Slicer3D every module has its own root layout or "parent-layout" for all following GUI elements
 
Of course we can attach elements directly to this layout
but there won't be a clear arrangement
Therefore it's useful to use "Frames" which are subareas inside a layout
which can arrange our GUI elements using different settings
Showing a little example
The red box is the "root layout"
The green boxes are our frames
which can be arranged, with their content,  in every possible way
For example one frame can provide a vertical layout
a second one a horizontal layout
In this example I will create a QT Button
setting a tooltip, which is a small information displayed when the cursor stays on the button
Here again, like in my other video, the autofill is a usefull tool
A little tip: All QT elements names starts with a "Q..."
Next one is a ComboBox
ComboBox is a simple drop-down box
known from a lot of usual applications
At first it's empty of course, so there is nothing we can select
Using a simple "add" function we can add items as strings
and will be stored in our box the order we added them
Every item has an index, like in a list, starting with 0
so we can identify every entry explicit
But also we can get the index corresponding string value
Last but not least another small example:
the QProgressBar
As you might think it visualizes the current status of a process
by increasing the current status value step by step
In this recording I had to search for the "value" attribute, so I cut it out
Of course you can change a lot more than just values and informations to be displayed
Look: I can change the progressbar's form in a ridiculous way
If you wouldn't want something like this in your application
you should always check your GUI elements setters!
In this case I find a setter to set the maximum width and height of my progressbar
