Overview

A graphical user interface or GUI enables people especially end users to interactive with ROS through graphical icons and visual indicators.

In fact, there has been multiple tools which can be used in Linux or Ubuntu to make a GUI, such as Qt, Gambas, GTK+ and Perl. Also in Github, there are a number of examples of ROS GUI, while most of them are written in Python, which drives us to find an easy way to create a ROS GUI for C++ developers.

A light weight and easy-to-build tool to write a GUI would be perfectly saving developers’ time and energy and helps better focusing on the original technical topic, which is ROS here. Among those above, Qt highlights itself for its broad use in different platforms and plenty of open-sourced resources.

Establish a Qt development environment in ROS

Qt is a cross-platform application framework that is widely used for developing application software that can be run on various software and hardware platforms with little or no change in the underlying codebase, while having the power and speed of native applications.

An example GUI created by Qt is shown as following,

1) Qt SDK Installation

The newly updated version of Qt is Qt 5.5.1 ( http://www.qt.io/download-open-source/#section-2 ), though you can still follow this tutorial,

http://www.wikihow.com/Install-Qt-SDK-on-Ubuntu-Linux,

which shows a step by step tutorial to install Qt SDK 4.8 and Qt SDK 5.0 on Ubuntu.

2) First Qt program

For those who are new to use Qt, this tutorial may help you quickly develop a simple hello world program,

http://www.wikihow.com/Create-Your-First-Qt-Program-on-Ubuntu-Linux,

which is enough to make you familiar with the wedgets and qmake use in Qt.

3) make QtCreator runnable in Ubuntu terminal

In Step 1), it has shown us how to make "qmake" runnable in terminals. Similarly, we can set qtcreator runnable in Ubuntu terminal.

Note, we can simply install a qtcreator package with a command,

$ sudo apt-get install qtcreator

 

Then it perfectly runs in terminals, like

 

$ qtcreator

 

However, this qtcreator installed in this way may not be the latest version.

What we need here is only to put a soft link to the qtcreator we have just installed. Here are some simple precedures.

1. Once the Qt program is installed, open up a terminal and use a text editor such as nano or gedit to edit your /etc/profile.

   • Type/Copy/Paste: sudo -s nano /etc/profile
   • or
   • Type/Copy/Paste: sudo -s gedit /etc/profile
    
2. Scroll down to the end of the /etc/profile file and enter the following text below. You want to add this line below to your /etc/profile system wide file so that you will have the option to compile Qt programs from the terminal line.
    
3. Type/Copy/Paste:
   • PATH=/opt/Qt5.7.0/Tools/QtCreator/bin:$PATH
   • export PATH
    
4. The above number highlighted in bold denotes the version number of the Qt SDK so make sure you enter the correct version number of the Qt SDK. The Qt SDK is always improving with new version changes. So make sure you are mindful of your Qt SDK version number.
   • For example, we are using Qt version 5.7.0 in this example, therefore the version number in the /etc/profile would reflect as 5.7.0
    
5. Save the /etc/profile file and exit
    
6. Reload the /etc/profile file by issuing the following command
   • Type/Copy/Paste: . /etc/profile
   • Make sure you enter a . and then a space in order to reload your /etc/profile file
    
7. Once the /etc/profile file is reloaded issue the following command you can type the following commands to make sure your Ubuntu Linux system recognizes that the Qt SDK has been accepted by the system PATH.
    
8. Type/Copy/Paste: which qmake
   • You should receive a response such as the one below
   • /opt/Qt5.7.0/Tools/QtCreator/bin/qtcreator
    
9. Also type the following command below:
   • Type/Copy/Paste: qtcreator -version
    
10. You should receive a response similar to this:
    • Qt Creator 4.0.2 based on Qt 5.7.0
     
11. This lets you know that you are able to run qtcreator programs from the command line.

4) Qt Dependances needed in ROS

Also, install another two packages for ROS (here Indigo version), which will be used in 3 to create a ROS GUI template in C++. From now on, Qt’s journey in ROS has just started.

$ sudo apt-get install ros-indigo-qt-create

$ sudo apt-get install ros-indigo-qt-build

5) Import an existing ROS project to QtCreator

The steps are

• Click “File->Open File or Project”

• Choose “CMakeLists.txt” in ros package folder

• Choose or create a build directory for building and running

Note: Not all the files in the ros package folder will be automatically imported to QtCreator, such as “include” folder. You might need to import them manually.

Create a Qt ROS GUI template

ROS has been very friendly to Qt by providing a package, catkin_create_qt_pkg, to help building Qt environment in ROS, which you can refer to ROS WIKI at http://wiki.ros.org/qt_create/Tutorials/Qt%20App%20Templates

To build a Qt ROS GUI template using that , in your workspace, type

$ cd src

$ catkin_create_qt_create qtros

where “qtros” is the package name you created.

Normally, it will show you as

Through command “tree”, you can take a look at what has been generated for you and their structure.

Enter the QtCreator from the terminal by typing

$ qtcreator

Click “Configure Project”, then it will automatically compile the “qtros” project for you.

After that, once you modified your code you can switch to use “catkin_make” to compile in terminal window,

$ ~/ros_ws

$ catkin_make

$ rosrun qtros qtros

