From 86f5579cbea89b3afd3650b61673ec61b809fbc1 Mon Sep 17 00:00:00 2001 From: George Michael Brower Date: Tue, 25 Jan 2011 18:55:59 -0700 Subject: [PATCH] Changes to index.html --- controllers/controller.js | 9 +++++++++ demo/demo.css | 14 +++++++++----- gui.js | 4 ++-- index.html | 36 +++++++++++++++++++++++------------- 4 files changed, 43 insertions(+), 20 deletions(-) diff --git a/controllers/controller.js b/controllers/controller.js index 719b420..a5a1917 100644 --- a/controllers/controller.js +++ b/controllers/controller.js @@ -1,17 +1,26 @@ var Controller = function() { + var onChange = null; + this.setName = function(n) { this.propertyNameElement.innerHTML = n; } this.setValue = function(n) { this.object[this.propertyName] = n; + if (onChange != null) { + onChange.call(this, n); + } } this.getValue = function() { return this.object[this.propertyName]; } + this.onChange = function(fnc) { + onChange = fnc; + } + this.makeUnselectable = function(elem) { elem.onselectstart = function() { return false; }; elem.style.MozUserSelect = "none"; diff --git a/demo/demo.css b/demo/demo.css index b4a6489..949b6a1 100644 --- a/demo/demo.css +++ b/demo/demo.css @@ -18,7 +18,7 @@ h1 { font-weight: 800; text-transform: lowercase; line-height: 80px; - margin: 20px 0 20px 0; + margin: 20px 0 30px 0; } h1 a:link, h1 a:visited, h1 a:hover, h1 a:active { @@ -33,6 +33,10 @@ h1 img { border-radius: 9px; } +h2 { +font-size: 18px; +} + pre { margin: 20px 0 20px 0; padding: 15px; @@ -41,7 +45,7 @@ pre { font: 10px Monaco, monospace; } -p { font-size: 125%; max-width: 530px; } +p { font-size: 125%; max-width: 530px; line-height: 18px; margin-bottom: 36px; } a:link { color: #00aeff; @@ -64,7 +68,7 @@ a:active { .lit { color: #00aeff; } .pun, .opn, .clo { color: #777; } .pln { color: #ccc; } -.tag { color: #008; } -.atn { color: #606; } -.atv { color: #080; } +.tag { color: #555; } +.atn { color: #555; } +.atv { color: #777; } .dec { color: #606; } \ No newline at end of file diff --git a/gui.js b/gui.js index bd6f321..492d4ed 100644 --- a/gui.js +++ b/gui.js @@ -17,8 +17,8 @@ var GUI = new function() { // Have we already added this? if (alreadyControlled(object, propertyName)) { - // error("Controller for \"" + propertyName+"\" already added."); - // return; + error("Controller for \"" + propertyName+"\" already added."); + return; } var value = object[propertyName]; diff --git a/index.html b/index.html index c418a17..4ad45bb 100644 --- a/index.html +++ b/index.html @@ -62,50 +62,60 @@

GUI-DAT flagGUI-DAT

- is a super-light javascript library for making GUI elements. It is inspired by controlP5. + 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="gui.min.js"></script>
+<script type="text/javascript">
+
 var controllableObject = 
    {   
 	  numberProperty: 20,
 	  constrainedNum: 0,
 	  notchedNum: 240,
-	  textProperty: "a string",
-	  anotherTextProperty: "another string",
+	  textProperty: "a string",
+	  anotherTextProperty: "another string",
 	  booleanProperty: false,
 	  anotherBooleanProperty: false,
 	  functionProperty: function() {
-		 alert("I am a function!");
+		 alert("I am a function!");
 	  }
    };
 
 window.onload = function() {
 
    GUI.start();
+   
+   // Closed by default.
+   GUI.open();
 
    // Creates a number box
-   GUI.add(controllableObject, "numberProperty");
+   GUI.add(controllableObject, "numberProperty");
 
    // Creates a slider (min, max)
-   GUI.add(controllableObject, "constrainedNum", -100, 100)
+   GUI.add(controllableObject, "constrainedNum", -100, 100)
    
    // Creates a slider with notches
-   GUI.add(controllableObject, "notchedNum", 0, 800, 100)
+   GUI.add(controllableObject, "notchedNum", 0, 800, 100)
 
    // Creates a text field
-   GUI.add(controllableObject, "textProperty");
+   GUI.add(controllableObject, "textProperty");
 
    // Creates a checkbox
-   GUI.add(controllableObject, "booleanProperty");
+   GUI.add(controllableObject, "booleanProperty");
 
    // Creates a button
-   GUI.add(controllableObject, "functionProperty")
-      .setName("Fire a Function");
+   GUI.add(controllableObject, "functionProperty")
+      .setName("Fire a Function");
 
 };
-
+ +</script> \ No newline at end of file