Coder Social home page Coder Social 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

air avatar arodic avatar doug avatar drewlustro avatar georgealways avatar jonobr1 avatar mrdoob avatar seth-visere avatar szimek avatar

Watchers

avatar

dat-gui's Issues

how to manually update gui fields inside nested folders? 

What steps will reproduce the problem?
1. Create a gui with folders, then put gui widgets in those folders
2. read 
http://workshop.chromeexperiments.com/examples/gui/#10--Updating-the-Display-Man
ually
3. Implementing what is described there does not work

What is the expected output? What do you see instead?

The logic given at 
http://workshop.chromeexperiments.com/examples/gui/#10--Updating-the-Display-Man
ually does not handle the case of a gui using folders. It appears a workable 
solution is to manually retain any folder objects, and then implement logic 
that loops over the retained folder's __controllers in a manner as described by 
http://workshop.chromeexperiments.com/examples/gui/#10--Updating-the-Display-Man
ually.

It would be convenient if a folder exposed an updateDisplay() which operated 
upon its contents. Likewise, if the gui also exposed that, it would be very 
convenient. 

What version of the product are you using? On what operating system?

Using the latest dat.gui version, downloaded from this 
code.google.com/p/dat-gui site on June 4, 2013. Operating system I'm developing 
on is OSX 10.7.5 and Firefox 21.0.

Please provide any additional information below.

Original issue reported on code.google.com by [email protected] on 5 Jun 2013 at 8:36

Scrolling throws off color coordinates 

What steps will reproduce the problem?
1. http://workshop.chromeexperiments.com/examples/gui/#4--Color-Controllers
2. scroll down
3. try to choose a color

What is the expected output? What do you see instead?
expected to use scrolloffset in calculating

What version of the product are you using? On what operating system?
chrome 19 dev

Please provide any additional information below.

Original issue reported on code.google.com by matthewlein on 24 Mar 2012 at 3:48

Callback params 

Hi there,

Firstly - awesome job on this tool, I really love it! Secondly, this is not an 
issue, but rather a feature request.

FEATURE REQUEST:

I would like to be able to add arguments to the onChange and onFinishChange 
callback functions so that I can reduce the amount of code I need to write in 
order to manipulate my objects via 'multi-argument methods' rather than 
properties. More specifically, I have a '3D' object with 3 methods:

translate(x, y, z)
rotate(x, y, z)
scale(x, y, z)

...there is some internal logic within these methods that requires that the 
object is manipulated using them rather than modifying x, y, z, rotationX, Y, 
Z, scaleX, Y, Z directly.

Currently, I have a 'slave' object with these 9 properties on it, which I am 
passing to dat-gui and then calling the respective methods on my '3D' object 
from within the onChange callback.

It would be awesome if you could add the ability to pass additional arguments 
to the onChange and onFinishChange callbacks so that in cases like mine, more 
elegant logic could be performed inside of the callback using these arguments.

My apologies if this should have been posted somewhere else, but I am not 
familiar with the process for feature requests on Google Code.

Many thanks in advance,

Matthew Wagerfield

Original issue reported on code.google.com by [email protected] on 12 May 2012 at 7:52

height parameter in new DAT.GUI({height: 4299}) 

When doing new DAT.GUI() the widget appears to be around 300 pixels. It seems 
fixed no matter the number of field lines i add. i looked how other use it, 
they put an explicit height parameter.

how to compute the value of the height ? by trial and error ? another formula ? 
The formula which worked for me seem to be (nbLines * 32 - 1)

is it possible to have the size automatically set ?

Original issue reported on code.google.com by [email protected] on 12 Aug 2011 at 6:30

i made a wrapper for dat-gui, what do you think 

https://github.com/dmvaldman/guiGlue

it essentially lets you abstract away your parameters from the gui, so you 
never have to write things like..

gui.add(params, 'var1', .5, 0, 1).step(0.01).onChange(function(){...}) 

it would be better if these ideas were just incorporate into source :-)

Original issue reported on code.google.com by [email protected] on 19 Mar 2013 at 4:13

precision problem 

What steps will reproduce the problem?
1. you assign a negative value to a property at the beginning.
2. then no matter how you slide the toggle bar, the textfield only show integer
   part of the value.
3.

What is the expected output? What do you see instead?
I want the precision is decided by the step(0.01) function, not by the initial 
value. However, If the start value is negative for example this.x = -1.0, then 
only
one bit is displayed in the textfield. I think use step function to tell how to
display numbers is much clear then parsing initial values.

What version of the product are you using? On what operating system?
HP Computer, Windows 8

Please provide any additional information below.

I am from china, I try my best to describe the issue clearly. I hope you can
understand me. I appreciate if you can fixed the problem.

Original issue reported on code.google.com by [email protected] on 22 Apr 2014 at 3:46

Attachments:

list stay focus after select 

What steps will reproduce the problem?
1. create dat-gui list 
2. select one element 
3. move player with arrow

What is the expected output? What do you see instead?
the list stay selected and arrow key change current player .
i need to remove focus on list 

What version of the product are you using? On what operating system?


Please provide any additional information below.
http://3dflashlo.free.fr/webgl2013/spiderMove.html

Original issue reported on code.google.com by [email protected] on 19 Jun 2013 at 7:57

change radius of THREE.SphereGeometry with slider 

http://mrtn.ch/3D/13_06_27_gui_03.html

What steps will reproduce the problem?
1. move Radius slider, nothing happens

What is the expected output? What do you see instead?

Want to use dat-gui sliders to change the radius of the sphere and later also 
other properties such as segments or thetaLength...

Sphere is generated based on variables but I don't know how to update these 
variables?


What version of the product are you using? On what operating system?

http://stemkoski.github.io/Three.js/js/DAT.GUI.min.js / mac os x 10.6.8 / 
safari, chrome

Please provide any additional information below.

Can't figure out how to do it, thanks for your help.

Original issue reported on code.google.com by [email protected] on 27 Jun 2013 at 11:37

Setting step on a controller doesn't set the impliedStep 

What steps will reproduce the problem?
1. gui.add(object, 'property').step(0.01), where property is initially a larger 
number i.e. 1.5
2. Attempting to scroll the value (by dragging the mouse up and down) results 
in 0.1 steps
3. Typing in manually allows 0.05 to be specified.

What is the expected output? What do you see instead?
I expect the draggable steps to be of 0.01 e.g. 1.5 -> 1.49 -> 1.48 etc

What version of the product are you using? On what operating system?
dat-gui v0.5
Chrome Version 24.0.1312.57 m
Win 7 

Please provide any additional information below.

This seems to be based on the impliedStep set by the algorithm. I couldn't see 
a way to set the step on creation of the controller.
I believe it would be fixed by this:

        /**
         * Specify a step value that dat.controllers.NumberController
         * increments by.
         *
         * @param {Number} stepValue The step value for
         * dat.controllers.NumberController
         * @default if minimum and maximum specified increment is 1% of the
         * difference otherwise stepValue is 1
         * @returns {dat.controllers.NumberController} this
         */
        step: function(v) {
          this.__step = v;
          this.__impliedStep = v;
          this.__precision = numDecimals(v);
          return this;
        }

Original issue reported on code.google.com by [email protected] on 20 Feb 2013 at 5:48

".onFinishChange" doesn't work as intended for ".addColor" 

What steps will reproduce the problem?
1. using your example from 
http://workshop.chromeexperiments.com/examples/gui/#4--Color-Controllers
2. using say gui.addColor(text, 
'color1').onFinishChange(function(value){alert(value)}); doesn't work.
3.

What is the expected output? What do you see instead?
I would say ".onFinishChange" doesn't work as intended for .addColor

What version of the product are you using? On what operating system?
dat-gui-1bc50ffe3187
tested on Win7 (Firefox, Chrome latest).

Please provide any additional information below.

Original issue reported on code.google.com by [email protected] on 2 Jan 2013 at 9:29

One Float shows as Int, while others show and update correctly 

See http://hotblocks.nl/tests/three/dat.gui.html

As you can see by the animation, the Camera's rotation and position are 
changed. Of the 6 variables seen in the dat GUI, only the Camera's height isn't 
changed every 1/60 second.

The rotation is in rad, so is very precise and obviously a float. Two of those 
floats work as expected: as floats. If you click the document, the animation 
will stop. You can then change the rotation variables. Two of those can be 
changed to floats.

For some reason, the first will never be a float. Not if it's fetched from the 
live animation. Not when you set it manually. Not ever.

Internally, it's definitely a float though.

What's going on? I've defined the 6 variables indentically: range [-5, 5] step 
0.1

