uil v0.9

uil.js is a lightweight ui for javascript with some svg. example

1 - init engine

var ui = new UIL.Gui('top:150px; left:50%; margin-left:-150px;');

2 - add value

ui.add('title', { name:'Title'});
ui.add('bool', { name:'Bool', callback:callback});
ui.add('color', { name:'Color', callback:callback, type:'html', value:0xff0000});
ui.add('color', { name:'Color', callback:callback, type:'rgba', value:[0,1,1,1]});
ui.add('slide', { name:'Slide', callback:callback, value:50});
ui.add('string', { name:'String', callback:callback, value:'welcome to uil'});
ui.add('list', { name:'List', callback:callback, list:[item1, item2, ...]});
ui.add('number', { name:'Number', callback:callback, value:20, min:0, max:10, precision:2, step:0.01 });
ui.add('number', { name:'Vector2', callback:callback, value:[0,0] });
ui.add('number', { name:'Vector3', callback:callback, value:[0,0,0] });
ui.add('number', { name:'Vector4', callback:callback, value:[0,0,0,0] });

3 - callback is simple function easy to define

var callback = function(value){ debug.innerHTML = value; }
// you can also set like that 
ui.add('number', { name:'Vector4', value:[0,0,0,0] }).onChange( function(v){ debug.innerHTML = v; } );

4 - you can reset all value

ui.clear();