dataarts / dat.gui Goto Github PK

View Code? Open in Web Editor NEW

7.4K 154.0 1.1K 15.29 MB

Lightweight controller library for JavaScript.

License: Apache License 2.0

JavaScript 74.67% CSS 2.33% HTML 18.20% SCSS 4.80%

dat.gui's Introduction

dat.GUI

A lightweight graphical user interface for changing variables in JavaScript.

Get started with dat.GUI by reading the API documentation.

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>

Installing from npm

$ npm install --save dat.gui

// CommonJS:
const dat = require('dat.gui');

// ES6:
import * as dat from 'dat.gui';

const gui = new dat.GUI();

Directory Contents

├── build - Compiled source code.
├── src - Source files.
└── tests - Tests.

Building your own dat.GUI

In the terminal, enter the following:

$ npm install
$ npm run build

npm scripts

npm run build - Build development and production version of scripts.
npm run dev - Build development version of script and watch for changes.

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.

Changes

View the Change Log

Thanks

The following libraries / open-source projects were used in the development of dat.GUI:

dat.gui's People

Contributors

Stargazers

Watchers

Forkers

szimek mul14 pony012 arahaya hikirsch seth-visere greenydeath lysannschlegel weiguang3100 bennyzhao surjikal daigo3 nikhel imclab sgaurav deathcap dte qsang888 alaa-eddine project-ext drewlustro michaelfba mohsenvand wellcaffeinated florentbiffi fabiomoratti aravindbe heath iyinchao ccaudill jaxry programmatio gerhobbelt genrich teybeo dionysiusmarquis brysonian alexuson hungdx haxiomic keithshep ulyssesdotcodes kevinbarabash stephaneerard greypants samdesk tessl xatpy ethereon tambien mattrudder agrawalravi95 fyoudine mohamedamjad karenpeng florentpoujol levonter nicholaswagner tobbel despairblue cule dragonbabyi anvaka mathieuanthoine crislone cantren doug fanyingying pedroha jtorresfabra jimankrom xinghul winters-song ale13jo korczis lumevo aboekhoff drhayes imgntn terryma sojs pavelhuerta lauraluo shevawen torstah mcanthony 1234- firsara vousk bianshifeng zhangweiabc hanmyohtwe adireddy pwang2 webcaetano dnahoole stevestrong andyinabox zhouningyi viktorthang

dat.gui's Issues

The listen() function is buggy

I am trying to call listen() on a SelectController, as I would like to update the list of options available based on a response from the server.

However, when I add .listen() to my controller, I get the following warning:
'webkitRequestAnimationFrame' is vendor-specific. Please use the standard 'requestAnimationFrame' instead.

The line number pointed to is dat.gui.js:2841

Looks like I will have to call updateDisplay on the controller. But, either the problem should be fixed or the listening part of the dat.gui tutorial should be removed.

This has also been posted on Stack Overflow:
http://stackoverflow.com/q/17233560/365188

Chainable API?

It would be cool if methods like like .add(), .open() etc could return this so we could chain calls like this:

gui.addFolder('thing')
  .add(thing, 'foo')
  .add(thing, 'yup')
  .open();

Cannot pass variables to min/max/step

