Lightweight controller library for JavaScript.
Go to file
Mr.doob fe172c75fb Added updateValue method to StringController (so watched string controllers update).
Moved easing from margin-top to height. It's now showing an ugly scrollbar jump. Hmm...
2011-01-29 02:25:48 +00:00
controllers Added updateValue method to StringController (so watched string controllers update). 2011-01-29 02:25:48 +00:00
demo Hacked in a Controllers Watcher. 2011-01-29 01:23:20 +00:00
.gitignore Added gitignore for textmate project 2011-01-23 13:30:07 -08:00
gui-bare.css Added gui-bare.css and split controllers into seperate files. 2011-01-24 12:38:52 -07:00
gui.css Added updateValue method to StringController (so watched string controllers update). 2011-01-29 02:25:48 +00:00
gui.js Hacked in a Controllers Watcher. 2011-01-29 01:23:20 +00:00
gui.min.js Version 0.1 2011-01-26 19:45:34 -07:00
index.html Merged with jonobr1 branch. 2011-01-29 01:34:57 +00:00
README Merged with jonobr1 branch. 2011-01-29 01:34:57 +00:00
README.md Merged with jonobr1 branch. 2011-01-29 01:34:57 +00:00

gui-dat

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

Basic Usage

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

window.onload = function() {

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

   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>
  • ui-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.

Monitor 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();

Fire a function when someone uses a control

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

Initiated by George Michael Brower and Jono Brandel of the Data Arts Team, Google Creative Lab.