dat.gui/index.html

<!doctype html>
<html>
<head>

  <title>dat.gui</title>

  <link rel='icon' type='image/png' href='docs/assets/favicon.png'/>

  <!--Minified build-->
  <!--<script type='text/javascript' src='build/DAT.GUI.min.js'></script>-->

  <!--Build--->
  <!--<script type='text/javascript' src='build/DAT.GUI.js'></script>-->

  <!--All source-->
  <link href='src/DAT/GUI/GUI.css' media='screen' rel='stylesheet' type='text/css'/>
  <script type='text/javascript' src='src/DAT/GUI/GUI.js'></script>
  <script type='text/javascript' src='src/DAT/GUI/ControllerNumberSlider.js'></script>
  <script type='text/javascript' src='src/DAT/GUI/Controller.js'></script>
  <script type='text/javascript' src='src/DAT/GUI/ControllerBoolean.js'></script>
  <script type='text/javascript' src='src/DAT/GUI/ControllerString.js'></script>
  <script type='text/javascript' src='src/DAT/GUI/ControllerFunction.js'></script>
  <script type='text/javascript' src='src/DAT/GUI/ControllerNumber.js'></script>

  <!--Demo-->
  <link href='docs/docs.css' media='screen' rel='stylesheet' type='text/css'/>
  <script type='text/javascript' src='docs/RequestAnimationFrame.js'></script>
  <script type='text/javascript' src='docs/improvedNoise.js'></script>
  <script type='text/javascript' src='docs/prettify.js'></script>
  <script type='text/javascript' src='docs/demo.js'></script>

  <script type='text/javascript'>
    //<![CDATA[

    window.onload = function() {

      prettyPrint();

      var fizzyText = new FizzyText('dat.gui');
      var gui = new DAT.GUI();

      // Text field
      gui.add(fizzyText, 'message');

      // Sliders with min + max
      gui.add(fizzyText, 'maxSize').min(0.5).max(7);
      gui.add(fizzyText, 'growthSpeed').min(0.01).max(1).step(0.05);
      gui.add(fizzyText, 'speed', 0.1, 2, 0.05); // shorthand for min/max/step

      // 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.

      // Javascript for documentation
      getCollapsables();
      handleListening();
    };

    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);
      }
    }

    //]]>
  </script>
</head>

<body>
<div id='container'>

<!-- GUIDAT logo -->
<div id='helvetica-demo'></div>

<!-- It gives you this! -->
<div id='notifier'></div>

<h1><a href='http://twitter.com/guidat'><img src='docs/assets/profile.png'
                                             border='0' alt='dat.gui flag'/></a>
</h1>

<p><strong>dat.gui</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/dataarts/dat.gui/raw/build/DAT.GUI.min.js'><strong>Download the minified source</strong></a>
    <small id='buildsizemin'>[19.5kb]
    </small>
  </li>
  <li>
  	<a href='https://github.com/dataarts/dat.gui/raw/build/DAT.GUI.js'><strong>Download the uncompressed source</strong></a>
    <small id='buildsize'>[33.6kb]
    </small>
  </li>

  <li><a href='http://github.com/dataarts/dat.gui'>Contribute on GitHub!</a></li>
</ul>

<h2>Basic Usage</h2>
    <pre id='demo-pre' class='prettyprint'>
&lt;script type='text/javascript' src='DAT.GUI.min.js'&gt;&lt;/script&gt;
&lt;script type='text/javascript'&gt;

window.onload = function() {

   var fizzyText = new <a href='docs/demo.js'>FizzyText</a>('dat.gui');

   var gui = new DAT.GUI();

   // Text field
   gui.add(fizzyText, 'message');

   // Sliders with min + max
   gui.add(fizzyText, 'maxSize').min(0.5).max(7);
   gui.add(fizzyText, 'growthSpeed').min(0.01).max(1).step(0.05);
   gui.add(fizzyText, 'speed', 0.1, 2, 0.05); // shorthand for min/max/step

   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.

};

