Skip to content
JavaScript
Find file
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.
build
src/dat
tests
utils
.gitignore
example.html
readme.wiki

readme.wiki

Table of Contents

dat.GUI

A lightweight graphical user interface for changing variables in JavaScript.

Get started with dat.GUI by reading the tutorial at http://workshop.chromeexperiments.com/examples/gui.


Packaged Builds

The easiest way to use dat.GUI in your code is by using the built source at . These built JavaScript files bundle all the necessary dependencies to run dat.GUI.

In your tag, include the following code:


Using dat.GUI with require.js

Internally, dat.GUI uses require.js to handle dependency management. If you're making changes to the source and want to see the effects of your changes without building, use require js.

In your tag, include the following code:

Then, in :


Directory Contents

 * build: Concatenated source code.
 * src: Modular code in <a href="http://requirejs.org/" target="_blank">require.js</a> format. Also includes css, <a href="http://sass-lang.com/" target="_blank">scss</a>, and html, some of which is included during build.
 * tests: <a href="https://github.com/jquery/qunit" target="_blank">QUnit</a> test suite.
 * utils: <a href="http://nodejs.org/" target="_blank">node.js</a> utility scripts for compiling source.


Building your own dat.GUI

In the terminal, enter the following:

This will create a namespaced, unminified build of dat.GUI at

_To export minified source using Closure Compiler, open and set the parameter to ._


Change log

0.5

 * Moved to requirejs for dependency management.
 * Changed global namespace from *DAT* to *dat* (lowercase).
 * Added support for color controllers. See <a href="http://workshop.chromeexperiments.com/examples/gui/#4--Color-Controllers" target="_blank">Color Controllers</a>.
 * Added support for folders. See <a href="http://workshop.chromeexperiments.com/examples/gui/#3--Folders" target="_blank">Folders</a>.
 * Added support for saving named presets.  See <a href="http://workshop.chromeexperiments.com/examples/gui/examples/gui/#6--Presets" target="_blank">Presets</a>.
 * Removed `height` parameter from GUI constructor. Scrollbar automatically induced when window is too short.
 * `dat.GUI.autoPlace` parameter removed. Use `new dat.GUI( { autoPlace: false } )`. See <a href="http://workshop.chromeexperiments.com/examples/gui/#9--Custom-Placement" target="_blank">Custom Placement</a>.
 * `gui.autoListen` and `gui.listenAll()` removed. See <a href="http://workshop.chromeexperiments.com/examples/gui/#11--Updating-the-Display-Manually" target="_blank">Updating The Display Manually</a>.
 * `dat.GUI.load` removed. See <a href="http://workshop.chromeexperiments.com/examples/gui/#5--Saving-Values" target="_blank">Saving Values</a>.
 * Made Controller code completely agnostic of GUI. Controllers can easily be created independent of a GUI panel.

0.4

 * Migrated from GitHub to Google Code.


Thanks

The following libraries / open-source projects were used in the development of dat.GUI:

 * <a href="http://requirejs.org/" target="_blank">require.js</a>
 * <a href="http://sass-lang.com/" target="_blank">Sass</a>
 * <a href="http://nodejs.org/" target="_blank">node.js</a>
 * <a href="https://github.com/jquery/qunit" target="_blank">QUnit</a> / <a href="http://jquery.com/" target="_blank">jquery</a>

Something went wrong with that request. Please try again.