<div class="gmail_quote"><div>A new article has just been posted on the The Kitware Blog at <a href="http://www.kitware.com/blog/home/post/169" target="_blank">http://www.kitware.com/blog/home/post/169</a><br><br>
<i>Give your cute (Qt) GUI some pop</i> by <b>Julien Finet</b> (Open Source)
<br><br><b>Your app is too cluttered, use ctkPopupWidget</b><br><br>
<p>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.</p>


<p>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 ? </p>


<p>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: <strong><a href="http://www.commontk.org/docs/html/classctkPopupWidget.html" target="_blank">ctkPopupWidget</a></strong></p>


<center><img title="Popup to control a 2D view" src="http://www.kitware.com/blog/files/168_472862135.gif" alt="Slice view popup " width="320px"><br>Popup to control a 2D view</center>
<p>As a result we managed to cleanup the UI of the Slicer main window:</p>
<table border="0" align="center">
<tbody>
<tr>
<td><center><img src="http://www.kitware.com/blog/files/168_1480712121.png" alt="" width="98%"><br>Slicer3 with slice view controllers visible</center></td>
<td><center><img src="http://www.kitware.com/blog/files/168_510810568.png" alt="" width="98%"><br>Slicer4 with slice view controllers as popups</center></td>
</tr>
</tbody>
</table>
<p>As its name indicates, ctkPopupWidget is:</p>
<ul>
<li>part of <a href="http://www.commontk.org/index.php/Main_Page" target="_blank">CTK</a> (Apache 2 license), used in 3D Slicer</li>
<li>a popup: with full control over where and how to popup</li>
<li>a widget: respects all the properties of a Qt widget (e.g. parent/child relationship, background transparency)</li>
</ul>
<center><img title="Semi transparent popup" src="http://www.kitware.com/blog/files/168_40599145.gif" alt="Example of a semi transparent popup" width="238px"><br>Popup to control the range of a slider</center>
<p> ctkPopupWidget is easy to use, let's look at a line by line example:</p>
<p><code>QSpinBox* spinBox = new QSpinBox(parentWidget); // the spinbox is the parent of the popup, <br>ctkPopupWidget* popup = new ctkPopupWidget(spinBox); // the popup is placed relative to the spinbox<br>QHBoxLayout* popupLayout = new QHBoxLayout(popup);<br>

// populate the popup with a vertical QSlider:<br>QSlider* popupSlider = new QSlider(Qt::Vertical, popup);<br>// add here the signal/slot connection between the slider and the spinbox<br>popupLayout->addWidget(popupSlider); // Control where to display the the popup relative to the parent<br>

popupSlider->setAlignment(Qt::Left | Qt::Top); // at the top left corner<br>popupSlider->setHorizontalDirection( Qt::RightToLeft ); // open outside the parent<br>popupSlider->setVerticalDirection(ctkBasePopupWidget::TopToBottom); // at the left of the spinbox sharing the top border<br>

// Control the animation<br>popupSlider->setAnimationEffect(ctkBasePopupWidget::ScrollEffect); // could also be FadeEffect<br>popupSlider->setOrientation(Qt::Horizontal); // how to animate, could be Qt::Vertical or Qt::Horizontal|Qt::Vertical<br>

popupSlider->setEasingCurve(QEasingCurve::OutQuart); // how to accelerate the animation, <a href="http://doc.qt.nokia.com/latest/qeasingcurve.html#Type-enum" target="_blank">QEasingCurve::Type<br></a>popupSlider->setEffectDuration(100); // how long in ms.<br>

// Control the behavior<br>popupSlider->setAutoShow(true); // automatically open when the mouse is over the spinbox<br>popupSlider->setAutoHide(true); // automatically hide when the mouse leaves the popup or the spinbox.</code></p>


<p>See below the result of the previous code, the slider popup opens on the left of the spinbox. </p>
<center><img src="http://www.kitware.com/blog/files/168_2127820197.gif" alt="" width="256px"></center>
<p>Another example of use for a popup slider: as a view item delegate</p>
<center><img src="http://www.kitware.com/blog/files/168_1029693131.gif" alt="" width="256px"><br>Popup in a custom QItemDelegate</center>
<p>Most of these properties have a good default value and don't need to be manually set.<br><a href="http://www.commontk.org/docs/html/classctkPopupWidget.html" target="_blank">Here</a> is the complete API for ctkPopupWidget.</p>


<p>See below more popup tuning:</p>
<center>
<table border="0">
<tbody>
<tr>
<td><center><img src="http://www.kitware.com/blog/files/168_768299479.gif" alt="" width="256px"><br>Background fade effect</center></td>
<td><center><img src="http://www.kitware.com/blog/files/168_2109237564.gif" alt="" width="256px"><br>Elastic easing curve</center></td>
</tr>
</tbody>
</table>
</center>
<p>Note that you can also design the popup UI using Qt Designer. All you then need to do is:<br>QSpinBox* spinBox = new QSpinBox(parentWidget);<br>ctkPopupWidget* popup = new ctkPopupWidget(spinBox);<br>Ui_myPopup::setupUi(popup); // sets the child widgets and the popup properties.</p>


<p>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).</p>
<center><img title="Pin and Unpin" src="http://www.kitware.com/blog/files/168_1519220286.gif" alt="pin/unpin example" width="320px"><br>Pin and Unpin</center>
<p><br>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).</p>


<p>As a side note, you can also consider <a href="http://www.commontk.org/index.php/File:CtkCollapsibleWidget.png" target="_blank">ctkCollapsibleButton</a> and <a href="http://www.commontk.org/index.php/File:CtkCollapsibleGroupBox.png" target="_blank">ctkCollapsibleGroupBox</a> as other alternatives to conveniently "show"/"hide" widgets.</p>


<p>Any question? let me know.</p>Julien. 

  
</div>
  

</div><br>