2017-09-26 23:11:04 +00:00
# update HSVColorController, BgColorControler, NgColorController
2017-09-26 07:14:25 +00:00
* new NgColorController , fixed style of color-controller (no popup, fixed height:125px, huebar width from 15px to 20px)
2017-09-26 06:52:06 +00:00
* new BgColorController for handling two colors (i.e. foreground-background color)
2017-09-26 21:58:38 +00:00
* new HSVColorController (toggle Mode: RGB < - > HSV)
2017-09-26 06:52:06 +00:00
2017-09-26 22:01:30 +00:00
2017-09-26 22:02:48 +00:00
2017-09-26 21:59:21 +00:00
2017-09-26 06:54:47 +00:00
2017-09-26 07:14:54 +00:00
### Usage
2017-09-26 07:08:25 +00:00
* addNgColor(properties,property) for NgColorController
* addBgColor(properties,property) for BgColorController
2017-09-26 18:45:36 +00:00
* addHSVColor(properties,property) for HSVColorController
2017-09-26 07:08:25 +00:00
2017-09-26 07:22:38 +00:00
Note:
* For using BgColorController displaying a two colors, a second "property+bg" must be present. For Example:
2017-09-26 07:11:00 +00:00
`var myProps={color:#ffffff,colorbg:#000000};
2017-09-26 08:38:07 +00:00
datgui.addBgColor(myProps,color);`
2017-09-26 18:45:36 +00:00
* Changing the height for Ng/BgColorControllers can be done by adding the height field in the CSS .dg.c tag: `
2017-09-26 08:40:36 +00:00
.c {
float: left;
width: 60%;
height:125px; /*JLA*/
position: relative;
}
2017-09-26 18:45:36 +00:00
`. The height of HSVColorController is fixed internaly to 125px.
2017-09-26 08:38:07 +00:00
2017-09-26 06:52:06 +00:00
2015-08-14 23:14:05 +00:00
# dat.GUI
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
2016-09-23 21:32:52 +00:00
2013-12-18 22:24:50 +00:00
2015-08-14 23:14:05 +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:
```
2016-08-17 19:13:48 +00:00
< script type = "text/javascript" src = "dat.gui.min.js" > < / script >
2013-12-18 22:24:50 +00:00
```
2015-08-14 23:14:05 +00:00
## Directory Contents
2013-12-18 22:24:50 +00:00
2015-08-14 23:14:05 +00:00
```
├── build - Compiled source code.
├── src - Source files.
├── tests - Tests.
└── webpack - Webpack config files.
```
2013-12-18 22:24:50 +00:00
2015-08-14 23:14:05 +00:00
## Building your own dat.GUI
2013-12-18 22:24:50 +00:00
In the terminal, enter the following:
```
2016-09-23 21:41:20 +00:00
$ npm install
2015-08-14 13:24:30 +00:00
$ npm run build
2013-12-18 22:24:50 +00:00
```
2015-08-15 01:28:21 +00:00
## npm scripts
- npm run build - Build development and production version of scripts.
2016-09-23 19:42:39 +00:00
- npm run dev - Build development version of script and watch for changes.
2013-12-18 22:24:50 +00:00
2016-09-23 21:30:11 +00:00
## Working with Content Security Policy
If you're using a server with a Content Security Policy in place that blocks 'unsafe-inline', you will have problems when dat.gui.js tries to inject style information. To get around this, load 'build/dat.gui.css' as an external style sheet.
2016-09-23 21:32:52 +00:00
## Changes
View the [Change Log ](CHANGELOG.md )
2015-08-14 23:14:05 +00:00
## Thanks
2013-12-18 22:24:50 +00:00
The following libraries / open-source projects were used in the development of dat.GUI:
2016-09-23 19:42:39 +00:00
* [webpack ](https://webpack.github.io/ )
2013-12-18 22:24:50 +00:00
* [Sass ](http://sass-lang.com/ )
* [node.js ](http://nodejs.org/ )
2017-09-26 06:52:06 +00:00
* [QUnit ](https://github.com/jquery/qunit ) / [jquery ](http://jquery.com/ )
