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 object name when I reload a other model ?
Or it's possible to reset/clear the gui.

Answer 1

Basically, you have to set the controllers to "listen" for input when you add them, for example,

gui = new dat.GUI();
var guiX = gui.add( parameters, 'x' ).min(0).max(200).listen();

For documentation, see:

http://workshop.chromeexperiments.com/examples/gui/#9--Updating-the-Display-Automatically

For an example of this in Three.js, see:

http://stemkoski.github.io/Three.js/GUI-Controller.html

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

Wrote a function to update dat.gui dropdowns with a new set of values:

function updateDatDropdown(target, list){   
    innerHTMLStr = "";
    if(list.constructor.name == 'Array'){
        for(var i=0; i<list.length; i++){
            var str = "<option value='" + list[i] + "'>" + list[i] + "</option>";
            innerHTMLStr += str;        
        }
    }

    if(list.constructor.name == 'Object'){
        for(var key in list){
            var str = "<option value='" + list[key] + "'>" + key + "</option>";
            innerHTMLStr += str;
        }
    }
    if (innerHTMLStr != "") target.domElement.children[0].innerHTML = innerHTMLStr;
}

Usage:

myDropdown = gui.add(MyObject, 'myVariable', ['one','two','three']);
updateDatDropdown(myDropdown , ['A','B','C']);

// Also accepts named values

updateDatDropdown(myDropdown , {'A':1,'B':2,'C':3});

Answer 4

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.

Answer 5

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 6

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 7

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 8

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 9

You have to update your controller with the updateDisplay() method

gui = new dat.GUI()
//edit values
gui.updateDisplay()

See the dat.GUI API documentation: updateDisplay