Changes

Jump to navigation Jump to search
no edit summary
Line 182: Line 182:  
<pre>
 
<pre>
 
                 #Set the markup for our pango layout.  
 
                 #Set the markup for our pango layout.  
self.pango_layout.set_markup('<span foreground=\"blue\">This is some sample markup</span> <sup>text</sup> that <span style=\"normal\" size=\"small\">is displayed with pango</span>\n\n <u>Current time:</u> ')
+
self.pango_layout.set_markup('<span foreground=\"blue\">This is some sample markup</span>  
 +
<sup>text</sup> that <span style=\"normal\" size=\"small\">is displayed with pango</span>\n\n <u>Current time:</u> ')
 
</pre>
 
</pre>
   Line 189: Line 190:  
[[Image: pango-font-control-appearance.jpg]]
 
[[Image: pango-font-control-appearance.jpg]]
   −
=== In addition to drawing areas, are there other types of widgets in which I can embed pango layouts? ===
+
=== Are there widgets other than drawing areas where you can render fonts using pango? ===
    +
Yes, in fact some widgets like gtk.Label already have built in methods to set pango markup. This makes the process of creating custom Pango text extremely easy. In fact, if you just want some small or simple area of text in your activity UI, you might be better served creating a gtk.Label and using the set_markup() method that comes built in for use with Pango. Of course, if labels, tooltips or other widgets are not sufficient for what you are trying to do with your UI, you will have to revert to using more broad-purpose widgets like the gtk.DrawingArea.
 +
 +
Below is some code that creates a label, sets its text to be Pango markup and then adds it to some existing UI widget (called first_page).
 +
 +
<pre>
 +
import Pango
 +
...
 +
        #Create a new label whose text is rendered by Pango
 +
        mylabel = gtk.Label()
 +
        mylabel.set_markup("<u>This is pango markup</u> <span foreground=\"orange\">inside a label</span>")
 +
        first_page.pack_start(mylabel)
 +
 +
</pre>
 +
 +
Here's how this label shows up in the UI.
 +
 +
[[Image: suagar_almanac_pango_label.jpg]]
 +
 +
=== How do I load file data in to a Pango layout? ===
 +
 +
More often than not, you will probably want larger Pango layout areas to display data contained inside of a file rather than data that is conceived within the code of your program. The following code shows a utility method used to read from a file that can then be used to load data in to a Pango layout.
 +
 +
<pre>
 +
#### Method getFileData, which takes a file_path and returns the data within that file
 +
def getFileData(file_path):
 +
    fd = open(file_path, 'r')
 +
    try:
 +
        data = fd.read()
 +
    finally:
 +
        fd.close()
 +
    return data
 +
</pre>
 +
 +
With this utility method in place, updating a Pango layout with file data is pretty straightforward:
 +
 +
<pre>
 +
import pango
 +
...
 +
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('')
 +
                ...
 +
 +
 +
#### Method update_file, reloads data from filepath and then updates the Pango layout that
 +
# displays the data in the file.
 +
def update_file(self, filepath):
 +
self.pango_layout.set_markup(annotateutils.getFileData(filepath))
 +
self.queue_draw()
 +
</pre>
    
= Notes =
 
= Notes =
 
<references />
 
<references />
Anonymous user

Navigation menu