EzDevInfo.com

refresh dat.gui with new values

I would like to refresh the dat.gui menu with new values. I have loaded a model and display in folder the name of the objects inside a gui folder.
How can I display the new object name when I reload a other model ?
Or it's possible to reset/clear the gui.

On start change event in dat.gui

There seem to be no onStartChange event in dat.gui, is there a simple workaround?

DAT.gui - production ready alternative

i am a happy user of DAT.gui for local debugging and controls of charts that i'm working on, but i need something that has basically the same functionality

• control int or float range with a slider
• pick a color

but i need it to be bit more customizable so i can style it to match our product and eventually add new features.

Is there anything like that out there?

dat.gui custom css class

I've been trying to figure out a way to style individual panels or gui's using Dat.gui.

What is the best way to do this? I could search for panel names in the DOM then apply the style but it seems like an overly complicated solution.

Is it possible to create a button using dat.gui

I would like to create a button using dat.gui library. In a perfect world, this would work like this:

gui.add("button", "click me");

Load a file using a dat.GUI button?

I already know how to create buttons using dat.GUI (passing in functions as described in this question: Is it possible to create a button using dat.gui). I want to make a button that triggers a load file event like you would do with <input type="file" id="file" name="file" enctype="multipart/form-data" /> Is this possible?

How to delete dat.GUI element?

I found this function to remove a gui element but i think it is outdated. So far I haven't been able to find anyone else who knows how to remove any part of a gui, whether its an entire dat.GUI() or just an added element to a dat.GUI(). The first would probably be enough for what i need (just removing the dat.GUI() all together) but either one would be super helpful!

supposed to remove a dat.GUI()

gui = new dat.GUI();

...

removeGui(gui);

function removeGui(gui, parent) 
{
    if(!parent) 
    {
        parent = dat.GUI.autoPlaceContainer;
    }
    parent.removeChild(gui.domElement);
}

But gives back the error: cannot call method 'removeChild' of undefined, so i am guessing that autoPlaceContainer is wrong.

The original author of this function left these notes:

where the parameters gui represents the DAT.GUI you want to remove and parent is the parent container where if you didn't specify a domElement when instantiating DAT.GUI then you don't need to pass a parent.

Issue while using dat.GUI in a three.js example

I tried to use dat.GUI in the following three.js example.

I just did the following code changes to add a GUI to adjust mesh opacity.

