4

I'd like to hide a folder from the dat.gui's controls. By hide I mean hide, not close. I don't want to let the user see the folder name nor let him open it when hidden. I'll control the visibility of the folder programmatically based on values of other options.

For example:

var visibility = {showFolder: true, other: 1}
var gui = new dat.GUI();
var folder = gui.addFolder('Name');
folder.add(visibility, 'other');

gui.add(visibility, 'showFolder').onChange(function (val) {
    // ???
});

What should i put instead of // ??? to change the visibility of folder based on the val argument?

Does dat.gui provide this functionality? Or am I stuck with creating multiple versions of the same controls and creating a new one with the correct elements everytime I want to change the visibility of the folder?

Bakuriu
  • 98,325
  • 22
  • 197
  • 231

1 Answers1

0

I know this is a bit late, but here's what I did: I added the following code in dat.gui.js, where the methods for the gui are declared:

hide: function hide() {
    this.domElement.style.display = 'none';
},

show: function show() {
    this.domElement.style.display = '';
},

I hope this helps somebody that's looking for the same thing like I did. For example i needed to hide the folders of a gui, when I changed a parameter from the gui, here's how I used it:

controller.onChange(function(value) {
            if(value==true) guiSAO.hide();
            else guiSAO.show();
});
lightxbulb
  • 1,251
  • 12
  • 29