BVB Source Codes

dat.gui Show example.html Source code

Return Download dat.gui: download example.html Source code - Download dat.gui Source code - Type:.html
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. </head>
  5. <body>
  6.   <script type="text/javascript" src="build/dat.gui.js"></script>
  7.   <script type="text/javascript">
  8.     var obj = {
  9.         message: 'Hello World',
  10.         displayOutline: false,
  11.  
  12.         maxSize: 6.0,
  13.         speed: 5,
  14.  
  15.         height: 10,
  16.         noiseStrength: 10.2,
  17.         growthSpeed: 0.2,
  18.  
  19.         type: 'three',
  20.  
  21.         explode: function () {
  22.           alert('Bang!');
  23.         },
  24.  
  25.         color0: "#ffae23", // CSS string
  26.         color1: [ 0, 128, 255 ], // RGB array
  27.         color2: [ 0, 128, 255, 0.3 ], // RGB with alpha
  28.         color3: { h: 350, s: 0.9, v: 0.3 } // Hue, saturation, value
  29.     };
  30.  
  31.     var gui = new dat.gui.GUI();
  32.  
  33.     gui.remember(obj);
  34.  
  35.     gui.add(obj, 'message');
  36.     gui.add(obj, 'displayOutline');
  37.     gui.add(obj, 'explode');
  38.  
  39.     gui.add(obj, 'maxSize').min(-10).max(10).step(0.25);
  40.     gui.add(obj, 'height').step(5); // Increment amount
  41.  
  42.     // Choose from accepted values
  43.     gui.add(obj, 'type', [ 'one', 'two', 'three' ] );
  44.  
  45.     // Choose from named values
  46.     gui.add(obj, 'speed', { Stopped: 0, Slow: 0.1, Fast: 5 } );
  47.  
  48.     var f1 = gui.addFolder('Colors');
  49.     f1.addColor(obj, 'color0');
  50.     f1.addColor(obj, 'color1');
  51.     f1.addColor(obj, 'color2');
  52.     f1.addColor(obj, 'color3');
  53.  
  54.     var f2 = gui.addFolder('Another Folder');
  55.     f2.add(obj, 'noiseStrength');
  56.  
  57.     var f3 = f2.addFolder('Nested Folder');
  58.     f3.add(obj, 'growthSpeed');
  59.  
  60.   </script>
  61. </body>
  62. </html>
downloadexample.html Source code - Download dat.gui Source code
Related Source Codes/Software:
tmate - Instant Terminal Sharing ht... 2017-04-16
WNXHuntForCity - City find By Objective - C 2017-04-16
st2 - StackStorm (aka IFTTT for Ops) is event-driven aut... 2017-04-16
css-in-js - React: CSS in JS techniques comparison. 2017-04-16
android-viewflow - A horizontal view scroller library for Android 2017-04-16
capybara-webkit - A Capybara driver for headless WebKit to test Java... 2017-04-16
fullstackpython.com - Full Stack Python source with Pelican, Bootstrap a... 2017-04-16
naxsi - NAXSI is an open-source, high performance, low rul... 2017-04-16
ToGL - Direct3D to OpenGL abstraction layer 2017-04-16
LiveScript - LiveScript is a language which compiles to JavaScr... 2017-04-16
MaterialSearchView - Express it in the library to implement SearchView ... 2017-04-23
ptpython - A better Python REPL 2017-04-23
Laravel-4-Bootstrap-Starter-Site - Laravel 4 Starter Site is a basic blog application... 2017-04-23
official-images - Primary source of truth for the Docker "Official I... 2017-04-23
awesome-chrome-devtools - Awesome tooling and resources in the Chrome DevToo... 2017-04-23
EventStore - The open-source, functional database with Complex ... 2017-04-23
screencat - 2017-04-23
viz.js - A hack to put Graphviz on the web. ... 2017-04-23
JKeyboardPanelSwitch - For resolve the layout conflict when keybord & amp... 2017-04-23
mama2 - Mother plan - all firewood high flame 2017-04-23

 Back to top