var loader=new THREE.VTKLoader();
loader.load ("models/vtk/bunny.vtk", function(geom){
var mesh = new THREE.Mesh(geom, material );
mesh.doubleSided=true;
mesh.position.setY(-0.09);
scene.add( mesh );

var gui = new dat.GUI();

var view = this;
view.Opacity = 0.2;

var maingui = gui.addFolder('Main');
var opacity = maingui.add(view, 'Opacity', 0, 1);
opacity.onChange( function(value) {
    mesh.material.opacity = value;
});

maingui.open();

animate();

Now, once I click the opacity slider the mouse is just following the slider. I am not able to come out of the mouse click.

Method for disabling a button in dat.gui?

I am trying to figure out a way to easily disable/enable buttons within dat.gui.

I have dat.gui set up to control an animation. When the animation reaches its end, I want the "Play" button to become disabled. I have tried adding a "disabled" attribute to the DOM elements of the button, but I am still seeing the corresponding function fire when the button is clicked after this attribute is set.

My current method is the following:

1. Locate the li element that corresponds to the button in the dat.gui interface
2. Create a new DOM element that is semi-transparent and black, and add this inside the li element to gray out the contents of the button.
3. In the function bound to this button, check for the existence of this "disabled" DOM element within the button, and if it exists, refrain from executing the rest of the function.

This is a hack, and I would love to know if there was some method for disabling a button built right into dat.gui, or some better method that I am not aware of.

How to add datgui controls for camera in threejs?

I want to to enable dat-gui controls for the threejs camera in the basic threejs example on this page:

https://github.com/mrdoob/three.js/

var camera, scene, renderer;
var geometry, material, mesh;

init();
animate();

function init() {

    camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 );
    camera.position.z = 1000;

    scene = new THREE.Scene();

    geometry = new THREE.CubeGeometry( 200, 200, 200 );
    material = new THREE.MeshBasicMaterial( { color: 0xff0000, wireframe: true } );

    mesh = new THREE.Mesh( geometry, material );
    scene.add( mesh );

    renderer = new THREE.CanvasRenderer();
    renderer.setSize( window.innerWidth, window.innerHeight );

    document.body.appendChild( renderer.domElement );

}

function animate() {

    // note: three.js includes requestAnimationFrame shim
    requestAnimationFrame( animate );

    mesh.rotation.x += 0.01;
    mesh.rotation.y += 0.02;

    renderer.render( scene, camera );

}

I've tried the following code:

var params = {
    z: 100
}

var gui = new dat.GUI();

gui.add(params, 'z', -500,500).step(5).onChange(function(value){
        changeCameraZ(value);
    });
function changeCameraZ(value){
    camera.position.z = value;
}

which works, but it means that I have to write a new function: changeBlah();

for each three.js variable I wish to change from the GUI. Is there a better, cleaner way of achieving this?

How to get dat.gui controller type?

I have a dat.gui instance with a number of controllers. I can get a list of them with gui.__controllers, but I don't see any property on them that shows their type (dropdown, slider, color picker, etc).

Is there any way to get their type, maybe through the object?

dat.GUI user input not working

I am building a simple web application. As part of it I want to use dat.GUI since it seems to be the easiest way.

What I want to do: I am using three.js to display an object. Over this object I want some sort of GUI (currently using dat.GUI) which allows the user to input a search term and hit a button to then call a function which uses the search term.

So far, I have created a variable called search term and the added this to the GUI. This works fine and the value of the variable is displayed. The GUI is also able to listen to the variable and updates once it changes. But I am unable to modify the value. I also added a field to adjust the intensity of the a light I added to the szene in three.js. For this part of the GUI adjusting the value by dragging the bar works but trying to input a value does not.

Code looks something like this:

var searchterm = '';
...

function init(){
....
var gui = new dat.GUI();
gui.add(light, 'intensity').min(1).max(10).listen();
gui.add(this, 'searchterm').listen();

}

Any help on why I can't edit the values or suggestions for other easy to use GUIs would be appreciated.

Uncheck a checkbox in dat.gui

When I change the option of a dropdown menu, I want all the checkboxes to be unchecked. Here's the code that I put inside a function that's called when the dropdown menu changes:

var inputs = document.getElementsByTagName("input");
for(var i = 0; i < inputs.length; i++) {
        if(inputs[i].type == "checkbox") {
        inputs[i].checked = false; 
    }  
}

This does indeed uncheck the checkbox. However, to recheck the checkbox, it takes two clicks. It appears that dat.gui still thinks the checkbox is checked, so it takes one click to uncheck it, and one more to check it.

How do I make dat.gui update the checkboxes?

Edit: Here's the current state of the problem.

gui = new dat.GUI;
controllers = [];

var menu = {
    'This is an example': false,
}

controllers[0] = gui.add(menu, 'This is an example').onFinishChange(
    function(value) {console.log('example');} ).listen();

menu['This is an example'] = false;

With this code, the checkbox is unchecked, due to the .listen() call and setting the variable to false. However, it still takes two clicks for the check to show--one to "uncheck" the checkbox, and one to check it.

Saving parameters with dat.gui seems broken?

There seems to be a problem with saving parameters in dat.gui, or I'm missing something really obvious..

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 dat.gui.min.js, 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 dat.gui.js, clicking the gear icon does show the popup with JSON, but the parameter x does not show

The sample they have online works fine (see comment for link). But they have minimized all their sample code, including the lib itself. So I can't even resolve if they're even using the latest build.

Any help would be greatly appreciated.

dat.gui how to hide menu with code

I made a menu using dat.gui for my applcation with Three.js. It works fine, I have also discovered that pressing h key I can hide the menu created with dat.gui. My question is how can I make the menu appear/disappear directly from the code?

 var gui = new dat.GUI();
 gui.add(text, 'message');
 gui.add(text, 'speed', -5, 5);

 gui.???

I tried to use the property of the DOMElement hide and it works but I would like a unique way to handle this function. There is a function to call? I have noticed that JavaScript events related to the keystrokes are related to the scope via a bind in the library. But what is the correct way to do this?