lo-th / Uil

uil v2.7

uil.js is a lightweight ui for javascript with a complete 3d display support. example

1 - init engine

var ui = new UIL.Gui( { css:'top:145px; left:50%;', size:300, center:true } );

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

5 - other examples

uil module

uil listen

uil item

uil image list

uil stresstest

uil advanced

uil to canvas

uil to three

uil to three 2