Make DialDisplay a class

Author: bobrippling

apps/spotrem/app.js

@@ -129,8 +129,11 @@ let dragHandler = function(e) {
 
   if (volumeChangedThisGoAround && Math.abs(dx)>32) {
       // setup volume knob here.
-    let cbVisual = (step, value, reinit)=>{cb(step); volumeKnobVisual(step, value, reinit)};
-    cbVisual(Math.sign(dx)*Math.sign(g.getHeight()/2-e.y), 0, true)
+    let cbVisual = (step)=>{
+      cb(step);
+      volumeKnobVisual.step(step);
+    };
+    cbVisual(Math.sign(dx)*Math.sign(g.getHeight()/2-e.y));
     resetOuterScopeVariables();
     let volumeKnob = require("Dial")(cbVisual);
     let timingOutVolumeKnob = (e)=>{

modules/Dial_Display.js

@@ -1,10 +1,10 @@
-let dialDisplayGenerator = function(options) {
-  "ram";
+function DialDisplay(options) {
   const SCREEN_W = g.getWidth();
   const SCREEN_H = g.getHeight();
 
-  options = Object.assign(
-    { stepsPerWholeTurn : 7, // 7 chosen as it felt the best in use.
+  this.options = Object.assign(
+    {
+      stepsPerWholeTurn : 7, // 7 chosen as it felt the best in use.
       dialRect : {
         x: 0,
         y: 0,
@@ -13,47 +13,56 @@ let dialDisplayGenerator = function(options) {
       },
     }, options);
 
-  const DIAL_RECT = options.dialRect;
+  this.value = 0;
+  this.reset();
+}
+
+DialDisplay.prototype.reset = function() {
+  this.isFirstDraw = true;
+};
+
+DialDisplay.prototype.set = function(value) {
+  this.prevValue = this.value;
+  this.value = value;
+};
+
+DialDisplay.prototype.step = function(step) {
+  "ram";
+  let prevValue = this.prevValue != null ? this.prevValue : this.value;
+  this.value += step;
+  //g.setFont("Vector:30");
+  //g.drawString(this.value);
+
+  const DIAL_RECT = this.options.dialRect;
 
   const CENTER = {
     x: DIAL_RECT.x + DIAL_RECT.w / 2,
     y: DIAL_RECT.y + DIAL_RECT.h / 2,
   };
 
-  let dialDisplay = function(step, value, isReinit) {
-    let prevValue = this.value;
-    if (value!==undefined) this.value = value;
-    if (!this.value) this.value = 0;
-    if (this.isFirstDraw===undefined || isReinit) this.isFirstDraw = true;
-    this.value += step;
-    //g.setFont("Vector:30");
-    //g.drawString(this.value);
-
-    let drawCircle = (value, R, G, B, rad, isFill)=>{
-      let x = CENTER.x+27*Math.sin(value*(2*Math.PI/options.stepsPerWholeTurn));
-      let y = CENTER.y-27*Math.cos(value*(2*Math.PI/options.stepsPerWholeTurn));
-      g.setColor(R,G,B)
-      if (!isFill) g.drawCircle(x, y, rad);
-      if (isFill) g.fillCircle(x, y, rad);
-    }
-    if (this.isFirstDraw) {
-      g.setColor(0,0,0).fillCircle(CENTER.x, CENTER.y, 25);
-      g.setColor(1,1,1).drawCircle(CENTER.x, CENTER.y, 25);
-      for (let i=0; i<options.stepsPerWholeTurn; i++) {
-        drawCircle(i, 1, 1, 1, 1, true);
-      }
-      this.isFirstDraw = false;
+  let drawCircle = (value, R, G, B, rad, isFill)=>{
+    let x = CENTER.x+27*Math.sin(value*(2*Math.PI/this.options.stepsPerWholeTurn));
+    let y = CENTER.y-27*Math.cos(value*(2*Math.PI/this.options.stepsPerWholeTurn));
+    g.setColor(R,G,B)
+    if (!isFill) g.drawCircle(x, y, rad);
+    if (isFill) g.fillCircle(x, y, rad);
+  }
+  if (this.isFirstDraw) {
+    g.setColor(0,0,0).fillCircle(CENTER.x, CENTER.y, 25);
+    g.setColor(1,1,1).drawCircle(CENTER.x, CENTER.y, 25);
+    for (let i=0; i<this.options.stepsPerWholeTurn; i++) {
+      drawCircle(i, 1, 1, 1, 1, true);
     }
+    this.isFirstDraw = false;
+  }
 
-    //drawCircle(this.value, 1, 1, 1, 2, false);
-    //drawCircle(prevValue, 0, 0, 0, 2, false);
-    g.setColor(0,0,0).drawLine(CENTER.x, CENTER.y, CENTER.x+23*Math.sin(prevValue*(2*Math.PI/options.stepsPerWholeTurn)), CENTER.y-23*Math.cos(prevValue*(2*Math.PI/options.stepsPerWholeTurn)));
-    g.setColor(1,1,1).drawLine(CENTER.x, CENTER.y, CENTER.x+23*Math.sin(this.value*(2*Math.PI/options.stepsPerWholeTurn)), CENTER.y-23*Math.cos(this.value*(2*Math.PI/options.stepsPerWholeTurn)));
-    g.setColor(0,0,0).fillCircle(CENTER.x, CENTER.y, 9);
+  //drawCircle(this.value, 1, 1, 1, 2, false);
+  //drawCircle(prevValue, 0, 0, 0, 2, false);
+  g.setColor(0,0,0).drawLine(CENTER.x, CENTER.y, CENTER.x+23*Math.sin(prevValue*(2*Math.PI/this.options.stepsPerWholeTurn)), CENTER.y-23*Math.cos(prevValue*(2*Math.PI/this.options.stepsPerWholeTurn)));
+  g.setColor(1,1,1).drawLine(CENTER.x, CENTER.y, CENTER.x+23*Math.sin(this.value*(2*Math.PI/this.options.stepsPerWholeTurn)), CENTER.y-23*Math.cos(this.value*(2*Math.PI/this.options.stepsPerWholeTurn)));
+  g.setColor(0,0,0).fillCircle(CENTER.x, CENTER.y, 9);
 
-    return this.value;
-  }
-  return dialDisplay;
-}
+  delete this.prevValue;
+};
 
-exports = dialDisplayGenerator;
+exports = DialDisplay;

modules/Dial_Display.md

@@ -10,7 +10,14 @@ Usage
 ```JS
 var DialDisplay = require("Dial_Display");
 var dialDisplay = new DialDisplay(options);
-var value = dialDisplay(-1, 0, true)
+
+dialDisplay.step(-1);
+
+var value = dialDisplay.value;
+
+// ... after some time:
+dialDisplay.reset();
+dialDisplay.set(0);
 ```
 
 For example in use with the Dial module:
@@ -29,12 +36,12 @@ var options = {
 var DialDisplay = require("Dial_Display");
 var dialDisplay = new DialDisplay(options);
 
-var cb = (step)=>{
-  var value = dialDisplay(step, undefined, true);
+var cb = (step) => {
+  dialDisplay.reset();
+  dialDisplay.step(step);
 };
 
-var Dial = require("Dial");
-var dial = new Dial(cb, options)
+var dial = require("Dial")(cb, options)
 Bangle.on("drag", dial);
 ```
 
@@ -55,10 +62,10 @@ Defaults:
 }
 ```
 
-The generated function takes three arguments:
-`step` - +1 or -1
-`value` - the previous value the step acts on.
-`isReinit` - true/false, whether to draw all of the dial or just the indicator.
+The Dial Display has three functions:
+`step(amount)` - +1 or -1 to step the dial.
+`set(value)` - set the value for the next `step()` to act on.
+`reset()` - draw all of the dial (instead of just the indicator) on the next `step()`.
 
 Notes:
 ======