User Tools

Site Tools


drexel_hello_gui

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

drexel_hello_gui [2016/11/01 15:39]
dwallace created
drexel_hello_gui [2016/11/06 14:02] (current)
dwallace
Line 1: Line 1:
 ====== Hello GUI for ROS ====== ====== Hello GUI for ROS ======
  
-== Introduction and system requirments ==+===== 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. 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.
Line 7: Line 7:
 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. 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 == +===== 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. +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 [[http://​www.micahcarrick.com/​gtk-glade-tutorial-part-1.html|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. 
  
-[[File:​ROS_glade.jpg|option|800px|]]+{{dylanw:​ROS_glade.jpg}}\\ 
  
-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:+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:
  
-[[File:​ROS_glade_events.jpg|option|800px|]]+{{dylanw:​ROS_glade_events.jpg}}\\ 
  
 When saving the glade file, it should be saved as GtkBuilder files. When saving the glade file, it should be saved as GtkBuilder files.
  
-== Python code == +===== 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">+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. 
 + 
 +<code python ​example.py>
 #​!/​usr/​bin/​env python #​!/​usr/​bin/​env python
  
Line 75: Line 77:
  #callback function for the timer1  #callback function for the timer1
  gtk.main()#​Starts GTK  gtk.main()#​Starts GTK
-</source>+</code>
drexel_hello_gui.txt · Last modified: 2016/11/06 14:02 by dwallace