[Ctk-developers] Give your cute (Qt) GUI some pop

[Julien Finet]

A new article has just been posted on the The Kitware Blog at
http://www.kitware.com/blog/home/post/169

*Give your cute (Qt) GUI some pop* by *Julien Finet* (Open Source)

*Your app is too cluttered, use ctkPopupWidget*

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 :-P ). 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 <http://www.commontk.org/docs/html/classctkPopupWidget.html>*
[image: 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 <http://www.commontk.org/index.php/Main_Page> (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)

[image: 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:

QSpinBox* spinBox = new QSpinBox(parentWidget); // the spinbox is the parent
of the popup,
ctkPopupWidget* popup = new ctkPopupWidget(spinBox); // the popup is placed
relative to the spinbox
QHBoxLayout* popupLayout = new QHBoxLayout(popup);
// populate the popup with a vertical QSlider:
QSlider* popupSlider = new QSlider(Qt::Vertical, popup);
// add here the signal/slot connection between the slider and the spinbox
popupLayout->addWidget(popupSlider); // Control where to display the the
popup relative to the parent
popupSlider->setAlignment(Qt::Left | Qt::Top); // at the top left corner
popupSlider->setHorizontalDirection( Qt::RightToLeft ); // open outside the
parent
popupSlider->setVerticalDirection(ctkBasePopupWidget::TopToBottom); // at
the left of the spinbox sharing the top border
// Control the animation
popupSlider->setAnimationEffect(ctkBasePopupWidget::ScrollEffect); // could
also be FadeEffect
popupSlider->setOrientation(Qt::Horizontal); // how to animate, could be
Qt::Vertical or Qt::Horizontal|Qt::Vertical
popupSlider->setEasingCurve(QEasingCurve::OutQuart); // how to accelerate
the animation, QEasingCurve::Type
<http://doc.qt.nokia.com/latest/qeasingcurve.html#Type-enum>popupSlider->setEffectDuration(100);
// how long in ms.
// Control the behavior
popupSlider->setAutoShow(true); // automatically open when the mouse is over
the spinbox
popupSlider->setAutoHide(true); // automatically hide when the mouse leaves
the popup or the spinbox.

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 <http://www.commontk.org/docs/html/classctkPopupWidget.html> 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:
QSpinBox* spinBox = new QSpinBox(parentWidget);
ctkPopupWidget* popup = new ctkPopupWidget(spinBox);
Ui_myPopup::setupUi(popup); // sets the child widgets and the popup
properties.

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).
[image: 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<http://www.commontk.org/index.php/File:CtkCollapsibleWidget.png>and
ctkCollapsibleGroupBox<http://www.commontk.org/index.php/File:CtkCollapsibleGroupBox.png>as
other alternatives to conveniently "show"/"hide" widgets.

Any question? let me know.
Julien.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://public.kitware.com/pipermail/ctk-developers/attachments/20110921/6d15916b/attachment.html>