forked from dataarts/dat.gui
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
402 lines (319 loc) · 13.1 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
<!doctype html>
<html>
<head>
<title>dat.gui</title>
<link rel='icon' type='image/png' href='docs/assets/favicon.png'/>
<!--Minified build-->
<!--<script type='text/javascript' src='build/DAT.GUI.min.js'></script>-->
<!--Build--->
<!--<script type='text/javascript' src='build/DAT.GUI.js'></script>-->
<!--All source-->
<link href='src/DAT/GUI/GUI.css' media='screen' rel='stylesheet' type='text/css'/>
<script type='text/javascript' src='src/DAT/GUI/GUI.js'></script>
<script type='text/javascript' src='src/DAT/GUI/ControllerNumberSlider.js'></script>
<script type='text/javascript' src='src/DAT/GUI/Controller.js'></script>
<script type='text/javascript' src='src/DAT/GUI/ControllerBoolean.js'></script>
<script type='text/javascript' src='src/DAT/GUI/ControllerString.js'></script>
<script type='text/javascript' src='src/DAT/GUI/ControllerFunction.js'></script>
<script type='text/javascript' src='src/DAT/GUI/ControllerNumber.js'></script>
<!--Demo-->
<link href='docs/docs.css' media='screen' rel='stylesheet' type='text/css'/>
<script type='text/javascript' src='docs/RequestAnimationFrame.js'></script>
<script type='text/javascript' src='docs/improvedNoise.js'></script>
<script type='text/javascript' src='docs/prettify.js'></script>
<script type='text/javascript' src='docs/demo.js'></script>
<script type='text/javascript'>
//<![CDATA[
window.onload = function() {
prettyPrint();
var fizzyText = new FizzyText('dat.gui');
var gui = new DAT.GUI();
// Text field
gui.add(fizzyText, 'message');
// Sliders with min + max
gui.add(fizzyText, 'maxSize').min(0.5).max(7);
gui.add(fizzyText, 'growthSpeed').min(0.01).max(1).step(0.05);
gui.add(fizzyText, 'speed', 0.1, 2, 0.05); // shorthand for min/max/step
// 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').name('Explode!'); // Specify a custom name.
// Javascript for documentation
getCollapsables();
handleListening();
};
function toggle(e) {
var collapsable = this.childNodes[3],
wrapper = collapsable.childNodes[1];
if (this.className === 'collapsed') {
this.className = 'expanded';
collapsable.style.height = wrapper.clientHeight + 'px';
} else {
this.className = 'collapsed';
collapsable.style.height = '0px';
}
}
function getCollapsables() {
if (document.getElementsByClassName == undefined) {
document.getElementsByClassName = function(className) {
var hasClassName = new RegExp('(?:^|\\s)' + className + '(?:$|\\s)');
var allElements = document.getElementsByTagName('*');
var results = [];
var element;
for (var i = 0; (element = allElements[i]) != null; i++) {
var elementClass = element.className;
if (elementClass && elementClass.indexOf(className) != -1 &&
hasClassName.test(elementClass))
results.push(element);
}
return results;
};
}
collapsed = document.getElementsByClassName('collapsed');
expanded = document.getElementsByClassName('expanded');
}
function handleListening() {
for (var i = 0; i < collapsed.length; i++) {
collapsed[i].addEventListener('click', toggle, false);
}
for (var j = 0; j < expanded.length; j++) {
expanded[i].addEventListener('click', toggle, false);
}
}
//]]>
</script>
</head>
<body>
<div id='container'>
<!-- GUIDAT logo -->
<div id='helvetica-demo'></div>
<!-- It gives you this! -->
<div id='notifier'></div>
<h1><a href='http://twitter.com/guidat'><img src='docs/assets/profile.png'
border='0' alt='dat.gui flag'/></a>
</h1>
<p><strong>dat.gui</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/dataarts/dat.gui/raw/build/DAT.GUI.min.js'><strong>Download the minified source</strong></a>
<small id='buildsizemin'>[19.6kb]
</small>
</li>
<li>
<a href='https://github.com/dataarts/dat.gui/raw/build/DAT.GUI.js'><strong>Download the uncompressed source</strong></a>
<small id='buildsize'>[33.9kb]
</small>
</li>
<li><a href='http://github.com/dataarts/dat.gui'>Contribute on GitHub!</a></li>
</ul>
<h2>Basic Usage</h2>
<pre id='demo-pre' class='prettyprint'>
<script type='text/javascript' src='DAT.GUI.min.js'></script>
<script type='text/javascript'>
window.onload = function() {
var fizzyText = new <a href='docs/demo.js'>FizzyText</a>('dat.gui');
var gui = new DAT.GUI();
// Text field
gui.add(fizzyText, 'message');
// Sliders with min + max
gui.add(fizzyText, 'maxSize').min(0.5).max(7);
gui.add(fizzyText, 'growthSpeed').min(0.01).max(1).step(0.05);
gui.add(fizzyText, 'speed', 0.1, 2, 0.05); // shorthand for min/max/step
gui.add(fizzyText, 'noiseStrength', 10, 100, 5);
// Boolean checkbox
gui.add(fizzyText, 'displayOutline');
// Fires a function called 'explode'
gui.add(fizzyText, 'explode').name('Explode!'); // Specify a custom name.
};
</script>
</pre>
<ul id='desc'>
<li><code>DAT.GUI</code> 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>
<!--
<h2 class='collapsed'>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>-->
<!--<div class='collapsed'>-->
<!---->
<!--<h2 class='section'>Saving your parameters</h2>-->
<!--<div class='collapsable'>-->
<!--<div>-->
<!--<p>The simplest way to save your parameters is via-->
<!--<code>DAT.GUI.saveURL()</code>. This method directs your browser to a-->
<!--URL containing the current GUI settings.</p>-->
<!--<pre class='prettyprint last'>-->
<!--// Make a button for the url function-->
<!--gui.add(DAT.GUI, 'saveURL');</pre>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<!--<div class='collapsed'>-->
<!--<h2 class='section'>Advanced saving</h2>-->
<!--<div class='collapsable'>-->
<!--<div>-->
<!--<p>Let's say you'd like to share your settings with someone. Instead of-->
<!--sending a long link with lots of parameters stored in it, you can make-->
<!--your saved settings the defaults.</p>-->
<!--<p>First, add the method <code>DAT.GUI.showSaveString()</code> to a gui-->
<!--object:</p>-->
<!--<pre class='prettyprint'>var gui = new DAT.GUI();-->
<!--// Add some stuff (and pretend I change their values);-->
<!--gui.add(someObject, 'someProperty');-->
<!--gui.add(someObject, 'someOtherProperty');-->
<!--// Make a save button.-->
<!--gui.add(DAT.GUI, 'showSaveString');</pre>-->
<!--<p>Clicking the 'showSaveString' button bring up an alert with a string.-->
<!--Copy and paste that string into the method <code>DAT.GUI.load()</code>-->
<!--before you instantiate any gui objects.</p>-->
<!--<pre class='prettyprint'>-->
<!--// Replace COPIED STRING with the value you got from showSaveString()-->
<!--DAT.GUI.load('COPIED STRING');-->
<!--var gui = new DAT.GUI();-->
<!--// Now these properties will be set to the values you just saved.-->
<!--gui.add(someObject, 'someProperty');-->
<!--gui.add(someObject, 'someOtherProperty');</pre>-->
<!--<p class='last'><strong>Save strings won't work if you change the order in-->
<!--which you've added properties to your gui objects, or the order of the-->
<!--gui objects themselves.</strong>. If you want to add more parameters to-->
<!--your gui and use an old save string, make sure they're added after the-->
<!--properties whose values you've saved.</p>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<div class='collapsed'>
<h2 class='section'>Choosing from a list of values</h2>
<div class='collapsable'>
<div>
<pre class='prettyprint first last'>gui.add(obj, 'propertyName').options(1, 2, 3, 5, 8);
// Alternatively, you can specify custom labels using object syntax
gui.add(obj, 'propertyName').options({'Small': 1, 'Medium': 2, 'Large': 3});
</pre>
</div>
</div>
</div>
<div class='collapsed'>
<h2 class='section'>Listen for variable changes inside the GUI</h2>
<div class='collapsable'>
<div>
<p>To fire a function whenever a user changes a variable via the GUI, use
the following syntax:</p>
<pre class='prettyprint'>gui.add(obj, 'propertyName').onChange(function(newValue) {
alert('You changed me to ' + newValue);
});</pre>
<p>This can be slightly annoying for types like number or string. You may
not want to fire a function while the user is sliding, or while they're
typing. To fire a function when the user has <em>finished</em> making
changes, use the following:</p>
<pre class='prettyprint'>gui.add(obj, 'propertyName').onFinishChange(function(newValue) {
alert('You just finished changing me to ' + newValue);
});</pre>
<p>Finally, if you'd like to do a little something extra when a function
is called, use the following:</p>
<pre class='prettyprint last'>gui.add(obj, 'functionName').onFire(function() {
alert('You called a function with dat.gui');
});</pre>
</div>
</div>
</div>
<div class='collapsed'>
<h2 class='section'>Listen for variable changes outside of the GUI</h2>
<div class='collapsable'>
<div>
<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 last'>gui.add(obj, 'changingProperty').listen();</pre>
</div>
</div>
</div>
<div class='collapsed'>
<h2 class='section'>Advanced listening</h2>
<div class='collapsable'>
<div>
<p>By default, <code>DAT.GUI</code> will create an internal interval
that checks for changes in the values you've marked with
<code>listen()</code>. If you'd like to check for these changes in an
interval of your own definition, use the following:</p>
<pre class='prettyprint'>
gui.autoListen = false; // disables internal interval
gui.add(obj, 'changingProperty').listen();
// Make your own loop
setInterval(function() {
gui.listen(); // updates values you've marked with listen()
}, 1000 / 60);</pre>
<p>Alternatively, you can forego calling <code>listen()</code> on
individual controllers, and instead choose to monitor changes in
<em>all</em> values controlled by your gui.</p>
<pre class='prettyprint last'>
gui.autoListen = false; // disables internal interval
gui.add(obj, 'add');
gui.add(obj, 'lotsa');
gui.add(obj, 'properties');
// Make your own loop
setInterval(function() {
gui.listenAll(); // updates ALL values managed by this gui
}, 1000 / 60);</pre>
</div>
</div>
</div>
<div class='collapsed'>
<h2 class='section'>Multiple panels and custom placement</h2>
<div class='collapsable'>
<div>
<p>You can instantiate multiple <code>DAT.GUI</code> objects and name them
however you'd like.</p>
<pre class='prettyprint'>var gui1 = new DAT.GUI();
var gui2 = new DAT.GUI();
// The name function overwrites the 'Show Controls' text.
gui1.name('Utilities');
gui2.name('Camera Placement');</pre>
<p>By default, <code>DAT.GUI</code> panels will be automatically added
to the HTML document and fixed to the top of the screen from right to
left. You can disable this behavior and append the gui DOM element to
a container of your choosing.</p>
<pre class='prettyprint last'>
// Notice this belongs to the DAT.GUI class (uppercase)
// and not an instance thereof.
DAT.GUI.autoPlace = false;
var gui = new DAT.GUI();
// Do some custom styles ...
gui.domElement.style.position = 'absolute';
gui.domElement.style.top = '20px';
gui.domElement.style.left = '20px';
document.getElementById('my-gui-container').appendChild( gui.domElement );</pre>
</div>
</div>
</div>
<div class='collapsed'>
<h2 class='section'>Pro tips.</h2>
<div class='collapsable'>
<div>
<ol id='secrets'>
<li><code>DAT.GUI</code> panels are resizeable. Drag the open/close
button.
</li>
<li>Press 'H' to show/hide GUI's.</li>
</ol>
</div>
</div>
</div>
<div class='trans'> </div>
<footer class='trans'>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>
</body>
</html>