DAT_GUI

for testing

by steveow

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/dat-gui/0.5/dat.gui.min.js">
</script>


<!-- script src = "https://raw.githubusercontent.com/dataarts/dat.gui/master/build/dat.gui.min.js" ></script>
-->

<input type="text" id="myTextField" value="QQQ" size = "48" />

<!--script src = "https://raw.githubusercontent.com/dataarts/dat.gui/master/build/dat.gui.min.js" ></script>

< input type="text" id="myTextField" value="QQQ" size = "48" />

CSS

body {
    background-color: #000;
    margin: 0px;
    overflow: hidden;
}

JavaScript

var  gui;		
var  fizzyTextOb;
var  gui_message;
var  gui_explode;
var  gui_ns;

F_Init();
F_Update();

//=====================================================================
function F_makeFizzyTextOb() 
{
  this.message = 'Hello from dat.gui';
  //this.speed = 0.8;
  //this.displayOutline = false;
  this.noiseStrength = 40;
  this.explode = function() { alert("You hit the explode button!!!") };
  
}//...EOF F_makeFizzyTextOb().

//=====================================================================
function F_Init()
{  
    gui = new dat.GUI();		
    fizzyTextOb = new F_makeFizzyTextOb();   
    gui_message = gui.add( fizzyTextOb, 'message');
    gui_explode = gui.add( fizzyTextOb, 'explode');
    gui_ns 		= gui.add( fizzyTextOb, 'noiseStrength', 0, 100);
    
	var field = "myTextField";
	var ddd = new Date();
	var nowTime = ddd.getTime();
	var text = "T:" + nowTime;
	var xxx = F_Update_textbox( field, text);     
    
}//... EOF F_Init.

//=====================================================================
function F_Update() 
{
  requestAnimationFrame(F_Update);
      
 	var ddd = new Date();
  var nowTime = ddd.getTime();
  fizzyTextOb.message = Math.floor(nowTime/1000);
  fizzyTextOb.noiseStrength = 50+10*Math.cos(nowTime/1000);//50+2*Math.random();//
	
 //... manual updates
 gui_message.updateDisplay();
 //gui_ns.updateDisplay();
  
  //... Iterate over all controllers
  
 for (var iii in gui.__controllers) 
  {
    gui.__controllers[iii].updateDisplay();
  }
var field = "myTextField";
var text = "T:" + nowTime;
var xxx = F_Update_textbox( field, text); 
}//...EOF F_Update.

//=====================================================================
function F_Update_textbox( field, text) //...defunct since DAT.GUI
{
		document.getElementById(field).value = text;        
}//... EOF.