# dat-gui

> Browserified dat-gui library

Latest version **0.5.0** (published 2013-07-01) · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install dat-gui
pnpm add dat-gui
yarn add dat-gui
bun add dat-gui
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 0.5.0 |
| Published | 2013-07-01 |
| First published | 2013-07-01 |
| Weekly downloads | 0 |
| TypeScript types | separate (@types/dat-gui) |
| Module format | CommonJS |
| Node | >= 0.8.0 |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Data Arts Team, Google Creative Lab |
| Maintainers | shama |

## Links

- npm: https://www.npmjs.com/package/dat-gui
- Repository: https://code.google.com/p/dat-gui/
- npm.io page: https://npm.io/package/dat-gui

## Recent versions

- 0.5.0 (latest) — 2013-07-01

## README

=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 {{{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>
}}}

----

==Using dat.GUI with require.js==
Internally, dat.GUI uses [http://requirejs.org/ 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 {{{head}}} tag, include the following code:
{{{
<script data-main="path/to/main" src="path/to/requirejs/require.js"></script>
}}}

Then, in {{{path/to/main.js}}}:
{{{
require([
  'path/to/gui/module/GUI'
], function(GUI) {

  // No namespace necessary 
  var gui = new GUI();

});
}}}

----

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

----

==Building your own dat.GUI==

In the terminal, enter the following:

{{{
$ cd utils
$ node build_gui.js
}}}

This will create a namespaced, unminified build of dat.GUI at {{{build/dat.gui.js}}}

_To export minified source using Closure Compiler, open {{{utils/build_gui.js}}} and set the {{{minify}}} parameter to {{{true}}}._

----

==Change log==

===0.5===
 * Moved to requirejs for dependency management.
 * Changed global namespace from *DAT* to *dat* (lowercase).
 * Added support for color controllers. See [http://workshop.chromeexperiments.com/examples/gui/#4--Color-Controllers Color Controllers].
 * Added support for folders. See [http://workshop.chromeexperiments.com/examples/gui/#3--Folders Folders].
 * Added support for saving named presets.  See [http://workshop.chromeexperiments.com/examples/gui/examples/gui/#6--Presets 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 [http://workshop.chromeexperiments.com/examples/gui/#9--Custom-Placement Custom Placement].
 * `gui.autoListen` and `gui.listenAll()` removed. See [http://workshop.chromeexperiments.com/examples/gui/#11--Updating-the-Display-Manually Updating The Display Manually].
 * `dat.GUI.load` removed. See [http://workshop.chromeexperiments.com/examples/gui/#5--Saving-Values 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:
 * [http://requirejs.org/ require.js]
 * [http://sass-lang.com/ Sass]
 * [http://nodejs.org/ node.js]
 * [https://github.com/jquery/qunit QUnit] / [http://jquery.com/ jquery]

---
_Source: https://npm.io/package/dat-gui · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._