UI Controller (dat.gui ported to commonjs)

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.

Main differences compared to upstream repository

• This build is commonjs compatible.
• It is temporary published under exdat name on npm. I don't want to take dat.gui name, but I have very little believe that upstream repository will ever be migrated to npm. That said, I've also submitted PR upstream
• Added method to remove folder: gui.removeFolder(folderName);
• Added method to update all controllers and folders in the hierarchy: gui.update()

Packaged Builds

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

In your head tag, include the following code:

<script type="text/javascript" src="dat.gui.min.js"></script>

As commonjs module

Install the module:

npm install anvaka/dat.gui

Use it:

var dat = require('dat.gui');
var obj = { x: 5 };
var gui = new dat.GUI();

gui.add(obj, 'x').onChange(function() {
  // obj.x will now have updated value
});

Directory Contents

• build: Concatenated source code for browsers.
• src: source code in commonjs format.
• tests: QUnit test suite.

Building your own dat.GUI

In the terminal, enter the following:

npm start

This will create a browserified build of dat.GUI at build/dat.gui.js and its minified version at build/dat.gui.min.js.

Change log

Pending version number

• Moved to commonjs, made it browserify friendly.
• Back to GitHub.

0.5

• Moved to requirejs for dependency management.
• Changed global namespace from DAT to dat (lowercase).
• Added support for color controllers. See Color Controllers.
• Added support for folders. See Folders.
• Added support for saving named presets. See Presets.
• 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 Custom Placement.
• gui.autoListen and gui.listenAll() removed. See Updating The Display Manually.
• dat.GUI.load removed. See Saving Values.
• 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:

• browserify
• Sass
• node.js
• QUnit / jquery