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

56
controllers/controller.js
View File

@ -2,27 +2,29 @@ var Controller = function() {
var onChange = null;
this.setName = function(n) {
this.propertyNameElement.innerHTML = n;
return this;
}
this.parent = null;
this.setValue = function(n) {
this.object[this.propertyName] = n;
if (onChange != null) {
onChange.call(this, n);
}
return this;
}
this.setName = function(n) {
this.propertyNameElement.innerHTML = n;
return this;
}
this.getValue = function() {
return this.object[this.propertyName];
}
this.setValue = function(n) {
this.object[this.propertyName] = n;
if (onChange != null) {
onChange.call(this, n);
}
return this;
}
this.onChange = function(fnc) {
onChange = fnc;
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; };
@ -38,17 +40,17 @@ var Controller = function() {
elem.unselectable = "off";
}
this.domElement = document.createElement('div');
this.domElement.setAttribute('class', 'guidat-controller ' + this.type);
this.domElement = document.createElement('div');
this.domElement.setAttribute('class', 'guidat-controller ' + this.type);
this.object = arguments[0];
this.propertyName = arguments[1];
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.propertyNameElement = document.createElement('span');
this.propertyNameElement.setAttribute('class', 'guidat-propertyname');
this.setName(this.propertyName);
this.domElement.appendChild(this.propertyNameElement);
this.makeUnselectable(this.domElement);
this.makeUnselectable(this.domElement);
};

2
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();

1538
demo/prettify.js Normal file
View File

File diff suppressed because it is too large Load Diff

169
gui.js
View File

@ -1,60 +1,28 @@
var GUI = new function() {
var GUI = function () {
var _this = this;
var _this = this, open = false,
controllers = [], controllersWatched = [];
var controllers = [];
this.domElement = document.createElement('div');
this.domElement.setAttribute('id', 'guidat');
this.add = function() {
controllerContainer = document.createElement('div');
controllerContainer.setAttribute('id', 'guidat-controllers');
controllerContainer.style.height = '0px';
// We need to call GUI.start() before .add()
if (!started) {
error("Make sure to call GUI.start() in the window.onload function");
return;
}
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);
var object = arguments[0];
var propertyName = arguments[1];
this.domElement.appendChild(controllerContainer);
this.domElement.appendChild(toggleButton);
// 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 = {
var handlerTypes = {
"number": NumberController,
"string": StringController,
"boolean": BooleanController,
@ -78,53 +46,58 @@ var GUI = new function() {
};
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) {
@ -136,13 +109,13 @@ var GUI = new function() {
};
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;
}

69
index.html
View File

@ -4,36 +4,48 @@
<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();
var gui = new GUI();
document.body.appendChild( gui.domElement );
// Text field
GUI.add(fizzyText, "message");
// 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 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);
// Sliders with min, max and increment.
gui.add(fizzyText, "noiseStrength", 10, 100, 5);
// Boolean checkbox
GUI.add(fizzyText, "displayOutline");
// Boolean checkbox
gui.add(fizzyText, "displayOutline");
// Fires a function called "explode"
GUI.add(fizzyText, "explode")
.setName('Explode!'); // Specify a custom name.
// Fires a function called "explode"
gui.add(fizzyText, "explode").setName('Explode!'); // Specify a custom name.
};
@ -49,7 +61,6 @@
</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>
@ -63,7 +74,7 @@
</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() {
@ -80,14 +91,14 @@ window.onload = function() {
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.
};
@ -97,20 +108,8 @@ window.onload = function() {
<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.
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>
</div>
</body>
</html>