CnvUI

A tiny UI based on HTMLCanvasElement
Fork me on GitHub

Dependencies

jQuery ( CnvUI is using $.fn.offset )

License

MIT License

Author

mohayonao

API

Root UI

var ui = new CnvUI({elem:"#canvas", width:320, height:240,
                    background:"white", foreground:"black", lineWidth:2})

Panel

(panel || ui).set({type:"panel", x:0, y:0, width:320, height:240,
                   background:"white", foreground:"black", lineWidth:2});

Label

(panel || ui).set({type:"label", x:0, y:0, width:50,
                   align:"left", value:""}).update("hello, CnvUI!!");

VSlider

(panel || ui).set({type:"vslider", x:0, y:0, width:10, height:80,
                   min:0, max:100, value:0, change:function(value) {
                       console.log(this.value);
                   }}).update(100);

Knob

(panel || ui).set({type:"knob", x:0, y:0, radius:20,
                   min:0, max:100, value:0, change:function(value) {
                       console.log(this.value);
                   }}).update(100);

Switch

(panel || ui).set({type:"switch", x:0, y:0, width:10, height:30,
                   value:false, change:function(value) {
                       console.log(this.value);
                   }}).update(true);