mirror of
https://github.com/dataarts/dat.gui.git
synced 2024-12-12 04:08:27 +00:00
Updated README and fleshed out gui.js
This commit is contained in:
parent
b50f71fdf6
commit
b3127f12ed
33
README
33
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");
|
||||||
|
|
||||||
|
}
|
48
demo.html
48
demo.html
@ -5,33 +5,35 @@
|
|||||||
|
|
||||||
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": {}
|
|
||||||
};
|
};
|
||||||
|
|
||||||
// Creates a number box
|
window.onload = function() {
|
||||||
GUI.add(controllableObject, "numberProperty");
|
|
||||||
|
|
||||||
// Creates a slider (min, max)
|
GUI.start();
|
||||||
GUI.add(controllableObject, "anotherNumberProperty", -100, 100);
|
|
||||||
|
// Creates a number box
|
||||||
// Creates a text field
|
GUI.add(controllableObject, "numberProperty");
|
||||||
GUI.add(controllableObject, "textProperty");
|
|
||||||
|
// Creates a slider (min, max)
|
||||||
// Creates a checkbox
|
GUI.add(controllableObject, "anotherNumberProperty", -100, 100);
|
||||||
GUI.add(controllableObject, "booleanProperty");
|
|
||||||
|
// Creates a text field
|
||||||
// Creates a button
|
GUI.add(controllableObject, "textProperty");
|
||||||
GUI.add(controllableObject, "functionProperty");
|
|
||||||
|
// Creates a checkbox
|
||||||
GUI.add(controllableObject, "objectProp");
|
GUI.add(controllableObject, "booleanProperty");
|
||||||
|
|
||||||
|
// Creates a button
|
||||||
|
GUI.add(controllableObject, "functionProperty");
|
||||||
|
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
58
gui.js
58
gui.js
@ -1,18 +1,58 @@
|
|||||||
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 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 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]);
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -36,4 +76,8 @@ var GUI = new function() {
|
|||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
|
var error = function(str) {
|
||||||
|
console.error("[GUI ERROR] " + str);
|
||||||
|
}
|
||||||
|
|
||||||
};
|
};
|
Loading…
Reference in New Issue
Block a user