<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Ceres Logic :: Blog &#187; cairo</title>
	<atom:link href="http://www.cereslogic.com/pages/tag/cairo/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.cereslogic.com/pages</link>
	<description>Mobile and Web App Development</description>
	<lastBuildDate>Tue, 23 Aug 2011 14:45:28 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.2.1</generator>
		<item>
		<title>Developing Applets for AWN: Drawing the Icon</title>
		<link>http://www.cereslogic.com/pages/2007/10/08/developing-applets-for-awn-drawing-icon/</link>
		<comments>http://www.cereslogic.com/pages/2007/10/08/developing-applets-for-awn-drawing-icon/#comments</comments>
		<pubDate>Mon, 08 Oct 2007 13:45:00 +0000</pubDate>
		<dc:creator>mdesjardins</dc:creator>
				<category><![CDATA[blog]]></category>
		<category><![CDATA[awn]]></category>
		<category><![CDATA[cairo]]></category>
		<category><![CDATA[python]]></category>

		<guid isPermaLink="false">http://mikedesjardins.us/wordpress/2007/10/developing-applets-for-awn-drawing-the-icon/</guid>
		<description><![CDATA[(Continued from previous two posts)If you&#8217;re familiar with the Avant Window Navigator, then you know that a fair amount of the project revolves around eye candy and visual effects. Making an applet that is consistent with the user&#8217;s expectations with respect to visual effects (e.g., reflection, bouncing, rotating, etc.) is very important. Fortunately, Neil and [...]]]></description>
			<content:encoded><![CDATA[<p>(Continued from previous two posts)<br />If you&#8217;re familiar with the Avant Window Navigator, then you know that a fair amount of the project revolves around eye candy and visual effects.  Making an applet that is consistent with the user&#8217;s expectations with respect to visual effects (e.g., reflection, bouncing, rotating, etc.) is very important.  Fortunately, Neil and Co. have made this quite straightforward.    By simply sub-classing the awn.AppletSimple class, your applet will inherit all of the special effects that it should. </p>
<p>Unfortunately, there&#8217;s one small trick you need to work around.  If your applet is so simple that it just needs a single, static icon, then sub-classing awn.AppletSimple, followed by a call to set_icon, works great.  It gets more difficult if you need to draw dynamic content in the area usually occupied by the icon.</p>
<p>The problem is that set_icon (as well as its misunderstood cousin, set_temp_icon) takes a Pixbuf as its input parameter.  However, the drawing framework for doing just about anything, especially loading PNGs, is <a href="http://cairographics.org">cairo</a>.  Cairo has no native support for converting a surface to a Pixbuf.  I discovered a trick for doing this by looking at the source code for the PyClock and BlingSwitcher applets.  Let&#8217;s say you have a Cairo image surface that you&#8217;ve created from an existing PNG, thusly:</p>

<div class="wp_syntax"><div class="code"><pre class="python" style="font-family:monospace;">cs = cairo.<span style="color: black;">ImageSurface</span>.<span style="color: black;">create_from_png</span><span style="color: black;">&#40;</span>iconName<span style="color: black;">&#41;</span>
ct = cairo.<span style="color: black;">Context</span><span style="color: black;">&#40;</span>cs<span style="color: black;">&#41;</span>
ct.<span style="color: black;">set_source_surface</span><span style="color: black;">&#40;</span>cs<span style="color: black;">&#41;</span>
ct.<span style="color: black;">paint</span><span style="color: black;">&#40;</span><span style="color: black;">&#41;</span></pre></div></div>

<p>&#8230;and you want to get a Pixbuf from that image.  The following function takes the surface, writes it to a PNG that is stored in a string, then uses the Pixbuf loader to load it from that PNG string:</p>

<div class="wp_syntax"><div class="code"><pre class="python" style="font-family:monospace;"><span style="color: #808080; font-style: italic;"># Stolen from diogodivision's &quot;BlingSwitcher&quot;</span>
<span style="color: #ff7700;font-weight:bold;">def</span> get_pixbuf_from_surface<span style="color: black;">&#40;</span><span style="color: #008000;">self</span>, surface<span style="color: black;">&#41;</span>:
  sio = <span style="color: #dc143c;">StringIO</span><span style="color: black;">&#40;</span><span style="color: black;">&#41;</span>
  surface.<span style="color: black;">write_to_png</span><span style="color: black;">&#40;</span>sio<span style="color: black;">&#41;</span>
  sio.<span style="color: black;">seek</span><span style="color: black;">&#40;</span><span style="color: #ff4500;">0</span><span style="color: black;">&#41;</span>
  loader = gtk.<span style="color: black;">gdk</span>.<span style="color: black;">PixbufLoader</span><span style="color: black;">&#40;</span><span style="color: black;">&#41;</span>
  loader.<span style="color: black;">write</span><span style="color: black;">&#40;</span>sio.<span style="color: black;">getvalue</span><span style="color: black;">&#40;</span><span style="color: black;">&#41;</span><span style="color: black;">&#41;</span>
  loader.<span style="color: black;">close</span><span style="color: black;">&#40;</span><span style="color: black;">&#41;</span>
  <span style="color: #ff7700;font-weight:bold;">return</span> loader.<span style="color: black;">get_pixbuf</span><span style="color: black;">&#40;</span><span style="color: black;">&#41;</span></pre></div></div>

<p>Neat, huh?  This is how I manage to display the temperature on the weather applet.  I load up the icon into an ImageSurface, write the text on top of it by calling show_text, call the function above to convert the ImageSurface to a PixBuf, then call set_temp_icon using the new PixBuf.</p>
<p>You can see it in action by <a href="http://www.mikedesjardins.us/awn/weather-applet-0.8.tar.gz">downloading the weather applet</a>, and looking in weather.py. The relevant code is in the draw_current_conditions function.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.cereslogic.com/pages/2007/10/08/developing-applets-for-awn-drawing-icon/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

