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.
It gives you a bunch of gui stuff, like these (old one here):
Download the minified js file and include it in your html.
<script src="xgui.min.js"></script>This code creates a "xgui" and adds it to the document.body, makes a HSlider, binds some properties of a testObject.
<script>
var testObject = { x:0, y:0 };
var gui = new xgui();
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");
</script>So when you drag the slider testObject.x and testObject.y will be set to the value of the slider.
More examples to come. For now look in /examples/testbed.html and /examples/testbed_touch.html for some idea of how to use it. Some examples where I used it: Dragon Curve, Balls Box2d, Drum machine
Inspiration came from similar stuff for OpenFrameworks, like this.
It currently includes these elements: HSlider, VSlider, Label, RadioButton, RadioButtonGroup, CheckBox, Knob, ColorPicker, ColorPicker2, ColorPicker3, TrackPad, Button, ImageButton, Graph, Stepper, InputText, DropDown, Matrix, RangeSlider, Joystick, CircularSlider, Scrollwheel.
History
r2 - Multitouch should now work across Android, iOS and Windows 8.x. Plus various platform specific bugfixes. Added CircularSlider, Scrollwheel and ColorPicker3. Added methods for: onResize, disableEvents, enableEvents and dispose.
r1 - Made it touch friendly, so multitouch should hopefully work(Tested on Nexus 4/7). Added Joystick, like an analog stick. Fixed various bugs and stuff.
r0 - Initial version.