&lt;/script&gt;
</pre>

<ul id='desc'>
  <li><code>DAT.GUI</code> 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>-->

<!--<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>DAT.GUI.saveURL()</code>. This method directs your browser to a-->
        <!--URL containing the current GUI settings.</p>-->
                <!--<pre class='prettyprint last'>-->
<!--// Make a button for the url function-->
<!--gui.add(DAT.GUI, 'saveURL');</pre>-->
    <!--</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>DAT.GUI.showSaveString()</code> to a gui-->
        <!--object:</p>-->
                <!--<pre class='prettyprint'>var gui = new DAT.GUI();-->

<!--// Add some stuff (and pretend I change their values);-->
<!--gui.add(someObject, 'someProperty');-->
<!--gui.add(someObject, 'someOtherProperty');-->

<!--// Make a save button.-->
<!--gui.add(DAT.GUI, 'showSaveString');</pre>-->

      <!--<p>Clicking the 'showSaveString' button bring up an alert with a string.-->
        <!--Copy and paste that string into the method <code>DAT.GUI.load()</code>-->
        <!--before you instantiate any gui objects.</p>-->
            <!--<pre class='prettyprint'>-->
<!--// Replace COPIED STRING with the value you got from showSaveString()-->
<!--DAT.GUI.load('COPIED STRING');-->

<!--var gui = new DAT.GUI();-->

<!--// Now these properties will be set to the values you just saved.-->
<!--gui.add(someObject, 'someProperty');-->
<!--gui.add(someObject, 'someOtherProperty');</pre>-->

      <!--<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>-->
<!--</div>-->


<div class='collapsed'>
  <h2 class='section'>Choosing from a list of values</h2>

  <div class='collapsable'>
    <div>
<pre class='prettyprint first last'>gui.add(obj, 'propertyName').options(1, 2, 3, 5, 8);

// Alternatively, you can specify custom labels using object syntax
gui.add(obj, 'propertyName').options({'Small': 1, 'Medium': 2, 'Large': 3});
</pre>
    </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) {
   alert('You changed me to ' + newValue);
});</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) {
   alert('You just finished changing me to ' + newValue);
});</pre>
      <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() {
   alert('You called a function with dat.gui');
});</pre>
    </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>

<div class='collapsed'>
  <h2 class='section'>Advanced listening</h2>

  <div class='collapsable'>
    <div>
      <p>By default, <code>DAT.GUI</code> 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'>
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 last'>
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>
    </div>
  </div>
</div>

<div class='collapsed'>
  <h2 class='section'>Multiple panels and custom placement</h2>

  <div class='collapsable'>
    <div>
      <p>You can instantiate multiple <code>DAT.GUI</code> objects and name them
        however you'd like.</p>
                <pre class='prettyprint'>var gui1 = new DAT.GUI();
var gui2 = new DAT.GUI();

// The name function overwrites the 'Show Controls' text.
gui1.name('Utilities');
gui2.name('Camera Placement');</pre>

      <p>By default, <code>DAT.GUI</code> panels will be automatically added
        to the HTML document and fixed to the top of the screen from right to
        left. You can disable this behavior and append the gui DOM element to
        a container of your choosing.</p>
                <pre class='prettyprint last'>
// Notice this belongs to the DAT.GUI class (uppercase)
// and not an instance thereof.
DAT.GUI.autoPlace = false;

var gui = new DAT.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>
    </div>
  </div>
</div>

<div class='collapsed'>
  <h2 class='section'>Pro tips.</h2>

  <div class='collapsable'>
    <div>
      <ol id='secrets'>
        <li><code>DAT.GUI</code> panels are resizeable. Drag the open/close
          button.
        </li>

        <li>Press 'H' to show/hide GUI&apos;s.</li>
      </ol>
    </div>
  </div>
</div>

<div class='trans'>&nbsp;</div>

<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.
</footer>
</body>
</html>