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

78
example.html
View File

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