Chris' Cairo Blog

December 15, 2010

New CGK version published

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

CGK version 7.7.19 has now been published to the Cincom public StORE. Here are some highlights:

  • I refactored CairoTransformWrapper (again…). The refactoring was to further abstract the transform instance variable into its own set of transform matrix classes. I am still experimenting with the refactoring and more is likely on the way.
    • The unfortunate result of this refactoring is that any windowSpec or literal array that contains a CairoTransformWrapper from a previous version of the CGK will need to be ported. In other words, you’ll need to rebuild your UI if you are using any of the visual components in the CGK. 
  • I changed how CairoTransformWrapper reports damage. Prior to the change, the CairoTransformWrapper would report its bounds as its entire area. This wasn’t a problem if it was only wrapping one component, but if it was being used as a composite, then performance suffered since it had to redraw its entire area even if just a small portion had been damaged by one of its components. It’s now a lot smarter about how it deals with the entire damage repair cycle. A lot of work went into this so I may decide to dedicate a post to the new damage repair process.
  • I corrected the localPointToGlobal: and globalPointToLocal: methods in the CairoTransformWrapper to properly deal with the applied transform. These repairs are critical as I start to move my development efforts toward more active components that interact with the mouse.
  • I introduced my first active component. This release of the CGK now includes a CairoActionButton. Yup…a button!! So exciting! Ok, so a button isn’t that big of a deal, but would you be interested to know that you can “skin” it with PNG images? Not good enough? How about a controller that correctly deals with any applied transformation on that button? Rotate, scale…no problem, the “hit test” can deal with it.

That’s about it for major changes. Next up are some changes to CairoVisualRegion to support more than just circles and squares. I am also working on a gradient fill tool for the GUI painter slices.

November 3, 2010

Updates to the CGK coming soon

Filed under: What I am working on — thorgch @ 1:21 pm

 I have gotten a few queries about my lack of updates to the blog and to the CGK, so I figured I would post a quick update. Since the end of summer, I have had to work on another project completely unrelated to my cairo work. Fortunately, that project is coming to an end, so I’ll be back on CGK development soon enough. Shortly after my last post, I added a cairo based ActionButton subclass to the CGK that if fully transformable, supports a Pango label, and can also be “skinned” with your choice of PNG image for on and off.  I am also working on a cairo based progress bar. Like the action button, it will support some Pango labeling and can also be “skinned” with PNG images.

Probably more important however are the refactoring changes to the CairoTransformWrapper. The refactoring on this class was to further abstract the transform instance variable into its own set of transform matrix classes. The current published version has a “one size fits all” transform matrix that performs scale and rotation. Whether you want both or not, you get them. This has some small performance implications but more importantly to me, was that it had a “bounds” implication that was getting in the way of something I wanted to do. I have also improved the invalidation and redrawing process. With this change, there are some significant performance gains when it comes to the damage repair cycle of a CairoTransformWrapper that may have multiple components.

That’s it for now. I hope to have a new version of the CGK published by the end of the month so look for a post from me then.

July 26, 2010

Visuals and Labels all in one

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

I was putting together another animation overview when I realized that a large majority of the PNG images that make up the overview were also going to need a label. I could use a CairoPNGImageView and PangoMarkupLabelView and then group them into a transform group, but why not just make a new visual component that contains both? It’s just more convenient and it helps clean up the GUIPainter tree considerably, since I now have one tree icon instead of 3 (label, image and group).

The CairoLabeledVisualView will take any cairo based visual (e.g. PNG image or region) and apply a label to it. There are only a whopping 3 cairo based visual components at the moment, but I hope that will grow over time.

Here’s a screen shot of the component. The most involved configuration slice would be the Label Details slice. This slice lets the user configure the usual aspects of the label much like you would if you were just using the PangoMarkupLabelView. I also added some alignment details to help with quick alignment of the label.

That’s it for now. If you want to play around with this component, you’ll find it in the latest release of the CGK (7.7.11, cthorgrimsson).

July 13, 2010

Cairo Graphics Kit…Published!

Filed under: What I am working on — thorgch @ 8:15 pm

I have completed the porting of my Cairo Graphics Kit (or CGK for short) from VW7.4 to VW7.7 and have published it to the Cincom public StORE! I have also created some dedicated pages to provide more details on the CGK. On the right side of this blog is a Pages section where you can find some useful links about the kit if you decide to give it a try.

