gui-dat is a lightweight controller library for JavaScript. It allows you to easily manipulate variables and fire functions on the fly.

• Download the minified source [9.8kb]
• Contribute on GitHub!

Basic Usage

<script type="text/javascript" src="demo/demo.js"></script>
<script type="text/javascript">

window.onload = function() {

   var fizzyText = new FizzyText("gui-dat");

   var gui = new GUI();
   gui.start();
   
   // Text field
   gui.add(fizzyText, "message");

   // Sliders with min and max
   gui.add(fizzyText, "maxSize", 0.5, 7);
   gui.add(fizzyText, "growthSpeed", 0.01, 1);
   gui.add(fizzyText, "speed", 0.1, 2);
   
   // Sliders with min, max and increment
   gui.add(fizzyText, "noiseStrength", 10, 100, 5);
   
   // Boolean checkbox
   gui.add(fizzyText, "displayOutline");

   // Fires a function called "explode"
   gui.add(fizzyText, "explode").name("Explode!"); // Specify a custom name.
   
};

</script>

• gui-dat will infer the type of the property you're trying to add
  (based on its initial value) and create the corresponding control.
• The properties must be public, i.e. defined by this.prop = value.

---

Fire a function when someone uses a control

gui.add(obj, "propName").onChange(function(n) {
	alert("You changed me to " + n);
});

---

Listen for variable changes outside of the GUI

Let's say you have a variable that changes by itself from time to time. If you'd like the GUI to reflect those changes, use the listen() method.

gui.add(obj, "propName").listen();

---

Advanced listening

By default, gui-dat will create an internal interval that checks for changes in the values you've marked with listen(). If you'd like to check for these changes in an interval of your own definition, use the following:

gui.autoListen = false; // disables internal interval
gui.add(obj, "propName").listen();

// Make your own loop
setInterval(function() {
	gui.listen(); // updates values you've marked with listen()
}, 1000 / 60);

Alternatively, you can forego calling listen() on individual controllers, and instead choose to monitor changes in all values controlled by your gui.

gui.autoListen = false; // disables internal interval
gui.add(obj, "add");
gui.add(obj, "lotsa");
gui.add(obj, "properties");

// Make your own loop
setInterval(function() {
	gui.listenAll(); // updates ALL values managed by this gui
}, 1000 / 60);