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:35:19 -07:00
parent b50f71fdf6
commit b3127f12ed
3 changed files with 109 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
README
View File

@ -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");
}

22
demo.html
View File

@ -5,16 +5,19 @@
var controllableObject = var controllableObject =
{ {
"numberProperty": 20, numberProperty: 20,
"anotherNumberProperty": 0, anotherNumberProperty: 0,
"textProperty": "a string", textProperty: "a string",
"booleanProperty": false, booleanProperty: false,
"functionProperty": function() { functionProperty: function() {
alert("hi"); alert("I am a function!");
}, }
"objectProp": {}
}; };
window.onload = function() {
GUI.start();
// Creates a number box // Creates a number box
GUI.add(controllableObject, "numberProperty"); GUI.add(controllableObject, "numberProperty");
@ -30,8 +33,7 @@ GUI.add(controllableObject, "booleanProperty");
// Creates a button // Creates a button
GUI.add(controllableObject, "functionProperty"); GUI.add(controllableObject, "functionProperty");
GUI.add(controllableObject, "objectProp"); }
</script> </script>
</head> </head>
<body> <body>

56
gui.js
View File

@ -1,19 +1,59 @@
var GUI = new function() { 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() { this.add = function() {
var object = arguments[0]; if (!started) {
var property = arguments[1]; error("Make sure to call GUI.start() in the window.onload function");
return;
}
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 value = object[property];
var type = typeof value; var type = typeof value;
var handler = addHandlers[type]; var handler = addHandlers[type];
if (handler) {
} else { // Do we know how to deal with this data type?
console.error("I don't know how to handle data type: " + 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]);
} }
var addHandlers = { var addHandlers = {
@ -36,4 +76,8 @@ var GUI = new function() {
}; };
var error = function(str) {
console.error("[GUI ERROR] " + str);
}
}; };