Here are a few key points to keep in mind about the kit:

  • It’s free to use and licensed under LGPL. 
  • I still consider this kit a “Work in Progress” (so please be kind).
  • A definitive method for getting the cairo and Pango binaries is still underway. 

These points and more are described here, so take a look and decide for yourself.

June 4, 2010

Cairo Graphics Kit…Take Two

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

Well, it’s been a while since my last post, but my lack of updates doesn’t mean that the cairo kit development has stopped. Quite the opposite! Shortly after my last post, I decided that the CGK (Cairo Graphics Kit) needed to go through another round of peer review. That peer review ultimately resulted in a major teardown of the CGK followed by a lot of work to put it all back together better than before.

So, what’s new?… Most of the changes were behind the scenes, so there isn’t much to actually see. I did add one new cairo based visual component to the palette. I also modified the PangoMarkupLabel to support alpha transparency and created some new cairo based DragHandle subclasses to enhance the UI painting experience.

The new cairo based visual component is pretty much a cairo based VisualRegion. Not surprisingly, it’s called a CairoVisualRegion. Over and above the VisualWorks VisualRegion, I allow the user to set the stroke weight, stroke color, fill color, corner radius and alpha / transparency settings. It’s not the most exciting widget, but it’s surprisingly useful when building up more complex widgets (the CairoCalloutBox….coming soon). I can definitely see this widget evolving and perhaps being renamed CairoVisualShape. It’s not much of a stretch to have this widget be more than just a box or circle. All in time…

A cairo based VisualRegion

You may have already seen the PangoMarkupLabel in action if you read the last post, but it has since been updated to support transparency as well.

A label can now have an alpha value

During the peer review, it was clear that my users were having a hard time visualizing a component’s true bounds if the component could rotate. Furthermore, there was a request that the transforming feature provided by the transform wrapper be optional since it required an extra level of configuration for positioning. So, users now have the option to keep things simple using a simple layout scheme, or use the more complex layout that really utilizes the transform wrapper’s full capability.

If they do choose to lay the component out for what I call a “full transform“, they now get more visual queues as to the origin of the container and how much container space the component is going to need to perform the desired transform.

The dashed line box is a type of DragHandle that represents the bounds of the TransformWrapper

So what is going on in the picture above?

  • The component (aCairoVisualRegion) is set to use a full transform layout with its rotation point about its center.
  • This results in the appearance of an additional DragHandle (a subclass called TransformBoundingBox) dashed line box.
  • This box is the visual representation of the transform wrapper’s bounds.
  • The origin of this box is what VisualWorks will use when laying out the UI at runtime, not the origin of the component.
  • As the user resizes the component using the normal drag handles, the box will shrink / expand with the component.
  • Just like regular DragHandles, the TransformBoundingBox handle only appears when the component is selected.

In addition to the TransformBoundingBox and RotationHandles, users also wanted to see where the rotation point was when using the RotationDragModeTracker. This too, was the perfect job for a subclass of DragHandle that I called AboutPointMarker.

The cross hair marker represents the point that the component will rotate around

I’ll wrap things up here and hope that my next post isn’t in another 3 months!

Oh, and before I forget…I have been given the green light to release this kit and LGPL will be the chosen license. So what’s the delay? This kit was written to be used in VisualWorks 7.4 (yes, we are moving to 7.7). When I release it to the Cincom public store, it will be a version that has been ported to 7.7 and not the 7.4 version that I use now. I just need the time to do the port. It’s not that involved, I just need to find the time.

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…

February 5, 2010

Component rotation…the final stages

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

In my last post, I previewed the early stages of my cairo (I was told it’s “cairo” not “Cairo”…) component rotation functionality using the GUI Painter Tools. This post will deal with how it has evolved over the past few weeks. The main evolution of my work has been around the rotation slice that I mentioned in the last post. It has now turned into the Transform slice. Just as the Position slice is the interface to configure your layout, my Transform slice is the interface to configure the TransformWrapper.

A picture of the Transform Slice

The Transform Slice

Since there would be way too much typing to explain it all, if figured I would make my first narrated video.  I have a couple of comments before you watch it. During the video, the component I am playing with has its container’s bounds set to visible. This was to demonstrate how the container’s bounds were changing as I manipulated the transform. The Details slice that is not shown in the video does give the user the option to set border visibility on both the container (border always vertical and horizontal) and/or the component (border moves with the component).

