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

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.

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.

a Qt development environment in ROS

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.

example GUI created by Qt is shown as following,

1) Qt
SDK Installation

newly updated version of Qt is Qt 5.5.1 (
), though you can still follow this tutorial,


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

2) First
Qt program

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


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.

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) Import
an existing ROS project to QtCreator

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

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.

a Qt
ROS GUI template

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

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

cd src

catkin_create_qt_create qtros

“qtros” is the package name you created.

it will show you as

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

the QtCreator from the terminal by typing


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

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



rosrun qtros qtros

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.

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.

compiled and running, you can a GUI window like

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

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.

a Wedget into the GUI

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

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.

button test 1

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

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.




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 ...");





void MainWindow::on_button_test_clicked(bool check ) {




iv) Compile
and run

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.

button test 2

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

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



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

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

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

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

SIGNAL(signal()), this, SLOT(slot()));

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


more detail.

Publisher and Subscriber example

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

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

two separated packagas named “my_gui_publisher” and



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




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



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


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.


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


feel free to download.

How to build a GUI in ROS with Qt / C++的更多相关文章

  1. ROS_Kinetic_15 ROS使用Qt

    ROS_Kinetic_15 ROS使用Qt 在网页http://www.qt.io/download-open-source/#section-2 下载并安装Qt ~/下载$ chmod +x qt ...

  2. ROS_Kinetic_22 使用ROS的qt插件即ros_qtc_plugin实现Hi ROS!!!!

    官网已经更新了教程说明,在此特别说明: https://github.com/ros-industrial/ros_qtc_plugin/wiki This wiki explains the pro ...

  3. Gazebo機器人仿真學習探索筆記(七)连接ROS

    中文稍后补充,先上官方原版教程.ROS Kinetic 搭配 Gazebo 7 附件----官方教程 Tutorial: ROS integration overview As of Gazebo 1 ...

  4. Build Slic3r on Windows // 如何在Windows上编译Slic3r

    下载Strawberry Perl 5.22 64bit绿色版,解压缩到某个地方,比如C盘根目录,比如 C:\strawbrry-perl- 下载Boos ...

  5. ROS(indigo) 安装和使用更新版本的Gazebo----3,4,5,6,7 附:中国机器人大赛中型组仿真比赛说明

    ROS(indigo) 安装和使用更新版本的Gazebo,本文以7为例. Gazebo7支持更多新的功能,如果使用下面命令安装ROS(indigo): ~$ sudo apt-get install ...

  6. ROS编译:catkin简析

    博客转载自:https://blog.csdn.net/zyh821351004/article/details/50388429 Catkin tutorials: http://wiki.ros. ...

  7. 由浅到深理解ROS(2)

    ROS文件系统 用户可以直接参看官网:http://wiki.ros.org/ROS/Tutorials/NavigatingTheFilesystem ROS文件系统中的两个最基本的概念:Packa ...

  8. Dat.gui 使用教程

    官方站点:http://workshop.chromeexperiments.com/examples/gui/ Dat.gui 使用教程:Dat.gui 是一个 GUI 组件,他可以为你的 demo ...

  9. [转载]ROS开发环境之Qt Creator

    ROS开发环境之Qt Creator(http://my.phirobot.com/blog/2013-12-ros_ide_qtcreator.html) Created at: 2013-12-2 ...


  1. maven引入json-lib的正确方法

    <dependency> <groupId>net.sf.json-lib</groupId> <artifactId>json-lib</art ...

  2. ADO.NET Entity Framework学习笔录(一)

    今天开始学习了EF的相关内容,以前只知道ADO.NET,今天学习后觉得有必要写个相关的学习心得,今天就先写第一篇. 我们的再学习的过程中所用到的环境是Windows7+SQLServer2008+VS ...

  3. javascript回车完美实现tab切换功能

    javascript通过回车实现tab切换功能,最经有一个项目是给化工厂做的在使用的过程中需要输入大量的数据,使用的都是小键盘区,在以前都是通过excel录入数据的现在, 在网页上需要实现excel ...

  4. 经典SQL语句大全(绝对的经典)

    ”,start为起始位置,length为字符串长度,实际应用中以len(expression)取得其长度3,right(char_expr,int_expr) 返回字符串右边第int_expr个字符, ...

  5. 700名黑客无法攻破Trillium安全防护软件 欲以网络安全险获利

    盖世汽车讯 据外媒报道,在2017 DEF CON黑客大会上,黑客们受邀入侵Car Hacking Village会场内的各类自动驾驶车辆.物联网网络安全公司--Trillium Incorporat ...

  6. C语言_了解下结构体指针

    在C语言中几乎可以创建指向任何类型的指针,包括用户自定义的类型.当然也可以指向结构体,先看一个小案例: #include <stdio.h> #include <string.h&g ...

  7. 蛋疼zipline安装

    比安装zipline更让人蛋疼的是,网上的教程没有一个是TM对的,真的是忍不住要吐血. 真的是一步一坑,一步一坑 安装环境: Windows7旗舰版,64位系统 python 版本3.5.3 我没有用 ...

  8. NLP自然语言处理原理及名词介绍

    1. 自然语言概念 自然语言,即我们人类日常所使用的语言,是人类交际的重要方式,也是人类区别其他动物的本质特征. 但是我们只能通过自然语言与人交流,无法与计算机进行交流. 2. 自然语言处理 自然语言 ...

  9. Visual Studio 项目依赖

    在解决方案上点击右键,选择项目依赖项 选择需要发布的所有依赖项目 主要是为了解决插件项目DLL无法生成的问题

  10. LCA树上倍增

    LCA就是最近公共祖先,比如 节点10和11的LCA就是8,9和3的LCA就是3. 我们这里讲一下用树上倍增来求LCA. 大家都可以写出暴力解法,两个节点依次一步一步往上爬,直到爬到了相同的一个节点. ...