dat GUI saving

GUI Saving Presets Custom Position

by Ehsan Ziya

HTML

<script src="http://dat-gui.googlecode.com/git/build/dat.gui.js"></script>


<div id='container'></div>

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.event = 0;
    this.listen = 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.close();
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();


var events = gui.add(text, 'event',0,100);
events.onChange(function(value){
console.log(value);
});
/*
event.onFinishChange(function(value){
console.log(value);
});
*/

gui.remember(FizzyText);

var container = document.getElementById('container');
// custom position
container.appendChild(gui.domElement);

var randomize = function(){
    FizzyText.listen = Math.random();
}

// adds a listener
gui.add(text,'listen',0,100).listen();

var update = function() {
  requestAnimationFrame(update);
  text.listen = Math.random() * 100;
  //console.log(FizzyText.listen);
};

update();