Original issue reported on code.google.com by rudiedirkx on 22 Jan 2012 at 3:41

extremely hard to get to hue field without it disappearing 

What steps will reproduce the problem?
1. hover over the color input
2. mouse over the saturation field
3. move from saturation field to hue field

What is the expected output? What do you see instead?
hue field should stay visible, allowing you to select a new hue. Instead, hue 
field and saturation field disappear.

What version of the product are you using? On what operating system? chrome 
latest


Please provide any additional information below.

Original issue reported on code.google.com by [email protected] on 25 Oct 2013 at 2:49

Fails when used in Chrome packaged app, since version 34 

What steps will reproduce the problem?
1. Run Chrome version 34 or above. (issue doesn't arise in 33)
2. Install and run a Chrome packaged app that uses dat.gui.

What is the expected output? What do you see instead?

Expected output is app loading with dat.gui UI appearing. Instead, only white 
screen appears, with Javascript console error: 

window.localStorage is not available in packaged apps. Use chrome.storage.local 
instead.
window.localStorage is not available in packaged apps. Use chrome.storage.local 
instead.
Uncaught TypeError: Cannot read property 'getItem' of undefined 
(dat.gui.min.js:59)

What version of the product are you using? On what operating system?

On Chrome 34 (Canary) on Windows 7.

Please provide any additional information below.

Original issue reported on code.google.com by [email protected] on 2 Mar 2014 at 12:58

please bring back the gui.name() feature 

What steps will reproduce the problem?
1. using gui.name() returns "is not a function"
2.
3.

What is the expected output? What do you see instead?

Apparently, an older version of dat.gui supported naming of the dat.gui, which 
is great when there are multiple dat'gui's in use.

This old documentation post explains that previous version:
https://lukeletters-datgui-alpha.googlecode.com/git-history/dbb4fa0ef0428380044e
825470e788dec1e37b86/index.html

In that version, using gui.name( 'text' ) would replace the "open controls" and 
"show controls" with the text supplied to the gui.name() function. 

What version of the product are you using? On what operating system?

"the latest available" version is being used, I got it today (6/4/2013) from 
http://dat-gui.googlecode.com/git/build/dat.gui.min.js

My serving operating system is Windows Server 2008 R3, running a 
apache/php/mysql/ja stack, and the runtime is a MacBookPro, OSX 10.7.5, Firefox 
21.0.

Please provide any additional information below.

Original issue reported on code.google.com by [email protected] on 4 Jun 2013 at 10:16

Link for archive html 

What steps will reproduce the problem?
1. I would like to create a checkbox which when enabled, open up an html 
page.Using dat.gui. 
2.
3.

What is the expected output? What do you see instead?


What version of the product are you using? On what operating system?


Please provide any additional information below.

Original issue reported on code.google.com by [email protected] on 2 Jan 2013 at 1:24

requiering fails 

What steps will reproduce the problem?
add requier to my project

What is the expected output? What do you see instead?
gui will run from source
i get public/js/text.js 404 (Not Found)

What version of the product are you using? On what operating system?
i git cloned it on osx lion

Please provide any additional information below.

Original issue reported on code.google.com by [email protected] on 14 Jan 2012 at 1:42

can not open dropdown 

What steps will reproduce the problem?
1. whatever i do i just cant open it.
2.
3.

What is the expected output? What do you see instead?


What version of the product are you using? On what operating system?


Please provide any additional information below.

Original issue reported on code.google.com by [email protected] on 10 Dec 2011 at 4:45

Color picker does not display correctly in IE9 

What steps will reproduce the problem?
1. Go to this URL in IE9: 
http://workshop.chromeexperiments.com/examples/gui/#4--Color-Controllers 
2. click on one of the color entries in dat-gui

What is the expected output? What do you see instead?
expected to see the square gradient color image and rectangular color band 
images display in the color picker. Instead neither show up in the picker. Note 
the picker still generally works, just hard to know what color you are choosing.


What version of the product are you using? On what operating system?
a very recent build of dat-gui, at most a couple days old (today is 14/11/2012)

Windows 7, IE9


Please provide any additional information below.
all other browsers are fine.

Original issue reported on code.google.com by [email protected] on 15 Nov 2012 at 6:53

Extending Array prototype is not supported 

What steps will reproduce the problem?
1. Extend the Array.prototype with a new function
2. Use any dat-gui functionality

What is the expected output? What do you see instead?

Expected: nothing different

See : Boom! ( an enumeration over an array is not expecting the new function 
added to the prototype )

What version of the product are you using? On what operating system?
Version: No idea, got it from threejs ( hint, you should put a version above 
the copyright info )

Please provide any additional information below.

If you are on masterbranch, I'll give you a beer ;)

Original issue reported on code.google.com by konijn on 1 Feb 2012 at 3:45

Allow using Object instead of property 

Problem:
No way to make gui-dat easily change jquery functions or css styles.
ie:
gui.add($("#div").css("z-index"),null);

There is no way to have a property in gui-dat if the object is a string.... But 
I might want this, and I will write my own "onchange": 

.onChange(function(v){
    $("#div").css("z-index",v);
});


The best would be to give gui-dat a property as a function to automatically 
change [like: gui.add($("#div"),css("z-index"));], but as per the above I 
changed the source code that if the property is null the get and set value are 
on the object and determining type to use object instead of property. ie:


line 2859:
dat.controllers.factory = (function (OptionController, NumberControllerBox, 
NumberControllerSlider, StringController, FunctionController, 
BooleanController, common) {
      return function(object, property) {
        var initialValue = object;
        if(property)
             initialValue = object[property];


The biggest issue here is the title uses the property name, but the other issue 
I filed would cover that anyway. Is there any likelihood this will be 
fixed/adjusted or should I try to write a simple non-reusable widget that will 
meet my needs?

Great tool and thank you.

Original issue reported on code.google.com by [email protected] on 27 Apr 2012 at 6:58

localStorage support check borks in packaged Chrome app 

What steps will reproduce the problem?
1. Create a chrome packaged app
2. Try using dat.gui
3. Observe error

What is the expected output? What do you see instead?
Expect that it will work. Instead, an error is thrown because packaged apps 
don't support window.localStorage.
"window.localStorage is not available in packaged apps. Use 
chrome.storage.local instead."

The check for local storage support is failing in this environment. Ideally, it 
will use chrome.storage.local if it is required and available.

    var SUPPORTS_LOCAL_STORAGE = ...


What version of the product are you using? On what operating system?
Used dat.gui.js from build directory in this repo. Chrome latest. MacOSX.

Original issue reported on code.google.com by [email protected] on 18 Jun 2014 at 8:30

text field: can be functions listen() + onChange() combined? 

Hi, great project!!!!!! + is it possible to have one text field that will 
listen to application input (currently with listen() function) and also on user 
input (currently onChange())? So basically one text field that can be changed 
within the application and also with user-input.

I think it would be very useful functionality...

Cheers,.
m.

Original issue reported on code.google.com by [email protected] on 9 Jan 2012 at 11:27

make a download please 

Git sucks, I had worked together on 3 projects with 3 different people who are 
expert with git. They have all demanded of me to install and learn git. I have 
put hours and hours into trying to get it work, and also none of the three 
EXPERT git users could help me with this. Please make a normal download or 
upload the source to a website so I can include it via the internet.

Original issue reported on code.google.com by [email protected] on 23 Jun 2012 at 12:08

not viewable in ie9 

What steps will reproduce the problem?
1. opened the index.html in IE9
2. dat.gui panel didn't appear

What is the expected output? What do you see instead?
Panel is missing, I expected to see the panel

What version of the product are you using? On what operating system?
Win 7, IE9

Please provide any additional information below.

Original issue reported on code.google.com by [email protected] on 21 Sep 2011 at 9:30

Saving parameters with dat.gui seems broken 

There seems to be a problem with saving parameters in the latest build of 
dat.gui.

The problem shows when clicking the gear icon which should open a popup with 
the JSON to be saved. Also saving to local storage does not work for me. Here 
are two JSFiddles:

http://jsfiddle.net/navFooh/XZcde/
With the minified library, clicking the gear throws an error in the console: 
Uncaught TypeError: Cannot read property 'forEach' of undefined dat.gui.min.js:3

http://jsfiddle.net/navFooh/8Hek6/
With the normal library, clicking the gear icon does show the popup with JSON, 
but the parameter x does not show

Original issue reported on code.google.com by [email protected] on 29 Mar 2014 at 1:57

Uncaught TypeError when saving or creating a new preset 

What steps will reproduce the problem?
1. create a new dat.gui
2. enable remember with the following function and properties:

amp: 0.5
brightness: 0.5
brightness_vary: 0.5
freq: 10
high: 0.9
hue: 0.5
hue_vary: 0.5
layers: 4
low: 0.34
sat: 0.5
sat_vary: 0.5
__proto__: Object

What is the expected output? What do you see instead?

all functionality works except when saving or creating a preset:..

when saving:

obj is undefined

Uncaught TypeError: Cannot read property 'forEach' of undefined
eachdat.gui.js:108
(anonymous function)dat.gui.js:2781
eachdat.gui.js:110
getCurrentPresetdat.gui.js:2772
common.extend.savedat.gui.js:2225
(anonymous function)

likewise when creating a new preset:

Uncaught TypeError: Cannot read property 'forEach' of undefined
eachdat.gui.js:108
(anonymous function)dat.gui.js:2781
eachdat.gui.js:110
getCurrentPresetdat.gui.js:2772
common.extend.saveAsdat.gui.js:2240
common.extend.width

What version of the product are you using? On what operating system?

Chrome 18 on OSX 10.7

Please provide any additional information below.

Original issue reported on code.google.com by [email protected] on 12 Apr 2012 at 10:54

Need Mutually Exclusive Checkbox 

I have created a jsfiddle [ http://jsfiddle.net/georgeneil/dEbRg/ ] to 
implement mutually exclusive checkbox. But it has some issues.

Step 1: When i click CheckBox2 its working as expected.

Step 2: when i click CheckBox1 its not getting checked. But on the next click 
it works.

Can someone guide me how to fix it.

Original issue reported on code.google.com by [email protected] on 23 Jul 2012 at 9:06

There is no API or documentation available online 

Well, expect for the example in the Chrome Workshop.
But lets be honest, that is just showing off how fancy dat.GUI is instead of 
providing concise documentation on the available functionality.

dat.GUI could really use decent only documentation. At least upload the 
compiled JSDoc files somewhere, so people don't have to compile it themself...

Many thanks and keep up the good work.

Original issue reported on code.google.com by [email protected] on 21 Nov 2012 at 4:07

no idea how to remove folders! 

I really have no clue how to remove a folder from the gui. After a long search 
I did find out how remove single variables (by removing the controller, odd 
enough). I figured, since the folder itself is a lot like a dat.GUI object, I 
might be able to get rid of it with the destroy() function, bu that didn't work 
either. The tutorial doesn't cover this (I find that it is very incomplete at 
most) and there is no documentation at all. I would really like to see a 
complete tutorial that really covers everything I need to know to use every 
feature or a documentation that does so (or at least a reference page of all 
the functions that are meant to be used by the programmer of the application).

Original issue reported on code.google.com by [email protected] on 10 Jul 2012 at 11:17

unwanted margin with folders and save gui 

What steps will reproduce the problem?
1. add folders
2. add 'load: JSON' to the parameters so that you have the save/new/revert bar 
on top.
3. open the folder and you'll see there is an unwanted gap between the open 
folder and the area above.

What is the expected output? What do you see instead?
the folder should react normally and open without moving.  instead the folder 
jumps down due to the margin set with ".dg.a.has-save"

What version of the product are you using? On what operating system?
OSX using chrome

Please provide any additional information below.

Original issue reported on code.google.com by [email protected] on 10 Jun 2012 at 6:14

Custom Titles 

Perhaps the ability to use a different title instead of the variable name. 
Should be simple, instead of a title being "0" because the object is an array 
etc....

What version of the product are you using? On what operating system?
0.5

Original issue reported on code.google.com by [email protected] on 20 Apr 2012 at 5:47

Dat.gui interferes with three.js first person controls 

What steps will reproduce the problem?
1. Use Three.js framework, add some camera controller to the scene
2. Add and set up dat.gui
3. Click on some dat.gui slider

What is the expected output? What do you see instead?
The slider wil set the new value.

What version of the product are you using? On what operating system?
Slider keeps following mouse and can't stop.

Please provide any additional information below.
It also happens when you try to hide the gui -- the mouse up event is not 
received, and the gui keeps resizing.

I also created relevant bug in three.js, since I don't know on which side is 
the problem. https://github.com/mrdoob/three.js/issues/983

Original issue reported on code.google.com by [email protected] on 29 Dec 2011 at 7:56

gui misbehaves when it becomes too long 

What steps will reproduce the problem?
1. make a very long dat.gui (longer than should be able to fit)
2. scroll down
3. make the gui wider

What is the expected output? What do you see instead?
What I see: the hide menu button suddenly jumps to a random spot in the gui. 
Expected output is for that not to happen

What version of the product are you using? On what operating system?
2.0 windows 7 64bit (firefox)

Original issue reported on code.google.com by [email protected] on 9 Jul 2012 at 7:46

Rendering problems with Color Controller in Chrome 

What steps will reproduce the problem?
1. open 
http://workshop.chromeexperiments.com/examples/gui/#4--Color-Controllers with 
Chrome/Chromium on osx
2.
3.

What is the expected output? What do you see instead?
The color picker is not rendered correctly and does not work. On Chromium the 
hue slider is rendered below the saturation/value box, which is not updated 
properly. See attachments.

What version of the product are you using? On what operating system?
Latest version of Chrome (25.0.1364.26 dev)  and Chromium (26.0.1380.0 (176058) 
) on osx 10.8 

Please provide any additional information below.

Rendering seems to be correct with Safari/Firefox.

test.html

<!DOCTYPE html>
<html>
<head>
  <script type="text/javascript" src="http://dat-gui.googlecode.com/git/build/dat.gui.min.js"></script>
</head>
<body>
  <script type="text/javascript">
    var MyObj = function() {
    this.x = 5;
    this.color = [0, 255, 255];
    };

    var obj = new MyObj();
    var gui = new dat.GUI();
    gui.add(obj, 'x');
    gui.addColor(obj, 'color');
  </script>
</body>
</html>

Original issue reported on code.google.com by [email protected] on 10 Jan 2013 at 11:12

Attachments:

Labels for values 

This is not actually an issue, but there is no place I could find that actually 
allowed suggestions so I posted here.

I can't seem to find a way to add a custom label to the add members, so I 
assume this is not possible (or at least used in any examples either). I use 
this to control shader uniforms and there I have to do this like this:
gui.add(WaterUniforms.shiny, 'value', -100, 100);
gui.add(WaterUniforms.spec, 'value', -5, 5);
gui.add(WaterUniforms.diff, 'value', -5, 5);
Which adds 3 controls to the GUI named "value" which is not very nice. I would 
like to do something like this:
gui.add('Reflectivity',WaterUniforms.shiny, 'value', -100, 100);
gui.add('Specularity',WaterUniforms.spec, 'value', -5, 5);
gui.add('Diffusion',WaterUniforms.diff, 'value', -5, 5);
I could of course wrap all the members inside an object and then use listeners 
to update the shader, but this suggestion would make this a lot easier.

Original issue reported on code.google.com by [email protected] on 2 Mar 2013 at 8:23

Feature request: Colour 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 colour picker.

Tom

(migrated from git hub)

Original issue reported on code.google.com by [email protected] on 17 Sep 2011 at 10:05

Initial negative numbers dragging crush 

What steps will reproduce the problem?
1. Set up an initial number negative 
2. The implied step code will get to NaN since it uses a logarithm
3. When you drag the number it will get to NaN

I solved it making the absolute number before the logarithm.

Original issue reported on code.google.com by [email protected] on 17 Jun 2013 at 1:42

Color Pickers return strings instead of the original format if I click into the value field 

What steps will reproduce the problem?
1. Open attached file in a web browser.
2. Click into the color text field of the dat GUI.
3. Click into the document's body. (Actually you can click anywhere, just make 
sure the text field loses focus.)

What is the expected output? What do you see instead?
The span in the upper left of the page should contain: {"r":255,"g":0,"b":0}
In particular it should be an RGB object.
Instead I get: "#ff0000"

This behavior contradicts the documentation:
http://workshop.chromeexperiments.com/examples/gui/#4--Color-Controllers
"dat.GUI will modify colors in the format defined by their initial value."

What version of the product are you using? On what operating system?
I am using Google Chrome on Mac OS X 10.7, but I guess this issue is platform 
independent.

Please provide any additional information below.

Original issue reported on code.google.com by [email protected] on 1 Feb 2012 at 5:22

Attachments:

Named values are strings instead of integers 

What step will reproduce the problem?
1. GUI_folder.add(object, 'property', {Value1: -1, Value2: 0, Value3: 1 } );
2. GUI_folder.add(object, 'property', [ -1, 0, 1 ] );

What is the expected output? What do you see instead?
The property should be an integer, instead it's a string.

What version of the product are you using? On what operating system?
dat.gui.js 0.5, Win7 Chrome 22

Please provide any additional information below.
I'm not a professional programmer, nor is english my first language - if I 
skipped something in the docs or if I did a mistake somewhere else, please let 
me know. Thanks.

Original issue reported on code.google.com by [email protected] on 21 Oct 2012 at 1:12

changing bounds of variable dynamically 

Not a issue, more like a feature reques.

Is it possible to update a max bound value when another variable changes?

Example:

var settings = { max: 10, totalPoints: 10 }

gui.add(settings, 'max', 0, 10);
gui.add(settings, 'totalPoints, 0, @settings.max)

So when I change the max value to 6, I wanted the same behaviour like:
gui.add(settings, 'totalPoints, 0, 6)

Original issue reported on code.google.com by [email protected] on 12 Dec 2013 at 12:37

Negative number sliders 

What steps will reproduce the problem?
A slider from -1 to 0 doesn't work. Ex: gui.add(obj,'var',-1,0,.1). Removing 
the step value doesn't affect the issue.

What is the expected output?
Negative number sliders work just as well as positive number sliders.

Original issue reported on code.google.com by [email protected] on 5 Sep 2012 at 6:29

listen() issue with checkboxes 

Hi, great project!
One issue - when using listen() with checkboxes although it updates the visual 
tick it seems to require two clicks to then toggle?

Original issue reported on code.google.com by [email protected] on 4 Jun 2013 at 12:28

incorrect vertical spacing (line height) for slider control 

What steps will reproduce the problem?
1. This minimum gui exhibits controls 3 times too tall, with empty vertical 
space between starting and ending horizontal elements:

gCgrn3.gui = new dat.GUI({ width:     340, 
                           autoPlace: false
                        });

var guiParams = function() 
        { this.correction = gCgrn3.correction; // floating point value, from global
    }
gCgrn3.guiParams = new guiParams();
gCgrn3.gui.add( gCgrn3.guiParams, 'correction', 0.7, 1.0 )
            .name('Perspective Correction')
            .step(0.01)
            .onChange(updatePerspectiveCorrection)
            .onFinishChange(updatePerspectiveCorrection);

What is the expected output? What do you see instead?

I expect to see a single horizontal GUI control with a slider. This sorta 
appears, but the left most element is in the top left of a larger box, a too 
tall box, that has the slider in the middle and the right most element (some 
sorta border element) on the lower right of this big box that is 3 times too 
tall. The fonts are normal. There's just a lot of vertical space between the 
elements.

What version of the product are you using? On what operating system?
I just copied a new version on Sunday, 12-2, and again today (12/4) from this 
site (http://code.google.com/p/dat-gui). 
The dat.gui is deployed on a Windows Server 2008 R2, under the Uniform Server 
(a WAMP configured for public internet use), and within a Drupal 6 framework, 
hosting a WebGL preview of 3D models. 

Please provide any additional information below.

The 'updatePerspectiveCorrection()' function referenced above does not modify 
the GUI. 

I'm wondering what CSS dat.gui relies upon, and why I'm unable to locate the 
CSS causing my issue; I'm using the element browser in Firefox, but can't find 
the cause.

I was using a previous version of the dat.gui, acquired nearly a year ago, and 
that version's horizontal slider worked fine, nearly the same logic. This 
version's logic is different only in the sense I made the dat.gui setup logic 
closer to the examples in the documentation.

Also, sorry, I'm unable to offer a link exhibiting the issue. (Everything else 
on the hosted site is confidential.)

Original issue reported on code.google.com by [email protected] on 5 Dec 2012 at 4:09

Attachments:

Support for menu item hiding and radio buttons 

For a web application I am creating, I required functionality for hiding and 
showing menu items within a folder. I looked through the code and couldn't find 
any implementation for this, so I ended up using the following code:

function toggleMenuItem(item, visible) {
    item.__li.style.display = visible ? "" : "none";
}

function isMenuItemVisible(item) {
    return item.__li.style.display != "none";
}

It works, but I wish it were included in the source.
In addition, there seems to be no support for radio buttons. Those would be 
nice.

Original issue reported on code.google.com by brian.clanton on 19 Jun 2012 at 3:36

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.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • 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.