xgui.js

from https://github.com/oosmoxiecode/xgui.js Some simple gui stuff to try and make js experimentation a bit easier. The idea is to be able to quickly set up a bunch of sliders, knobs, colorPickers, etc. and bind the values of these to objects or functions.

HTML

<script src="http://oosmoxiecode.github.com/examples/xgui.js/xgui.min.js"></script>

JavaScript

// QUICK EXAMPLE

var testObject = { x:0, y:0 };

var gui = new xgui( {width: 240, height: 60, backgroundColor: "rgb(65, 104, 137)", frontColor: "rgb(153, 193, 226)", dimColor: "rgb(90, 137, 177)"} );

document.body.appendChild( gui.getDomElement() );

var slider = new gui.HSlider( {x:10, y:10, value: 0, min:-100, max:100} );
slider.value.bind(testObject, "x", "y");

// ANDY
// NOTE: x and y are the coords of the widget and radius is its size

// Bootstrap
var gui = new xgui();
$('body').append(gui.getDomElement());

// widget 1
var knob0 = new gui.Knob( {x: 10, y: 140, radius: 20, value: 80, min: 0, max: 200 } );
// a binding
knob0.value.bind(testFunction);

// widget 2
var knob1 = new gui.Knob( {x: 100, y: 100, radius: 50, value: 0, min: 0, max: 200 } );
// object to map to
var testObject1 = { someval:80, nonused:'fred' };
//  and also a function to call on change
function testFunction1 (value) { 
    console.log("testFunction1 called", testObject1, testObject1.someval ); 
    //gui.update(); // for knob2 - doesn't work from within here.
}
// the bindings
knob1.value.bind(testObject1, "someval");
knob1.value.bind(testFunction1);

// Can't make knob1 a receiver because we then get an infinite loop.  knob changes data object and then data object changes knob again.
//
//knob1.value.receiver = true;
//gui.update();

// widget 3 - receives from data of widget 2
var knob2 = new gui.Knob( {x: 230, y: 80, radius: 20, value: 0, min: 0, max: 200 } );
var label2 = new gui.Label( {x: 10, y: 58, text: "Generic Label"} );

var testObject2 = { aval:80, nonused:'fred' };

label2.value.bind(testObject2, "aval");
label2.value.receiver = true;
label2.updateInterval = 400;

knob2.value.bind(testObject2, "aval");
knob2.value.receiver = true;
knob2.updateInterval = 400;
gui.update();

// Run a dummy update
setInterval(tempUpdate2, 1000/560);
var incr_amount = 1;
function tempUpdate2() {

    if (testObject2.aval > 200) incr_amount = -1;
    if (testObject2.aval < 0) incr_amount =...