How do I call a function using DAT.Gui like a button?

Question

I barely know JavaScript, but I know enough to know how to make function connections, timers, CSS editing/HTML editing, and more, but I don't understand how to use this "dat.GUI", as my current project design... well.. It sucks.

All my buttons are just <a> links I used to make a minimalist design. Just look at it: codepen.io.. So I wanted to move into Dat.GUI, but I don't know how to make a GUI, as all the tutorials I have attempted usually wound up resulting in an invisible GUI (it doesn't even show up) and nothing works.

So I come here to ask if anyone has some information and possibly some examples I can work off of? In my project that I posted above, I have included the code I made so far for the dat.gui portion in the very bottom of the JavaScript.

For those who are going to post an answer with this example included: chromeexpirements DON'T. I'm not looking for this again and again, I can't figure out how to use it from that, and it doesn't really explain it in a level of detail I can understand (I'm not an inept javascripter). I also started using this example on codepen for learning: codepen.io

The amount of code I have in my project is a bit... Unsizeable to use/paste here. Here is my current code to run off of. Say I have function raintest() { intervalID = window.setInterval(myCallback, 100); } that runs a interval that runs myCallback every 100 miliseconds, which clicks a button in my screen that does something, that's not that important, but how would I run function raintest() with dat.gui and other functions?

Here's the dat.gui code I have so far and am trying to work from. So far all it does is show the close/open tab, and I don't know how to add buttons to the list:

window.onload = function() {
  var gui = new dat.GUI();
  gui.add(text, 'message').onChange(setValue);
};

Current results are empty, I don't know how to connect the JavaScript code to the dat.gui correctly. It just loads a tab for the base GUI at the moment. I actually want it to be able to open, and have all my buttons in it with all my functions, so I have my cloth customization options readily available without filling up the top of the screen 24/7.

score 3 · Accepted Answer · edited Aug 06 '19 at 16:45

Start the gui with

window.onload = function() {
  text = new sampleText();
  setValue();
  var gui = new dat.GUI();

sampleText represents your AccessPoints in the GUI.

Name1 represents your button/tab's name. Under var gui add gui.add(text, 'Name1'); This represents your first button.

This will give you access to Functions, if you wish to attach a button TO a function, first write:

var sampleText = function() {
  this.Name1 = DataType;

DataType (This represents the type of value) should be replaced with the name of your Function, and in the case of a radio button or true/false statement, you would write true or false there. (With the functions, Exclude the closing brackets, just the name (function test1 () {} > this.Name1 = test1)

If you want to create a Radio Button that calls 2 different variable codes then do this:

add this.NameOfButton = false; to the bottom of var sampleText
then add gui.add(text, 'NameOfButton').onChange(setValue); under var Gui and create a new function called

function setValue () { if(text.NameOfButton) { VariableOrSomething = 1000; } else { VariableOrSomething = 0; } }

ELSE is what is called when the radiobutton is unchecked (false), IF is what is called while its checked (true).

BY THE WAY: If you set it up Incorrectly, or don't connect its functions/code to the gui's components, it could forcefully not work. and usually ends in the gui NOT SHOWING UP. So I reccomend Placing the components like this: First place your Datatype var (var sampleText) Then, your gui (var gui) Finally, your function setValue Also I reccomend placing all this at the VERY BOTTOM of your javascript :) — Mister SirCode, Jun 11 '19 at 20:07

How do I call a function using DAT.Gui like a button?

1 Answers1