2011-11-07 21:29:37 +00:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
2018-01-21 05:09:05 +00:00
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
2011-11-07 21:29:37 +00:00
|
|
|
</head>
|
|
|
|
|
<body>
|
2016-09-22 23:39:05 +00:00
|
|
|
<script type="text/javascript" src="build/dat.gui.js"></script>
|
2011-11-07 21:29:37 +00:00
|
|
|
<script type="text/javascript">
|
2015-08-14 16:27:54 +00:00
|
|
|
var obj = {
|
2016-09-22 23:39:05 +00:00
|
|
|
message: 'Hello World',
|
|
|
|
|
displayOutline: false,
|
2015-08-14 16:27:54 +00:00
|
|
|
|
2016-09-22 23:39:05 +00:00
|
|
|
maxSize: 6.0,
|
|
|
|
|
speed: 5,
|
2015-08-14 16:27:54 +00:00
|
|
|
|
2016-09-22 23:39:05 +00:00
|
|
|
height: 10,
|
|
|
|
|
noiseStrength: 10.2,
|
|
|
|
|
growthSpeed: 0.2,
|
2015-08-14 16:27:54 +00:00
|
|
|
|
2016-09-23 19:43:24 +00:00
|
|
|
type: 'three',
|
|
|
|
|
|
2016-09-22 23:39:05 +00:00
|
|
|
explode: function () {
|
|
|
|
|
alert('Bang!');
|
2015-08-14 16:27:54 +00:00
|
|
|
},
|
|
|
|
|
|
2016-09-22 23:39:05 +00:00
|
|
|
color0: "#ffae23", // CSS string
|
|
|
|
|
color1: [ 0, 128, 255 ], // RGB array
|
|
|
|
|
color2: [ 0, 128, 255, 0.3 ], // RGB with alpha
|
|
|
|
|
color3: { h: 350, s: 0.9, v: 0.3 } // Hue, saturation, value
|
2015-08-14 16:27:54 +00:00
|
|
|
};
|
|
|
|
|
|
2015-08-14 13:24:30 +00:00
|
|
|
var gui = new dat.gui.GUI();
|
2015-08-14 20:29:30 +00:00
|
|
|
|
|
|
|
|
gui.remember(obj);
|
2015-08-14 22:20:19 +00:00
|
|
|
|
2016-09-22 23:39:05 +00:00
|
|
|
gui.add(obj, 'message');
|
|
|
|
|
gui.add(obj, 'displayOutline');
|
|
|
|
|
gui.add(obj, 'explode');
|
2015-08-14 16:27:54 +00:00
|
|
|
|
2016-09-22 23:39:05 +00:00
|
|
|
gui.add(obj, 'maxSize').min(-10).max(10).step(0.25);
|
|
|
|
|
gui.add(obj, 'height').step(5); // Increment amount
|
2015-08-14 16:27:54 +00:00
|
|
|
|
|
|
|
|
// Choose from accepted values
|
2016-09-23 19:43:24 +00:00
|
|
|
gui.add(obj, 'type', [ 'one', 'two', 'three' ] );
|
2015-08-14 16:27:54 +00:00
|
|
|
|
|
|
|
|
// Choose from named values
|
|
|
|
|
gui.add(obj, 'speed', { Stopped: 0, Slow: 0.1, Fast: 5 } );
|
|
|
|
|
|
2016-09-22 23:39:05 +00:00
|
|
|
var f1 = gui.addFolder('Colors');
|
|
|
|
|
f1.addColor(obj, 'color0');
|
|
|
|
|
f1.addColor(obj, 'color1');
|
|
|
|
|
f1.addColor(obj, 'color2');
|
|
|
|
|
f1.addColor(obj, 'color3');
|
2015-08-14 16:27:54 +00:00
|
|
|
|
2016-09-22 23:39:05 +00:00
|
|
|
var f2 = gui.addFolder('Another Folder');
|
|
|
|
|
f2.add(obj, 'noiseStrength');
|
2015-08-14 16:27:54 +00:00
|
|
|
|
2016-09-22 23:39:05 +00:00
|
|
|
var f3 = f2.addFolder('Nested Folder');
|
|
|
|
|
f3.add(obj, 'growthSpeed');
|
2015-08-14 16:27:54 +00:00
|
|
|
|
2021-09-07 13:17:55 +00:00
|
|
|
obj['Button with a long description'] = function () {
|
|
|
|
|
console.log('Button with a long description pressed');
|
|
|
|
|
};
|
|
|
|
|
gui.add(obj, 'Button with a long description');
|
|
|
|
|
|
2011-11-07 21:29:37 +00:00
|
|
|
</script>
|
|
|
|
|
</body>
|
2018-01-21 05:09:05 +00:00
|
|
|
</html>
|
