dataarts · awelles · Jun 19, 2019 · Jun 19, 2019 · Jun 19, 2019 · Jun 20, 2019
diff --git a/example.html b/example.html
@@ -1,63 +1,95 @@
 <!DOCTYPE html>
 <html>
+
 <head>
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
 </head>
+
 <body>
   <script type="text/javascript" src="build/dat.gui.js"></script>
   <script type="text/javascript">
     var obj = {
-        message: 'Hello World',
-        displayOutline: false,
+      message: 'Hello World',
+      displayOutline: false,
+
+      maxSize: 6.0,
+      speed: 5,
 
-        maxSize: 6.0,
-        speed: 5,
+      height: 10,
+      noiseStrength: 10.2,
+      growthSpeed: 0.2,
 
-        height: 10,
-        noiseStrength: 10.2,
-        growthSpeed: 0.2,
+      type: 'three',
 
-        type: 'three',
+      explode: function() {
+        alert('Bang!');
+      },
 
-        explode: function () {
-          alert('Bang!');
-        },
+      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
+      plotter: 0
     };
 
     var gui = new dat.gui.GUI();
 
     gui.remember(obj);
 
     gui.add(obj, 'message');
+    gui.add( new dat.controllers.StringController(obj,'message') );
+
     gui.add(obj, 'displayOutline');
+    gui.add( new dat.controllers.BooleanController(obj,'displayOutline') );
+
     gui.add(obj, 'explode');
 
     gui.add(obj, 'maxSize').min(-10).max(10).step(0.25);
+    gui.add( new dat.controllers.NumberControllerSlider(obj, 'maxSize', -10, 10, 0.25) );
+
     gui.add(obj, 'height').step(5); // Increment amount
+    gui.add( new dat.controllers.NumberControllerBox(obj,'height',{step: 5}) );
 
     // Choose from accepted values
-    gui.add(obj, 'type', [ 'one', 'two', 'three' ] );
+    gui.add(obj, 'type', [ 'one', 'two', 'three' ]);
+    gui.add( new dat.controllers.OptionController(obj,'type',[ 'one', 'two', 'three' ]) );
 
     // 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 });
+    gui.add( new dat.controllers.OptionController(obj, 'speed', { Stopped: 0, Slow: 0.1, Fast: 5 }) );
 
     var f1 = gui.addFolder('Colors');
     f1.addColor(obj, 'color0');
     f1.addColor(obj, 'color1');
     f1.addColor(obj, 'color2');
     f1.addColor(obj, 'color3');
+    f1.add( new dat.controllers.ColorController(obj, 'color0') ); 
 
     var f2 = gui.addFolder('Another Folder');
     f2.add(obj, 'noiseStrength');
 
     var f3 = f2.addFolder('Nested Folder');
     f3.add(obj, 'growthSpeed');
 
+    var f4 = gui.addFolder('Custom Controllers');
+    plotter = new dat.controllers.PlotterController(obj, 'plotter');
+    f4.add(plotter, { liClass: 'plotter' });
+    plotter.listen();
+
+    var angle = 0,
+      max = Math.PI * 2;
+    setInterval(function() {
+      angle += 0.05;
+      if (angle > max) {
+        angle = 0;
+      }
+
+      obj.plotter = Math.sin(angle) + 1.5;
+    }, 10);
+
+
   </script>
 </body>
-</html>
+
+</html>
diff --git a/src/dat/controllers/PlotterController.js b/src/dat/controllers/PlotterController.js
@@ -0,0 +1,69 @@
+/**
+ * dat-gui JavaScript Controller Library
+ * http://code.google.com/p/dat-gui
+ *
+ * Copyright 2011 Data Arts Team, Google Creative Lab
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ */
+
+import Controller from './Controller';
+import Plotter from '../utils/plotter';
+
+/**
+ * @class Provides a canvas that graphically displays the value of the object property at the specified interval
+ *
+ * @extends dat.controllers.Controller
+ *
+ * @param {Object} object The object to be manipulated
+ * @param {string} property The name of the property to be manipulated
+ * @param {Object} params Contains the max and period and liClass properties
+ */
+class PlotterController extends Controller {
+  constructor(object, property, params) {
+    super(object, property);
+
+    params = params || {};
+
+    /** The graph will be these many units high */
+    this.max = params.max || 3;
+
+    /** The containing li will have this class added */
+    this.liClass = params.liClass || 'plotter';
+
+    /** Refresh rate. Value of 0 disables auto-refresh */
+    this.period = params.period || 0;
+
+    /** Stores the current value for comparison during animation frame */
+    this.prevValue = this.getValue();
+
+    /** Allows acurate timing for the period to be checked during animation frame */
+    this.lastUpdate = Date.now();
+
+    this.__panel = new Plotter(params.fgColor || '#fff', params.bgColor || '#000', params.type || 'line');
+    this.domElement.appendChild(this.__panel.dom);
+  }
+
+  updateDisplay () {
+    const value = this.getValue();
+    if (this.period < 1 && value !== this.prevValue) {
+      /* Update only on value change when auto-refresh is off */
+      this.__panel.update(value, this.max);
+    } else if ((Date.now() - this.lastUpdate) > this.period) {
+      /* Update if elapsed time since last update is greater than the period */
+      this.__panel.update(value, this.max);
+      this.lastUpdate = Date.now() * 2 - this.lastUpdate - this.period;
+    }
+
+    this.prevValue = value;
+
+    return super.updateDisplay();
+  }
+
+}
+
+export default PlotterController;
diff --git a/src/dat/gui/GUI.js b/src/dat/gui/GUI.js
@@ -20,6 +20,7 @@ import FunctionController from '../controllers/FunctionController';
 import NumberControllerBox from '../controllers/NumberControllerBox';
 import NumberControllerSlider from '../controllers/NumberControllerSlider';
 import ColorController from '../controllers/ColorController';
