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.
<scriptsrc="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>vartestObject={x:0,y:0};vargui=newxgui();document.body.appendChild(gui.getDomElement());varslider=newgui.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.