Chris' Cairo Blog

November 20, 2009

A PNG based image repository

Filed under: What I am working on — thorgch @ 3:14 pm

As I mentioned in my Getting serious with Cairo post, I decided that our new animation overview would use PNG images rendered with cairo in place of OpaqueImages (the reasons why are listed in that post). I also mentioned that I would talk a bit about the tools we use to put an overview together. In this post, I will talk about one of those tools in particular. In the current way of doing things, we always have a class that acts as an image repository. It isn’t uncommon for the class to contain a whole bunch of class side methods that answer an OpaqueImage.  Since the OpaqueImage instance creation method wants a figure and a shape as arguments, we also needed to create class side methods to answer those too. So, for each OpaqueImage we want to store in the repository, we also need one corresponding method to answer the figure and another to answer the mask. It ends up being a lot of class methods with even a small image repository.

Despite the number of methods, the “class as an image repository” approach has served us well. The various figure and mask methods are all annotated with a pragma so we can quickly see all the images with an image finder tool. We also have a nice tool at our disposal that makes easy work of loading a bitmap and then serializing it into the various parts we need to later reconstruct it as an OpaqueImage. Making the switch to PNG images meant we needed to make some changes to the current set of tools so that they can support PNG files. The following screen-shot and accompanying video link shows the PNG version of our repository tool.

FYI…I am still not happy with the quality of video after it is uploaded to VideoPress so that is why I am not embedding the video into this post. Just follow the link below the picture. It’s a .mov file, so you’ll need QuickTime. You can also click on the image just below to see the full size of the screen-shot.

PNG Image Tool Screen-shot

Here is a link to the video

I am especially pleased that I no longer need to deal with the methods to answer the figures and shapes. All that the PNG based repository contains are methods that answers an instance of a PNG image (more on that class in another post).


November 12, 2009

Fast could be faster…

Filed under: What I am working on — thorgch @ 6:29 pm

In my last post, Travis Griggs keenly picked up on something I said. If you read the comments from the last post, then you already know what I am talking about. Travis caught on to the fact that I was drawing all of those white and gray rectangles for my transparency grid one by one. Although it was fast (26 milliseconds to draw 6400 squares), it’s not the most effective use of Cairo. Given the nature of the grid, this was really a job for a pattern.

I rewrote my displayOn: method for the transparency grid wrapper to use a pattern instead of drawing all those squares and the time went from 26 milliseconds for 6400 squares down to 1 millisecond! Now that’s fast!! Here’s a snippet from the method.

g := grid value.
rect := bounds.
stampSurface := (Pixmap extent: (g*2) @ (g*2)) cairoSurface.
stampSurface newCairoContextWhile:
		[:aCR |
		aCR groupWhile:
			[aCR source: ColorValue lightGray.
				aCR rectangle: (0 @ 0 extent: g @ g).
				aCR fill.
				aCR source: ColorValue white.
				aCR rectangle: (g @ 0 extent: g @ g).
				aCR fillPreserve.
				aCR rectangle: (0 @ g extent: g @ g).
				aCR fill.
				aCR source: ColorValue lightGray.
				aCR rectangle: (g @ g extent: g @ g).
				aCR fill].
		aCR paint].
stampPattern := SurfacePattern surface: stampSurface.
stampPattern extend: ExtendStyle repeat.
cr source: stampPattern.
cr rectangle: rect.
cr fill.
stampSurface release.
stampPattern release.

November 11, 2009

All the parts

Filed under: What I am working on — thorgch @ 2:50 pm

Here is a quick post to give you all a sense of how the images are reused to form the final composite. I have separated each of them so you can see what they look like on their own. In the next post I’ll discuss the tool I used to get these images into VisualWorks, how they are wrapped so I can reuse them, and how I store them in a class that acts as an image repository.

One thing to note….All these images were captured using a tool that I created as part of the Cairo work (I will talk about it in another post). The transparency gird you see behind the image is Cairo at work. It’s a wrapper I created to supplement my png image tool. I had a large test image that I used during the initial development of the wrapper to see how fast I could draw all those little white and grey rectangles and I must say, it’s fast! I guess it’s another demonstration for how quickly Cairo can render things.


The transport base


A module


A transport arm.


A robotic carousel.




Material carrier

Notice how Cairo preserves the transparency of the original png image? Nice! You can really see it at work in the image labeled Material carrier.

November 9, 2009

Getting serious with Cairo

Filed under: What I am working on — thorgch @ 5:40 pm

One of the projects at work that I have been busy with over the last several months has been trying to improve some of the UI features in our software. In particular, we have something called an animation overview which represents a top-down view of the machinery while it runs. Since a machine operator can’t usually see inside the machine while it’s running, the overview tries to give a pseudo view of what’s going on.

An overview is always a 2D representation of the major components of the machine. As the machine runs, various parts of the animation may change. The existing method we use to animate is based on simple compositing. We have a large library of static images (instances of OpaqueImage) that we continually composite as the machine changes state. Although it’s a pain to maintain, the method has worked so far. So why change now? One of the machines we are developing won’t be so easy to animate using the current technique. It has one main component that will rotate and a couple of components that will slide up and down. For the rotation part of the animation I would end up having a whole bunch of static images if I wanted to show a full 360 degrees of rotation!

Here is a screen shot

SuperX5000 Layout

The machine overview using Cairo.


Along comes Cairo. It has fantastic image quality, is capable of performing affine transforms, can support all forms of PNG images and also has some nice anti-alias filters. To me, PNG images offer an advantage over OpaqueImages since I don’t need to worry about creating and maintaining masks. I can also take advantage of image transparency.  Sure, VisualWorks does provide a PNG image reader and image rotation functions, but I have never been happy with the image quality after a rotation.  In addition, the native PNG image reader in VisualWorks can’t handle all forms of PNG files. In fairness however, they do document what they can and cannot support.

The following images show a problem with VisualWorks native PNG file support.

Original Test Image

The original test image


The result after the PNGImageReader reads the file. Not exactly the same image....


The result after a 15 degree rotation.

Now here is how Cairo does with the same image.


Transparency grid used to show what areas of the original test image are transparent


Using a Cairo affine transform to rotate the image

Playing with PNG images is just scratching the surface of what you can do with Cairo. For my application however, PNG images and Cairo provide some capabilities that we haven’t seen before. Our seasoned VisualStudio developers think I am crazy to get excited about a capability they have had since any of them can remember, but as anyone who has worked with VisualWorks before knows, Cairo offers some pretty amazing stuff!

I’ll wrap things up here….In my next post, I’ll try to show some examples of the animations in action and touch a bit on the tools we have developed to put an overview together.

November 4, 2009

Getting my feet wet…

Filed under: Past Work — thorgch @ 6:39 pm

The following 3 examples were the first tests I did to see how things could perform with VisualWorks and Cairo. All three of the examples were ported from Processing (a very cool language for visualization) to VisualWorks. The frame rates I got with VisualWorks for these demos was very near to what I got with Processing. You can find these examples in a package called SNoP on the Cincom public Store. You can find the Processing equivalent examples bundled with Processing itself.

FYI…..the quality of the videos has suffered as a result of uploading them to VideoPress……They do look better when run in person.

November 3, 2009

Taking Shape

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

Still nothing to show….I have been trying to get the layout of the blog just the way I want it since there will be lots of pictures and some video as well. I think I am there now.

Blog at