library-mirrors/dat.gui
1
0
Fork 0
mirror of https://github.com/dataarts/dat.gui.git synced 2024-12-12 04:08:27 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Updated README and fleshed out gui.js

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
README
View File

@ -1,33 +1,2 @@
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");
}
Refer to [this gist](https://gist.github.com/792496) for basic usage.

38
gui.js
View File

@ -1,23 +1,37 @@
var GUI = new function() {
// Contains list of properties we've add to the GUI in the following format:
// [object, propertyName, controllerDomElement]
// [object, propertyName, controllerObject]
var registeredProperties = [];
var domElement;
var controllerContainer;
var started = false;
this.start = function() {
domElement = document.createElement('div');
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;
}
this.add = function() {
// We need to call GUI.start() before .add()
if (!started) {
error("Make sure to call GUI.start() in the window.onload function");
return;
@ -26,6 +40,12 @@ var GUI = new function() {
var object = arguments[0];
var propertyName = arguments[1];
// Have we already added this?
if (registeredPropertiesContains(object, propertyName)) {
error("Controller for \"" + propertyName+"\" already added.");
return;
}
var value = object[propertyName];
// Does this value exist? Is it accessible?
@ -43,16 +63,17 @@ var GUI = new function() {
return;
}
var controllerDomElement = handler.apply(this, arguments);
var controllerObject = handler.apply(this, arguments);
// Were we able to make the controller?
if (!controllerDomElement) {
if (!controllerObject) {
error("Error creating controller for \""+propertyName+"\".");
return;
}
// 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) {
if (typeof console.log == 'function') {
console.error("[GUI ERROR] " + str);
}
}
};
};