dat.gui/README.md

88 lines
2.8 KiB
Markdown
Raw Normal View History

# UI Controller (dat.gui ported to commonjs)
2013-12-18 22:24:50 +00:00
A lightweight graphical user interface for changing variables in JavaScript.
2011-04-06 19:19:12 +00:00
2013-12-18 23:51:21 +00:00
Get started with dat.GUI by reading the tutorial at http://workshop.chromeexperiments.com/examples/gui.
2011-04-06 19:19:12 +00:00
## Packaged Builds
2013-12-18 22:24:50 +00:00
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:
``` html
2013-12-18 22:24:50 +00:00
<script type="text/javascript" src="dat.gui.min.js"></script>
```
## As commonjs module
2013-12-18 22:24:50 +00:00
Install the module:
2013-12-18 22:24:50 +00:00
```
npm install dat.gui
2013-12-18 22:24:50 +00:00
```
Use it:
2013-12-18 22:24:50 +00:00
``` js
var dat = require('dat.gui');
var obj = { x: 5 };
var gui = new dat.GUI();
2013-12-18 22:24:50 +00:00
gui.add(obj, 'x').onChange(function() {
// obj.x will now have updated value
2013-12-18 22:24:50 +00:00
});
```
## Directory Contents
* build: Concatenated source code for browsers.
* src: source code in commonjs format.
* tests: [QUnit](https://github.com/jquery/qunit) test suite.
2013-12-18 22:24:50 +00:00
## Building your own dat.GUI
2013-12-18 22:24:50 +00:00
In the terminal, enter the following:
```
npm start
2013-12-18 22:24:50 +00:00
```
This will create a browserified build of dat.GUI at `build/dat.gui.js` and its
minified version at `build/dat.gui.min.js`.
2013-12-18 22:24:50 +00:00
## Change log
2013-12-18 22:24:50 +00:00
### Pending version number
* Moved to commonjs, made it browserify friendly.
* Back to GitHub.
2013-12-18 22:24:50 +00:00
### 0.5
2013-12-18 22:24:50 +00:00
* Moved to requirejs for dependency management.
* Changed global namespace from *DAT* to *dat* (lowercase).
* Added support for color controllers. See [Color Controllers](http://workshop.chromeexperiments.com/examples/gui/#4--Color-Controllers).
* Added support for folders. See [Folders](http://workshop.chromeexperiments.com/examples/gui/#3--Folders).
* Added support for saving named presets. See [Presets](http://workshop.chromeexperiments.com/examples/gui/examples/gui/#6--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](http://workshop.chromeexperiments.com/examples/gui/#9--Custom-Placement).
* `gui.autoListen` and `gui.listenAll()` removed. See [Updating The Display Manually](http://workshop.chromeexperiments.com/examples/gui/#11--Updating-the-Display-Manually).
* `dat.GUI.load` removed. See [Saving Values](http://workshop.chromeexperiments.com/examples/gui/#5--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
2013-12-18 22:24:50 +00:00
The following libraries / open-source projects were used in the development of dat.GUI:
* [browserify](http://browserify.org/)
2013-12-18 22:24:50 +00:00
* [Sass](http://sass-lang.com/)
* [node.js](http://nodejs.org/)
* [QUnit](https://github.com/jquery/qunit) / [jquery](http://jquery.com/)