Canvas UI Update

It’s been a long time since I worked on my GUI library for the HTML5 canvas tag. Here’s what it looked like last time I linked to it:

Here’s what it looks like now:

New features include:

  • A working text box gadget (click in the box labelled “text” and type something);
  • Scrollbars;
  • Labels;
  • Gradients;
  • Key up/down/press event handling;
  • Closures instead of objects as event listeners;
  • Focus representation via blue outlines.

There are a bunch of other bug fixes and changes in there, too. Get the source from the BitBucket page.


CanvasLayers - A Layer Library for the HTML5 Canvas Tag

Wouldn’t it be neat if the canvas tag supported layers? Now it does!

This uses the layering engine from CanvasUI, modified to support transparency and transparent sections (if required). Unlike other layer libraries for javascript, this uses a single canvas rather than a stack of several. Something this library gives you that a stack of canvases can’t is nested layers.

I changed the CanvasUI library so that it uses the latest Woopsi layout technique (damaged rects) instead of the old method (BSP trees). It doesn’t appear to have had any impact on performance, but it does make the code simpler. The new CanvasLayers library uses the latest version of the CanvasUI as its basis. I’m hoping to strip the duplicate functionality out of CanvasUI and use the CanvasLayers library as the canvas engine.

The CanvasLayers library sourcecode can be downloaded from BitBucket:


Loose Ends

I have released a few other projects to the tinterwebs recently, but haven’t as yet announced them.


First up is version 3.0 of ALite, a simple data-access and data validation framework for .NET4:


This version simplifies much of the framework. I went off on a wild tangent before moving the repository from SourceForge to BitBucket and started implementing features such as pseudo-transaction support. I even tried real transaction support using the classes from the System.Transactions namespace, but ran into so many nasty problems that it quickly became obvious that it wasn’t going to work.

Instead, ALite now works much more like Igmongonious. It uses a document (key/value store) to store the values of properties, which simplifies and speeds up the undo system. Swathes of code have been refactored to make the framework easier to use.

The “changelog” document seems to be inaccurate so I can’t give a complete breakdown of everything that has changed. Fortunately, no-one but me is crazy enough to use this library.

I moved the repository from SourceForge to BitBucket for a number of reasons. SourceForge has done some neat things with their UI and added a host of exciting new features, but:

  • BitBucket is a better fit for small projects like this. SourceForge’s insistence on manually vetting all projects doesn’t seem to have alleviated the amount of junk projects in its database, but it does increase the amount of work necessary to get what should be a minor project up and running.

  • Mercurial is magnitudes faster than SubVersion, particularly when SubVersion is lumbered with SourceForge’s horribly slow SVN servers.

  • BitBucket projects come equipped with a Creole-based wiki. Though SourceForge has recently added a per-project MediaWiki installation to their suite of features, Creole is notably terser than MediaWiki markup. The wiki is much simpler, which again is perfect for smaller projects. The entire wiki can be pulled down as a Mercurial repo allowing local editing and change tracking.


Next up is Chroma-X, my ill-fated, unfinished and unfortunately-named shoot-em-up for the GP2X:


Nothing new in here, but the sourcecode is browsable and easily accessible. Incidentally, I managed to get the game running on a GP2X Wiz. I was disappointed to discover that it was slower on the Wiz than it was on the GP2X F-200, which put a damper on my Wiz coding plans.

Canvas UI

Lastly, my canvas UI project is also now on BitBucket:


Since the last version I’ve fixed a few bugs and added plenty of new features, including:

  • Window close and depth buttons;
  • Scrolling lists;
  • Shadows on label text for disabled buttons;
  • Separation of GUI definition from library code.