[Documentation] [TitleIndex] [WordIndex

Note: This tutorial assumes that you have completed the previous tutorials: Writing a Python Plugin.
(!) Please ask about problems and questions regarding this tutorial on answers.ros.org. Don't forget to include in your question the link to this page, the versions of your OS & ROS, and also add appropriate tags.

Using .ui file in rqt plugin

Description: In this tutorial python is used for now. C++ tutorial is pending.

Tutorial Level: INTERMEDIATE

Background of this tutorial

Although it's up to developers, it is in general very good idea in Qt that you utilize .ui file. A few advantages:

rqt provides a way to loosen the burden of utilizing .ui files, which you face when you follow Qt's standard building steps (eg. using qmake).

Write rqt plugin without relying on .ui

If you choose not to use .ui file in your rqt plugin, no problem, there's still a standard way to do that although we won't provide documents for it. Please consult an example.


For a concrete example, we use rqt_bag for rqt plugins written in python. We also look at rqt_image_view only for C++ specific things.

Here are the steps:

Accessing GUI components defined in .ui files

Assuming you do the above, in your code you can refer to the components defined in .ui files as if they are member variables.

For python bag_widget.py:

self.play_icon = QIcon.fromTheme('media-playback-start')

For C++, image_view.h:

    Ui::ImageViewWidget ui_;

and image_view.cpp:


Note that for both python and C++, you might often want to update the components in your source like python example above due to the limitation of Qt Designer.

Using custom class

"Custom" means any classes that's not defined in Qt. So both the class you define or the one defined in aother library that depends on Qt are custom to Qt.

From the same .ui file example from rqt_bag,

   1  <class>Bag</class>
   2  <widget class="QWidget" name="Bag">

The value of <class> element and name attribute in <widget> element should better be the same (TODO: need proof), while the value of class attribute must be the type of the parent class of the widget.

Reusing existing GUI class

Sometime you just want to re-use widgets you see in other rqt plugins. Or even non-rqt, pure Qt widgets. Although .ui file by default allow you to only use standard Qt components, Qt provides an easy way to achieve what you want.

Take an existing example; If you see the screenshot of rqt_moveit, you see that it incorporates rqt_topic inside. Here the layout is organized by utilizing nice and easy .ui file as well.


Let's see how this is done.

1. Declare existing components to be used as customwidget in your rqt plugin package.

2. Use customwidgets in your .ui.

The TopicWidget class declared is used in this line. This is a standard way of defining a usage of any Qt classes. Nothing new.

3. Write behaviour in the codes with your re-used class.

2020-02-22 13:12