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

Changes to index.html

Browse Source
This commit is contained in:
George Michael Brower 2011-01-25 18:55:59 -07:00
parent 1fda37326b
commit 86f5579cbe
4 changed files with 43 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
controllers/controller.js
View File

@ -1,17 +1,26 @@
var Controller = function() {
var onChange = null;
this.setName = function(n) {
this.propertyNameElement.innerHTML = n;
}
this.setValue = function(n) {
this.object[this.propertyName] = n;
if (onChange != null) {
onChange.call(this, n);
}
}
this.getValue = function() {
return this.object[this.propertyName];
}
this.onChange = function(fnc) {
onChange = fnc;
}
this.makeUnselectable = function(elem) {
elem.onselectstart = function() { return false; };
elem.style.MozUserSelect = "none";

14
demo/demo.css
View File

@ -18,7 +18,7 @@ h1 {
font-weight: 800;
text-transform: lowercase;
line-height: 80px;
margin: 20px 0 20px 0;
margin: 20px 0 30px 0;
}
h1 a:link, h1 a:visited, h1 a:hover, h1 a:active {
@ -33,6 +33,10 @@ h1 img {
border-radius: 9px;
}
h2 {
font-size: 18px;
}
pre {
margin: 20px 0 20px 0;
padding: 15px;
@ -41,7 +45,7 @@ pre {
font: 10px Monaco, monospace;
}
p { font-size: 125%; max-width: 530px; }
p { font-size: 125%; max-width: 530px; line-height: 18px; margin-bottom: 36px; }
a:link {
color: #00aeff;
@ -64,7 +68,7 @@ a:active {
.lit { color: #00aeff; }
.pun, .opn, .clo { color: #777; }
.pln { color: #ccc; }
.tag { color: #008; }
.atn { color: #606; }
.atv { color: #080; }
.tag { color: #555; }
.atn { color: #555; }
.atv { color: #777; }
.dec { color: #606; }

4
gui.js
View File

@ -17,8 +17,8 @@ var GUI = new function() {
// Have we already added this?
if (alreadyControlled(object, propertyName)) {
// error("Controller for \"" + propertyName+"\" already added.");
// return;
error("Controller for \"" + propertyName+"\" already added.");
return;
}
var value = object[propertyName];

36
index.html
View File

@ -62,50 +62,60 @@
<body>
<h1><a href = "http://twitter.com/guidat"><img src = "demo/assets/favicon.gif" border = "0" alt = "GUI-DAT flag" /></a>GUI-DAT</h1>
<p>
is a super-light javascript library for making GUI elements. It is inspired by <a href = "http://www.sojamo.de/libraries/controlP5/">controlP5</a>.
<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>
<h2>Basic Usage</h2>
<pre id="demo-pre" class="prettyprint">
&lt;script type=&quot;text/javascript&quot; src=&quot;gui.min.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
var controllableObject =
{
numberProperty: 20,
constrainedNum: 0,
notchedNum: 240,
textProperty: "a string",
anotherTextProperty: "another string",
textProperty: &quot;a string&quot;,
anotherTextProperty: &quot;another string&quot;,
booleanProperty: false,
anotherBooleanProperty: false,
functionProperty: function() {
alert("I am a function!");
alert(&quot;I am a function!&quot;);
}
};
window.onload = function() {
GUI.start();
// Closed by default.
GUI.open();
// Creates a number box
GUI.add(controllableObject, "numberProperty");
GUI.add(controllableObject, &quot;numberProperty&quot;);
// Creates a slider (min, max)
GUI.add(controllableObject, "constrainedNum", -100, 100)
GUI.add(controllableObject, &quot;constrainedNum&quot;, -100, 100)
// Creates a slider with notches
GUI.add(controllableObject, "notchedNum", 0, 800, 100)
GUI.add(controllableObject, &quot;notchedNum&quot;, 0, 800, 100)
// Creates a text field
GUI.add(controllableObject, "textProperty");
GUI.add(controllableObject, &quot;textProperty&quot;);
// Creates a checkbox
GUI.add(controllableObject, "booleanProperty");
GUI.add(controllableObject, &quot;booleanProperty&quot;);
// Creates a button
GUI.add(controllableObject, "functionProperty")
.setName("Fire a Function");
GUI.add(controllableObject, &quot;functionProperty&quot;)
.setName(&quot;Fire a Function&quot;);
};
</pre>
&lt;/script&gt;</pre>
<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>