Updated README and fleshed out gui.js

This commit is contained in:
George Michael Brower 2011-01-23 15:57:12 -07:00
parent b716dc8225
commit 7c1fcb6cd8
2 changed files with 33 additions and 38 deletions

33
README
View File

@ -1,33 +1,2 @@
GUI-DAT is a controller library for JavaScript. GUI-DAT is a controller library for JavaScript.
Refer to [this gist](https://gist.github.com/792496) for basic usage.
var controllableObject =
{
numberProperty: 20,
anotherNumberProperty: 0,
textProperty: "a string",
booleanProperty: false,
functionProperty: function() {
alert("I am a function!");
}
};
window.onload = function() {
GUI.start();
// Creates a number box
GUI.add(controllableObject, "numberProperty");
// Creates a slider (min, max)
GUI.add(controllableObject, "anotherNumberProperty", -100, 100);
// Creates a text field
GUI.add(controllableObject, "textProperty");
// Creates a checkbox
GUI.add(controllableObject, "booleanProperty");
// Creates a button
GUI.add(controllableObject, "functionProperty");
}

38
gui.js
View File

@ -1,23 +1,37 @@
var GUI = new function() { var GUI = new function() {
// Contains list of properties we've add to the GUI in the following format: // Contains list of properties we've add to the GUI in the following format:
// [object, propertyName, controllerDomElement] // [object, propertyName, controllerObject]
var registeredProperties = []; var registeredProperties = [];
var domElement; var domElement;
var controllerContainer;
var started = false; var started = false;
this.start = function() { this.start = function() {
domElement = document.createElement('div'); domElement = document.createElement('div');
domElement.setAttribute('id', 'guidat'); domElement.setAttribute('id', 'guidat');
controllerContainer = document.createElement('div');
controllerContainer.setAttribute('id', 'guidat-controllers');
toggleButton = document.createElement('a');
toggleButton.setAttribute('id', 'guidat-toggle');
toggleButton.innerHTML = "Show Controls";
domElement.appendChild(controllerContainer);
document.body.appendChild(domElement);
started = true; started = true;
} }
this.add = function() { this.add = function() {
// We need to call GUI.start() before .add()
if (!started) { if (!started) {
error("Make sure to call GUI.start() in the window.onload function"); error("Make sure to call GUI.start() in the window.onload function");
return; return;
@ -26,6 +40,12 @@ var GUI = new function() {
var object = arguments[0]; var object = arguments[0];
var propertyName = arguments[1]; var propertyName = arguments[1];
// Have we already added this?
if (registeredPropertiesContains(object, propertyName)) {
error("Controller for \"" + propertyName+"\" already added.");
return;
}
var value = object[propertyName]; var value = object[propertyName];
// Does this value exist? Is it accessible? // Does this value exist? Is it accessible?
@ -43,16 +63,17 @@ var GUI = new function() {
return; return;
} }
var controllerDomElement = handler.apply(this, arguments); var controllerObject = handler.apply(this, arguments);
// Were we able to make the controller? // Were we able to make the controller?
if (!controllerDomElement) { if (!controllerObject) {
error("Error creating controller for \""+propertyName+"\"."); error("Error creating controller for \""+propertyName+"\".");
return; return;
} }
// Success. // Success.
registeredProperties.push([object, propertyName, controllerDomElement]); controllerContainer.appendChild(controllerObject.domElement);
registeredProperties.push([object, propertyName, controllerObject]);
} }
@ -76,10 +97,15 @@ var GUI = new function() {
}; };
var registeredPropertiesContains = function(object, property) {
// TODO:
return false;
};
var error = function(str) { var error = function(str) {
if (typeof console.log == 'function') { if (typeof console.log == 'function') {
console.error("[GUI ERROR] " + str); console.error("[GUI ERROR] " + str);
} }
} };
}; };