mirror of
https://github.com/dataarts/dat.gui.git
synced 2024-12-12 04:08:27 +00:00
102 lines
3.9 KiB
HTML
102 lines
3.9 KiB
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
|
|
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
|
|
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
|
<head>
|
|
<title>gui-dat</title>
|
|
<link rel="icon" type="image/png" href="demo/assets/favicon.png" />
|
|
<link href="demo/demo.css" media="screen" rel="stylesheet" type="text/css" />
|
|
<link href="gui.css" media="screen" rel="stylesheet" type="text/css" />
|
|
<script type="text/javascript" src="gui.js">
|
|
</script>
|
|
<script type="text/javascript" src="controllers/slider.js">
|
|
</script>
|
|
<script type="text/javascript" src="controllers/controller.js">
|
|
</script>
|
|
<script type="text/javascript" src="controllers/controller.boolean.js">
|
|
</script>
|
|
<script type="text/javascript" src="controllers/controller.function.js">
|
|
</script>
|
|
<script type="text/javascript" src="controllers/controller.number.js">
|
|
</script>
|
|
<script type="text/javascript" src="controllers/controller.string.js">
|
|
</script>
|
|
<script type="text/javascript" src="time/scrubber.js">
|
|
</script>
|
|
<script type="text/javascript" src="time/timer.js">
|
|
</script>
|
|
<script type="text/javascript" src="demo/improvedNoise.js">
|
|
</script>
|
|
<script type="text/javascript" src="demo/prettify.js">
|
|
</script>
|
|
<script type="text/javascript" src="demo/demo.js">
|
|
</script>
|
|
<script type="text/javascript">
|
|
//<![CDATA[
|
|
var timer;
|
|
window.onload = function() {
|
|
|
|
var fizzyText = new FizzyText("gui-dat");
|
|
|
|
GUI.load('{"windowMin":-2500,"windowWidth":10000,"playhead":0,"snapIncrement":250,"scrubbers":[{"points":[{"value":"gui-dat","time":1},{"value":"is","time":1000},{"value":"getting","time":2000},{"value":"pretty","time":3000},{"value":"tight","time":4000}]},{"points":[]},{"points":[]},{"points":[]},{"points":[]},{"points":[]},{"points":[{"time":1000},{"time":2000},{"time":3000},{"time":4000}]}]}');
|
|
|
|
var gui = new GUI();
|
|
|
|
var gui2 = new GUI();
|
|
|
|
var gui3 = new GUI();
|
|
timer = new GUI.Timer(gui);
|
|
|
|
// Text field
|
|
gui.add(fizzyText, "message")
|
|
.at(1, "gui-dat")
|
|
.at(1000, "is")
|
|
.at(2000, "getting")
|
|
.at(3000, "pretty")
|
|
.at(4000, "tight");
|
|
|
|
// Sliders with min and max
|
|
gui.add(fizzyText, "maxSize", 0.5, 7);
|
|
gui.add(fizzyText, "growthSpeed", 0.01, 1);
|
|
|
|
gui.add(fizzyText, "speed", 0.1, 2);
|
|
|
|
// 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")
|
|
.at(1000)
|
|
.at(2000)
|
|
.at(3000)
|
|
.at(4000);
|
|
|
|
gui2.add(timer, "playhead").step(125).listen();
|
|
gui2.add(timer, "playPause");
|
|
gui2.add(timer, "snapIncrement");
|
|
gui2.add(timer, "useSnap");
|
|
|
|
gui3.add(timer, "windowMin").listen();
|
|
gui3.add(timer, "windowWidth", 0, 20000).listen();
|
|
|
|
console.log(JSON.stringify(timer.getSaveObject()));
|
|
|
|
};
|
|
|
|
|
|
//]]>
|
|
</script>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<!-- GUIDAT logo -->
|
|
<div id="helvetica-demo"></div>
|
|
|
|
|
|
</body>
|
|
</html>
|