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

Changed GUI to be instanceable (rather than just one GUI per project). GUI.start() is now var gui = new GUI();

Browse Source 
Included prettify.js in the repo so people checking the demo localy doesn't need the internets.
Changed way of hidding the panel (controllerContainer.style.height rather than this.domElement.stylemarginTop).
This commit is contained in:
Mr.doob 2011-01-29 00:38:58 +00:00
parent d14512b454
commit 3b4f6e3944
5 changed files with 1716 additions and 204 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

76
controllers/controller.js
View File

@ -2,53 +2,55 @@ var Controller = function() {
var onChange = null;
this.setName = function(n) {
this.propertyNameElement.innerHTML = n;
return this;
}
this.setValue = function(n) {
this.object[this.propertyName] = n;
if (onChange != null) {
onChange.call(this, n);
}
return this;
}
this.getValue = function() {
return this.object[this.propertyName];
}
this.onChange = function(fnc) {
onChange = fnc;
return this;
}
this.parent = null;
this.setName = function(n) {
this.propertyNameElement.innerHTML = n;
return this;
}
this.setValue = function(n) {
this.object[this.propertyName] = n;
if (onChange != null) {
onChange.call(this, n);
}
return this;
}
this.getValue = function() {
return this.object[this.propertyName];
}
this.onChange = function(fnc) {
onChange = fnc;
return this;
}
this.makeUnselectable = function(elem) {
elem.onselectstart = function() { return false; };
elem.style.MozUserSelect = "none";
elem.style.KhtmlUserSelect = "none";
elem.unselectable = "on";
}
this.makeSelectable = function(elem) {
elem.onselectstart = function() { };
elem.style.MozUserSelect = "auto";
elem.style.KhtmlUserSelect = "auto";
elem.unselectable = "off";
}
this.domElement = document.createElement('div');
this.domElement.setAttribute('class', 'guidat-controller ' + this.type);
this.object = arguments[0];
this.propertyName = arguments[1];
this.propertyNameElement = document.createElement('span');
this.propertyNameElement.setAttribute('class', 'guidat-propertyname');
this.setName(this.propertyName);
this.domElement.appendChild(this.propertyNameElement);
this.makeUnselectable(this.domElement);
};
this.domElement = document.createElement('div');
this.domElement.setAttribute('class', 'guidat-controller ' + this.type);
this.object = arguments[0];
this.propertyName = arguments[1];
this.propertyNameElement = document.createElement('span');
this.propertyNameElement.setAttribute('class', 'guidat-propertyname');
this.setName(this.propertyName);
this.domElement.appendChild(this.propertyNameElement);
this.makeUnselectable(this.domElement);
};

4
controllers/controller.number.js
View File