which you might be more familiar, while the generated build and run files are in “~/ros_ws/build” and “~/ros_ws/devel”, which is different from that in QtCreator.

Note: I am not sure if we can put “~/ros_ws/build” as its building directory when building and running in QtCreator, which I have tried but not successfully, because it will cause conflicts with catkin_make files. Luckily, it doesn’t seem to be an issue since we can simply choose a different directory. That is why we still need to compile again in the terminal after compiling in QtCreator. This pre-compiling is necessary only for the first time.

Once compiled and running, you can a GUI window like

which includes three main features,

• A ROS master chooser

• Separate UI and ROS node classes

• ROS node class has connections for gui logging and a spinner

Next, you can

• Affect GUI changes in main_window.ui with Qt Designer.

• Modify Qt code in main_window.hpp/main_window.cpp.

• Do ROS topics and services in qnode.hpp/qnode.cpp.

Add a Wedget into the GUI

As a strong example, we now try to add new button into the “main_window” and check how it works.

Checking the existing button “Connect” and “Quit”, I was puzzled by whether they are automatically connected with the C++ functions or by other explicit link or calling. After two tests following, I found them both right.

a. button test 1

i) Using “qtros” project created in 3, open “main_window.ui” in UI mode.

ii) Drag a “Push Button” into the ui and replace its text name and object name as “Test” and “button_test”, which is in the same way with “button_connect”.

iii) Open the file “main_window.hpp” and “main_window.cpp” and create two new functions associated with this button test by imitating from the “button_connect” working.

In main_window.hpp

public:

…

void showNoButtonTestMessage();


public Q_SLOTS:

/******************************************

** Auto-connections (connectSlotsByName())

*******************************************/

…

void on_button_test_clicked(bool check);


In main_window.cpp:


/*****************************************************************************

** Implementation [Slots]

*****************************************************************************/

…


void MainWindow::showButtonTestMessage() {

QMessageBox msgBox;

msgBox.setText("Button test ...");

msgBox.exec();

close();

}

…

void MainWindow::on_button_test_clicked(bool check ) {

showTestButtonMessage();

}

…

iv) Compile and run

We see a new button named “Test”. Then we click it and a message box shows up, which proves the button “Test” is automatically connected by name.

b. button test 2

We notice that the “Quit” button is explicitly connected with a callback function “close()” in Signals & Slots Editor in ui mode.

Also, in “main_window.cpp”, there exists some lines seeming to link the wedgets and callback functions together, like

QObject::connect(ui.actionAbout_Qt, SIGNAL(triggered(bool)), qApp, SLOT(aboutQt())); // qApp is a global variable for the application


QObject::connect(&qnode, SIGNAL(rosShutdown()), this, SLOT(close()));


QObject::connect(&qnode, SIGNAL(loggingUpdated()), this, SLOT(updateLoggingView()));

1) Create two new buttons, “Left” and “Right”, to output something different with each other in the logging window

2) Create two callback functions to be called by the two buttons

In main_window.cpp

…


QStringListModel logging_model;



MainWindow::MainWindow(int argc, char** argv, QWidget *parent)

: QMainWindow(parent)

, qnode(argc,argv)

{

…


/*******************************

** Button test - explicit way

********************************/

QObject::connect(ui.left, SIGNAL(clicked()), this, SLOT(moveLeft()));

QObject::connect(ui.right, SIGNAL(clicked()), this, SLOT(moveRight()));

}



void MainWindow::moveLeft() {

…

}


void MainWindow::moveRight() {

…

}

3) Compile and run

Once the button “left” is clicked, it will show “moving left by 1 step <<<<<<”.

Once the button “left” is clicked, it will show “moving right by 1 step >>>>>>”.

This test proved a explicit way to link callback function to according wedget. The key is the line

QObject::connect(&qnode, SIGNAL(signal()), this, SLOT(slot()));

So basically Qt is using a signal and slot mechanism, which is a central feature of Qt and probably the part that differs most from the features provided by other frameworks. You can refer to

http://doc.qt.io/qt-4.8/signalsandslots.html

for more detail.

A Publisher and Subscriber example

Populate the qnode.cpp with ROS topics and we can easily build a number of Qt GUI applications in ROS. Here is an example.

By filling in QNode::rosrun() with publisher and subscriber, we can use two nodes to communicate with each other and show everything in logging windows.

Create two separated packagas named “my_gui_publisher” and “my_gui_subsriber”.

In my_gui_publisher/src/qnode.cpp

…

chatter_publisher = n.advertise<std_msgs::Float64>("chatter", 1000);

…

In my_gui_subscriber/src/qnode.cpp

…

chatter_subscriber = n.subscribe("chatter", 1000, &QNode::myCallback, this);

…

Note: You can use “$ roscore” to check your local ROS MASTER URI and use ”$ ifconfig” to inquire your IP address.

Conclusion

This report gives some basic steps to start with C++ GUI in ROS. Following these procedures, I believe we can build more interactive GUI programs by just focusing on modifying the qnode files which has been a pure ROS problem.

Github Link

The source code of button tests in 3 and publisher and subscriber test in 4 can be referred to my github,

https://github.com/xpharry/ROSCppGUI/tree/master/QtROS_GUI.

Please feel free to download. 

How to build a GUI in ROS with Qt / C++