How to build a GUI in ROS with qt/c++

Overview

Agraphical user interface or GUI enables people especially end Usersto interactive with ROS through graphical icons and VI Sualindicators.

in fact, there have beenmultiple tools which can be used on Linux or Ubuntu to make a gui,such as qt,gambas, GTK + and Perl. Also in Github, There is a number of examplesof ROS GUI, While most of them is written in Python, which drives Usto find A easy-to-create ROS GUI for C + + Developers.

Alight weight and easy-to-build tool to write a GUI would is perfectlysaving developers ' time and energy and helps better Focusing on theoriginal technical topic, which are ROS here. Among those above, qthighlights itself for it broad use in different platforms and plentyof open-sourced Resources.

Establisha Qt Development environment in ROS

Qtis a cross-platform application framework That's widely used fordeveloping application software that can being run on Vari OUs Softwareand hardware platforms with little or no on the underlyingcodebase, while has 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 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 is new to the use of Qt, this tutorial could 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 had 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 on this is the latest Version.

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

2. Once the QT program was 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
4. Scroll down to the end of The/etc/profile file and enter the following text BELOW. You want-add this line below-your/etc/profile system wide file so, you'll have the option to compile Qt progr AMS from the terminal line.
6. Type/copy/paste:
   • path=/opt/qt5.7.0/tools/qtcreator/bin: $PATH
   • Export PATH
8. The above number highlighted in bold denotes the version number of the Qt SDK so make sure you enter the correct versi on Number of the Qt SDK. The Qt SDK is always improving with new version Changes. So make sure is mindful of your Qt SDK version number.
   • For example, we is using Qt version 5.7.0 in this example, therefore the version number in The/etc/profile Woul D reflect as 5.7.0
10. Save the/etc/profile file and exit
12. 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
14. Once the/etc/profile file is reloaded issue the following command you can type the following commands to make sure yo ur Ubuntu Linux System recognizes that the Qt SDK have been accepted by the system PATH.
16. type/copy/paste: which qmake
    • You should receive a response such as the one below
    • /opt/qt5.7.0/tools/qtcreator/bin/qtcreator
18. Also Type the following command below:
    • type/copy/paste: qtcreator-version
20. You should receive a response similar to This:
    • QT Creator 4.0.2 based on Qt 5.7.0
22. This lets your know that is able to run Qtcreator programs from the command LINE.

4) Qt dependances needed in ROS

Also,install another, packages for ROS (here Indigo version), Whichwill is used in 3 to create a ROS GUI template in c+ +. From now on, Qt's journey in ROS have 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 is

• Click "file->open File or Project"

• Choose "CMakeLists.txt" in the Ros Package folder

• CHOOSEOR Create a build directory for building and running

Note:not all the files in the Ros Package folder is automaticallyimported to qtcreator, such as "include" folder. You might needto import them manually.

CreateaQtros GUI Template

Roshas been very friendly to Qt by providing a package,catkin_create_qt_pkg, to help building Qt environment in ROS, W Hichyou can refer to ROS WIKIathttp://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 Created.

Normally,it would show you as

Throughcommand "tree", You can take a look at the what have been generatedfor you and their structure.

Enterthe Qtcreator from the terminal by typing

$qtcreator

Click "Configure project", then it'll 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 is 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 it buildingdirectory when building and running in qtcreator, which I There are triedbut not successfully, because it would cause conflicts withcatkin_make Files. luckily, it doesn ' t seem to being an issue since Wecan simply choose a different directory. That's 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, can a GUI window like

Whichincludes three main features,

• AROS Master Chooser

• Separateui and ROS node classes

• Rosnode class have 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 a new button into the ' Main_window ' and check how it works.

Checkingthe existing button "Connect" and "Quit", I was puzzled Bywhether they is automatically connected with the C + + Fu Nctions or Byother explicit link or calling. After the 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 are in The same waywith "button_connect".

iii) openthe file "main_window.hpp" and "main_window.cpp" and createtwo new functions associated with the This button test By imitating fromthe "button_connect" working.

Inmain_window.hpp

Public:...void shownobuttontestmessage ();p ublic 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" was automaticallyconnected by Name.

B.button Test 2

Wenotice that the "Quit" button was 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

Qobject::connect (ui.actionabout_qt, SIGNAL (triggered (bool)), qapp, SLOT (aboutqt ())); Qapp is a global variable for the applicationqobject::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 ' other ' in the logging window

2) Createtwo callback functions to being called by the and the buttons

Inmain_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

Oncethe button "left" is clicked, it'll show "moving left by 1step <<<<<<".

Oncethe button "left" is clicked, it'll show "moving right by 1step >>>>>>".

Thistest proved a Explicit-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 are a centralfeature of QT and probably the part that differs MO St from Thefeatures provided to other frameworks. 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's an Example.

Byfilling in Qnode::rosrun () with Publisher and subscriber, we can usetwo nodes to communicate with each other and show Ev Erything inlogging Windows.

Createtwo separated Packagas named "my_gui_publisher" and "my_gui_subsriber".

Inmy_gui_publisher/src/qnode.cpp

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

Inmy_gui_subscriber/src/qnode.cpp

... chatter_subscriber = n.subscribe ("chatter", &qnode::mycallback, this);

　　

Note:you can use the "$ roscore" to check your The 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 fil Es which has beena pure ROS Problem.

Githublink

Thesource Code of button tests in 3 and publisher and Subscriber Test In4 can is referred to my github,

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

Pleasefeel Free to Download.

How to build a GUI in ROS with qt/c++