[Home]GladeVCP Custom Widgets

LinuxCNCKnowledgeBase | RecentChanges | PageIndex | Preferences | LinuxCNC.org

Showing revision 35
Difference (from revision 35 to revision 35) (minor diff)
(The revisions are identical or unavailable.)
Here we attempt to describe how to build a custom glade widget using python.
Note i am not a programmer by trade, more of a hacker, so what I so you works, but there may be better ways.
This is current as of June 2012 (under construction)

We will use a calculator widget that is already in linuxcnc (master)

1. Custom stand-alone GTK widget
1.1. What do we start with?
1.2. looking at the code
2. Custom GTK widget in glade editor
2.1. looking at the new code


1. Custom stand-alone GTK widget

We will start with a regular custom widget program that uses GLADE to build the display but this widget is not included in the GLADE interface.

I found this calculator widget on the net: http://sraji.wordpress.com/2009/09/08/calculator-using-python-and-glade/
I changed the keys a a bit for my use and switched to glade builder from libraryglade
here is the source code: upload:custom_calculator.zip
I apologize - this program uses leading tabs instead of spaces -that sucks but thats what the original program used.
upload:calculator.png If you run this with: python newcalculatorglade.py
It will display a calculator and pushing keys will change the display and pushing equals will do the math.

1.1. What do we start with?

When building a custom widget we pick an object that is close to what we want and then add to it from there.(thats the calculator example)
In the case of a really custom widget - one where you want to draw things you pick a widget and 'override' its original function calls and make it do what you want.
here is an example for a clock using gtkDrawingArea?:
http://www.pygtk.org/articles/cairo-pygtk-widgets/cairo-pygtk-widgets.htm
http://www.pygtk.org/articles/cairo-pygtk-widgets/cairo-pygtk-widgets2.htm
here is another one - this one use the base class widget:
http://www.pygtk.org/articles/writing-a-custom-widget-using-pygtk/writing-a-custom-widget-using-pygtk.htm

1.2. looking at the code

This is the pre amble to set things up
The first line lets you run this program from the gui by clicking on it
Importing sys and math allows system calls and math functions
importing pygtk actually seems not necessary - you could remove it.
importing gtk is necessary
If importing gtk fails an error message is printed and the program ends
upload:calculator_code1.png
Here we initialize the class
The class name is the generic name for our widget - Calculator
the eval_string is a variable used through out the program
gladefile is the path/name of the GLADE file we have produced for this widget. In this case it assumes that the glade file is in the path that the program was launched from which is probably not a good assumption.Gtk.builder is the method that builds our widget from the glade file. Then we write a dictionary of the signals and corresponding function calls. The signals were picked in the GLADE editor. Using a dictionary is one way of connecting signals- another common one seen is letting GLADE autoconnect them. If that is done the function calls names are the same as the signalnames,
Then we connect the signals. At the end we tell builder to find the window_calculator object in the GLADE file and show it
upload:calculator_code2.png
We skipped a few lines here.
here is the code that the signals from the calculator buttons call
.At the bottom is the funny if __name__ = __main__ command. This lets the program know if it is launched stand alone to run the commands under it. other wise it will just call the initialization code. The cal = Calculator() is the instantiation command, it creates an object of class Calculator, then the next command calls gtk.main() so it listens for signals from the buttons
upload:calculator_code3.png

2. Custom GTK widget in glade editor

Now we want it to show up in the glade editor so we can add it to other containers.
upload:calculator_widget.zip
The first problem is that by building it with the GLADE editor we had to add it to a top window.
A top window can not be put into anything else so we must re-parent the custom widget.
(This would not be true if we had built the widget without the GLADE editor.)
I have found out that if you right click any widget in the glade editor that you can force it to be a top widget - so you then you wouldn't need to re-parent
In this version of the widget we added functions to change the display font, to get the current value, to set the display value and to get that preset-value later and set the display as editable or not.
The GLADE editor uses Gobject to interact with the widget while displaying it, so we must add that to our program if we want to be able to interact with the widget live.

2.1. looking at the new code

||We import pango so we can do font changes.The arrow points to code that finds the path to where the program actually is rather then where it was called from. This is used later to load the glade file, which is assumed in the same folder as this program. We also import Gobject needed for GLADE interaction.

Note that our calculator class is now subclassed from VBox. Meaning it is based on (and acts like) GTK's VBox widget. The first purple box shows the Gobject code for some attributes that we would like to be able to change in the glade editor

The second shows some new variables - note font and is_editable are the same as the Gobject attributes names -|| upload:widget_code1.png ||
This arrow points to where we re-parent out widget to our Vbox
The rest of the code is the functions to get and set the attributes
upload:widget_code2.png
These are the functions that Gobject calls when attributes changes
Note that when when are attributes are set we call the appropriate function to actually do the work.

In the main function (used for testing) note that you can set the attributes directly by calling their function directly.
upload:widget_code3.png

LinuxCNCKnowledgeBase | RecentChanges | PageIndex | Preferences | LinuxCNC.org
This page is read-only. Follow the BasicSteps to edit pages. | View other revisions | View current revision
Edited June 28, 2012 10:24 pm by Cmorley (diff)
Search:
Published under a Creative Commons License