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 00:38:58 +00:00
2011-01-27 06:35:45 +00:00
< link rel = "icon" type = "image/png" href = "demo/assets/favicon.png" / >
2011-01-25 22:16:30 +00:00
< link href = "demo/demo.css" media = "screen" rel = "stylesheet" type = "text/css" / >
2011-01-29 00:38:58 +00:00
<!-- <script type="text/javascript" src="gui.min.js"></script> -->
< link href = "gui.css" media = "screen" rel = "stylesheet" type = "text/css" / >
< 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 >
< script type = "text/javascript" src = "gui.js" > < / script >
2011-01-26 23:25:40 +00:00
< script type = "text/javascript" src = "demo/improvedNoise.js" > < / script >
2011-01-29 00:38:58 +00:00
< script type = "text/javascript" src = "demo/prettify.js" > < / script >
2011-01-26 02:30:05 +00:00
< script type = "text/javascript" src = "demo/demo.js" > < / script >
2011-01-26 00:07:51 +00:00
< script type = "text/javascript" >
2011-01-25 07:42:20 +00:00
window.onload = function() {
2011-01-26 00:07:51 +00:00
2011-01-29 00:38:58 +00:00
prettyPrint();
var fizzyText = new FizzyText("gui-dat");
var gui = new GUI();
document.body.appendChild( gui.domElement );
// Text field
gui.add(fizzyText, "message");
// 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);
// Sliders with min, max and increment.
gui.add(fizzyText, "noiseStrength", 10, 100, 5);
// Boolean checkbox
gui.add(fizzyText, "displayOutline");
// Fires a function called "explode"
gui.add(fizzyText, "explode").setName('Explode!'); // Specify a custom name.
2011-01-25 07:42:20 +00:00
};
2011-01-29 00:38:58 +00:00
2011-01-26 18:00:39 +00:00
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-20996084-1']);
_gaq.push(['_trackPageview']);
2011-01-29 00:38:58 +00:00
2011-01-26 18:00:39 +00:00
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
2011-01-25 07:42:20 +00:00
< / script >
< / head >
< body >
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-27 02:52:08 +00:00
< li > < a href = "https://github.com/jonobr1/GUI-DAT/raw/master/gui.min.js" > < strong > Download the minified source< / strong > < / a > < small > [9.8kb]< / small > < / li >
2011-01-27 21:34:56 +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" );
GUI.start();
2011-01-29 00:38:58 +00:00
2011-01-28 20:26:38 +00:00
// Text field
GUI.add(fizzyText, " message" );
// 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
// Sliders with min, max and increment.
2011-01-28 20:26:38 +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
GUI.add(fizzyText, " displayOutline" );
// Fires a function called " explode"
2011-01-29 00:38:58 +00:00
GUI.add(fizzyText, " explode" ).setName(' Explode!' ); // Specify a custom name.
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-29 00:38:58 +00:00
< footer >
By < a href = "http://georgemichaelbrower.com/" > George Michael Brower< / a > , < a href = "http://jonobr1.com/" > Jono Brandel< / a > , and < a href = "http://github.com/jonobr1/GUI-DAT" > you< / a > .
< / footer >
2011-01-25 07:42:20 +00:00
< / body >
2011-01-29 00:38:58 +00:00
< / html >
