Give your cute (Qt) GUI some pop

Close your eyes… take a long breath in… and breathe out… clear up your mind… and think about your favorite application (it should be the one you are working on 😛 ). Keep your eyes closed and visualize all the graphical elements of the application: buttons, frames, panels, texts, scroll-bars, menus… how many do you count ? That’s a lot to think about, isn’t it? If you have scroll-bars, it probably means that there is not enough space to show all the widgets at once, and that you need extra space.

Now, put yourself in the shoes of someone who plays with your application for the first time… don’t you feel overwhelmed by the amount of visual information? Where to click ? What buttons are important ? Which ones are not ?

I’ll skip the pamphlet explaining why it’s a bad idea to have a heavy UI. You can open your eyes now and let me present you another way of showing useful widgets at the right time and hiding them when not needed: ctkPopupWidget

Slice view popup
Popup to control a 2D view
As a result we managed to cleanup the UI of the Slicer main window:

Slicer3 with slice view controllers visible

Slicer4 with slice view controllers as popups

As its name indicates, ctkPopupWidget is:

  • part of CTK (Apache 2 license), used in 3D Slicer
  • a popup: with full control over where and how to popup
  • a widget: respects all the properties of a Qt widget (e.g. parent/child relationship, background transparency)

Example of a semi transparent popup
Popup to control the range of a slider
 ctkPopupWidget is easy to use, let’s look at a line by line example:

See below the result of the previous code, the slider popup opens on the left of the spinbox.

Another example of use for a popup slider: as a view item delegate

Popup in a custom QItemDelegate
Most of these properties have a good default value and don’t need to be manually set.
Here is the complete API for ctkPopupWidget.

See below more popup tuning:


Background fade effect

Elastic easing curve


Note that you can also design the popup UI using Qt Designer. All you then need to do is:

A popup widget follows its parent when moved, hides if the parent is hidden or disabled. Popups can be nested, pinned, unpinned, flattened (dynamically change from a popup mode into a regular widget).

pin/unpin example
Pin and Unpin
There are still a few corner cases that can be improved, the fade effect is still a bit experimental and there are a few issues with dialogs or windows moved over the popup. Nonetheless, we started to add a “popup mode” to some widgets in CTK, e.g. ctkSliderWidget::setPopupSlider(bool).

As a side note, you can also consider ctkCollapsibleButton and ctkCollapsibleGroupBox as other alternatives to conveniently “show”/”hide” widgets.

Any question? let me know.

7 Responses to Give your cute (Qt) GUI some pop

  1. David Cole says:

    Very cool. I think I’m gonna have to use CTK to build an app soon…

  2. T T says:

    I did not find any clear docs How can I use it in my QT application.
    Can you please refer me to something that will help me with that?

  3. Julien Finet says:

    There are integration examples in the CTK Examples github project:

    The main idea to integrate CTK into an application is to do:

    For more information, please ask on the CTK mailing list:

  4. ChenStar says:

    i am a student from china, i need a resource code of CTK ,so ,if you have,please send to email, thank you very much, american friends!

  5. Grégory says:

    I would like to use CTK with Qt 5.4.1 … I modified the CmakeList.txt and ctkMacroSetupQt.cmake : CMake configure and generaiton ok, but the Visual Studio 2013 Community solution failed ….
    Is CTK compatible with Qt 5 ?
    Best regards,

Questions or comments are always welcome!