From 5f9af3d3ee03b80f71210375ed22976fae4546b8 Mon Sep 17 00:00:00 2001
From: "Mr.doob" <info@mrdoob.com>
Date: Sat, 29 Jan 2011 01:34:57 +0000
Subject: [PATCH] Merged with jonobr1 branch.

---
 README     | 59 ++++++++++++++++++++++++++++++++----------------------
 README.md  | 44 ++++++++++++++++++++++++++++++++++++++++
 index.html | 18 ++++++++++++++---
 3 files changed, 94 insertions(+), 27 deletions(-)
 create mode 100644 README.md

diff --git a/README b/README
index 426e5b2..1f8431a 100644
--- a/README
+++ b/README
@@ -1,31 +1,42 @@
-    var controllableObject = 
-    	{	
-    		numberProperty: 20,
-    		anotherNumberProperty: 0,
-    		textProperty: "a string",
-    		booleanProperty: false,
-    		functionProperty: function() {
-    			alert("I am a function!");
-    		}
-    	};
+# 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() {
 
-    	GUI.start();
+       var fizzyText = new FizzyText("gui-dat");
 
-    	// Creates a number box
-    	GUI.add(controllableObject, "numberProperty");
+       GUI.start();
+   
+       // Text field
+       GUI.add(fizzyText, "message");
 
-    	// Creates a slider (min, max)
-    	GUI.add(controllableObject, "anotherNumberProperty", -100, 100);
+       // 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");
 
-    	// Creates a text field
-    	GUI.add(controllableObject, "textProperty");
+       // Fires a function called "explode"
+       GUI.add(fizzyText, "explode").setName("Explode!"); // Specify a custom name.
+   
+    };
 
-    	// Creates a checkbox
-    	GUI.add(controllableObject, "booleanProperty");
-
-    	// Creates a button
-    	GUI.add(controllableObject, "functionProperty");
-
-    }
\ No newline at end of file
+    </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.
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..415cd25
--- /dev/null
+++ b/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.
diff --git a/index.html b/index.html
index ff4dbc8..259cc21 100644
--- a/index.html
+++ b/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>
-		<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>.
-        </footer>
+        
+        <!-- <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> 
+            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>