PyGTK/Hello World with Glade and Sweettepache: Difference between revisions

From OLPC
Jump to navigation Jump to search
(under construction)
 
 
(13 intermediate revisions by the same user not shown)
Line 1: Line 1:
PyGTK/Hello World with Glade and Sweettepache
PyGTK/Hello World with Glade and Sweettepache


The pyGTK/Hello World Tutorial shows how to create the python program Hello World as a Sigar Activity. The pyGTK/Hello World with Glade
The [[PyGTK/Hello World Tutorial]] shows how to create the python program Hello World as a Sugar Activity. [[PyGTK/Hello World with Glade]]
page shows how to build the activity using Glade. Glade.py provides a visual editor for designing a programś GUI (graphical user interface -
shows how to build the same activity using Glade. <i>Glade.py</i> provides a visual editor for designing a program's GUI (graphical user interface). The output from Glade is a file '<i>name.glade</i>' where name is the name of the activity
[[Tepache]] '<i>tepache.py</i>' is a python program which processes the glade file to produce a skeleton module <i>name.py</i>. This module contains the has the code to connect with the GUI. The specific application logic is then added to complete the module.
I remember well being mystified the first time I saw a reference to GUI). The output from Glade is a file 'name.glade' where name is the name of the activity.


The program <i>sweettepache.py</i> is a modification of tepache which, in addition to <i>name.py</i>, produces a <i>nameActivity.py</i> module for Sugar, and produces the files and folders needed to make an activity bundle. The result is a module <i>name.py</i> which can be tested on Ubuntu (or possibly other platform). When the module works correctly on Ubuntu, it and the activity structure can be ported unchanged to the XO.
Another python program, tepache.py, processes the glade file to produce a skeleton file name.py which has the necessary code to connect with the GUI. As a developer, you need only add the specific application logic.


he purpose of this page is to make sweettepache.py available and to show how it can be used to build and test sugar-compatible python code.
The program sweettepache.py is a modification of tepache.py which produces the name.py module and, in addition, produces a nameActivity.py module for Sugar, and produces the files and folders needed to make an activity bundle. The result is a module name.py which can be tested on Ubuntu(or possibly other platforms). When the module works correctly on Ubuntu, it and the activity structure can be ported unchanged to the Xo.


This project was developed on Ubuntu 7.10 and the Hello World activity was ported and tested on a G1G1 XO upgraded to release 656. An important caveat is that there has been no robust testing (after all, almost anything can work for 'Hello World').
The purpose of this page is to make sweettepache.py available and to show how it can be used in rapidly building and testing sugar-compatible python code.


==Activity Development Process==
This project was developed on Ubuntu 7.10 and the Hello World activity was ported and tested on a G1G1 Xo upgraded to 656. An important caveat is that there has been no robust testing (after all, almost anything can work for 'Hello World').

==Activity Devlopment Process==


The following is the step by step process in building and testing a Sugar Activity using Sweettepache.
The following is the step by step process in building and testing a Sugar Activity using Sweettepache.
Line 19: Line 17:
===Design the GUI===
===Design the GUI===


See PyGTK/Hello World with Glade for a description of this step. Make a folder, name.activity. Save the glade file in that folder as name.glade The important point is that when the glade file is saved, its name (name.glade) will be used by sweettepache as the name of the activity. Also, the folder name.activity will be the top-level of the Sugar bundle.
See [[PyGTK/Hello World with Glade]] for a description of this step. Suppose the name of your activity is 'cool'. Make a folder, <i>cool.activity</i>. Save the glade file in that folder as <i>cool.glade</i> The important point is that when the glade file is saved, its name 'cool' will be used by sweettepache as the name of the activity. Also, the folder <i>cool.activity</i> will be the top-level of the Sugar bundle.


===Create the skeleton module===
===Create the skeleton module===


Copy sweettepache.py to name.activity
*Copy sweettepache.py to cool.activity
Open a Terminal and 'cd' to the folder name.activity
*Open a Terminal and 'cd' to the folder cool.activity
Execute the command: python sweettepache.py name.glade
*Execute the command: python sweettepache.py cool.glade


Instantly you have an activity bundle complete with icon! In addition to the flags which come with tepache.py (see ...), the -s flag makes sweettepache work identically to tepache (no sweetening). The flag -i flag requests output of a generic icon (.svg).
Instantly you have an activity bundle complete with icon!


Use the command: sweettepache.py --help to see the available flags. Two flags have been added:
Only in demos do programs work correctly the first time. In reality, you will want to change the GUI. To do this, open name.glade in Glade, make changes, and save the modified file. Run sweettepache again. Sweettepache saves a copy of your module as name.py.bak. It also creates a copy of the module as name.py.orig (the only difference is that sweettepache 'normalized the indents' in name.py.orig). Sweettepache creates a temporary diff file with the new skeleton to detect your application code, and then produces a new name.py which incorporates your code with the modified interface to the GUI.
* -s makes sweettepache work identically to tepache (no sweetening).
* -i flag requests the generic icon (activity-cool.svg) <b>not</b> not be written.

Only in demos do programs work correctly the first time. In reality, you will want to change the GUI. To do this, open cool.glade in Glade, make changes, and save the modified file. Run sweettepache again. Sweettepache saves a copy of your module as <i>cool.py.bak</i>. It also creates a copy of the module as <i>cool.py.orig</i> (the only difference is that sweettepache 'normalized the indents' in <i>cool.py.orig</i>). Sweettepache creates a temporary diff file with the new skeleton to detect your application code. It then produces a new <i>cool.py</i> which incorporates your code with the modified interface to the GUI.


===Test on Ubuntu===
===Test on Ubuntu===


It is probably a waste of time to test a program on the Xo as an Activity if it doesn't work correctly on Ubuntu. Sweettepache produces a module nameActivity.py which incorporates the special code required on the Xo. The intention is that name.py runs on Ubuntu as is. On the Xo, nameActivity.py initializes the Activity and then calls name.py. You may need to add to nameActivity.py to change the toolbar, for example. Currently sweettepache will write over the nameActivity.py. You can either save a copy of your modified version before rerunning sweettepache.
It is probably a waste of time to test a program on the XO as an Activity before it works correctly on Ubuntu. Sweettepache produces a module <i>coolActivity.py</i> which provides the code specific to the XO. The intention is that <i>name.py</i> runs on Ubuntu as is. On the XO, <i>coolActivity.py</i> initializes the Activity and then calls <i>cool.py</i>. You may need to make changes to <i>coolActivity.py</i>. for example, to add a button to the toolbar, Sweettepache will create a copy of <i>coolActivity.py</i> as <i>coolActivity.py.bak</i>.


===Test on the Xo===
===Test on the XO===


Currently I use a USB stick. Simply copy the name.activity folder to the stick. On the Xo, open a Terminal. Change to root (su). Copy the name.activity folder from the stick to /home/olpc/Activities. Restart Sugar (Ctl + Alt + Erase). Your activity should show up on the bottom panel. Start your activity.
Currently I use a USB stick. Simply copy the name.activity folder to the stick. On the Xo, open a Terminal. Change to root (su). Copy the name.activity folder from the stick to /home/olpc/Activities. Restart Sugar (Ctl + Alt + Erase). Your activity should show up on the bottom panel. Start your activity.
Line 55: Line 57:
This scheme makes it easy to modify the copy of sweettepache in the activity folder to generate specific code such as an additional button on the taskbar.
This scheme makes it easy to modify the copy of sweettepache in the activity folder to generate specific code such as an additional button on the taskbar.


Finally, the activity.name.svg icon was created with Inkscape. It shows a simple text, Test GUI. It is very easy to change the text to the name of your activity with Inkscape. When you move your activity folder to the XO in /home/olpc/Activities, the icon will show up on the bottom frame as soon as you restart Sugar (CTL-ALT-Erase). On my XO, the activities from /home/olpc/Activities seem to appear in the middle of the list. My XO shows ten activities at a time. The arrows on the bottom frame can be used to move the list to the left or right. The name for your activity (from activity.info) shows up when the mouse rolls over the tab/icon (this is very helpful when there are two activities installed with the same icon.)
==The module 'hello.py' produced by sweettepache==

==The module 'helloActivity.py' produced by sweettepache==
==The module 'holamundo.py' produced by sweettepache==
This is the sugar-independent part of the activity.
The lines at the end (#--main\ to #--main) are generated by sweettepache.py. They are not executed on the XO.
By looking at the two modules, you can see how the Sugar and Ubuntu specific code are isolated from each other.

<pre>
#!/usr/bin/env python
# -*- coding: UTF8 -*-

# Python module Holamundo.py
# Autogenerated from Holamundo.glade
# Generated on Wed Feb 20 12:48:26 2008

# Warning: Do not modify any context comment such as #--
# They are required to keep user's code

import os

import gtk

from SimpleGladeApp import SimpleGladeApp
from SimpleGladeApp import bindtextdomain

app_name = "holamundo"
app_version = "0.0.1"

glade_dir = ""
locale_dir = ""

bindtextdomain(app_name, locale_dir)


class Window1(SimpleGladeApp):

def __init__(self, path="Holamundo.glade",
root="window1",
domain=app_name, **kwargs):

path = os.path.join(glade_dir, path)
SimpleGladeApp.__init__(self, path, root, domain, **kwargs)

#-- Window1.new {
def new(self):
print "A new %s has been created" % self.__class__.__name__
#-- Window1.new }

#-- Window1 custom methods {
# Write your own methods here
#-- Window1 custom methods }

#-- Window1.on_boton_clicked {
def on_boton_clicked(self, widget, *args):
print "on_boton_clicked called with self.%s" % widget.get_name()
#-- Window1.on_boton_clicked }
widget = self.get_widget('texto')
widget.set_text('Hola Mundo!')


#-- main {

def main():
window1 = Window1()
widget = window1.get_widget('window1')
widget.connect("destroy", lambda w: gtk.main_quit())
widget.show()
window1.run()

if __name__ == "__main__":
main()

#-- main }
</pre>
==The module 'holamundoActivity.py' produced by sweettepache==
Note: This code is only excuted on the XO. It performs the same functions as 'main' in holamundo.py.
The 'glade' window is intialized by the line glade=holamundo.window1(root='vbox').
This line assumes that your GUI starts with a vbox and that you did not change the name. The next four lines
connect the 'glade' defined window with the Sugar application.

<pre>
import holamundo

from sugar.activity import activity

class holamundoActivity(activity.Activity):
def __init__(self, handle):
activity.Activity.__init__(self, handle)

self.testname = 'holamundo'
self.set_title(self.testname)
glade = holamundo.Window1(root='vbox1')
self.vbox = glade.get_widget('vbox1')
widgets = self.get_children()
widget = widgets[0]
widget.pack_start(self.vbox)

toolbox = activity.ActivityToolbox(self)
self.set_toolbox(toolbox)
toolbox.show()
</pre>
==The sweettepache program source==
==The sweettepache program source==
[[Sweettepache.py source]]
==Changes made to tepache to produce sweettepache==
==Changes made to tepache to produce sweettepache==
[[Differences between tepache and sweettepache]]
==References==
==References==
*Creating Sugar Activities
[[PyGTK/Hello World with Glade]]
[[Activity tutorial]]
[http://www.redhatmagazine.com/2007/04/05/building-the-xo-porting-a-pygtk-game-to-sugar-part-one| Building the XO: Porting a PyGTK game to Sugar, part one]
[http://www.redhatmagazine.com/2007/04/26/building-the-xo-porting-a-pygtk-game-to-sugar-part-two| Building the XO: Porting a PyGTK game to Sugar, part two]
[http://www.ibm.com/developerworks/edu/l-dw-linux-xo-python-i.html| Application development for the OLPC laptop]
*Glade
[http://glade.gnome.org| glade]
[http://www.micahcarrick.com/12-24-2007/gtk-glade-tutorial-part-1.html| GTK+ and Glade3 GUI Programming Tutorial - Part 1]
[http://www.micahcarrick.com/12-27-2007/gtk-glade-tutorial-part-2.html| GTK+ and Glade3 GUI Programming Tutorial - Part 2]
*Tepache
[[Tepache]]
[http://gnomefiles.org/app.php/tepache| GnomeFiles]
*Icons
[[Making SVG Icons for Sugar]]
[[Sugar Icon Format]]
[http://www.inkscape.org| Inkscape homepage]
[http://en.wikipedia.org/wiki/Inkscape| Wikipedia on Inkscape]
[http://inkscapetutorials.wordpress.com| The inkscape tutorials blog &#8212; a big list of cool inkscape tutorials]

Latest revision as of 04:27, 21 February 2008

PyGTK/Hello World with Glade and Sweettepache

The PyGTK/Hello World Tutorial shows how to create the python program Hello World as a Sugar Activity. PyGTK/Hello World with Glade shows how to build the same activity using Glade. Glade.py provides a visual editor for designing a program's GUI (graphical user interface). The output from Glade is a file 'name.glade' where name is the name of the activity Tepache 'tepache.py' is a python program which processes the glade file to produce a skeleton module name.py. This module contains the has the code to connect with the GUI. The specific application logic is then added to complete the module.

The program sweettepache.py is a modification of tepache which, in addition to name.py, produces a nameActivity.py module for Sugar, and produces the files and folders needed to make an activity bundle. The result is a module name.py which can be tested on Ubuntu (or possibly other platform). When the module works correctly on Ubuntu, it and the activity structure can be ported unchanged to the XO.

he purpose of this page is to make sweettepache.py available and to show how it can be used to build and test sugar-compatible python code.

This project was developed on Ubuntu 7.10 and the Hello World activity was ported and tested on a G1G1 XO upgraded to release 656. An important caveat is that there has been no robust testing (after all, almost anything can work for 'Hello World').

Activity Development Process

The following is the step by step process in building and testing a Sugar Activity using Sweettepache.

Design the GUI

See PyGTK/Hello World with Glade for a description of this step. Suppose the name of your activity is 'cool'. Make a folder, cool.activity. Save the glade file in that folder as cool.glade The important point is that when the glade file is saved, its name 'cool' will be used by sweettepache as the name of the activity. Also, the folder cool.activity will be the top-level of the Sugar bundle.

Create the skeleton module

  • Copy sweettepache.py to cool.activity
  • Open a Terminal and 'cd' to the folder cool.activity
  • Execute the command: python sweettepache.py cool.glade

Instantly you have an activity bundle complete with icon!

Use the command: sweettepache.py --help to see the available flags. Two flags have been added:

  • -s makes sweettepache work identically to tepache (no sweetening).
  • -i flag requests the generic icon (activity-cool.svg) not not be written.

Only in demos do programs work correctly the first time. In reality, you will want to change the GUI. To do this, open cool.glade in Glade, make changes, and save the modified file. Run sweettepache again. Sweettepache saves a copy of your module as cool.py.bak. It also creates a copy of the module as cool.py.orig (the only difference is that sweettepache 'normalized the indents' in cool.py.orig). Sweettepache creates a temporary diff file with the new skeleton to detect your application code. It then produces a new cool.py which incorporates your code with the modified interface to the GUI.

Test on Ubuntu

It is probably a waste of time to test a program on the XO as an Activity before it works correctly on Ubuntu. Sweettepache produces a module coolActivity.py which provides the code specific to the XO. The intention is that name.py runs on Ubuntu as is. On the XO, coolActivity.py initializes the Activity and then calls cool.py. You may need to make changes to coolActivity.py. for example, to add a button to the toolbar, Sweettepache will create a copy of coolActivity.py as coolActivity.py.bak.

Test on the XO

Currently I use a USB stick. Simply copy the name.activity folder to the stick. On the Xo, open a Terminal. Change to root (su). Copy the name.activity folder from the stick to /home/olpc/Activities. Restart Sugar (Ctl + Alt + Erase). Your activity should show up on the bottom panel. Start your activity.

If, after a reasonable time it is still 'starting', it usually means that python found a syntax or other error that prevented the program from starting. Often the explanation will be found in the activiity log. Open the log viewer (this shows the logs stored in /home/olpc/.sugar/default/logs). There should be an entry for your activity. This will show messages from python as well as the output of print statements in your code.

There are two (probably temporary) gotchas. When you open a Terminal on the Xo, the focus is on the toolbar, not the prompt. When the Terminal opens, click the mouse in the Terminal window first. The second is that there seems to be no way to 'stop' an activity that is 'starting'. It requires the CTL-ALT-Erase solution.

If the problem which prevents the activity from executing is simple, it can be fixed in the Terminal. As root (su), nano is available to edit your module in /home/olpc/Activities/name.activity.

Once the program starts, you will immediately see one of the main differences between Ubuntu and Sugar, the GUI window opens full screen on Sugar. This may well require tweaking of the Glade design to make the results more attractive on the Xo.

Technical details

Normally, glade generates the root window for an application. However, Sugar provides the toplevel window. The result is that the GUI definition from glade must be connected to the sugar window. This means that the glade file is processed on sugar beginning at the top widget below the level of the window (for example, a vbox container). This widget is then packed into an existing vbox container supplied by sugar. The details of this are apparently changing from release to release. The first tutorial (PyGTK/Hello World) didn't use Glade. The page PyGTK/Hello World with Glade explains the issue clearly. However, now that solution doesn't work because of the pre-existing vbox in the sugar window. There are, of course, no guarantees that a later release of Sugar will not break sweettepaches solution.

One additional advantage of the sweettepache strategy is that all of the details of building an activity structure can be encapsulated in a form which is easily changed. The last half of sweettepache is the 'boilerplate' code it generates. These lines are customized for a specific application by entries of the form %(class)s which produces a variable output depending on the contents of 'self.data'. The entry %(t)s produces a tab or four spaces (as needed by python). Caution: the trailing s is needed (it means produce a string).

This scheme makes it easy to modify the copy of sweettepache in the activity folder to generate specific code such as an additional button on the taskbar.

Finally, the activity.name.svg icon was created with Inkscape. It shows a simple text, Test GUI. It is very easy to change the text to the name of your activity with Inkscape. When you move your activity folder to the XO in /home/olpc/Activities, the icon will show up on the bottom frame as soon as you restart Sugar (CTL-ALT-Erase). On my XO, the activities from /home/olpc/Activities seem to appear in the middle of the list. My XO shows ten activities at a time. The arrows on the bottom frame can be used to move the list to the left or right. The name for your activity (from activity.info) shows up when the mouse rolls over the tab/icon (this is very helpful when there are two activities installed with the same icon.)

The module 'holamundo.py' produced by sweettepache

This is the sugar-independent part of the activity. The lines at the end (#--main\ to #--main) are generated by sweettepache.py. They are not executed on the XO. By looking at the two modules, you can see how the Sugar and Ubuntu specific code are isolated from each other.

 #!/usr/bin/env python
 # -*- coding: UTF8 -*-

 # Python module Holamundo.py
 # Autogenerated from Holamundo.glade
 # Generated on Wed Feb 20 12:48:26 2008

 # Warning: Do not modify any context comment such as #--
 # They are required to keep user's code

 import os

 import gtk

 from SimpleGladeApp import SimpleGladeApp
 from SimpleGladeApp import bindtextdomain

 app_name = "holamundo"
 app_version = "0.0.1"

 glade_dir = ""
 locale_dir = ""

 bindtextdomain(app_name, locale_dir)


 class Window1(SimpleGladeApp):

     def __init__(self, path="Holamundo.glade",
                  root="window1",
                  domain=app_name, **kwargs):

         path = os.path.join(glade_dir, path)
         SimpleGladeApp.__init__(self, path, root, domain, **kwargs)

     #-- Window1.new {
     def new(self):
         print "A new %s has been created" % self.__class__.__name__
     #-- Window1.new }

     #-- Window1 custom methods {
     #   Write your own methods here
     #-- Window1 custom methods }

     #-- Window1.on_boton_clicked {
     def on_boton_clicked(self, widget, *args):
         print "on_boton_clicked called with self.%s" % widget.get_name()
     #-- Window1.on_boton_clicked }
         widget = self.get_widget('texto')
         widget.set_text('Hola Mundo!')


 #-- main {

 def main():
     window1 = Window1()
     widget = window1.get_widget('window1')
     widget.connect("destroy", lambda w: gtk.main_quit())
     widget.show()
     window1.run()

 if __name__ == "__main__":
     main()

 #-- main }

The module 'holamundoActivity.py' produced by sweettepache

Note: This code is only excuted on the XO. It performs the same functions as 'main' in holamundo.py. The 'glade' window is intialized by the line glade=holamundo.window1(root='vbox'). This line assumes that your GUI starts with a vbox and that you did not change the name. The next four lines connect the 'glade' defined window with the Sugar application.

 import holamundo

 from sugar.activity import activity

 class holamundoActivity(activity.Activity):
     def __init__(self, handle):
         activity.Activity.__init__(self, handle)

         self.testname = 'holamundo'
         self.set_title(self.testname)
        
         glade = holamundo.Window1(root='vbox1')
         self.vbox = glade.get_widget('vbox1')
         widgets = self.get_children()
         widget = widgets[0]
         widget.pack_start(self.vbox)

	 toolbox = activity.ActivityToolbox(self)
	 self.set_toolbox(toolbox)
	 toolbox.show() 

The sweettepache program source

Sweettepache.py source

Changes made to tepache to produce sweettepache

Differences between tepache and sweettepache

References

  • Creating Sugar Activities
PyGTK/Hello World with Glade
Activity tutorial
Building the XO: Porting a PyGTK game to Sugar, part one
Building the XO: Porting a PyGTK game to Sugar,  part two
Application development for the OLPC laptop
  • Glade
glade
GTK+ and Glade3 GUI Programming Tutorial - Part 1
GTK+ and Glade3 GUI Programming Tutorial - Part 2
  • Tepache
Tepache
GnomeFiles
  • Icons
Making SVG Icons for Sugar
Sugar Icon Format
Inkscape homepage
Wikipedia on Inkscape
The inkscape tutorials blog — a big list of cool inkscape tutorials