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

cleaned up example.html

Browse Source
This commit is contained in:
Jeff Nusz 2016-09-22 16:39:05 -07:00
parent 46c2a883fc
commit fabc6de37c
1 changed files with 31 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

86
example.html
View File

@ -3,83 +3,59 @@
<head>
</head>
<body>
<script type="text/javascript" src="build/dat.gui.min.js"></script>
<script type="text/javascript" src="build/dat.gui.js"></script>
<script type="text/javascript">
var obj = {
example: {
message: 'Hello World',
speed: 2,
displayOutline: false,
explode: function () {
console.log('Bang!');
},
},
message: 'Hello World',
displayOutline: false,
noiseStrength: 10,
maxSize: 6.0,
speed: 5,
height: 10,
noiseStrength: 10.2,
growthSpeed: 0.2,
maxSize: 6,
message: null,
speed: null,
flow: {
speed: 0.4,
noiseStrength: 10
type: 'chrome',
explode: function () {
alert('Bang!');
},
letters: {
growthSpeed: 0.2,
maxSize: 10,
message: 'folders'
},
colors: {
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
}
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
};
var gui = new dat.gui.GUI();
gui.remember(obj);
gui.remember(obj.example);
gui.remember(obj.flow);
gui.remember(obj.letters);
gui.add(obj.example, 'message').onFinishChange(function(value) {
// Fires when a controller loses focus.
console.log("obj.example.message = " + value);
});
gui.add(obj, 'message');
gui.add(obj, 'displayOutline');
gui.add(obj, 'explode');
gui.add(obj.example, 'speed', -5, 5);
gui.add(obj.example, 'displayOutline');
gui.add(obj.example, 'explode');
gui.add(obj, 'noiseStrength').step(5); // Increment amount
gui.add(obj, 'growthSpeed', -5, 5); // Min and max
gui.add(obj, 'maxSize').min(0).step(0.25); // Mix and match
gui.add(obj, 'maxSize').min(-10).max(10).step(0.25);
gui.add(obj, 'height').step(5); // Increment amount
// Choose from accepted values
gui.add(obj, 'message', [ 'pizza', 'chrome', 'hooray' ] );
gui.add(obj, 'type', [ 'pizza', 'chrome', 'hooray' ] );
// Choose from named values
gui.add(obj, 'speed', { Stopped: 0, Slow: 0.1, Fast: 5 } );
var f1 = gui.addFolder('Flow Field');
f1.add(obj.flow, 'speed');
f1.add(obj.flow, 'noiseStrength');
var f1 = gui.addFolder('Colors');
f1.addColor(obj, 'color0');
f1.addColor(obj, 'color1');
f1.addColor(obj, 'color2');
f1.addColor(obj, 'color3');
var f2 = gui.addFolder('Letters');
f2.add(obj.letters, 'growthSpeed');
f2.add(obj.letters, 'maxSize');
f2.add(obj.letters, 'message');
gui.addColor(obj.colors, 'color0');
gui.addColor(obj.colors, 'color1');
gui.addColor(obj.colors, 'color2');
gui.addColor(obj.colors, 'color3');
var f2 = gui.addFolder('Another Folder');
f2.add(obj, 'noiseStrength');
var f3 = f2.addFolder('Nested Folder');
f3.add(obj, 'growthSpeed');
</script>
</body>