Changes
Jump to navigation
Jump to search
Line 4:
Line 4: − + Line 13:
Line 13: − Line 25:
Line 24: + − + + + + + + + + Line 39:
Line 46: − + − self.context.rectangle(event.area.x, event.area.y, event.area.width, event.area.height)+ − self.context.clip() − − #create a pango layout and set its text − self.pango_context = self.create_pango_context() − self.layout = pango.Layout(self.pango_context) − self.layout.set_wrap(pango.WRAP_WORD) − self.layout.set_width(500*pango.SCALE) − self.layout.set_font_description(pango.FontDescription('Serif 14')) − − #This is a basic command to set the text that will be rendered using Pango. − self.layout.set_markup('<span foreground=\"blue\">This is some sample markup</span> <sup>text</sup> that <u>is displayed with pango</u>') − − − Line 81:
Line 74: + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Development Team/Almanac/Pango (view source)
Revision as of 11:59, 17 July 2008
, 11:59, 17 July 2008no edit summary
Pango is built upon several other technologies, most notably gtk and Cairo. So to get pango working, you have to do a little coordinating between all of these players.
Pango is built upon several other technologies, most notably gtk and Cairo. So to get pango working, you have to do a little coordinating between all of these players.
The diagram below explains the general relationship. Sugar and GTK arrange and control basic UI widgets (labels, notebooks, drawing areas, scroll bars, pull down menus, etc.). On top of these widgets, you can create Cairo and Pango contexts that coordinate the rendering of graphics and text respectively. Pango is built on top of Cairo, which is a general purpose graphics rendering library. Pango is specialized for text.
The diagram below explains the general relationship. Sugar and GTK arrange and control basic UI widgets (labels, notebooks, drawing areas, scroll bars, pull down menus, etc.). On top of these widgets, you can create Cairo and Pango contexts that coordinate the rendering of graphics and text respectively. <ref>[http://pygtk.org/pygtk2reference/class-gdkpangorenderer.html PYGTK's gtk.gdk Class Referencegtk.gdk.PangoRenderer]</ref> Pango is built on top of Cairo, which is a general purpose graphics rendering library. Pango is specialized for text.
[[Image: pango-architecture.jpg]]
[[Image: pango-architecture.jpg]]
<pre>
<pre>
import gtk
import gtk
gtk.DrawingArea.__init__(self)
gtk.DrawingArea.__init__(self)
self.context = None
self.layout = None
#create a pango layout. Leave text argument to be empty string since we want to use markup
self.pango_context = self.create_pango_context()
self.pango_layout = self.create_pango_layout('')
#Use pango markup to set the text within the pango layout
self.pango_layout.set_markup('<span foreground=\"blue\">This is some sample markup</span> <sup>text</sup> that <u>is displayed with pango</u>')
#Make sure to detect and handle the expose_event signal so you can always
#redraw the pango layout as appropriate.
self.connect("expose_event", self.expose_cb)
self.connect("expose_event", self.expose_cb)
self.set_size_request(450, -1)
self.set_size_request(450, -1)
self.context = widget.window.cairo_create()
self.context = widget.window.cairo_create()
#clip anything outside the drawing rectangle
#Show the pango_layout in the Cairo context just created.
self.context.show_layout(self.pango_layout)
self.context.show_layout(self.layout)
</pre>
</pre>
return top_container
return top_container
</pre>
</pre>
=== How do I dynamically set the text in a pango layout? ===
You will often want to change or reset the text in a pango layout during the life of your activity. To create such dynamic layouts, the main thing you need to do is reset the text or markup for your pango layout (usually using set_markup()) and to then call the queue_draw()<ref>[[http://www.pygtk.org/docs/pygtk/class-gtkwidget.html#method-gtkwidget--queue-draw]]</ref> method which schedules a redraw (effectively forcing an expose_event signal to be thrown).
The code below uses a standard timeout code pattern<ref>[http://wiki.laptop.org/go/PyGTK/Smooth_Animation_with_PyGTK#Timer_Events]</ref> to call a method every 1 second. So the text in the Pango is updated to give the current time roughly every 1 second.
<pre>
import gtk
from gtk import gdk
import cairo
import pango
import gobject
import datetime
class TextWidget(gtk.DrawingArea):
def __init__(self):
self.repeat_period_msec = 1000
gtk.DrawingArea.__init__(self)
self.context = None
#create a pango layout. Leave text argument to be empty string since we want to use markup
self.pango_context = self.create_pango_context()
self.pango_layout = self.create_pango_layout('')
#Use pango markup to set the text within the pango layout
self.pango_layout.set_markup('<span foreground=\"blue\">This is some sample markup</span> <sup>text</sup> that <u>is displayed with pango</u>')
#Make sure to detect and handle the expose_event signal so you can always
#redraw the pango layout as appropriate.
self.connect("expose_event", self.expose_cb)
self.set_size_request(450, -1)
self.repeatedly_update_time()
#The expose method is automatically called when the widget
#needs to be redrawn
def expose_cb(self, widget, event):
#create a CAIRO context (to use with pango)
self.context = widget.window.cairo_create()
#Show the pango_layout in the Cairo context just created.
self.context.show_layout(self.pango_layout)
#This method calls itself every 1 second and updates the time displayed.
def repeatedly_update_time(self):
now = datetime.datetime.now()
self.pango_layout.set_markup("<u>Current time:</u> " + str(now))
self.queue_draw()
gobject.timeout_add(self.repeat_period_msec, self.repeatedly_update_time)
</pre>
=== How do I set the different font properties for my pango layout? ===
=== In addition to drawing areas, are there other types of widgets in which I can embed pango layouts? ===
= Notes =
= Notes =
<references />
<references />