Cmartin-pfc-itis
From jderobot
- Project Name:
- Authors: Carlos Iván Martín Amor (ci.martina [at] alumnos [dot] urjc [dot] es)
- Academic Year: 2008-2009
- Degree: Undergree
- Jde Version: jde 4.3.0
- SVN Repository: https://svn.jde.gsyc.es/users/cmartin/pfc-itis
- Tags: webots, opencv, jde, stage+player, Naoqi
- Technology: C, jde suit, C++, opencv, python, Gtk+, Glade, Xml, Libxml.
- State: Developing
- Source License: GPLv3
- Document License:
OBJECTIVE
My objective is creating to a graphic program that allows us to implement programs for robots.
CREATING THE INTERFACE
The creation of the interface developed by Glade and GTK+ library.
What is Glade?
Glade o Glade Interface Designer is a graphical user interface builder for GTK+, with additional components for GNOME.
Glade comes in three versions, one for GTK+ 1, two for GTK+ 2 and third version where Glade is programming language–independent, and doesn't produce code for events, but rather an XML file that is then used with an appropriate binding
Glade is free software distributed under the GNU General Public License.
Glade use GladeXML. It's a format XML where Glade use to save the project and its elements.
What is Gtk+?
GTK o the GIMP Toolkit is a set of cross-platform library for developing graphical user interfaces(GUI), mainly for graphics environments GNOME, XFCE and ROX but can also used on the desktop of Windows, MacOS and others.
They were initially created to develop the image edition program GIMP, however now use fairly by many other programs on GNU/Linux systems.
GTK+ has been designed to allow programming with other languages like C,C++,C#,Java,Ruby,Perl,PHP o Python.
Licensed under the terms of LGPL, GTK+ is free software and is part of the GNU project.
XML FILES
My application to create projects that are saved in xml files.
What is XML?
Xml (Extensible Markup Language) is an extensible meta tags developed by the World Wide Web Consortium (W3C). It is a simplification and adaptation of SGML and defines the specific language grammar (in the same way that HTML is in turn a language defined by SGML). So XML is not really a particular language, but a way of defining languages for different needs. Some of these languages that use XML for its definition are XHTML, SVG, MathML.
XML is not born only for use on the Internet, but is meant as a standard for exchanging structured information between different platforms. It can be used in databases, text editors, spreadsheets ...
XML is a simple technology that is surrounded by others that complement it and make it much bigger and with a much greater potential. Plays a very important today as it allows compatibility between systems to share information in a safe, reliable and easy.
Example:
<?xml version=" 1.0 " encoding=" UTF-8 " standalone= " yes "?>
<ficha>
<nombre> Carlos Iván </nombre>
<apellido> Martín </apellido>
<direccion> Fuenlabrada </direccion>
</ficha>
XML EXAMPLE
<?xml version=" 1.0 " encoding=" ISO-8859-1 " standalone= " yes "?>
<ejemplo>
<velocidad vel="100"/>
<inicial estado="1"/>
<nodos>
<nodo id="1">
<posicion x="178" y="115"/>
<nombre>estado_uno</nombre>
<sensores>
<motors valor="0"/>
<sonars valor="0"/>
<lasers valor="0"/>
<encoders valor="0"/>
</sensores>
<codigo>código del estado 1</codigo>
</nodo>
<nodo id="2">
<posicion x="466" y="116"/>
<nombre>estado_dos</nombre>
<sensores>
<motors valor="0"/>
<sonars valor="0"/>
<lasers valor="0"/>
<encoders valor="0"/>
</sensores>
<codigo>código del estado 2</codigo>
</nodo>
</nodos>
<transiciones>
<transicion id="1">
<posicion x="251" y="163"/>
<nodoA id="1" x="178" y="115"/>
<nodoB id="2" x="466" y="116"/>
<nombre>transicion_uno</nombre>
<codigo>código de la transición 1</codigo>
</transicion>
<transicion id="2">
<posicion x="410" y="325"/>
<nodoA id="1" x="178" y="115"/>
<nodoB id="1" x="178" y="115"/>
<posicionL x="389" y="325"/>
<posicionR x="405" y="325"/>
<nombre>transicion_bucle</nombre>
<codigo>código de la transición 2</codigo>
</transicion>
</transiciones>
<global>
<codigo>Código global</codigo>
</global>
</ejemplo>
OBJECTIVES OF THE APPLICATION
My application is based on creating a graphical programming environment. We can highlight various parts of the application.
1. Drawing Area: We can design the structure of our application.
It is the most important, as is where is all the development work and where we can see graphically our program intuitively.
2. Tool Panel: where have the necessary tools for development work.
We find the following buttons:
* Button Configuration: It allows us to configure our project, covering to the name of the project and its location.
* Button New: It's responsible for opening a new project.
* Button Load: Allows you to load a project saved in a xml file.
* Button Save: It allows us to sava the project.
* Button Undo: remove the final step.
* Button Redo: next step.
* Three Radio Buttons, that allow us to specify the action in the Drawing Area.
* Button Speed: this button lets you change the engine speed of execution.
* Button Make: It allos us to make the executable file.
3. Down Tool Panel : where have the tools to activate the sensors for each node.
The sensors are as follows:
* Motors
* Sonars
* Lasers
* Encoders
HOW TO USE THE APPLICATION?
First, just open the application, I recommend settings the new project. We must set the project name and location. Then, in RadioButtons must select the action to take in the drawing area.
We can draw transitions or states. The default is assigned a name corresponding to each object constructed, but we can change them by right. Whenever we have set the RadioButton selection.
Once created the structure of our project, we can store it in an xml file. As we can load any previously saved project. As for the nodes and transitions can insert code by clicking the right mouse button on the object and selecting the option "Programar Estado/Transición". In addition we have a part to write global code for our schema. We can establish that sensor will be used at each node. To schedule an object, we must first have configured our project.
Once created our development we can create the executable using the build button.
STEPS IN THE DEVELOPMENT
1. The first steps in developing the graphical environment was finding ways to draw using the mouse. 2. The second step was to draw the nodes in the Drawing Area. 3. Then it was recognizing drawn objects. 4. The third step was to draw the transitions int the Drawing Area and to recognize it. 5. Link the nodes through transitions. 6. Delete the objects of the Drawing Area. 7. Create the programing enviroment for each object. 8. Save the project in xml, using the library libxml. 9. Load project from an xml file through libxml. 10.Create the schema through another scheme. 11.Creation of arrows for transitions. 12.Development of the toolbar below, where we can select for each sensor node that will use. 13.Section to store global code. 14.Incorporation into the project file storage sensors and global code. 15.Implementation of the Back and Forward buttons to make and undo changes. 16.Change the overall structure of the application. 17.Verify that the program meets the objectives and improve its use. 18.Copy and paste states.
THE APPLICATION'S FUNCTIONALITY
This video shows all the basic functionality to create the automata.
SAVE TO PROJECT
This video shows how to save the automata created, and also shows how the xml is built.
CREATE TO SCHEMA
This video shows how the application can create the schema, and a structure that schema.
GLOBAL CODE
This section of the application allows us to define global variables and functions, which can be called from the code of the nodes and transitions.
SENSORS
Using the tool bar of sensors, we can apply to need sensors on each node. Depending on the sensor using all nodes are added or not our schema.
CREATE TO BUP&GO
This video shows how to create a bup&go schema.
CREATE TO CHESTE CIRCUIT
Development through the application created, the behavior of a robot able to walk the famous Cheste circuit through deliberative navigation. Thanks to the attainment of this behavior, we can see that our program yields, and also collect new targets to improve.
![]() |
| |
|
|
|
|
UNDO-REDO
A significant improvement was not implemented, was the realization of an undo-redo system.
Due to the existence of two programming windows, the structure of the PLC and the programming of each node, transition or global code, forced to create two separate types of undo-redo.
On the main window is responsible for storing the changes go undergoes the PLC, including the creation of nodes, transitions, changing names, changing positions, the initial node configuration ... The system applied to this window to store only the last ten changes.
On the other hand the programming of each of the parts of the automaton takes place in a secondary window in the form of supplied text editor. Here it is only possible to store the last ten line changes, I mean, for each line saves only new or deleted, is not sensitive to the change of words. However, if you store the cut and paste functions.
STRUCTURAL CHANGE
To perform the undo-redo, and for higher packaging application, you decide to change the structure of the application. Before we met with part of the application in memory and partly on disk. The nodes, transitions, and the realization of the automaton is placed in memory, but the programming was in the hard disk.
For better packaging of the program, or choose to store programming code written for each schema object in memory, each object keeps its own code. This was a change in the programming editor, because the load changes and code was modified.
A migrated everything to memory, when storing any code will be assigned to its corresponding object, and even not to make the save of the automaton will not be stored on disk.
IMPROVEMENTS
During the completion of the scheme Cheste, I saw very useful to make some small modifications to the application:
*Add two functions in the transitions that allow us to change the destination or origin of the transition with just clicking the desired node.
This is useful because it allows us to make changes in the structure of the automaton without setting a new transition.
*Allow change the position of the nodes by dragging or not the transitions. If you have the option enabled, when you move the node transitions reorganize the program automatically disabled when applicable leave intact the transitions allowing only the movement of the node.
*Improvement in the representation of every object in the pixmap, because previously only updating the node transition or modified. And if they coincide or cross transitions were rebuilt in the pixmap being ill-defined pieces. Thanks to the amendment, allows redraw all objects being better represented.
*Adding a search function in the code editor. Through which we can look for any character in each tab.
*Addition of load xml transitions from respecting their position. Previously, in loading the xml, is organized automatically, ignoring the structure created by the user.
*Embedding scroll bars in the drawing area, with the possibility of extending the maximum allowed to the table to draw the automaton.
COPY AND PASTE STATES
Adding more functionality to the application, I have come to the conclusion copy and paste to embed the nodes, so we can have replicas without having to program them again. The copied node names beginning with "*", but try different nodes. The copy is not complete, because it does not drag transitions.
PRINT TO PDF OR PRINTER
Functionality that can print both the printer as a pdf file drawing of the automaton.
PREVIEW
Button which opens a mini application can increase or decrease the zoom of the drawing of the automaton. This action allows us to get an overall picture of the automaton if it was too big.
TEMPORAL TRANSITION
This option allows us to create a temporary transition. Changes state after the set time has elapsed.
GUI IMAGES
This is an image explaining the general interface of the application:
![]() |
| |
|
|
|
|
Images of the drop-down menus:
![]() |
| |
|
|
|
|
![]() |
| |
|
|
|
|
![]() |
| |
|
|
|
|
|
|
| |
|
|
|
|
Image of the application buttons:
![]() |
| |
|
|
|
|
Image of the core area of the automaton:
![]() |
| |
|
|
|
|
Image that represents the part of the activation of the sensors:
|
|
| |
|
|
|
|
This is the image of explaining the code editor interface:
![]() |
| |
|
|
|
|
We show the editor popup menus:
![]() |
| |
|
|
|
|
![]() |
| |
|
|
|
|
![]() |
| |
|
|
|
|
Below shows the interface buttons:
|
|
| |
|
|
|
|
SIGUELINEA WITH GAZEBO
Schema Development SigueLineas with the application, using the camera sensor:












