2011-02-09 21:50:24 +00:00
<!doctype html>
2011-01-31 04:53:33 +00:00
< head >
< title > gui-dat< / title >
2011-02-11 19:12:07 +00:00
2011-01-31 04:53:33 +00:00
< link rel = "icon" type = "image/png" href = "demo/assets/favicon.png" / >
< link href = "demo/demo.css" media = "screen" rel = "stylesheet" type = "text/css" / >
2011-04-18 18:32:52 +00:00
< link href = "src/gui.css" media = "screen" rel = "stylesheet" type = "text/css" / >
< script type = "text/javascript" src = "src/gui.js" > < / script >
< script type = "text/javascript" src = "src/controllers/slider.js" > < / script >
< script type = "text/javascript" src = "src/controllers/controller.js" > < / script >
< script type = "text/javascript" src = "src/controllers/boolean.js" > < / script >
< script type = "text/javascript" src = "src/controllers/function.js" > < / script >
< script type = "text/javascript" src = "src/controllers/number.js" > < / script >
< script type = "text/javascript" src = "src/controllers/string.js" > < / script >
2011-02-09 22:03:02 +00:00
< script type = "text/javascript" src = "demo/improvedNoise.js" > < / script >
< script type = "text/javascript" src = "demo/prettify.js" > < / script >
< script type = "text/javascript" src = "demo/demo.js" > < / script >
2011-04-18 18:32:52 +00:00
2011-01-31 04:53:33 +00:00
< script type = "text/javascript" >
2011-02-11 19:12:07 +00:00
//< ![CDATA[
2011-01-31 04:53:33 +00:00
window.onload = function() {
prettyPrint();
var fizzyText = new FizzyText("gui-dat");
2011-02-11 19:25:33 +00:00
var gui = new GUI();
2011-02-09 19:39:18 +00:00
2011-02-11 19:25:33 +00:00
// Text field
gui.add(fizzyText, "message");
2011-02-09 19:39:18 +00:00
2011-02-11 19:25:33 +00:00
// Sliders with min + max
gui.add(fizzyText, "maxSize", 0.5, 7);
gui.add(fizzyText, "growthSpeed", 0.01, 1);
gui.add(fizzyText, "speed", 0.1, 2);
2011-02-09 19:39:18 +00:00
2011-02-11 19:25:33 +00:00
// Sliders with min, max and increment.
gui.add(fizzyText, "noiseStrength", 10, 100, 5);
2011-02-09 19:39:18 +00:00
2011-02-11 19:25:33 +00:00
// Boolean checkbox
gui.add(fizzyText, "displayOutline");
2011-02-09 19:39:18 +00:00
2011-02-11 19:25:33 +00:00
// Fires a function called "explode"
gui.add(fizzyText, "explode").name("Explode!"); // Specify a custom name.
2011-01-31 04:53:33 +00:00
2011-02-11 19:12:07 +00:00
// Javascript for documentation
getCollapsables();
handleListening();
2011-01-31 04:53:33 +00:00
};
2011-02-11 19:12:07 +00:00
function toggle(e) {
var collapsable = this.childNodes[3],
wrapper = collapsable.childNodes[1];
if (this.className === 'collapsed') {
this.className = 'expanded';
collapsable.style.height = wrapper.clientHeight + 'px';
} else {
this.className = 'collapsed';
collapsable.style.height = '0px';
}
}
function getCollapsables() {
if (document.getElementsByClassName == undefined) {
document.getElementsByClassName = function(className)
{
var hasClassName = new RegExp("(?:^|\\s)" + className + "(?:$|\\s)");
var allElements = document.getElementsByTagName("*");
var results = [];
var element;
for (var i = 0; (element = allElements[i]) != null; i++) {
var elementClass = element.className;
if (elementClass & & elementClass.indexOf(className) != -1 & & hasClassName.test(elementClass))
results.push(element);
}
return results;
};
}
collapsed = document.getElementsByClassName('collapsed');
expanded = document.getElementsByClassName('expanded');
}
function handleListening() {
for(var i = 0; i < collapsed.length ; i + + ) {
collapsed[i].addEventListener('click', toggle, false);
}
for(var j = 0; j < expanded.length ; j + + ) {
expanded[i].addEventListener('click', toggle, false);
}
}
2011-01-31 20:21:14 +00:00
2011-01-31 04:53:33 +00:00
//]]>
< / script >
< / head >
< body >
< div id = "container" >
2011-02-11 19:12:07 +00:00
<!-- GUIDAT logo -->
2011-01-31 04:53:33 +00:00
< div id = "helvetica-demo" > < / div >
2011-02-11 19:12:07 +00:00
<!-- It gives you this! -->
2011-01-31 04:53:33 +00:00
< div id = "notifier" > < / div >
< h1 > < a href = "http://twitter.com/guidat" > < img src = "demo/assets/profile.png" border = "0" alt = "GUI-DAT flag" / > < / a > < / h1 >
< p > < strong > gui-dat< / strong > is a lightweight controller library for JavaScript. It allows you to easily manipulate variables and fire functions on the fly.< / p >
< ul >
< li > < a href = "https://github.com/jonobr1/gui-dat/raw/versions/gui.min.js" > < strong > Download the minified source< / strong > < / a > < small > [11kb]< / small > < / li >
< li > < a href = "http://github.com/jonobr1/gui-dat" > Contribute on GitHub!< / a > < / li >
< / ul >
< h2 > Basic Usage< / h2 >
< pre id = "demo-pre" class = "prettyprint" >
2011-02-01 01:24:30 +00:00
< script type="text/javascript" src="gui.min.js"> < /script>
2011-01-31 04:53:33 +00:00
< script type="text/javascript">
2011-01-28 20:26:38 +00:00
window.onload = function() {
2011-01-31 04:53:33 +00:00
var fizzyText = new < a href = "demo/demo.js" > FizzyText< / a > ("gui-dat");
2011-01-28 20:26:38 +00:00
2011-01-29 04:04:33 +00:00
var gui = new GUI();
2011-01-29 00:38:58 +00:00
2011-01-28 20:26:38 +00:00
// Text field
2011-01-31 04:53:33 +00:00
gui.add(fizzyText, "message");
2011-01-28 20:26:38 +00:00
2011-02-09 19:39:18 +00:00
// Sliders with min + max
2011-01-31 04:53:33 +00:00
gui.add(fizzyText, "maxSize", 0.5, 7);
gui.add(fizzyText, "growthSpeed", 0.01, 1);
gui.add(fizzyText, "speed", 0.1, 2);
2011-01-29 00:38:58 +00:00
// Sliders with min, max and increment.
2011-01-31 04:53:33 +00:00
gui.add(fizzyText, "noiseStrength", 10, 100, 5);
2011-01-29 00:38:58 +00:00
2011-01-28 20:26:38 +00:00
// Boolean checkbox
2011-01-31 04:53:33 +00:00
gui.add(fizzyText, "displayOutline");
2011-01-28 20:26:38 +00:00
2011-01-31 04:53:33 +00:00
// Fires a function called "explode"
gui.add(fizzyText, "explode").name("Explode!"); // Specify a custom name.
2011-01-29 00:38:58 +00:00
2011-01-28 20:26:38 +00:00
};
2011-01-31 04:53:33 +00:00
< /script>
< / pre >
< ul id = "desc" >
< li > < strong > gui-dat< / strong > will infer the type of the property you're trying to add< br / >
(based on its initial value) and create the corresponding control.< / li >
< li > The properties must be public, i.e. defined by < code > < strong > this< / strong > .prop = value< / code > .< / li >
< / ul >
<!--
< h2 class = "collapsed" > Fire a function when someone uses a control< / h2 >
< pre class = "prettyprint" > gui.add(obj, "propName").onChange(function(n) {
alert("You changed me to " + n);
});< / pre > -->
2011-02-11 19:12:07 +00:00
< div class = "collapsed" >
< h2 class = "section" > Saving your parameters< / h2 >
< div class = "collapsable" >
< div >
< p > The simplest way to save your parameters is via < code > GUI.saveURL()< / code > . This method directs your browser to a URL containing the current GUI settings.< / p >
< pre class = "prettyprint last" >
2011-01-31 04:53:33 +00:00
// Make a button for the url function
2011-02-01 00:49:14 +00:00
gui.add(GUI, "saveURL");< / pre >
2011-02-11 19:12:07 +00:00
< / div >
< / div >
< / div >
< div class = "collapsed" >
< h2 class = "section" > Advanced saving< / h2 >
< div class = "collapsable" >
< div >
< p > Let's say you'd like to share your settings with someone. Instead of sending a long link with lots of parameters stored in it, you can make your saved settings the defaults.< / p >
< p > First, add the method < code > GUI.showSaveString()< / code > to a gui object:< / p >
< pre class = "prettyprint" > var gui = new GUI();
2011-01-31 04:53:33 +00:00
// Add some stuff (and pretend I change their values);
gui.add(someObject, "someProperty");
gui.add(someObject, "someOtherProperty");
// Make a save button.
2011-02-01 00:49:14 +00:00
gui.add(GUI, "showSaveString");< / pre >
2011-01-31 04:53:33 +00:00
2011-02-11 19:12:07 +00:00
< p > Clicking the "showSaveString" button bring up an alert with a string. Copy and paste that string into the method < code > GUI.load()< / code > before you instantiate any gui objects.< / p >
< pre class = "prettyprint" >
2011-02-01 01:24:30 +00:00
// Replace COPIED STRING with the value you got from showSaveString()
2011-01-31 04:53:33 +00:00
GUI.load("COPIED STRING");
var gui = new GUI();
// Now these properties will be set to the values you just saved.
gui.add(someObject, "someProperty");
2011-02-01 00:49:14 +00:00
gui.add(someObject, "someOtherProperty");< / pre >
2011-01-31 04:53:33 +00:00
2011-02-11 19:12:07 +00:00
< p class = "last" > < strong > Save strings won't work if you change the order in which you've added properties to your gui objects, or the order of the gui objects themselves.< / strong > . If you want to add more parameters to your gui and use an old save string, make sure they're added after the properties whose values you've saved.< / p >
< / div >
< / div >
2011-01-31 04:53:33 +00:00
< / div >
2011-02-09 21:28:35 +00:00
2011-02-11 19:12:07 +00:00
< div class = "collapsed" >
< h2 class = "section" > Choosing from a list of values< / h2 >
< div class = "collapsable" >
< div >
2011-02-09 21:50:24 +00:00
< pre class = "prettyprint first last" > gui.add(obj, "propertyName").options(1, 2, 3, 5, 8);
2011-02-09 21:28:35 +00:00
// Alternatively, you can specify custom labels using object syntax
gui.add(obj, "propertyName").options({'Small': 1, 'Medium': 2, 'Large': 3});
< / pre >
2011-02-11 19:12:07 +00:00
< / div >
< / div >
< / div >
< div class = "collapsed" >
< h2 class = "section" > Listen for variable changes inside the GUI< / h2 >
< div class = "collapsable" >
< div >
< p > To fire a function whenever a user changes a variable via the GUI, use the following syntax:< / p >
< pre class = "prettyprint" > gui.add(obj, "propertyName").onChange(function(newValue) {
2011-02-09 19:39:18 +00:00
alert("You changed me to " + newValue);
2011-02-11 19:12:07 +00:00
});< / pre > < p > This can be slightly annoying for types like number or string. You may not want to fire a function while the user is sliding, or while they're typing. To fire a function when the user has < em > finished< / em > making changes, use the following:< / p >
< pre class = "prettyprint" > gui.add(obj, "propertyName").onFinishChange(function(newValue) {
2011-02-09 19:39:18 +00:00
alert("You just finished changing me to " + newValue);
});< / pre >
2011-02-11 19:12:07 +00:00
< p > Finally, if you'd like to do a little something extra when a function is called, use the following:< / p >
< pre class = "prettyprint last" > gui.add(obj, "functionName").onFire(function() {
2011-02-09 19:39:18 +00:00
alert("You called a function with gui-dat");
});< / pre >
2011-02-11 19:12:07 +00:00
< / div >
< / div >
< / div >
< div class = "collapsed" >
< h2 class = "section" > Listen for variable changes outside of the GUI< / h2 >
< div class = "collapsable" >
< div >
< p > Let's say you have a variable that changes by itself from time to time. If you'd like the GUI to reflect those changes, use the < code > listen()< / code > method.< / p >
< pre class = "prettyprint last" > gui.add(obj, "changingProperty").listen();< / pre >
< / div >
< / div >
< / div >
2011-01-31 04:53:33 +00:00
2011-02-11 19:12:07 +00:00
< div class = "collapsed" >
< h2 class = "section" > Advanced listening< / h2 >
< div class = "collapsable" >
< div >
< p > By default, < strong > gui-dat< / strong > will create an internal interval that checks for changes in the values you've marked with < code > listen()< / code > . If you'd like to check for these changes in an interval of your own definition, use the following:< / p >
< pre class = "prettyprint" >
2011-01-29 04:04:33 +00:00
gui.autoListen = false; // disables internal interval
2011-01-30 23:03:09 +00:00
gui.add(obj, "changingProperty").listen();
2011-01-29 04:04:33 +00:00
// Make your own loop
setInterval(function() {
2011-02-11 19:12:07 +00:00
gui.listen(); // updates values you've marked with listen()
2011-02-01 00:49:14 +00:00
}, 1000 / 60);< / pre >
2011-01-31 04:53:33 +00:00
2011-02-11 19:12:07 +00:00
< p > Alternatively, you can forego calling < code > listen()< / code > on individual controllers, and instead choose to monitor changes in < em > all< / em > values controlled by your gui.< / p >
< pre class = "prettyprint last" >
2011-01-29 04:04:33 +00:00
gui.autoListen = false; // disables internal interval
gui.add(obj, "add");
gui.add(obj, "lotsa");
gui.add(obj, "properties");
// Make your own loop
setInterval(function() {
2011-02-11 19:12:07 +00:00
gui.listenAll(); // updates ALL values managed by this gui
2011-02-01 00:49:14 +00:00
}, 1000 / 60);< / pre >
2011-02-11 19:12:07 +00:00
< / div >
< / div >
< / div >
2011-01-31 04:53:33 +00:00
2011-02-11 19:12:07 +00:00
< div class = "collapsed" >
< h2 class = "section" > Multiple panels and custom placement< / h2 >
< div class = "collapsable" >
< div >
< p > You can instantiate multiple < code > GUI< / code > objects and name them however you'd like.< / p >
< pre class = "prettyprint" > var gui1 = new GUI();
2011-01-30 23:03:09 +00:00
var gui2 = new GUI();
// The name function overwrites the "Show Controls" text.
gui1.name("Utilities");
2011-02-01 00:49:14 +00:00
gui2.name("Camera Placement");< / pre >
2011-01-31 04:53:33 +00:00
2011-02-11 19:12:07 +00:00
< p > By default, < strong > gui-dat< / strong > panels will be automatically added to the HTML document and fixed to the top of the screen. You can disable this behavior / styling and append the gui DOM element to a container of your choosing.< / p >
< pre class = "prettyprint last" >
2011-01-31 04:53:33 +00:00
// Notice this belongs to the GUI class (uppercase)
2011-01-30 23:03:09 +00:00
// and not an instance thereof.
GUI.autoPlace = false;
var gui = new GUI();
// Do some custom styles ...
gui.domElement.style.position = "absolute";
gui.domElement.style.top = "20px";
gui.domElement.style.left = "20px";
2011-02-01 00:49:14 +00:00
document.getElementById("my-gui-container").appendChild( gui.domElement );< / pre >
2011-02-11 19:12:07 +00:00
< / div >
< / div >
2011-01-31 04:53:33 +00:00
< / div >
2011-01-31 20:21:14 +00:00
2011-02-11 19:12:07 +00:00
< div class = "collapsed" >
< h2 class = "section" > Pro tips.< / h2 >
< div class = "collapsable" >
< div >
< ol id = "secrets" >
< li > < strong > gui-dat< / strong > panels are resizeable. Drag the show/hide button.< / li >
2011-02-14 21:34:27 +00:00
< li > Press 'H' to show/hide GUI' s.< / li >
2011-02-11 19:12:07 +00:00
< / ol >
< / div >
< / div >
< / div >
< div class = "trans" > < / div >
2011-02-03 22:36:28 +00:00
< footer class = "trans" > Initiated by < a href = "http://georgemichaelbrower.com/" > George Michael Brower< / a > and < a href = "http://jonobr1.com/" > Jono Brandel< / a > of the Data Arts Team, Google Creative Lab.
2011-02-11 19:12:07 +00:00
< / footer >
2011-01-31 04:53:33 +00:00
< / body >
2011-01-29 00:38:58 +00:00
< / html >
