Merge remote branch 'jonobr1/master'

README

@@ -1,42 +0,0 @@
-# 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").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.

controllers/controller.js

@@ -5,12 +5,12 @@ var Controller = function() {
 	this.parent = null;
 	this.value = null;
 
-	this.setName = function(n) {
+	this.name = function(n) {
 	    this.propertyNameElement.innerHTML = n;
 	    return this;
 	};
 
-	this.setWatched = function() {
+	this.listen = function() {
 		this.parent.watchController(this);
 		return this;
 	};
@@ -58,7 +58,7 @@ var Controller = function() {
 
 	this.propertyNameElement = document.createElement('span');
 	this.propertyNameElement.setAttribute('class', 'guidat-propertyname');
-	this.setName(this.propertyName);
+	this.name(this.propertyName);
 	this.domElement.appendChild(this.propertyNameElement);
 
 	this.makeUnselectable(this.domElement);

demo/demo.js

@@ -101,7 +101,7 @@ function FizzyText(message) {
 	// Called once per frame, updates the animation.
     var render = function () {
 
-	that.framesRendered ++;
+	    that.framesRendered ++;
 
         g.clearRect(0, 0, width, height);
 

index.html

@@ -46,10 +46,10 @@
 			gui.add(fizzyText, "displayOutline");
 
 			// Watches a property
-			gui.add(fizzyText, "framesRendered").setWatched();
+			gui.add(fizzyText, "framesRendered").listen();
 
 			// Fires a function called "explode"
-			gui.add(fizzyText, "explode").setName("Explode!");    // Specify a custom name.
+			gui.add(fizzyText, "explode").name("Explode!");    // Specify a custom name.
 
 		};
 
@@ -94,7 +94,7 @@ window.onload = function() {
    gui.add(fizzyText, "displayOutline");
 
    // Fires a function called "explode"
-   gui.add(fizzyText, "explode").setName("Explode!"); // Specify a custom name.
+   gui.add(fizzyText, "explode").name("Explode!"); // Specify a custom name.
 
 };
 
@@ -105,7 +105,7 @@ window.onload = function() {
     		<li>The properties must be public, i.e. defined by <code><strong>this</strong>.prop = value</code>.</li>
     	</ul>
         
-        <!-- <hr/>
+        <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>
@@ -113,7 +113,7 @@ window.onload = function() {
         <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> -->
+});</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.