MinimalCompsJS Preview

Oct 04 2011 Published by under Components, JavaScript

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:

    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);

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.

4 responses so far. Comments will be closed after post is one year old.

  • Alan says:

    Lookin’ good Keith. I would have just used .pngs for the states….using canvas for a button seems interesting….

  • DieTapete says:

    Hehe, yeah.. now we have our little sandbox back again.
    Who want’s to be plagued with HTML and CSS anyway. 😉

  • markval says:

    Hi,

    Love minimalcomps in as3.

    I am currently surfing using android 2.2 on HTC phone and its quite hard to do anything with the controls. Since we have to make things work on any screens nowadays I would suggest to test it with one of those smart phones since they are still climbing up in the market share… and aren’t we all sure that it won’t stop.

    I truly believe that it will be useful to have minimalcomps on side with css-shaders and html5 workers to quickly prototype.

    Best regards,
    mark

  • Flaboy.com says:

    I’m glad it killed my browser, JavaScript is worse than Flash 😉
    Anyways good work.