MinimalCompsJS Preview

A while back, when I first started playing with HTML5 and Canvas, I considered the idea of making a port of MinimalComps. I immediately rejected the idea as silly. I mean, if you’re in HTML, you already have UI controls, right? But I mentioned it to a few people and tweeted about it, and I was amazed how much interest there was in such a thing. At FOTB last month, I was asked about it a couple of times. So, I got to work.

Here is an early build of what I have going:

http://www.bit-101.com/MinimalCompsJS/previews/20111004

As you can see, there is a Slider (vertical only), a PushButton, Label, and CheckBox. Not shown, but also fully working is a RadioButton. While there are various bells and whistles that could be added to what’s there, they seem to be pretty functional and solid.

Here’s a code sample from that demo:

[php lang=”JavaScript”] new mc.Label(stage, 10, 10, “Angles:”);
var s1 = new mc.Slider(stage, 10, 30, onAngle);
var s2 = new mc.Slider(stage, 25, 30, onAngle);
var s3 = new mc.Slider(stage, 40, 30, onAngle);
s1.setSize(10, 360);
s2.setSize(10, 360);
s3.setSize(10, 360);
s1.setSliderValues(0, Math.PI * 2, 1);
s2.setSliderValues(0, Math.PI * 2, 2);
s3.setSliderValues(0, Math.PI * 2, 3);[/php]

As you can see, they are very similar in use to the AS3 versions.

There were so many design decisions to make on this project. And while I obviously made certain decisions, I am by no means committed to any of them and am open to suggestions.

First and foremost is the decision to make the comps fully Canvas based. All components get added to a “stage” object, which is a wrapper around a canvas. Generally you would make a small canvas and use that for your component panel, or section off a rectangular area of another canvas for use by the controls. For me, this was the easiest way to get started, but I’m going to experiment with making each component have its own canvas. Then they can each be added to a div, with absolute positioning. This would actually simplify various things such as mouse events and redrawing. Currently, I have to listen to all mouse events on the stage and determine which component they belong to and farm them out. As for redrawing, some component drawing can be done just within the component bounds, but if anything is resized or repositioned, the entire canvas needs to be redrawn. If each component was its own DOM element, a lot of that would go away. Lots of stuff to experiment and keep my little brain busy for the next few weeks or months.

Anyway, I haven’t released the code officially, but feel free to grab it from view source and play around if you want. Each component has its own file, plus an overall MinimalComps.js file. Eventually, I’ll combine these all into one js file and minify it.

Have fun and give me feedback.