+import PlotterController from '../controllers/PlotterController';
 import requestAnimationFrame from '../utils/requestAnimationFrame';
 import CenteredDiv from '../dom/CenteredDiv';
 import dom from '../dom/dom';
@@ -125,12 +126,12 @@ const GUI = function(pars) {
    * @example
    * [
    *  {
-     *    propertyName: Controller,
-     *    anotherPropertyName: Controller
-     *  },
+   *    propertyName: Controller,
+   *    anotherPropertyName: Controller
+   *  },
    *  {
-     *    propertyName: Controller
-     *  }
+   *    propertyName: Controller
+   *  }
    * ]
    */
   this.__rememberedObjectIndecesToControllers = [];
@@ -168,7 +169,7 @@ const GUI = function(pars) {
   if (params.autoPlace && common.isUndefined(params.scrollable)) {
     params.scrollable = true;
   }
-//    params.scrollable = common.isUndefined(params.parent) && params.scrollable === true;
+  //    params.scrollable = common.isUndefined(params.parent) && params.scrollable === true;
 
   // Not part of params because I don't want people passing this in via
   // constructor. Should be a 'remembered' value.
@@ -1131,17 +1132,25 @@ function recallSavedValue(gui, controller) {
 }
 
 function add(gui, object, property, params) {
-  if (object[property] === undefined) {
-    throw new Error(`Object "${object}" has no property "${property}"`);
-  }
-
   let controller;
 
-  if (params.color) {
-    controller = new ColorController(object, property);
+  // add( new SomeCustomerController(a,b,c), params)
+  if (object instanceof Controller) {
+    controller = object;
+    params = property || { };
   } else {
-    const factoryArgs = [object, property].concat(params.factoryArgs);
-    controller = ControllerFactory.apply(gui, factoryArgs);
+
+    if (object[property] === undefined) {
+      throw new Error(`Object "${object}" has no property "${property}"`);
+    }
+
+    if (params.color) {
+      controller = new ColorController(object, property);
+    } else {
+      const factoryArgs = [object, property].concat(params.factoryArgs);
+      controller = ControllerFactory.apply(gui, factoryArgs);
+    }
+
   }
 
   if (params.before instanceof Controller) {
@@ -1165,6 +1174,10 @@ function add(gui, object, property, params) {
   dom.addClass(li, GUI.CLASS_CONTROLLER_ROW);
   if (controller instanceof ColorController) {
     dom.addClass(li, 'color');
+  } else if (params.liClass) {
+    dom.addClass(li, params.liClass);
+  } else if (controller.liClass) {
+    dom.addClass(li, controller.liClass);
   } else {
     dom.addClass(li, typeof controller.getValue());
   }

diff --git a/src/dat/gui/_structure.scss b/src/dat/gui/_structure.scss
@@ -70,12 +70,15 @@ $button-height: 20px;
       cursor: pointer;
       text-align: center;
       background-color: #000;
+
       &.close-top {
         position: relative;
       }
+
       &.close-bottom {
         position: absolute;
       }
+
       &:hover {
         background-color: #111;
       }
@@ -89,13 +92,14 @@ $button-height: 20px;
 
     float: right;
     margin-right: 15px;
-    overflow-y:visible;
+    overflow-y: visible;
 
     &.has-save > ul {
 
       &.close-top {
         margin-top: 0;
       }
+
       &.close-bottom {
         margin-top: $row-height;
       }
@@ -112,6 +116,7 @@ $button-height: 20px;
       &.close-top {
         position: relative;
       }
+
       &.close-bottom {
         position: fixed;
       }
@@ -195,6 +200,12 @@ $button-height: 20px;
     margin-left: 0;
   }
 
+  /** Reduce margin and set height for plotter */
+  .c canvas {
+    padding: 0;
+    height: 53px;
+  }
+
   .slider {
     float: left;
     width: 66%;
@@ -290,11 +301,12 @@ $button-height: 20px;
   background-color: #333;
   padding: 8px;
   margin-top: 10px;
+
   code {
     font-size: 10px;
   }
 }
 
 #dat-gui-save-locally {
   display: none;
-}
+}
diff --git a/src/dat/gui/style.scss b/src/dat/gui/style.scss
@@ -63,10 +63,12 @@ $input-color: lighten($background-color, 8.5%);
       width: 5px;
       background: $background-color;
     }
+
     &::-webkit-scrollbar-corner {
       height: 0;
       display: none;
     }
+
     &::-webkit-scrollbar-thumb {
       border-radius: 5px;
       background: lighten($background-color, 30%);
@@ -138,19 +140,25 @@ $input-color: lighten($background-color, 8.5%);
       border-left: 3px solid;
     }
 
+    &.plotter {
+      height: 58px;
+    }
+
     &.function {
       border-left: 3px solid $function-color;
     }
 
     &.number {
       border-left: 3px solid $number-color;
+
       input[type=text] {
         color: $number-color;
       }
     }
 
     &.string {
       border-left: 3px solid $string-color;
+
       input[type=text] {
         color: $string-color;
       }
@@ -170,9 +178,11 @@ $input-color: lighten($background-color, 8.5%);
 
       background: $input-color;
       outline: none;
+
       &:hover {
         background: lighten($input-color, $hover-lighten);
       }
+
       &:focus {
         background: lighten($input-color, $active-lighten);
         color: #fff;
@@ -192,11 +202,12 @@ $input-color: lighten($background-color, 8.5%);
 
     .slider:hover {
       background: lighten($input-color, $hover-lighten);
+
       .slider-fg {
         background: lighten($number-color, $hover-lighten);
       }
     }
 
   }
 
-}
+}