@ -70,7 +70,7 @@ var NumberController = function() {
document.addEventListener('mouseup', function(e) {
document.removeEventListener('mousemove', dragNumberField, false);
_this.makeSelectable(GUI.domElement);
_this.makeSelectable(_this.parent.domElement);
_this.makeSelectable(numberField);
if (clickedNumberField && !draggedNumberField) {
numberField.focus();
@ -129,4 +129,4 @@ var NumberController = function() {
};
NumberController.prototype = new Controller();
NumberController.prototype.constructor = NumberController;
NumberController.prototype.constructor = NumberController;

1538
demo/prettify.js Normal file
View File

File diff suppressed because it is too large Load Diff

197
gui.js
View File

@ -1,66 +1,34 @@
var GUI = new function() {
var GUI = function () {
var _this = this;
var controllers = [];
var _this = this, open = false,
controllers = [], controllersWatched = [];
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;
}
var object = arguments[0];
var propertyName = arguments[1];
// Have we already added this?
if (alreadyControlled(object, propertyName)) {
error("Controller for \"" + propertyName+"\" already added.");
return;
}
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];
// Do we know how to deal with this data type?
if (handler == undefined) {
error("Cannot create controller for data type \""+type+"\"");
return;
}
var controllerObject = construct(handler, arguments);
// Were we able to make the controller?
if (!controllerObject) {
error("Error creating controller for \""+propertyName+"\".");
return;
}
// Success.
controllerContainer.appendChild(controllerObject.domElement);
controllers.push(controllerObject);
return controllerObject;
}
var addHandlers = {
this.domElement = document.createElement('div');
this.domElement.setAttribute('id', 'guidat');
controllerContainer = document.createElement('div');
controllerContainer.setAttribute('id', 'guidat-controllers');
controllerContainer.style.height = '0px';
toggleButton = document.createElement('a');
toggleButton.setAttribute('id', 'guidat-toggle');
toggleButton.setAttribute('href', '#');
toggleButton.innerHTML = "Show Controls";
toggleButton.addEventListener('click', function(e) {
_this.toggle();
e.preventDefault();
}, false);
this.domElement.appendChild(controllerContainer);
this.domElement.appendChild(toggleButton);
var handlerTypes = {
"number": NumberController,
"string": StringController,
"boolean": BooleanController,
"function": FunctionController
};
var alreadyControlled = function(object, propertyName) {
for (var i in controllers) {
if (controllers[i].object == object &&
@ -70,81 +38,86 @@ var GUI = new function() {
}
return false;
};
var error = function(str) {
if (typeof console.log == 'function') {
console.error("[GUI ERROR] " + str);
}
};
var construct = function(constructor, args) {
function F() {
return constructor.apply(this, args);
}
F.prototype = constructor.prototype;
return new F();
};
// GUI ... GUI
this.domElement = null;
var controllerContainer;
var started = false;
var open = false;
// TODO: obtain this dynamically?
var domElementMarginTop = 300;
this.start = function() {
this.domElement = document.createElement('div');
this.domElement.setAttribute('id', 'guidat');
controllerContainer = document.createElement('div');
controllerContainer.setAttribute('id', 'guidat-controllers');
toggleButton = document.createElement('a');
toggleButton.setAttribute('id', 'guidat-toggle');
toggleButton.setAttribute('href', '#');
toggleButton.innerHTML = "Show Controls";
toggleButton.addEventListener('click', function(e) {
_this.toggle();
e.preventDefault();
}, false);
this.domElement.appendChild(controllerContainer);
this.domElement.appendChild(toggleButton);
this.domElement.style.marginTop = -domElementMarginTop+"px";
document.body.appendChild(this.domElement);
started = true;
function F() {
return constructor.apply(this, args);
}
F.prototype = constructor.prototype;
return new F();
};
this.add = function() {
var object = arguments[0];
var propertyName = arguments[1];
// Have we already added this?
if (alreadyControlled(object, propertyName)) {
error("Controller for \"" + propertyName+"\" already added.");
return;
}
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 = handlerTypes[type];
// Do we know how to deal with this data type?
if (handler == undefined) {
error("Cannot create controller for data type \""+type+"\"");
return;
}
var controllerObject = construct( handler, arguments);
controllerObject.parent = _this;
// Were we able to make the controller?
if (!controllerObject) {
error("Error creating controller for \""+propertyName+"\".");
return;
}
// Success.
controllerContainer.appendChild(controllerObject.domElement);
controllers.push(controllerObject);
return controllerObject;
}
this.toggle = function() {
if (open) {
this.hide();
} else {
} else {
this.show();
}
};
this.show = function() {
this.domElement.style.marginTop = 0+"px";
controllerContainer.style.height = '300px';
toggleButton.innerHTML = "Hide Controls";
open = true;
}
this.hide = function() {
this.domElement.style.marginTop = -domElementMarginTop+"px";
controllerContainer.style.height = '0px';
toggleButton.innerHTML = "Show Controls";
open = false;
}
};

105
index.html
View File

@ -1,46 +1,58 @@
<!doctype html>
<head>
<title>gui-dat</title>
<link rel="icon" type="image/png" href="demo/assets/favicon.png" />
<link href="demo/demo.css" media="screen" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js"></script>
<script type="text/javascript" src="gui.min.js"></script>
<!-- <script type="text/javascript" src="gui.min.js"></script> -->
<link href="gui.css" media="screen" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="controllers/slider.js"></script>
<script type="text/javascript" src="controllers/controller.js"></script>
<script type="text/javascript" src="controllers/controller.boolean.js"></script>
<script type="text/javascript" src="controllers/controller.function.js"></script>
<script type="text/javascript" src="controllers/controller.number.js"></script>
<script type="text/javascript" src="controllers/controller.string.js"></script>
<script type="text/javascript" src="gui.js"></script>
<script type="text/javascript" src="demo/improvedNoise.js"></script>
<script type="text/javascript" src="demo/prettify.js"></script>
<script type="text/javascript" src="demo/demo.js"></script>
<script type="text/javascript">
window.onload = function() {
prettyPrint();
prettyPrint();
var fizzyText = new FizzyText("gui-dat");
var fizzyText = new FizzyText("gui-dat");
GUI.start();
// Text field
GUI.add(fizzyText, "message");
var gui = new GUI();
document.body.appendChild( gui.domElement );
// Text field
gui.add(fizzyText, "message");
// Sliders with min and max
gui.add(fizzyText, "maxSize", 0.5, 7);
gui.add(fizzyText, "growthSpeed", 0.01, 1);
gui.add(fizzyText, "speed", 0.1, 2);
// Sliders with min, max and increment.
gui.add(fizzyText, "noiseStrength", 10, 100, 5);
// Boolean checkbox
gui.add(fizzyText, "displayOutline");
// Fires a function called "explode"
gui.add(fizzyText, "explode").setName('Explode!'); // Specify a custom name.
// Sliders with min and max
GUI.add(fizzyText, "maxSize", 0.5, 7);
GUI.add(fizzyText, "growthSpeed", 0.01, 1);
GUI.add(fizzyText, "speed", 0.1, 2);
// Sliders with min, max and increment.
GUI.add(fizzyText, "noiseStrength", 10, 100, 5);
// Boolean checkbox
GUI.add(fizzyText, "displayOutline");
// Fires a function called "explode"
GUI.add(fizzyText, "explode")
.setName('Explode!'); // Specify a custom name.
};
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-20996084-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
@ -49,21 +61,20 @@
</script>
</head>
<body>
<div id="container">
<div id = "helvetica-demo"></div>
<div id = "notifier"></div>
<h1><a href = "http://twitter.com/guidat"><img src = "demo/assets/profile.png" border = "0" alt = "GUI-DAT flag" /></a></h1>
<p>
<strong>gui-dat</strong> is a lightweight controller library for JavaScript. It allows you to easily manipulate variables and fire functions on the fly.
</p>
<ul>
<li><a href="https://github.com/jonobr1/GUI-DAT/raw/master/gui.min.js"><strong>Download the minified source</strong></a> <small>[9.8kb]</small></li>
<li><a href="http://github.com/jonobr1/GUI-DAT">Contribute on GitHub!</a></li>
</ul>
<h2>Basic Usage</h2>
<pre class="prettyprint">&lt;script type=&quot;text/javascript&quot; src=&quot;demo/demo.js&quot;&gt;&lt;/script&gt;
<pre id="demo-pre" class="prettyprint">&lt;script type=&quot;text/javascript&quot; src=&quot;demo/demo.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
window.onload = function() {
@ -71,7 +82,7 @@ window.onload = function() {
var fizzyText = new <a href="demo/demo.js">FizzyText</a>(&quot;gui-dat&quot;);
GUI.start();
// Text field
GUI.add(fizzyText, &quot;message&quot;);
@ -79,38 +90,26 @@ window.onload = function() {
GUI.add(fizzyText, &quot;maxSize&quot;, 0.5, 7);
GUI.add(fizzyText, &quot;growthSpeed&quot;, 0.01, 1);
GUI.add(fizzyText, &quot;speed&quot;, 0.1, 2);
// Sliders with min, max and increment
// Sliders with min, max and increment.
GUI.add(fizzyText, &quot;noiseStrength&quot;, 10, 100, 5);
// Boolean checkbox
GUI.add(fizzyText, &quot;displayOutline&quot;);
// Fires a function called &quot;explode&quot;
GUI.add(fizzyText, &quot;explode&quot;).setName(&quot;Explode!&quot;); // Specify a custom name.
GUI.add(fizzyText, &quot;explode&quot;).setName(&#039;Explode!&#039;); // Specify a custom name.
};
&lt;/script&gt;</pre>
<ul id="desc">
<li><strong>gui-dat</strong> will infer the type of the property you're trying to add<br/>(based on its initial value) and create the corresponding control.</li>
<li>The properties must be public, i.e. defined by <code><strong>this</strong>.prop = value</code>.</li>
</ul>
<!--
<hr/>
<h2>Monitor variable changes <em>outside</em> of the GUI</h2>
<p>Let's say you have a variable that changes by itself from time to time. If you'd like the GUI to reflect those changes, use the <code>listen()</code> method.</p>
<pre class="prettyprint">GUI.add(obj, "propName").listen();</pre>
<h2>Fire a function when someone uses a control</h2>
<pre class="prettyprint">GUI.add(obj, "propName").onChange(function(n) {
alert("You changed me to " + n);
});</pre>
-->
<footer>
Initiated by <a href="http://georgemichaelbrower.com/">George Michael Brower</a> and <a href="http://jonobr1.com/">Jono Brandel</a> of the Data Arts Team, Google Creative Lab.
</footer>
</div>
<footer>
By <a href="http://georgemichaelbrower.com/">George Michael Brower</a>, <a href="http://jonobr1.com/">Jono Brandel</a>, and <a href="http://github.com/jonobr1/GUI-DAT">you</a>.
</footer>
</body>
</html>
</html>