adding support for arrays/object using select box

docs/demo.js

@@ -12,7 +12,9 @@ function FizzyText(message) {
   this.speed = 0.4;             // how fast do particles move?
   this.displayOutline = false;  // should we draw the message as a stroke?
   this.framesRendered = 0;
-
+  this.font = 0;
+  this.allFonts = ['arial', 'times', 'courier'];
+	
   // __defineGetter__ and __defineSetter__ makes JavaScript believe that
   // we've defined a variable 'this.message'. This way, whenever we
   // change the message variable, we can call some more functions.
@@ -76,8 +78,8 @@ function FizzyText(message) {
 
   // Set g.font to the same font as the bitmap canvas, incase we
   // want to draw some outlines.
-  s.font = g.font = "800 82px helvetica, arial, sans-serif";
-
+  s.font = g.font = "800 82px " + this.allFonts[ this.font ];
+  
   // Instantiate some particles
   for (var i = 0; i < 1000; i++) {
     particles.push(new Particle(Math.random() * width, Math.random() * height));
@@ -86,7 +88,8 @@ function FizzyText(message) {
   // This function creates a bitmap of pixels based on your message
   // It's called every time we change the message property.
   var createBitmap = function (msg) {
-
+    s.font = g.font = "800 82px " + that.allFonts[ that.font ];
+    console.log('createBitmap: ', s.font);
     s.fillStyle = "#fff";
     s.fillRect(0, 0, width, height);
 
@@ -101,9 +104,11 @@ function FizzyText(message) {
 
   // Called once per frame, updates the animation.
   var render = function () {
-
     that.framesRendered ++;
 
+    s.font = g.font = "800 82px " + that.allFonts[ that.font ];
+    console.log('render: ', s.font);
+
     g.clearRect(0, 0, width, height);
 
     if (_this.displayOutline) {

index.html

@@ -21,6 +21,7 @@
   <script type='text/javascript' src='src/DAT/GUI/ControllerString.js'></script>
   <script type='text/javascript' src='src/DAT/GUI/ControllerFunction.js'></script>
   <script type='text/javascript' src='src/DAT/GUI/ControllerNumber.js'></script>
+  <script type='text/javascript' src='src/DAT/GUI/ControllerObject.js'></script>
 
   <!--Demo-->
   <link href='docs/docs.css' media='screen' rel='stylesheet' type='text/css'/>
@@ -36,7 +37,7 @@
 
       prettyPrint();
 
-      var fizzyText = new FizzyText('dat.gui');
+      window.fizzyText = new FizzyText('dat.gui');
       var gui = new DAT.GUI();
 
       // Text field
@@ -46,6 +47,7 @@
       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
+      gui.add(fizzyText, 'font', fizzyText.allFonts ); // shorthand for min/max/step
 
       // Sliders with min, max and increment.
       gui.add(fizzyText, 'noiseStrength', 10, 100, 5);

src/DAT/GUI/ControllerObject.js

@@ -0,0 +1,38 @@
+DAT.GUI.ControllerObject = function( gui, object, propertyName, options ) {
+
+  this.type = "object";
+  DAT.GUI.Controller.apply(this, arguments);
+
+  var _this = this;
+  var select = document.createElement('select');
+
+  for( var key in options ) {
+    var option = document.createElement('option');
+    option.value = key;
+    option.innerHTML = options[key];
+    select.appendChild( option );
+  }
+
+  this.setValue(this.getValue());
+
+  this.domElement.addEventListener('change', function(e) {
+    e.preventDefault();
+    _this.setValue(select.value);
+  }, false);
+
+  this.domElement.style.cursor = "pointer";
+  this.propertyNameElement.style.cursor = "pointer";
+  this.domElement.appendChild(select);
+
+  this.updateDisplay = function() {
+
+  };
+
+
+  this.setValue = function(val) {
+    val = select.value;
+    return DAT.GUI.Controller.prototype.setValue.call(this, val);
+  };
+
+};
+DAT.GUI.extendController(DAT.GUI.ControllerObject);

src/DAT/GUI/GUI.css

@@ -115,6 +115,10 @@ a.guidat-toggle:hover {
   border-left: 5px solid #e61d5f;
 }
 
+.guidat-controller.object {
+  border-left: 5px solid #f00;
+}
+
 .guidat-controller.number input[type=text] {
   width: 35px;
   margin-left: 5px;

src/DAT/GUI/GUI.js

@@ -315,7 +315,9 @@ DAT.GUI = function(parameters) {
       return;
     }
 
-    var type = typeof value;
+    var type = typeof arguments[2] === 'object'
+            ? 'object'
+            : typeof value;
     var handler = handlerTypes[type];
 
     // Do we know how to deal with this data type?
@@ -323,7 +325,7 @@ DAT.GUI = function(parameters) {
       DAT.GUI.error('Cannot create controller for data type \'' + type + '\'');
       return;
     }
-
+    
     var args = [this]; // Set first arg (parent) to this 
     for (var j = 0; j < arguments.length; j++) {
       args.push(arguments[j]);
@@ -396,7 +398,8 @@ DAT.GUI = function(parameters) {
     'number': DAT.GUI.ControllerNumber,
     'string': DAT.GUI.ControllerString,
     'boolean': DAT.GUI.ControllerBoolean,
-    'function': DAT.GUI.ControllerFunction
+    'function': DAT.GUI.ControllerFunction,
+    'object': DAT.GUI.ControllerObject
   };
 
   this.reset = function() {