dat.gui: Exceptional JavaScript Interface Controller

By  on  

dat.gui JavaScript

We all love trusted JavaScript frameworks like MooTools, jQuery, and Dojo, but there's a big push toward using focused micro-frameworks for smaller purposes. Of course, there are positives and negatives to using them.  Positives include smaller JS footprint (especially good for mobile) and less cruft, negatives being that they don't have the community behind them to drive growth and the developer that uses multiple micro-frameworks has to work with inconsistent APIs.  To each their own;  I don't have a strong feeling either way, as it depends on the project.

One nice resource I recently stumbled upon is dat.gui. dat.gui advertises itself as a lightweight controller library that allows you to easily manipulate variables and fire functions on the fly.   That's a pretty general statement but dat.gui appears to be a very general framework.  The premise is object and property management within a GUI panel.  Let's take a look at how dat.gui can be used.

dat.gui's niche is in listening to and controlling data such that it can be visualized into charts or other graphics.  Creating a new DAT.GUI instance provides a new sliding pane for which to add controls to:

// Create an instance, which also creates a UI pane
var gui = new DAT.GUI();

With the pane ready, new controls can be added.  Fields can be of type string, number, boolean, or function, with a number slider available depending on options passed to it.  Here's how you can create a field of each type:


// My sample abject
var obj = {
	name: "David Walsh",
	num: 23,
	winner: true
};

// String field
gui.add(obj, "name");

// Number field with slider
gui.add(obj, "num").min(1).max(50).step(1);

// Checkbox field
gui.add(obj, "winner");

Since properties are changed directly on the object itself, there's not "setter" and so dat.gui provides a listen function to do just that -- list for changes:

// Listen to changes within the GUI
gui.add(obj, "name").onChange(function(newValue) {
	console.log("Value changed to:  ", newValue);
});

// Listen to changes outside the GUI - GUI will update when changed from outside
gui.add(obj, "name").listen();

Those are the dead basics of the dat.gui library.  Note that I've not yet mentioned what the result looks like.  That's because it's up to you to create the visual aspects based on property values.  The demo that ships with dat.gui is a very creative dot-based constant animation.  The animation magic lies within the FizzyText function.  FizzyText is a more sizable function that does the animation, but let's take a look at the dat.gui code:

var fizzyText = new FizzyText("david walsh");
var gui = new DAT.GUI();

// Text field
gui.add(fizzyText, "message");

// Sliders with min + max
gui.add(fizzyText, "maxSize").min(0.5).max(7);
gui.add(fizzyText, "growthSpeed").min(0.01).max(1).step(0.05);
gui.add(fizzyText, "speed", 0.1, 2, 0.05); // shorthand for min/max/step

// Sliders with min, max and increment.
gui.add(fizzyText, "noiseStrength", 10, 100, 5);

// Boolean checkbox
gui.add(fizzyText, "displayOutline");

Tinker with the pane fields and the animation instantly changes!

JavaScript, more than any other language, seems to provide the most ability to make powerful changes with very little code.  dat.gui is proof of that.  The demo provided here is the same demo provided within the dat.gui repository, mostly because topping the effect would be a hell of a feat.  When you get a few moments, go play around with dat.gui -- it's really ... dat ... good.

Recent Features

  • By
    Welcome to My New Office

    My first professional web development was at a small print shop where I sat in a windowless cubical all day. I suffered that boxed in environment for almost five years before I was able to find a remote job where I worked from home. The first...

  • By
    9 Mind-Blowing WebGL Demos

    As much as developers now loathe Flash, we're still playing a bit of catch up to natively duplicate the animation capabilities that Adobe's old technology provided us.  Of course we have canvas, an awesome technology, one which I highlighted 9 mind-blowing demos.  Another technology available...

Incredible Demos

  • By
    Use Elements as Background Images with -moz-element

    We all know that each browser vendor takes the liberty of implementing their own CSS and JavaScript features, and I'm thankful for that. Mozilla and WebKit have come out with some interesting proprietary CSS properties, and since we all know that cementing standards...

  • By
    Build a Calendar Using PHP, XHTML, and CSS

    One of the website features my customers love to provider their web users is an online dynamic calendar. An online calendar can be used for events, upcoming product specials, memos, and anything else you can think of. I've taken some time to completely...

Discussion

  1. Andy

    Hello sir,
    I am completely new to WebGL.I used the first example on the chrome experiment website on dat.gui, and I copied the exact same code on my IDE. The only thing I got was the panel and not the animating text. I noticed that in the FizzyText function, it requires rendering logic. Could you help me with the issue? Thanks in advance.

  2. MacK

    Just a small note for the late readers here, the namespace changed to lowercase since 0.5, so when instantiating use

    var gui = new dat.GUI();

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!