dataarts / dat.gui Goto Github PK
View Code? Open in Web Editor NEWLightweight controller library for JavaScript.
License: Apache License 2.0
Lightweight controller library for JavaScript.
License: Apache License 2.0
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
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
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!
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--)"
It is not possible to remove a property or a folder
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.
This makes sense, however it doesn't seem to be documented and could be confusing. Possibly fire onFinishChange within onChange event?
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 ?
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);
};
Sometimes labels are not explicit enough. Allow for icons to replace or enhance them
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 )
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.
GUI constructor should include a param to pass a domElement to append guidat to.
Hi
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",
to
"main": "build/dat.gui.js",
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?
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.
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.
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?
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.
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
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.
Would it be okay to issue a pull request and add dat.GUI to jsDelivr? Thanks!
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]
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.
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");
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?
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.
You can scroll left and right if a menu is too short, generally looks and performs poorly.
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.
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.
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.
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
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.
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
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.
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.
gui.add(myObj, 'myParam', 0, 10)
works well, but var MAX=10; gui.add(myObj, 'myParam, 0, MAX)
fails to show the slider bar.
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.
What is the license of this project?
Can I use a modified version in a commercial software?
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
Hi
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 ?
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.
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?
I believe you should change slice for splice in line https://github.com/dataarts/dat.gui/blob/master/src/dat/gui/GUI.js#L547
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();
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.
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
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!
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.