diff --git a/README b/README index e69de29..85a5cdd 100644 --- a/README +++ b/README @@ -0,0 +1,33 @@ +GUI-DAT is a controller library for JavaScript. + +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"); + +} \ No newline at end of file diff --git a/demo.html b/demo.html index aab97bd..fb8da60 100644 --- a/demo.html +++ b/demo.html @@ -5,33 +5,35 @@ var controllableObject = { - "numberProperty": 20, - "anotherNumberProperty": 0, - "textProperty": "a string", - "booleanProperty": false, - "functionProperty": function() { - alert("hi"); - }, - "objectProp": {} + numberProperty: 20, + anotherNumberProperty: 0, + textProperty: "a string", + booleanProperty: false, + functionProperty: function() { + alert("I am a function!"); + } }; -// Creates a number box -GUI.add(controllableObject, "numberProperty"); +window.onload = function() { -// 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"); - -GUI.add(controllableObject, "objectProp"); + 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"); +} diff --git a/gui.js b/gui.js index b881cd3..45650ea 100644 --- a/gui.js +++ b/gui.js @@ -1,18 +1,58 @@ var GUI = new function() { - + + // Contains list of properties we've add to the GUI in the following format: + // [object, propertyName, controllerDomElement] + var registeredProperties = []; + + var domElement; + var started = false; + this.start = function() { + + domElement = document.createElement('div'); + domElement.setAttribute('id', 'guidat'); + + + started = true; + } + this.add = function() { - var object = arguments[0]; - var property = arguments[1]; + if (!started) { + error("Make sure to call GUI.start() in the window.onload function"); + return; + } - var value = object[property]; + var object = arguments[0]; + var propertyName = arguments[1]; + + var value = object[propertyName]; + + // Does this value exist? Is it accessible? + if (value == undefined) { + error(object + " either has no property \""+propertyName+"\", or the property is inaccessible."); + return; + } + var type = typeof value; var handler = addHandlers[type]; - if (handler) { - } else { - console.error("I don't know how to handle data type: " + type); + + // Do we know how to deal with this data type? + if (handler == undefined) { + error("Cannot create controller for data type \"" + object + "\""); + return; } + + var controllerDomElement = handler.apply(this, arguments); + + // Were we able to make the controller? + if (!controllerDomElement) { + error("Error creating controller for \""+propertyName+"\"."); + return; + } + + // Success. + registeredProperties.push([object, propertyName, controllerDomElement]); } @@ -36,4 +76,8 @@ var GUI = new function() { }; + var error = function(str) { + console.error("[GUI ERROR] " + str); + } + }; \ No newline at end of file