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

  • By
    7 Essential JavaScript Functions

    I remember the early days of JavaScript where you needed a simple function for just about everything because the browser vendors implemented features differently, and not just edge features, basic features, like addEventListener and attachEvent.  Times have changed but there are still a few functions each developer should...

Incredible Demos

  • By
    Create Custom Events in MooTools 1.2

    Javascript has a number of native events like "mouseover," "mouseout", "click", and so on. What if you want to create your own events though? Creating events using MooTools is as easy as it gets. The MooTools JavaScript What's great about creating custom events in MooTools is...

  • By
    Create a Twitter AJAX Button with MooTools, jQuery, or Dojo

    There's nothing like a subtle, slick website widget that effectively uses CSS and JavaScript to enhance the user experience.  Of course widgets like that take many hours to perfect, but it doesn't take long for that effort to be rewarded with above-average user retention and...

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!