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.
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.
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 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