User Tools

Site Tools


Hello GUI for ROS

Introduction and system requirments

This tutorial describes a step by step instructions on how to build a simple Graphical User Interface (GUI) for ROS. To make the GUI building and editing simple and user friendly, a RAD tool called Glade is used. Through Glade, one can build interfaces for the GTK+ toolkit and the GNOME desktop environment, which are then saved as XML files. Using the GtkBuilder GTK+ object, implemented in numerous programming languages inlcuding c++ and Pyhyon, these can be loaded by applications dynamically as needed. Glade is Free Software released under the GNU GPL License.

Once the GUI has been built it interfaces with ROS using Python. PyGTK library provides an interface for building GTK+ objects previously made in Glade. The underlying GTK+ library provides all kind of functions that interface with GUI elements. As Python is also a standard programing language used in ROS programing, it makes it easy to connect, and display ROS messages.

Glade interface designer

GUI interface of the Hello GUI ROS program consists of a Main window, Vertical box with two rows, one filled with an image and the other with a button. There are multiple online Glade tutorials that can get you started with Glade very easily. One such tutorial can be found here. Below is a screenshot of the GUI example design in glade. When building new GUI designes it is vital that main window Commons property “Visible” be set as Yes. The default value for this property is No, which means that GUI wont be desplayed if this is not set as yes.


PyGTK library interfaces GUI through various events. These events are defined when a certain object in the window is pressed, changed, etc. Each event is assigned a function that gets called when the event occures. The actual function implementation is written in Python code, but in Glade we supply the name and passing arguments of the function. Two main events for this simple program are MainWindow_destroy and SendButton_cliked. The setup is shown in the following screenshot:


When saving the glade file, it should be saved as GtkBuilder files.

Python code

Example python code creates a ROS node talker that publishes chatter message “hello world”. HellowWorldGTK class defines the callback functions for the events defined in Glade, builds GUI from the Glade XML file and connects to the defined callbacks. In the main function, a timer event is defined and attached to the GUI.
#!/usr/bin/env python
import sys
	#PyGtk library import
 	import pygtk
	import gtk
#ROS related initializations
import roslib; roslib.load_manifest('ros_glade')
import rospy
import os
from std_msgs.msg import String
class HellowWorldGTK:
	def __init__(self):
		#Set the path to Glade file, in the ros_glade ROS package
		self.gladefile = str 
		#Initiate the Builder and point it to the glade file
		self.builder = gtk.Builder()
		#Connect event functions
		self.builder.connect_signals(self) = rospy.Publisher('chatter', String)
	def SendButton_cliked(self, widget):
		#Simple button cliked event
		self.talker() #Calls talker function which sends a ROS message
        	print "You clicked the button"
	def talker(self):
	    	#ROS message hello world
	    if not rospy.is_shutdown():
		str = "hello world %s"%rospy.get_time()
	def Timer1_timeout(self):
		#Timer functions that sends ROS messages every second
		return 1
	def MainWindow_destroy(self,widget):
		#MainWindow_destroy event
if __name__ == "__main__":
	#start the class
	hwg = HellowWorldGTK()
	gtk.timeout_add(1000, hwg.Timer1_timeout) #Adds a timer to the GUI, with hwg.Timer1_timeout as a 
	#callback function for the timer1
	gtk.main()#Starts GTK
drexel_hello_gui.txt · Last modified: 2016/11/06 14:02 by dwallace