Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Migrated to commonjs format #71

Closed
wants to merge 1 commit into from
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 15 additions & 3 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -1,3 +1,15 @@
.DS_Store
.sass-cache
.idea
lib-cov
*.seed
*.log
*.csv
*.dat
*.out
*.pid
*.gz

pids
logs
results

npm-debug.log
node_modules
68 changes: 33 additions & 35 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,68 +1,65 @@
#dat.GUI
# 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.

----
## Packaged Builds

##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:
```

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

----
## As commonjs module

##Using dat.GUI with require.js
Internally, dat.GUI uses [require.js](http://requirejs.org/) 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.
Install the module:

In your `head` tag, include the following code:
```
<script data-main="path/to/main" src="path/to/requirejs/require.js"></script>
npm install dat.gui
```

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

// No namespace necessary
var gui = new GUI();
``` js
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.
* src: Modular code in [require.js](http://requirejs.org/) format. Also includes css, [scss](http://sass-lang.com/), and html, some of which is included during build.
* tests: [QUnit](https://github.com/jquery/qunit) test suite.
* utils: [node.js](http://nodejs.org/) utility scripts for compiling source.

----
## Directory Contents

* build: Concatenated source code for browsers.
* src: source code in commonjs format.
* tests: [QUnit](https://github.com/jquery/qunit) test suite.

##Building your own dat.GUI
## Building your own dat.GUI

In the terminal, enter the following:

```
$ cd utils
$ node build_gui.js
npm start
```

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

_To export minified source using Closure Compiler, open `utils/build_gui.js` and set the `minify` parameter to `true`._
## Change log

----

##Change log
### Pending version number
* Moved to commonjs, made it browserify friendly.
* Back to GitHub.

###0.5
### 0.5
* 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).
Expand All @@ -81,9 +78,10 @@ _To export minified source using Closure Compiler, open `utils/build_gui.js` and

----

##Thanks
## Thanks
The following libraries / open-source projects were used in the development of dat.GUI:
* [require.js](http://requirejs.org/)

* [browserify](http://browserify.org/)
* [Sass](http://sass-lang.com/)
* [node.js](http://nodejs.org/)
* [QUnit](https://github.com/jquery/qunit) / [jquery](http://jquery.com/)
* [QUnit](https://github.com/jquery/qunit) / [jquery](http://jquery.com/)
5 changes: 3 additions & 2 deletions bower.json
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
{
"name": "dat-gui",
"version": "0.5.0",
"version": "0.5.1",
"homepage": "https://github.com/dataarts/dat.gui",
"authors": [
"Google Data Arts Team <[email protected]>"
"Google Data Arts Team <[email protected]>",
"Andrei Kashcha <[email protected]>"
],
"description": "dat.gui is a lightweight controller library for JavaScript.",
"main": "/build/dat.gui.js",
Expand Down
Loading