dat GUI folder
HTML
<script src="http://dat-gui.googlecode.com/git/build/dat.gui.js"></script>
JavaScript
var FizzyText = function(){
this.message = 'test';
this.message2 = 'pizza';
this.speed = 0.8;
this.speed2 = 0.1;
this.displayOutline = false;
this.stepvalue = 0;
this.maximum = 0;
this.explode = function(){
};
};
var text = new FizzyText();
var gui = new dat.GUI();
// creates a folder
var f1 = gui.addFolder('Folder1');
// adds a text box
gui.add(text, 'message');
// value with max and min makes a slider
gui.add(text, 'speed', -5,5);
// boolean makes a radio check box
gui.add(text, 'displayOutline');
// make button that triggers a function
gui.add(text, 'explode');
// add a gui with increment step
f1.open();
var f2 = gui.addFolder('Folder2');
gui.add(text, 'stepvalue').step(5);
// creates a number box with min and a step
//gui.add(text, 'maximum').min(0).step(0.25);
// create a drop down menu;
gui.add(text, 'message2', [ 'pizza', 'chrome', 'hooray' ] );
// adds a dropdown menu with each coresponding to a value
gui.add(text, 'speed2', { Stopped: 0, Slow: 0.1, Fast: 5 } );
f2.close();