From 720080bce5651f6a76399ae0ee5ee30dbde44733 Mon Sep 17 00:00:00 2001 From: jonobr1 Date: Fri, 28 Jan 2011 17:04:12 -0700 Subject: [PATCH 1/8] updated README to reflect our demo and reference the documentation --- README | 59 ++++++++++++++++++++++++++++++++---------------------- index.html | 20 +++++++++--------- 2 files changed, 45 insertions(+), 34 deletions(-) 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 + + ++ 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 outside 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 dffb602..0c4a9cf 100644 --- a/index.html +++ b/index.html @@ -97,17 +97,17 @@ window.onload = function() {
  • gui-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.
    • - -

    Fire a function when someone uses a control

    - 
    GUI.add(obj, "propName").onChange(function(n) {
-	alert("You changed me to " + n);
-});
    ---> From 760f5101e42a242566d7fd2f19fd2fdb38ae4dc7 Mon Sep 17 00:00:00 2001 From: jonobr1 Date: Fri, 28 Jan 2011 17:15:50 -0700 Subject: [PATCH 2/8] added suffix to README --- README.md | 42 ++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 42 insertions(+) create mode 100644 README.md diff --git a/README.md b/README.md new file mode 100644 index 0000000..2952c1a --- /dev/null +++ b/README.md @@ -0,0 +1,42 @@ +# 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 + + ++ 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 outside 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. From d0ae26b62fe50486442988cefed92b564c1ad10f Mon Sep 17 00:00:00 2001 From: jonobr1 Date: Fri, 28 Jan 2011 17:18:34 -0700 Subject: [PATCH 3/8] changing README styles --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 2952c1a..1ce5d31 100644 --- a/README.md +++ b/README.md @@ -32,6 +32,7 @@ + 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 outside 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(); From 8d3f8c0dd90bed6c51b73b1ffc1c7c8e554161bc Mon Sep 17 00:00:00 2001 From: jonobr1 Date: Fri, 28 Jan 2011 17:20:51 -0700 Subject: [PATCH 4/8] changing README styles --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 1ce5d31..f2e812d 100644 --- a/README.md +++ b/README.md @@ -31,9 +31,9 @@ + 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`. ++ The properties must be public, i.e. defined by `this.prop = value`. -## Monitor variable changes outside of the GUI +\#\# Monitor variable changes outside 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 From 5e066f4477abca8b90f7ad36f5c11409f277323f Mon Sep 17 00:00:00 2001 From: jonobr1 Date: Fri, 28 Jan 2011 17:21:55 -0700 Subject: [PATCH 5/8] changing README styles --- README.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index f2e812d..1ae0348 100644 --- a/README.md +++ b/README.md @@ -33,7 +33,8 @@ + 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 outside of the GUI +Monitor variable changes outside 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 From 3f9103b432ae5ac0e7ff58c2c5a1fbd42530386c Mon Sep 17 00:00:00 2001 From: jonobr1 Date: Fri, 28 Jan 2011 17:22:27 -0700 Subject: [PATCH 6/8] changing README styles --- README.md | 1 - 1 file changed, 1 deletion(-) diff --git a/README.md b/README.md index 1ae0348..912f4fd 100644 --- a/README.md +++ b/README.md @@ -32,7 +32,6 @@ + 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 outside 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 From d078d4acea3ccea710d48c3d225adabef395a71a Mon Sep 17 00:00:00 2001 From: jonobr1 Date: Fri, 28 Jan 2011 17:23:05 -0700 Subject: [PATCH 7/8] changing README styles --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 912f4fd..1ae0348 100644 --- a/README.md +++ b/README.md @@ -32,6 +32,7 @@ + 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 outside 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 From 3785bcd7c64bc988cbc0a5f7e0b0650ef102502d Mon Sep 17 00:00:00 2001 From: jonobr1 Date: Fri, 28 Jan 2011 17:23:59 -0700 Subject: [PATCH 8/8] changing README styles --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 1ae0348..415cd25 100644 --- a/README.md +++ b/README.md @@ -41,4 +41,4 @@ Let's say you have a variable that changes by itself from time to time. If you'd 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. +Initiated by [George Michael Brower](http://georgemichaelbrower.com/) and [Jono Brandel](http://jonobr1.com/) of the Data Arts Team, Google Creative Lab.