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
    5 Ways that CSS and JavaScript Interact That You May Not Know About

    CSS and JavaScript:  the lines seemingly get blurred by each browser release.  They have always done a very different job but in the end they are both front-end technologies so they need do need to work closely.  We have our .js files and our .css, but...

  • By
    How I Stopped WordPress Comment Spam

    I love almost every part of being a tech blogger:  learning, preaching, bantering, researching.  The one part about blogging that I absolutely loathe:  dealing with SPAM comments.  For the past two years, my blog has registered 8,000+ SPAM comments per day.  PER DAY.  Bloating my database...

Incredible Demos

  • By
    Fx.Rotate:  Animated Element Rotation with MooTools

    I was recently perusing the MooTools Forge and I saw a neat little plugin that allows for static element rotation: Fx.Rotate. Fx.Rotate is an extension of MooTools' native Fx class and rotates the element via CSS within each A-grade browser it...

  • By
    MooTools Zebra Table Plugin

    I released my first MooTools class over a year ago. It was a really minimalistic approach to zebra tables and a great first class to write. I took some time to update and improve the class. The XHTML You may have as many tables as...

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!