Chris' Cairo Blog

March 10, 2010

Pango + cairo = Nice Labels!

Filed under: What I am working on — thorgch @ 12:33 pm

If you aren’t already aware, the folks (Travis Griggs and his co-workers) at Cincom have developed language bindings for Pango. The Pango website describes Pango as…a C library for laying out and rendering text. The description also goes on to say…integrating Pango with cairo provides a complete solution with high quality text handling and graphics rendering.      

Since my machine animation overviews usually need a lot of labels (some active and some passive), I decided that it was time for a new widget…..the PangoMarkupLabelView (The PangoMarkupLabelView’s model is a CairoTransformWrapper on a PangoMarkupLabel). The reason I called it a markup label is because Pango offers a markup capability as part of its library. I really liked this markup interface since it helped me simplify my widget. The view’s widget spec and associated GUIPainter slices help to configure the markup string. In turn the markup string then plays a central role in how Pango lays out and renders the string on to the cairo context. A nice description of the markup language can be found here.      

Like the CairoPNGImageView, I also wanted my labels to take advantage of all the functions that my transform wrapper provide. If you have watched any of the videos about the transform wrapper, then you probably know what I am referring to.      

Here’s a few pictures and a video of the label in action.      

PangoMarkupLabel Image 1

An example of a PangoMarkupLabel

 Yes…the “glassy effect” has been done to death, but I couldn’t resist seeing if I could make an active widget that had a bit of it. I suppose there is a place for it, but it’s unlikely you would ever see it used on my animation overviews.      

PangoMarkupLabel Image 2

An example of using the labels to build a component

 The only point to this video is to show that the labels can also be active. All you’re going to see is a ticking clock……exciting!  


Before I end this post, I figured I should give an update about the progress of putting my Cairo Graphics Kit up on the Cincom public store. As it stands, I am waiting to hear back from our legal department. I am requesting that we use a GNU LGPL license to cover the work (same license that cairo and Pango use).      

I would like to think that all this work is free to give away to the world. The reality however is that the company I work for has the final say since they are paying me to do this work. Fortunately, my VP does see the advantage of putting this in the public domain in the hope that others help to contribute to it. Hopefully our lawyers see it the same way.


March 1, 2010

Transform Groups

Filed under: What I am working on — thorgch @ 11:52 am

If you have followed my last couple of posts, you have seen my TransformWrapper in action. In this post, I am going to show you one more function. Apart from providing rotation, translation and scale functionality, the TransfromWrapper also inherits from CompositePart,which means I can wrap more than one of my cairo components with it.    

Transform Grouping

Transform Grouping


I will spare you more reading about why this helps and jump straight to the videos…    

I still have more work to make the process of grouping a bit more bulletproof as well as more flexible. In particular, standard VisualWorks components can’t be part of a transform group at any level, so checks need to be put in place to make sure the component adheres to my cairo compatible widget protocol. I also want to make it easier to move components within the group hierarchy simply by dragging and dropping. In the video, I also mentioned that more layout / modeling tools need to be developed. As it stands now, I still need to use Photoshop or Illustrator to get pixel coordinate values that I then use for either inter-container offsets, or XY values for arbitrary anchor points. All in time…

Create a free website or blog at