User Tools

Site Tools


drexel_hello_gui

This is an old revision of the document!


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: [http://www.micahcarrick.com/gtk-glade-tutorial-part-1.html]. 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.

option|800px|

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:

option|800px|

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. <source lang=“python”> #!/usr/bin/env python

import sys try:

#PyGtk library import

import pygtk

	pygtk.require("3.0")

except:

	pass

try:

import gtk
	import gtk.glade

except:

sys.exit(1)

#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
	str=roslib.packages.get_pkg_dir('ros_glade')+"/nodes/ROS_Button.glade"
	self.gladefile = str 
	#Initiate the Builder and point it to the glade file
	self.builder = gtk.Builder()
	self.builder.add_from_file(self.gladefile)
	#Connect event functions
	self.builder.connect_signals(self)
	self.pub = rospy.Publisher('chatter', String)
    	rospy.init_node('talker')
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()
	rospy.loginfo(str)
	self.pub.publish(String(str))
def Timer1_timeout(self):
	#Timer functions that sends ROS messages every second
	self.talker()
	return 1
def MainWindow_destroy(self,widget):
	#MainWindow_destroy event
	sys.exit(0)

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

</source>

drexel_hello_gui.1478039976.txt.gz · Last modified: 2016/11/01 15:39 by dwallace