Git Product home page Git Product logo

dat.gui's Introduction

#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 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 require.js format. Also includes css, scss, and html, some of which is included during build.
  • tests: QUnit test suite.
  • utils: 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 Color Controllers.
  • Added support for folders. See Folders.
  • Added support for saving named presets. See 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.
  • gui.autoListen and gui.listenAll() removed. See Updating The Display Manually.
  • dat.GUI.load removed. See 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:

dat.gui's People

Contributors

jonobr1 avatar gmb0119 avatar doug avatar mrdoob avatar szimek avatar seth-visere avatar arahaya avatar arodic avatar air avatar drewlustro avatar georgealways avatar k4b7 avatar teybeo avatar ulyssesdotcodes avatar

Watchers

avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.