Chris' Cairo Blog

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.


Leave a Comment »

No comments yet.

RSS feed for comments on this post. TrackBack URI

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

Create a free website or blog at

%d bloggers like this: