Is it possible to create a button using dat.gui

Question

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");

score 62 · Accepted Answer · edited Sep 18 '15 at 04:23

62

This creates a button with text left aligned.

var obj = { add:function(){ console.log("clicked") }};

gui.add(obj,'add');

edited Sep 18 '15 at 04:23

kerl

270
1
3
17

answered Aug 22 '13 at 12:46

Lonelydatum

1,148
1
13
26

9

Have you found this documented anywhere? – Michael Paulukonis Apr 03 '14 at 13:18
1

Is there a way to add multiple words to the button label? – nils Nov 23 '16 at 13:10
5

@nils yes, `gui.add(obj, 'add').name('Custom Label');` – mwcz Mar 25 '17 at 21:19

score 30 · Answer 2 · answered Apr 10 '14 at 05:42

FWIW, dat.gui assumes the GUI type based on the target's initial value type.

boolean => checkbox
int/float => slider
string => text input
function => button

Examples can be found here: http://workshop.chromeexperiments.com/examples/gui/#1--Basic-Usage

score 0 · Answer 3 · answered Jan 16 '23 at 23:07

The chrome experiments example link above is no longer live, but there's a great fiddle; forked and added the button example from Loneydatum's answer.

https://jsfiddle.net/SeanB/qpwsnuxd/3/

var object4 = { add:function(){ alert("clicked") }};
gui.add(object4,'add');
// original fiddle https://jsfiddle.net/ikatyang/182ztwao/

Is it possible to create a button using dat.gui

3 Answers3

Linked