[Tutorial] How to build a GUI in ROS with Qt / C++?

Original Link : http://www.cnblogs.com/casperwin/p/6206193.html

Notes:  Import project to QtCreator , we must select the CMakelist.txt then we can import all files to the project whose name is your package name.

Overview

Agraphical user interface or GUI enables people especially end usersto interactive with ROS through graphical icons and visualindicators.

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

Alight weight and easy-to-build tool to write a GUI would be perfectlysaving developers’ time and energy and helps better focusing on theoriginal technical topic, which is ROS here. Among those above, Qthighlights itself for its broad use in different platforms and plentyof open-sourced resources.

Establisha Qt development environment in ROS

Qtis a cross-platform application framework that is widely used fordeveloping application software that can be run on various softwareand hardware platforms with little or no change in the underlyingcodebase, while having the power and speed of native applications.

Anexample GUI created by Qt is shown as following,

1) QtSDK Installation

Thenewly 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,

whichshows a step by step tutorial to install Qt SDK 4.8 and Qt SDK 5.0 onUbuntu.

2) FirstQt program

Forthose who are new to use Qt, this tutorial may help you quicklydevelop a simple hello world program,

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

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

3) make QtCreatorrunnable 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:

   export PATH=/opt/Qt5.7.0/Tools/QtCreator/bin:$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) Importan existing ROS project to QtCreator

Thesteps are

• Click“File->Open File or Project”

• Choose“CMakeLists.txt” in ros package folder

• Chooseor create a build directory for building and running

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

Createa QtROS GUI template

ROShas been very friendly to Qt by providing a package,catkin_create_qt_pkg, to help building Qt environment in ROS, whichyou can refer to ROS WIKI athttp://wiki.ros.org/qt_create/Tutorials/Qt%20App%20Templates

Tobuild 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

Throughcommand “tree”, you can take a look at what has been generatedfor you and their structure.

Enterthe QtCreator from the terminal by typing

$qtcreator

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

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

$~/ros_ws

$catkin_make

$rosrun qtros qtros

whichyou might be more familiar, while the generated build and run filesare in “~/ros_ws/build” and “~/ros_ws/devel”,which is different fromthat in QtCreator.

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

Oncecompiled and running, you can a GUI window like

whichincludes three main features,

• AROS master chooser

• SeparateUI and ROS node classes

• ROSnode class has connections for gui logging and a spinner

Next,you can

• AffectGUI changes in main_window.ui with Qt Designer.

• ModifyQt code in main_window.hpp/main_window.cpp.

• DoROS topics and services in qnode.hpp/qnode.cpp.

Adda Wedget into the GUI

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

Checkingthe existing button “Connect” and “Quit”, I was puzzled bywhether they are automatically connected with the C++ functions or byother explicit link or calling. After two tests following, I foundthem both right.

a.button test 1

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

ii) Draga “Push Button” into the ui and replace its text name and objectname as “Test” and “button_test”, which is in the same waywith “button_connect”.

iii) Openthe file “main_window.hpp” and “main_window.cpp” and createtwo new functions associated with this button test by imitating fromthe “button_connect” working.

Inmain_window.hpp

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53

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) Compileand run

Wesee a new button named “Test”. Then we click it and a message boxshows up, which proves the button “Test” is automaticallyconnected by name.

b.button test 2

Wenotice that the “Quit” button is explicitly connected with acallback function “close()” in Signals & Slots Editor in uimode.

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

1 2 3 4 5 6 7

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) Createtwo new buttons, “Left” and “Right”, to output somethingdifferent with each other in the logging window

 

 

 

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

 

Inmain_window.cpp

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44

…     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

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

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

Thistest proved a explicit way to link callback function to accordingwedget. The key is the line

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

 

Sobasically Qt is using a signal and slot mechanism, which is a centralfeature of Qt and probably the part that differs most from thefeatures provided by other frameworks. You can refer to

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

formore detail.

APublisher and Subscriber example

Populatethe qnode.cpp with ROS topics and we can easily build a number of QtGUI applications in ROS. Here is an example.

Byfilling in QNode::rosrun() with publisher and subscriber, we can usetwo nodes to communicate with each other and show everything inlogging windows.

Createtwo separated packagas named “my_gui_publisher” and“my_gui_subsriber”.

Inmy_gui_publisher/src/qnode.cpp

1 2 3 4 5

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

Inmy_gui_subscriber/src/qnode.cpp

1 2 3 4 5

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

　　

 

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

Conclusion

Thisreport gives some basic steps to start with C++ GUI in ROS. Followingthese procedures, I believe we can build more interactive GUIprograms by just focusing on modifying the qnode files which has beena pure ROS problem.

GithubLink

Thesource code of button tests in 3 and publisher and subscriber test in4 can be referred to my github,

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

Pleasefeel free to download.