Now that the slice is in good shape, it’s time for some code cleanup and a bit more documentation. I hope to have a bundle ready to publish to the Cincom public store in a couple of weeks.

January 15, 2010

Component rotation…the early stages

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

It has been a while since my last post, but my time away from the blog has been well spent. After a nice holiday break, I jumped back into my goal of adding rotation functionality to the GUI Painter. In the same way you can now select a DragHandle and resize a component, I wanted to be able to switch to a RotationHandle and rotate a component. I admit that rotating a component won’t get used all that often, but there are a few scenarios when it’s going to come in handy. I can see the abuse now….”why is this list box tilted at 45 degrees?” My main push for getting component rotation functional was to simplify the layout and development of the animation overviews I work on. Even with cairo, the current method of overview layout involves a blend of Abode Illustrator, Photoshop and the GUI Painter tools. With rotation now an option in the GUI painter, Illustrator and Photoshop will play a smaller role.   

Here are some pictures and a video.   

Component Before Rotation

CairoPNGImageView Before Rotation

CairoPNGImageView After Rotation

CairoPNGImageView After Rotation

As simple as the rotation functionality may seem, let me tell you… was no picnic! However, I am proud to say that I got it all done with extensions to some of the granddaddy VisualWorks classes and there is not one override in sight. I now have a new drag mode tracker called…you guessed it…RotationDragModeTracker. It’s a subclass of CornerDragModeTracker. I also needed to create a subclass of DragHandle also un-originally called…RotationHandle. As you can tell from the screenshot and video, the rotation handles are not all that exciting graphically, but that will change soon. The work also involved a couple of small extensions to the UIPainterController.   

By far, the hardest part of this development effort was the refinement of a wrapper I created when I first got involved with cairo. It’s called the TransformWrapper. Similar to the VisualWorks translation wrapper performing translation, the new transform wrapper can also perform scale and rotation on the component it wraps (the component must be cairo based). My fight with the transform wrapper was mainly around making sure the bounds were reported properly once the transform was applied. It also didn’t help that my linear algebra skills were weak going into this.   

All in all, I am very pleased with the ability to now rotate one of my cairo widgets in the GUI painter. There is still a lot more to be done to make things a bit more intuitive on some of the painter slices. I am in the process of creating a rotation slice that gives the user a bit more direct control over where the rotation origin is. Anyway, that’s all for now…

December 4, 2009

Getting my widgets onto the palette

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

Getting my cairo based widgets into the hands of other developers at work is one of the top goals for the cairo project. The way I see it, there are two ways to do it. First, and probably more common around where I work, is the programmatic approach. This usually means that when a new visual component is created, it’s up to the developer to configure it via code, not the UI Painter tools. The only time the UI Painter really plays a role is when the developer needs to place a view holder on the canvas. After that, it’s up to the developer’s code to do all the configuration, without GUI building tools. 

The second approach, and the approach I want to take with my cairo work, is to make the cairo based visual components accessible via the UIPalette and configurable via the UIPainter tools. Admittedly, I’ve never done this before. I have always taken the first approach because the second means not only developing the component itself, but also developing all the supporting classes/functionality needed by UIPainter, UIBuilder and UIDefiner. 

Why change now….? Well, I am hoping that a large chunk of my cairo work will find its way into a bundle that I will be publishing to the Cincom public store. If you end up using any of my work, it’s a lot easier for you to configure the widgets via the UI Painter tools than reading some huge document to figure out how to use it. Sure, I’ll still have to document some stuff, but it won’t be nearly as much documentation if I took the pure programmatic approach. 

Here’s a sample of my first attempt at making a “proper” VisualWorks GUI component. If you’re following this blog, then you have probably already guessed that the first candidate for inclusion on the UIPalette is my CairoPNGImage component. 

The CairoPNGImageView added to the UIPalette

Here is a link to some video of the component being edited.  

So what’s next? I still have a couple more spec editing interfaces to add. The big one however, is that in addition to the drag handles…I want rotation handles and a controller that can help with component rotation. I’ll really be getting into uncharted territory there! Stay tuned..

Next Page »

Create a free website or blog at