mirror of
https://github.com/dataarts/dat.gui.git
synced 2024-12-12 04:08:27 +00:00
173 lines
6.4 KiB
HTML
173 lines
6.4 KiB
HTML
<!doctype html>
|
|
<head>
|
|
<title>gui-dat</title>
|
|
<link rel="icon" type="image/png" href="demo/assets/favicon.png" />
|
|
<link href="demo/demo.css" media="screen" rel="stylesheet" type="text/css" />
|
|
|
|
<link href="gui.css" media="screen" rel="stylesheet" type="text/css" />
|
|
<script type="text/javascript" src="gui.js"></script>
|
|
<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="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">
|
|
|
|
window.onload = function() {
|
|
|
|
prettyPrint();
|
|
|
|
var fizzyText = new FizzyText("gui-dat");
|
|
|
|
var gui = new GUI();
|
|
|
|
// 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").name("Explode!"); // Specify a custom name.
|
|
|
|
};
|
|
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<div id="container">
|
|
<div id = "helvetica-demo"></div>
|
|
<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"><script type="text/javascript" src="demo/demo.js"></script>
|
|
<script type="text/javascript">
|
|
|
|
window.onload = function() {
|
|
|
|
var fizzyText = new <a href="demo/demo.js">FizzyText</a>("gui-dat");
|
|
|
|
var gui = new GUI();
|
|
|
|
// 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").name("Explode!"); // Specify a custom name.
|
|
|
|
};
|
|
|
|
</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>
|
|
<hr/>
|
|
|
|
<h2>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>
|
|
<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>
|
|
<pre class="prettyprint">gui.add(obj, "changingProperty").listen();</pre>
|
|
<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
|
|
gui.add(obj, "changingProperty").listen();
|
|
|
|
// 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>
|
|
<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>
|
|
-->
|
|
<footer>
|
|
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.
|
|
</footer>
|
|
</div>
|
|
</body>
|
|
</html>
|