dat.gui how to hide menu with code

Question

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?

Qiau · Answer 1 · 2013-08-20T05:48:16.557

13

I hade the same issue and solved it by:

var gui = new dat.GUI();
dat.GUI.toggleHide();

edited Aug 20 '13 at 05:48

answered Aug 20 '13 at 05:27

Qiau

5,976
3
29
40

8

there's also `gui.close()` – dpren Jul 09 '15 at 17:17
1

@CompanyLaser But gui.close() scrolls the controls up whereas `dat.GUI.toggleHide()` actually hides them (by setting zIndex way negative). You can only hide all of the GUIs at once through the API, not individually. And you can’t assert them to be shown or hidden unless you keep track of the last state. – binki Mar 19 '16 at 17:20

score 2 · Answer 2 · answered Oct 15 '16 at 16:40

2

You can try

var gui = new dat.GUI();
 //... your logic here
gui.__proto__.constructor.toggleHide()

answered Oct 15 '16 at 16:40

malekcellier

177
3
10

score 2 · Answer 3 · answered Mar 12 '18 at 11:47

2

As of latest version:

gui.close();

answered Mar 12 '18 at 11:47

biojazzard

563
4
8

`gui.close()` doesn't hide completely the GUI. It just close it. Using `GUI.toggleHide()` will do the job! (ref to the @Qiau answer). – Jérémie Boulay Feb 05 '20 at 16:25

score 1 · Answer 4 · answered Sep 19 '16 at 17:06

What you and I were looking for is

var gui = new dat.GUI();
// to toggle it closed
gui.closed = true;
// to toggle it open again
gui.closed = false;

I got this from the source at line 2104 where the internal functions open and close are doing exactly this.

The gui reacts to the value change on the fly (you can reassign gui.closed from the console to see it in action).

Anurag Srivastava · Answer 5 · 2022-07-17T07:59:43.853

1

Its 2022, and in dat.gui version ^0.7.9, one can use functions .hide() and .show():

const gui = new dat.GUI();
gui.hide(); // Hide completely
gui.show(); // Show

const gui = new dat.GUI()
let idx = 0

gui.add({ variable1: true }, 'variable1')

setInterval(() => {
  idx++%2 ? gui.show() : gui.hide()
}, 2000)

<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.9/dat.gui.min.js"></script>

edited Jul 17 '22 at 07:59

answered Jul 03 '22 at 17:07

Anurag Srivastava

14,077
4
33
43

score 0 · Answer 6 · answered Apr 06 '13 at 12:49

Ok found a solution by adding the following function to the prototype of dat.GUI:

  dat.GUI.prototype.removeFolder = function(name) {
    var folder = this.__folders[name];
    if (!folder) {
      return;
    }
    folder.close();
    this.__ul.removeChild(folder.domElement.parentNode);
    delete this.__folders[name];
    this.onResize();
  }

score 0 · Answer 7 · answered Jul 29 '15 at 08:14

0

I'd recommend:

$(gui.domElement).attr("hidden", true);

as it also prevents clicking. With toggleHide() it's possible to still click it. Just closing it leaves the opportunity to re-open.

Worked for me as I don't want the user to re-open it ;)

answered Jul 29 '15 at 08:14

Zeno

11

score -1 · Answer 8 · answered Feb 14 '15 at 03:27

-1

You can toggle the 'closed' class on the first ul tag within the gui domElement.

Here's how to do it if you are using JQuery:

var gui = new dat.GUI();
$(gui.domElement).find(">ul").toggleClass("closed");

answered Feb 14 '15 at 03:27

Darren Hicks

4,946
1
32
35

dat.gui how to hide menu with code

8 Answers8

Linked