dat.gui/README.md

67 lines
1.7 KiB
Markdown
Raw Permalink Normal View History

2015-08-14 23:14:05 +00:00
# dat.GUI
2022-02-17 00:48:12 +00:00
A lightweight graphical user interface for changing variables in JavaScript.
2011-04-06 19:19:12 +00:00
2021-04-19 17:01:11 +00:00
Get started with dat.GUI by reading the [API documentation](API.md).
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:
2018-09-15 04:30:51 +00:00
```html
<script type="text/javascript" src="dat.gui.min.js"></script>
2013-12-18 22:24:50 +00:00
```
2018-01-14 00:39:28 +00:00
## Installing from npm
2018-09-15 04:30:51 +00:00
```bash
2018-01-14 00:39:28 +00:00
$ npm install --save dat.gui
```
```js
2018-03-14 14:42:50 +00:00
// CommonJS:
2018-01-21 22:19:28 +00:00
const dat = require('dat.gui');
2018-03-14 14:42:50 +00:00
// ES6:
import * as dat from 'dat.gui';
2018-03-14 14:42:50 +00:00
2018-01-14 00:39:28 +00:00
const gui = new dat.GUI();
```
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.
2018-01-21 22:21:26 +00:00
└── tests - Tests.
2015-08-14 23:14:05 +00:00
```
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
2022-02-17 00:48:12 +00:00
View the [Change Log](https://github.com/dataarts/dat.gui)
2016-09-23 21:32:52 +00:00
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:
2018-01-21 22:21:26 +00:00
* [Rollup](https://rollupjs.org)
2013-12-18 22:24:50 +00:00
* [Sass](http://sass-lang.com/)
2018-01-21 22:21:26 +00:00
* [Node.js](http://nodejs.org/)
2018-01-14 00:39:28 +00:00
* [QUnit](https://github.com/jquery/qunit) / [jquery](http://jquery.com/)