gui.add(myObj, 'myParam', 0, 10) works well, but var MAX=10; gui.add(myObj, 'myParam, 0, MAX) fails to show the slider bar.

Boolean control unchecked

Hi, I just made something using gui-dat! It was extremely easy to add controls and I just have one really minor bug. I have a boolean that I set to true at the start just like I set the number values. The program does act like that variable is true, but the box is unchecked. It takes a couple confusing clicks before it aligns with the actual variable.

Allow images (icons)

Sometimes labels are not explicit enough. Allow for icons to replace or enhance them

No Support for Multiple Buttons

Currently have a custom list of predefined searches and the GUI always selects the last option, regardless of which button was pressed.

Example: http://codepen.io/Spedwards/pen/acd4668d03e0a7e8babc6bd749308414

Sidenote: Is there an actual API/Documentation for this project? Really hard to do anything when it's impossible to find what you need.

Method to remove property or folder missing

It is not possible to remove a property or a folder

ColorController - onFinishChange is not called

I wrote the following code and saved it as dat-test.html, where I also have a copy of dat.gui.js

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

            var Test = function() {
                this.Color = "#000000";
            } 

            test = new Test();

            function initDat() {
                var gui = new dat.GUI();
                var colorController = gui.addColor(test, "Color");

                colorController.onChange( function(value) {
                    console.log("onChange: " + value);
                });

                colorController.onFinishChange( function(value) {
                    console.log("onFinishChange: " + value);
                });
            }

        </script>
    </head>

    <body onload="initDat()">

        <div id="dat">
        </div>
    </body>
</html>

I see in my debug console that only onChange is being called for ColorController, and onFinishChange is not being called.

Allow programatic save

For example, I would like to have it save before unload the page every time, so that I can rapidly debug changes without having to save and resume settings manually.

Unfortunately, the following code doesn't work:

window.onbeforeunload = ->
  gui.save()

It gives the error:

Uncaught TypeError: Cannot read property 'selectedIndex' of undefined dat.gui.js:2854
markPresetModified dat.gui.js:2854
dat.GUI.dat.gui.GUI.common.extend.save dat.gui.js:2261
window.onbeforeunload

NumberController Step not working properly

No matter what I do, I can't get decimals to show up in a number controller. I pass in something like 106.108383382 and I always get 106 no matter what.

I've been digging through the source and can't figure out how or why the parameters for step are being lost...
var gui = new dat.GUI({autoPlace: true});
gui .add(data, 'length').step(0.25);

I have also tried making the step: (999.999, 0.999, 999.000) and nothing seems to affect how it functions at all...even though the source says it should modify precision.

However the issue seems to be in the factory:

return new NumberControllerBox(object, property, { min: arguments[2], max: arguments[3] });

Where it doesn't seem to care about any properties except for min and max.

About License

What is the license of this project?
Can I use a modified version in a commercial software?

Feature request: cancel event bubbling out of dat.GUI elements

Maybe I'm missing something, but right now I have keys being pressed to change a value in a dat.GUI causing other things to happen outside of the GUI.

Specifically, it's this that is having the issue. Right now it's okay, but when I add more things tied to keydown events, there may be a problem.

Issues with ComboBoxes ?

I have not published a sample but I get this problem for example here : http://stemkoski.github.io/Three.js/Color-Explorer.html
I have downloaded the last dat.gui.min.js from github and get the same behavior on a local page ...

When I open a ComboBox ('Material type' in this example) and pass the mouse over an item, the (blue) highlight is unstable. The highlight moves from an item to another, and stabilizes on the 3rd one when I stop moving the mouse. When I click on an item it's selected while another item is highlighted ...
I get this with FF, Chrome, Opera, Safari

With IE11 the hovered item is grey and the selected item is blue. The highlight is ok, but I can't select another item, it doesn't change ...

My system is Win7, don't you get the same thing ?

addColor doesnt work with Float32Array

Using glMatrix for vec3 and vec4, for position, rgba and rgb.
Passing a normal array to the addColor method works fine, passing a Float32Array fails.
Float32Array typeof if 'object' not 'array'.
Don't know if this type of check is being done.

var colors = {
    colorA: [255, 0, 0],
    colorB: new Float32Array( [0, 255, 0])
};

var gui = new dat.GUI();
gui.addColor(colors, 'colorA'); // works fine
gui.addColor(colors, 'colorB'); // fails.

IE9 Support

Currently gets an error on the Define Setter method:

SCRIPT438: Object doesn't support property or method '__defineSetter__' 
DAT.GUI.min.js, line 18 character 92

step is broken.

I add two GUIs like so:

var obj1 = { x: 1 };
var gui1 = new dat.GUI();
var controller1 = gui1.add(obj1, 'x', 0, 2, 0.01);
controller1.onChange(function(value) {
  console.log(value);
});

var obj2 = { y: 1 };
var gui2 = new dat.GUI();
var controller2 = gui2.add(obj2, 'y').min(0).max(2).step(0.01);
controller2.onChange(function(value) {
  console.log(value);
});

With notation 1 ("x"), dat.GUI will ignore step completely (as evidenced in the console output). With notation 2 ("y"), step will be respected for value changes, but precision in the NumberControllerBox is wrong.

I followed the path into the dat.GUI code, and I believe it's a problem with the factory which only supplies max and min values to NumberControllerSlider and NumberControllerBox and throws away step. In notation 1, step will never be seen by any controller. In notation 2, the step setter function will adjust the value for the Slider, but the change does not propagate to the Box.

I've crudely added step to the factory like so (argument[4]):

          if (common.isNumber(arguments[2]) && common.isNumber(arguments[3])) {

            // Has min and max.
            return new NumberControllerSlider(object, property, arguments[2], arguments[3], arguments[4]);

          } else {

            return new NumberControllerBox(object, property, { min: arguments[2], max: arguments[3], step: arguments[4] });

          }

This fixes the problem for notation 1 in my example (notation 2 would still need to update the Slider's display NumberControllerBox from the step setter), but I'm sure there need to be checks built around it, and I'm simply not confident enough in my ability to catch everything to submit a PR.

Perhaps you can help?

release 0.5.1 has 0.5.0 in bower.json and also missing the relative path fix

So the version in bower.json was not bumped for the 0.5.1 release which is confusing (this should be part of your build process, not a manual bump) and also does not contain the below fix to the main path, as it was obviously submitted after the release.

db4cd13#diff-0a08a7565aba4405282251491979bb6b

For task runners this main property is vital, you should do a release with the above fix included as soon as possible.

Many thanks.

is this repo newer than google code?

gui.onChange please

Currently using:

gui.onChange = function (f) {
    var i, j;
    for (i in this.__controllers) this.__controllers[i].onChange (f);
    for (i in this.__folders) for (j in this.__folders[i].__controllers) this.__folders[i].__controllers[j].onChange (f);
};

Controllers are not being removed when invoking remove function on folders

I believe you should change slice for splice in line https://github.com/dataarts/dat.gui/blob/master/src/dat/gui/GUI.js#L547

Disable label/text input for color controller

I wouldn't like to show the color string, which appears on the color controller. I checked in the ColorController.js and it seems that it will always add a input field for the purpose.

Is there any way to achieve the above?

Feature request: Color Picker

Hey guys,

I think this is a great little project you've got going on here, I think it could do with one more thing really which is a color picker.

I would love to help but I don't know that my skills are up to it.

I will give it a go however perhaps you guys could point me in the right direction.

Tom

.add( controller )

I was wondering if it would be possible to allow this approach:

gui.add( new ControllerVector2D( vector ) );

Maybe with a patch like this?

this.add = function() {

    var object = arguments[ 0 ];

    if ( object instanceof Controller ) {

        controllers.add( object );
        return;

    }

    // rest of the code that figures if object is a number, string, etc

}

This would allow people to create their own custom controllers without having to mess up with the GUI internal code.

Error in Firefox 4

On the demo page, I see the following error in the Firefox 4 Web Console:

[20:59:10.127] uncaught exception: [Exception... "Not enough arguments" nsresult: "0x80570001 (NS_ERROR_XPC_NOT_ENOUGH_ARGS)" location: "JS frame :: http://dataarts.github.com/dat.gui/src/DAT/GUI/ControllerString.js :: <TOP_LEVEL> :: line 29" data: no]

Touch Support

When I try to slide a slider on an Android tablet, it doesn't respond to my touch; if I tap the slider then the value jumps to where my tap was detected, but this is very inaccurate and stabbing at the screen is frustrating.

Perhaps http://eightmedia.github.io/hammer.js/ could help

Feature request: two handled slider/brush

Great project. One feature that I find useful is the ability to filter based on a min and max, similar to the brush on this Crossfilter demo: http://square.github.io/crossfilter/

It lets you set a range and then you can get a subset within that range. If this seems like it would make sense to add that would be great!

Roadmapping and creating min

Now that we're rapidly updating things we should probably figure out a better way to roadmap the project and versions, especially the minified stuff.

I propose we start a new branch, versions? Maybe you guys know better than I do about how to do this stuff though.

Auto wire dependencies via bower not working

I'm using grunt/gulp to automatically wire dependencies to libraries I installed through bower.
The bower.js file of dat-gui contains a foward slash which makes it bug.

In bower.json corrent:

"main": "/build/dat.gui.js",

"main": "build/dat.gui.js",

needs a license

This is a nifty looking bit of code... unfortunately, there's no license listed anywhere, so no one (except the author) can actually use it (at least in the US, where our copyright law works like that).

For reference, there's a good collection of licenses to choose from here:

http://opensource.org/licenses/category

If you want something that is well-understood and basically lets anyone do whatever they want, I'm personally fond of the MIT license. That's what jQuery uses.

If you want to ensure that changes to your code must be released under similar licensing, but you're okay with whatever kind of project people want to build with your code, go with Mozilla Public License or LGPL.

Finally, if you only want your code used by GPL licensed open source, go with the GPL.

Regardless, it's a neat looking project! Thanks for putting it out there!

Color selector layout issue

I am using the color selector, but I have seeing the following layout issue where the vertical bar is moved under the square. Is anyone else experiencing this issue?

First google result for dat.gui is the deprecated Google Code repo

https://code.google.com/p/dat-gui/ is the first google result for dat.gui.
And as seen on this page 'Google Code will be turning read-only on August 25th.'.

I would suggets to change the content of the https://code.google.com/p/dat-gui/ homepage to link to this GitHub repo.

Constructor Need

GUI constructor should include a param to pass a domElement to append guidat to.

listen() does not set value properly in checkbox

When setting a value of checkbox on the property to which it listens, the value displayed in the GUI is correct. However, on the next click the checkbox is not toggled, and the model property is not updated.

http://jsfiddle.net/zu9cZ/

Add AMD declaration in build code

I'm a bit confused as to why I can't require(['dat.gui']) on the built code, especially since you're using requirejs internally for the source.

I could submit a pull request for this if I am given direction as to what file to put this in, or how to integrate it into the build structure.

cheers

Add a slider without any object with Dat.gui?

I would like to have a shortcut for:

gui.add({zoom: 5}, 'zoom', 10, 200).name('Zoom').onChange(onChange)

something like:

gui.add(sliderType, name, min, max, onChange)

to handle the very common situations where I don't have any object to build the slider. On the opposite, I want to build new objects from the values of the sliders in my GUI.

For example, in a drawing app, the userneed to choose the parameters of the object he wants to draw/add, then he will click to add it, and finally he wants to modify it changing the sliders. This means that there is no object to build the slider, but all selected objects will be modified by the GUI on onChange events.

What is the best way to handle this?

Possible issue with options controller?

Calling the setValue function of an options controller does not modify the selected index of the drop down.
Modifying the selected index of the drop down, does not modify the initial value when you call getValue();

// Temp work around i'm doing is to just set both
var realIndex = parseInt( localStorage.getItem("lastSlot") );

var slotController = this._gui.add(this, '_currentSlot')
    .options([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10])
    .name("Save Slot");
slotController.domElement.childNodes[1].selectedIndex = realIndex;
slotController.setValue( realIndex )

Scrolling throws off Color Picker

Scrolling a page throws off the color picker widget completely.
http://codepen.io/matthewlein/pen/emJDF/
Scroll over to the right then try to pick a color.

checkForOverflow loop issues with MooTools

checkForOverflow fails when using MooTools 1.3.
This can be fixed easily by using a different for loop style than "for(var i in controllers)".
Works with both normal for loop:
"for(var i=0; i<controllers.length; i++)"
and super fast backwards while loop:
"var i=controllers.length; while(i--)"

add to jsDelivr, a contetnt delivery network

Would it be okay to issue a pull request and add dat.GUI to jsDelivr? Thanks!

Float slider fails if initial value is integer

Using release 0.5.1, I initially posted this as a comment for issue #48 but decided it should be its own issue.

Issue: Float slider (step is float) fails to display float value if initial value is integer, even tho the onChange shows the correct value. It is a display problem

This (es6, babel):
var gui = new dat.GUI()
var callback = (val) => console.log('message', val, UI)
var UI = {speed: 0}
gui.add(UI, 'speed').min(-10).max(10).step(.5).onChange(callback)
.. the console shows the .5 steps but the dat.gui display only shows integer values.

This workaround shows the correct float steps, appearing to be initialized as the 0 int value:
var UI = {speed: .5}
gui.add(UI, 'speed').min(-10).max(10).step(.5).listen().onChange(callback)
UI.speed = 0

Prior comment:
This did not completely fix it for me. If I have a float slider that starts out with an integer value, I still get this problem. Works fine if the initial value is non-integer.

Does the fix here work for everyone else? I.e. float slider that starts out with integer initial value?

I did find a work-around:

Make sure the initial value is non-integer.
Add .listen() to the property.
Then set the property to the integer value.
I.e. I start with:
var UI = {
...
x: .1, // workaround for float slider bug
y: .1,
z: .1,
...
}
gui.add(UI, 'x').min(-10).max(10).step(.1).listen().onChange(callback)
gui.add(UI, 'y').min(-10).max(10).step(.1).listen().onChange(callback)
gui.add(UI, 'z').min(-10).max(10).step(.1).listen().onChange(callback)
UI.x = UI.y = UI.z = 0

publish on npmjs.com

There's npmjs.com/dat.gui. Is that official? Or did someone go ahead and do that? If 3rd party, would be cool if you guys made it official.

onFinishChange does not fire for Booleans

This makes sense, however it doesn't seem to be documented and could be confusing. Possibly fire onFinishChange within onChange event?

More explicit field names?

Lets imagine for a second that I'm trying to control a 3d camera from the panel. So I would do this:

GUI.add( camera.position, "y", - 1000, 1000, 10 );

The problem is that in the panel the name of that property would be "y". Then, if you happen to have 2 cameras, problem arise... Maybe it could be done like this?

GUI.add( camera.position, "y", - 1000, 1000, 10 ).name("Camera Y");

Monitor Program Variables

Allow me to submit the first issue for this awesome lib ;)

I was wondering if you were planning to let the panel monitor some variables. Right now the panel let you modify variables and parameters in your application, but if the application changes those variables I can't see them being updated in the panel.

A solution could be to have an internal interval running and then maybe this syntax:

GUI.add( camera.position, "y", - 1000, 1000, 10 ).listen();

listen(), monitor(), track(), ... whichever sounds best.

Can a GUI be removed?

I know it's possible to hide a DAT.GUI instance, however is it possible to remove one?
I'm working on a level editor, where i'd like to have an DAT.GUI instance per type of game-entity, where if a different entity is selected show only that DAT.GUI instance. This way I can only show the relavent controls, as i'm already at near the threshold of visible DAT controllers

However I don't see a remove function in the source.

Perhaps a picture can explain better -

Weird stylings in FF

You can scroll left and right if a menu is too short, generally looks and performs poorly.

listenAll() is gone?

The old source had listenAll(), unlistenTo(), and various other listening features which seem much more usable than what is now present. Would it be possible to restore these?

My specific reason for asking is that I would like to be able to use the numeric entry to control variables that are being listened for -- right now, setting listen() disables numeric entry. Perhaps if the listening could be disabled when a text field is in focus, and then re-enabled when it loses focus, that would solve the problem.

Support get/set property functions

Hi, really nice project.
I have a specific need regarding values : I'm using knockout which heavily uses ko.observables :

I'd like to be able to use knockout.observables with dat.GUI :

var klass = function(){
    this.foo = ko.observable("");
    // which is simply something like :
    function(value){
          if(null == value){// getter code}
          else { // setter code}
    }
}

var dat = new dat.GUI();
var inst = new Klass();
dat.add(inst, "foo", {type: "number", validate: function(value){//specific validation code}});

Anyone want this ?

Dropdown menu

I feel like there should be something like:

var obj = {
    property: ['hello', 'goodbye]
};

gui.add(obj, "property"); // typeof array gives a dropdown menu-eque gui controller

Thoughts?

FunctionController: onFinishChange callback invoked too early

FunctionController: onFinishChange callback is invoked before the change (i.e. the function call) has taken place; all other controllers invoke onFinishChange after the value (here: the function reference) has possibly been changed.