Merged with jonobr1 branch.

README

@@ -1,31 +1,42 @@
-    var controllableObject = 
+# gui-dat
-    	{	
+**gui-dat** is a lightweight controller library for JavaScript. It allows you to easily manipulate variables and fire functions on the fly.
-    		numberProperty: 20,
+## Basic Usage
-    		anotherNumberProperty: 0,
+    <script type="text/javascript" src="demo/demo.js"></script>
-    		textProperty: "a string",
+    <script type="text/javascript">
-    		booleanProperty: false,
-    		functionProperty: function() {
-    			alert("I am a function!");
-    		}
-    	};
 
     window.onload = function() {
 
-    	GUI.start();
+       var fizzyText = new FizzyText("gui-dat");
 
-    	// Creates a number box
+       GUI.start();
-    	GUI.add(controllableObject, "numberProperty");
    
-    	// Creates a slider (min, max)
+       // Text field
-    	GUI.add(controllableObject, "anotherNumberProperty", -100, 100);
+       GUI.add(fizzyText, "message");
 
-    	// Creates a text field
+       // Sliders with min and max
-    	GUI.add(controllableObject, "textProperty");
+       GUI.add(fizzyText, "maxSize", 0.5, 7);
+       GUI.add(fizzyText, "growthSpeed", 0.01, 1);
+       GUI.add(fizzyText, "speed", 0.1, 2);
    
-    	// Creates a checkbox
+       // Sliders with min, max and increment
-    	GUI.add(controllableObject, "booleanProperty");
+       GUI.add(fizzyText, "noiseStrength", 10, 100, 5);
    
-    	// Creates a button
+       // Boolean checkbox
-    	GUI.add(controllableObject, "functionProperty");
+       GUI.add(fizzyText, "displayOutline");
 
-    }
+       // Fires a function called "explode"
+       GUI.add(fizzyText, "explode").setName("Explode!"); // Specify a custom name.
+   
+    };
+
+    </script>
++   ui-dat will infer the type of the property you're trying to add (based on its initial value) and create the corresponding control.
++   The properties must be public, i.e. defined by `**this**.prop = value`.
+## Monitor variable changes <i>outside</i> of the GUI
+Let's say you have a variable that changes by itself from time to time. If you'd like the GUI to reflect those changes, use the listen() method
+    GUI.add(obj, "propName").listen();
+## Fire a function when someone uses a control
+    GUI.add(obj, "propName").onChange(function(n) {
+        alert("You changed me to " + n);
+    });
+Initiated by [George Michael Brower]:http://georgemichaelbrower.com/ and [Jono Brandel]:http://jonobr1.com/ of the Data Arts Team, Google Creative Lab.

README.md

@@ -0,0 +1,44 @@
+# gui-dat
+**gui-dat** is a lightweight controller library for JavaScript. It allows you to easily manipulate variables and fire functions on the fly.
+## Basic Usage
+    <script type="text/javascript" src="demo/demo.js"></script>
+    <script type="text/javascript">
+
+    window.onload = function() {
+
+       var fizzyText = new FizzyText("gui-dat");
+
+       GUI.start();
+   
+       // Text field
+       GUI.add(fizzyText, "message");
+
+       // Sliders with min and max
+       GUI.add(fizzyText, "maxSize", 0.5, 7);
+       GUI.add(fizzyText, "growthSpeed", 0.01, 1);
+       GUI.add(fizzyText, "speed", 0.1, 2);
+   
+       // Sliders with min, max and increment
+       GUI.add(fizzyText, "noiseStrength", 10, 100, 5);
+   
+       // Boolean checkbox
+       GUI.add(fizzyText, "displayOutline");
+
+       // Fires a function called "explode"
+       GUI.add(fizzyText, "explode").name("Explode!"); // Specify a custom name.
+   
+    };
+
+    </script>
++   ui-dat will infer the type of the property you're trying to add (based on its initial value) and create the corresponding control.
++   The properties must be public, i.e. defined by `this.prop = value`.
+
+Monitor variable changes <i>outside</i> of the GUI
+--------------------------------------------------
+Let's say you have a variable that changes by itself from time to time. If you'd like the GUI to reflect those changes, use the listen() method
+    GUI.add(obj, "propName").listen();
+## Fire a function when someone uses a control
+    GUI.add(obj, "propName").onChange(function(n) {
+        alert("You changed me to " + n);
+    });
+Initiated by [George Michael Brower](http://georgemichaelbrower.com/) and [Jono Brandel](http://jonobr1.com/) of the Data Arts Team, Google Creative Lab.

index.html

@@ -104,8 +104,20 @@ window.onload = function() {
     		<li><strong>gui-dat</strong> will infer the type of the property you're trying to add<br/>(based on its initial value) and create the corresponding control.</li>
     		<li>The properties must be public, i.e. defined by <code><strong>this</strong>.prop = value</code>.</li>
     	</ul>
+        
+        <!-- <hr/>
+        <h2>Monitor variable changes <em>outside</em> of the GUI</h2>
+        <p>Let's say you have a variable that changes by itself from time to time. If you'd like the GUI to reflect those changes, use the <code>listen()</code> method.</p>
+        <pre class="prettyprint">GUI.add(obj, "propName").listen();</pre>
+
+        <h2>Fire a function when someone uses a control</h2>
+        <pre class="prettyprint">GUI.add(obj, "propName").onChange(function(n) {
+    alert("You changed me to " + n);
+});</pre> -->
+
 		<footer> 
-            By <a href="http://georgemichaelbrower.com/">George Michael Brower</a>, <a href="http://jonobr1.com/">Jono Brandel</a>, and <a href="http://github.com/jonobr1/GUI-DAT">you</a>.
+            Initiated by <a href="http://georgemichaelbrower.com/">George Michael Brower</a> and <a href="http://jonobr1.com/">Jono Brandel</a> of the Data Arts Team, Google Creative Lab.
         </footer> 
+		</div>
     </body>
 </html>