<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><ahref="https://github.com/jonobr1/gui-dat/raw/versions/gui.min.js"><strong>Download the minified source</strong></a><small>[11kb]</small></li>
<li><ahref="http://github.com/jonobr1/gui-dat">Contribute on GitHub!</a></li>
<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>
<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>
<preclass="prettyprint">
var gui = new GUI();
// Add some stuff (and pretend I change their values);
gui.add(someObject, "someProperty");
gui.add(someObject, "someOtherProperty");
// Make a save button.
gui.add(GUI, "showSaveString");
</pre>
<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>
<preclass="prettyprint">
// Replace COPIED STRING with the value you got from
GUI.load("COPIED STRING");
var gui = new GUI();
// Now these properties will be set to the values you just saved.
gui.add(someObject, "someProperty");
gui.add(someObject, "someOtherProperty");
</pre>
<p><strong>Save strings won't work if you change the order in which you've added properties to your gui objects</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>
<h2>Listen for variable changes <em>outside</em> of the GUI</h2>
<divclass="collapsable">
<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>
<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>
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>
<p>You can instantiate multiple <code>GUI</code> objects and name them however you'd like.</p>
<preclass="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>
<preclass="prettyprint">
// Notice this belongs to the GUI class (uppercase)
<li><strong>gui-dat</strong> panels are resizeable. Drag the toggle button.</li>
<li>Press <strong>H</strong> to make panels invisible. Then press <strong>H</strong> to show them again.</li>
</ol>
</div>
</div>
<footer>Initiated by <ahref="http://georgemichaelbrower.com/">George Michael Brower</a> and <ahref="http://jonobr1.com/">Jono Brandel</a> of the Data Arts Team, Google Creative Lab.
