From fabc6de37c4e8930843719116521449e4ed08ff1 Mon Sep 17 00:00:00 2001
From: Jeff Nusz <jeff@custom-logic.com>
Date: Thu, 22 Sep 2016 16:39:05 -0700
Subject: [PATCH] cleaned up example.html

---
 example.html | 86 +++++++++++++++++++---------------------------------
 1 file changed, 31 insertions(+), 55 deletions(-)
diff --git a/example.html b/example.html
index 9febca1..e215343 100644
--- a/example.html
+++ b/example.html
@@ -3,83 +3,59 @@
 <head>
 </head>
 <body>
-  <script type="text/javascript" src="build/dat.gui.min.js"></script>
+  <script type="text/javascript" src="build/dat.gui.js"></script>
   <script type="text/javascript">
     var obj = {
-        example: {
-          message: 'Hello World',
-          speed: 2,
-          displayOutline: false,
-          explode: function () {
-            console.log('Bang!');
-          },
-        },
+        message: 'Hello World',
+        displayOutline: false,
 
-        noiseStrength: 10,
+        maxSize: 6.0,
+        speed: 5,
+
+        height: 10,
+        noiseStrength: 10.2,
         growthSpeed: 0.2,
-        maxSize: 6,
-        message: null,
-        speed: null,
 
-        flow: {
-            speed: 0.4,
-            noiseStrength: 10
+        type: 'chrome',
+        
+        explode: function () {
+          alert('Bang!');
         },
 
-        letters: {
-            growthSpeed: 0.2,
-            maxSize: 10,
-            message: 'folders'
-        },
-
-        colors: {
-            color0: "#ffae23", // CSS string
-            color1: [ 0, 128, 255 ], // RGB array
-            color2: [ 0, 128, 255, 0.3 ], // RGB with alpha
-            color3: { h: 350, s: 0.9, v: 0.3 } // Hue, saturation, value
-        }
+        color0: "#ffae23", // CSS string
+        color1: [ 0, 128, 255 ], // RGB array
+        color2: [ 0, 128, 255, 0.3 ], // RGB with alpha
+        color3: { h: 350, s: 0.9, v: 0.3 } // Hue, saturation, value
     };
 
     var gui = new dat.gui.GUI();
 
     gui.remember(obj);
-    gui.remember(obj.example);
-    gui.remember(obj.flow);
-    gui.remember(obj.letters);
 
-    gui.add(obj.example, 'message').onFinishChange(function(value) {
-      // Fires when a controller loses focus.
-      console.log("obj.example.message = " + value);
-    });
+    gui.add(obj, 'message');
+    gui.add(obj, 'displayOutline');
+    gui.add(obj, 'explode');
 
-    gui.add(obj.example, 'speed', -5, 5);
-    gui.add(obj.example, 'displayOutline');
-    gui.add(obj.example, 'explode');
-
-    gui.add(obj, 'noiseStrength').step(5); // Increment amount
-    gui.add(obj, 'growthSpeed', -5, 5); // Min and max
-    gui.add(obj, 'maxSize').min(0).step(0.25); // Mix and match
+    gui.add(obj, 'maxSize').min(-10).max(10).step(0.25);
+    gui.add(obj, 'height').step(5); // Increment amount
 
     // Choose from accepted values
-    gui.add(obj, 'message', [ 'pizza', 'chrome', 'hooray' ] );
+    gui.add(obj, 'type', [ 'pizza', 'chrome', 'hooray' ] );
 
     // Choose from named values
     gui.add(obj, 'speed', { Stopped: 0, Slow: 0.1, Fast: 5 } );
 
-    var f1 = gui.addFolder('Flow Field');
-    f1.add(obj.flow, 'speed');
-    f1.add(obj.flow, 'noiseStrength');
+    var f1 = gui.addFolder('Colors');
+    f1.addColor(obj, 'color0');
+    f1.addColor(obj, 'color1');
+    f1.addColor(obj, 'color2');
+    f1.addColor(obj, 'color3');
 
-    var f2 = gui.addFolder('Letters');
-    f2.add(obj.letters, 'growthSpeed');
-    f2.add(obj.letters, 'maxSize');
-    f2.add(obj.letters, 'message');
-
-    gui.addColor(obj.colors, 'color0');
-    gui.addColor(obj.colors, 'color1');
-    gui.addColor(obj.colors, 'color2');
-    gui.addColor(obj.colors, 'color3');
+    var f2 = gui.addFolder('Another Folder');
+    f2.add(obj, 'noiseStrength');
 
+    var f3 = f2.addFolder('Nested Folder');
+    f3.add(obj, 'growthSpeed');
 
   </script>
 </body>
