refresh dat.gui with new values

Question

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

Answer 1

listen has a bug associated with it, if you use dropdown menus. See here: https://code.google.com/p/dat-gui/issues/detail?id=59

Here's a short function to update all controllers by iterating through all folders.

function updateDisplay(gui) {
    for (var i in gui.__controllers) {
        gui.__controllers[i].updateDisplay();
    }
    for (var f in gui.__folders) {
        updateDisplay(gui.__folders[f]);
    }
}

Answer 2

Echt Einfach's solution didn't work for me, and Stemkoski's one is a bit wide. I finally made it with the updateDisplay function:

for (var i in gui.__controllers) {
    gui.__controllers[i].updateDisplay();
}

http://workshop.chromeexperiments.com/examples/gui/#10--Updating-the-Display-Manually

Note that if you have the values in some folder folder1 the call is like this:

for (var i = 0; i < this.gui.__folders.folder1.__controllers.length; i++) {
    this.gui.__folders.folder1.controllers[i].updateDisplay();
}

If you do not want to hard-code folder1, or simply want to update all folders, you can proceed as follows:

for (var i = 0; i < Object.keys(gui.__folders).length; i++) {
    var key = Object.keys(gui.__folders)[i];
    for (var j = 0; j < gui.__folders[key].__controllers.length; j++ )
    {
        gui.__folders[key].__controllers[j].updateDisplay();
    }
}

Answer 3

My answer does not reflect your question but will be helpful for others that programmatically change values within the 3d scene and need to update the GUI controls.

When you declare:

    var cubeX = folder1.add( parameters, 'x' ).min(-100).max(100).step(1).listen();

you have declared parameters beforehand, e.g.

parameters = {
    x: 0, y: 0, z: 0
}

Now you can listen to the key events or the appropriate event and change the values in the GUI like that:

window.addEventListener('keydown', function(event) {
    if(event.keyCode == 88) { // x pressed
        parameters.x++; // GUI value changed
        cube.scale.x = parameters.x; // 3d object changed
    }
}

Answer 4

It's easy when I have read the source code of dat.gui:

https://github.com/dataarts/dat.gui/blob/master/src/dat/controllers/Controller.js#L36

As you see, this.object = object, this is a controller you add, and object is what you need to change. Here is example code:

var gui = new dat.GUI();

// init a controller
var controller = gui.add(object, 'property');

// update a controller
controller.object = newObject;

Answer 5

None of above answers worked for me. I simply recreated DAT GUI and it worked.

I will not recommend it but if nothing works and you don't wanna spend more time in this then simply delete current DAT GUI:

this.gui.destroy()

And then recreate DAT GUI with parameters.

Answer 6

Lee Stemkoski's and Echt Einfach's solutions use the .listen() method on a selected controller in the GUI.

jmmut's solution ,using .updateDisplay(), loops through ALL of the controllers in the GUI

It strikes me that both these solution types are EXPENSIVE if you only want to manually update the value of a single controller at a particular time.

You can avoid this by using the method .updateDisplay() for a SINGLE controller.

One way to do this is if you know beforehand the index[i] of the single controller. But this is rather fiddly to implement.

A better way is to reference the particular controller by name

// AT INITIALISATION TIME
gui1 = new dat.GUI();
Gparameters = { x: 0, y: 0, z: 0}
var gui1_X = gui1.add( Gparameters, 'x' ).min(0).max(200); // note no need to use the method .listen()

// AT RUN TIME
Gparameters.x++;
gui1_X.updateDisplay()  

Note: I have not included the extra code required to make this work with controllers inside folders. You can get this from the other answers.