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
- 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>