2011-01-25 07:42:20 +00:00
<!doctype html>
< head >
2011-01-27 02:45:34 +00:00
< title > gui-dat< / title >
2011-01-29 01:23:20 +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-01-29 00:38:58 +00:00
< link href = "gui.css" media = "screen" rel = "stylesheet" type = "text/css" / >
2011-01-29 04:28:12 +00:00
< script type = "text/javascript" src = "gui.js" > < / script >
2011-01-29 00:38:58 +00:00
< script type = "text/javascript" src = "controllers/slider.js" > < / script >
< script type = "text/javascript" src = "controllers/controller.js" > < / script >
< script type = "text/javascript" src = "controllers/controller.boolean.js" > < / script >
< script type = "text/javascript" src = "controllers/controller.function.js" > < / script >
< script type = "text/javascript" src = "controllers/controller.number.js" > < / script >
< script type = "text/javascript" src = "controllers/controller.string.js" > < / script >
2011-01-29 04:28:12 +00:00
2011-01-29 00:38:58 +00:00
2011-01-29 01:23:20 +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 >
< script type = "text/javascript" >
2011-01-26 00:07:51 +00:00
2011-01-29 01:23:20 +00:00
window.onload = function() {
2011-01-29 00:38:58 +00:00
2011-01-29 01:23:20 +00:00
prettyPrint();
2011-01-29 00:38:58 +00:00
2011-01-29 01:23:20 +00:00
var fizzyText = new FizzyText("gui-dat");
2011-01-29 00:38:58 +00:00
2011-01-29 01:23:20 +00:00
var gui = new GUI();
2011-01-29 00:38:58 +00:00
2011-01-29 01:23:20 +00:00
// Text field
gui.add(fizzyText, "message");
2011-01-29 00:38:58 +00:00
2011-01-29 01:23:20 +00:00
// Sliders with min and max
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
2011-01-29 01:23:20 +00:00
// Sliders with min, max and increment.
gui.add(fizzyText, "noiseStrength", 10, 100, 5);
2011-01-29 00:38:58 +00:00
2011-01-29 01:23:20 +00:00
// Boolean checkbox
gui.add(fizzyText, "displayOutline");
2011-01-29 04:29:54 +00:00
2011-01-29 01:23:20 +00:00
// Fires a function called "explode"
2011-01-29 03:38:05 +00:00
gui.add(fizzyText, "explode").name("Explode!"); // Specify a custom name.
2011-01-29 01:23:20 +00:00
};
2011-01-29 00:38:58 +00:00
2011-01-25 07:42:20 +00:00
< / script >
< / head >
< body >
2011-01-29 04:28:12 +00:00
< div id = "container" >
2011-01-27 02:45:34 +00:00
< div id = "helvetica-demo" > < / div >
2011-01-27 21:05:42 +00:00
< div id = "notifier" > < / div >
2011-01-27 06:25:46 +00:00
< h1 > < a href = "http://twitter.com/guidat" > < img src = "demo/assets/profile.png" border = "0" alt = "GUI-DAT flag" / > < / a > < / h1 >
2011-01-25 09:05:49 +00:00
< p >
2011-01-26 01:55:59 +00:00
< strong > gui-dat< / strong > is a lightweight controller library for JavaScript. It allows you to easily manipulate variables and fire functions on the fly.
2011-01-25 09:05:49 +00:00
< / p >
2011-01-29 00:38:58 +00:00
2011-01-27 02:45:34 +00:00
< ul >
2011-01-29 05:21:01 +00:00
< 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 >
2011-01-29 05:27:06 +00:00
< li > < a href = "http://github.com/jonobr1/gui-dat" > Contribute on GitHub!< / a > < / li >
2011-01-27 02:45:34 +00:00
< / ul >
2011-01-29 00:38:58 +00:00
2011-01-26 01:55:59 +00:00
< h2 > Basic Usage< / h2 >
2011-01-29 00:38:58 +00:00
< pre id = "demo-pre" class = "prettyprint" > < script type=" text/javascript" src=" demo/demo.js" > < /script>
2011-01-28 20:26:38 +00:00
< script type=" text/javascript" >
window.onload = function() {
var fizzyText = new < a href = "demo/demo.js" > FizzyText< / a > (" gui-dat" );
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-29 04:04:33 +00:00
gui.add(fizzyText, " message" );
2011-01-28 20:26:38 +00:00
// Sliders with min and max
2011-01-29 04:04: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-29 04:04: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-29 04:04:33 +00:00
gui.add(fizzyText, " displayOutline" );
2011-01-28 20:26:38 +00:00
// Fires a function called " explode"
2011-01-29 04:04:33 +00:00
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
};
< /script> < / pre >
2011-01-29 00:38:58 +00:00
2011-01-27 02:45:34 +00:00
< 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 >
2011-01-28 21:19:26 +00:00
< hr / >
2011-01-29 04:04:33 +00:00
2011-01-28 21:19:26 +00:00
< h2 > Fire a function when someone uses a control< / h2 >
2011-01-29 04:04:33 +00:00
< pre class = "prettyprint" > gui.add(obj, "propName").onChange(function(n) {
2011-01-28 21:19:26 +00:00
alert("You changed me to " + n);
});< / pre >
2011-01-29 04:04:33 +00:00
< hr / >
< h2 > Listen for variable changes < em > outside< / em > of the GUI< / h2 >
< 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 >
2011-01-30 23:03:09 +00:00
< pre class = "prettyprint" > gui.add(obj, "changingProperty").listen();< / pre >
2011-01-29 04:04:33 +00:00
< hr / >
< h2 > Advanced listening< / h2 >
< 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:
< pre class = "prettyprint" >
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() {
gui.listen(); // updates values you've marked with listen()
}, 1000 / 60);
< / pre >
< 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" >
gui.autoListen = false; // disables internal interval
gui.add(obj, "add");
gui.add(obj, "lotsa");
gui.add(obj, "properties");
// Make your own loop
setInterval(function() {
gui.listenAll(); // updates ALL values managed by this gui
}, 1000 / 60);
< / pre >
2011-01-30 23:03:09 +00:00
< hr / >
< h2 > Multiple panels and custom placement< / h2 >
< p > You can instantiate multiple < code > GUI< / code > objects and name them however you'd like.< / p >
< pre class = "prettyprint" >
var gui1 = new GUI();
var gui2 = new GUI();
// The name function overwrites the "Show Controls" text.
gui1.name("Utilities");
gui2.name("Camera Placement");
< / pre >
< 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" > // Notice this belongs to the GUI class (uppercase)
// 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";
document.getElementById("my-gui-container").appendChild( gui.domElement );
< / pre >
<!--
< hr / >
< h2 > Secrets< / h2 >
< ol id = "secrets" >
< strong > gui-dat< / strong > panels are resizeable. < br / >
Press H to make panels invisible.
< / ol >
-->
2011-01-26 02:15:20 +00:00
< footer >
2011-01-28 21:19:26 +00:00
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-01-26 02:15:20 +00:00
< / footer >
2011-01-29 04:28:12 +00:00
< / div >
2011-01-25 07:42:20 +00:00
< / body >
2011-01-29 00:38:58 +00:00
< / html >
