spotrem: add volume knob gesture

apps/spotrem/app.js

@@ -103,6 +103,9 @@ let volumeChangedThisGoAround = false;
 let knobTimeout;
 let dragHandler = function(e) {
 
+  let DialDisplay = require("Dial_Display");
+  let volumeKnobVisual = new DialDisplay();
+
   let cb = ud => {
       Bangle.musicControl(ud<0 ? "volumedown" : "volumeup");
       Bangle.buzz(20);
@@ -126,9 +129,10 @@ let dragHandler = function(e) {
 
   if (volumeChangedThisGoAround && Math.abs(dx)>32) {
       // setup volume knob here.
-    cb(Math.sign(dx))
+    let cbVisual = (step, value, reinit)=>{cb(step); volumeKnobVisual(step, value, reinit)};
+    cbVisual(Math.sign(dx)*Math.sign(g.getHeight()/2-e.y), 0, true)
     resetOuterScopeVariables();
-    let volumeKnob = require("Dial")(cb);
+    let volumeKnob = require("Dial")(cbVisual);
     let timingOutVolumeKnob = (e)=>{
         if (!e.b) {
           setKnobTimeout();
@@ -147,6 +151,7 @@ let dragHandler = function(e) {
           Bangle.removeListener("swipe", swipeMask);
           Bangle.buzz(40);
           setTimeout(Bangle.buzz, 150, 40, 0.8)
+          gfx();
           knobTimeout = undefined;
           print("removed volume knob")
         }, 350);

modules/Dial.js

@@ -0,0 +1,75 @@
+function Dial(cb, options) {
+  "ram";
+  const SCREEN_W = g.getWidth();
+  const SCREEN_H = g.getHeight();
+
+  options = Object.assign(
+    { stepsPerWholeTurn : 7, // 7 chosen as it felt the best in use.
+      dialRect : {
+        x: 0,
+        y: 0,
+        w: SCREEN_W,
+        h: SCREEN_H,
+      },
+    }, options);
+
+  const DIAL_RECT = options.dialRect;
+
+  const CENTER = {
+    x: DIAL_RECT.x + DIAL_RECT.w / 2,
+    y: DIAL_RECT.y + DIAL_RECT.h / 2,
+  };
+
+  const BASE_SCREEN_W = 176;
+  const STEPS_PER_TURN = options.stepsPerWholeTurn;
+  const BASE_THRESHOLD = 50;
+  const THRESHOLD =
+    BASE_THRESHOLD *
+      (10 / STEPS_PER_TURN) *
+      (DIAL_RECT.w / BASE_SCREEN_W);
+
+  let cumulative = 0;
+
+  function onDrag(e) {
+    "ram";
+
+    if (
+      e.x < DIAL_RECT.x ||
+        e.x > DIAL_RECT.x+DIAL_RECT.w-1 ||
+        e.y < DIAL_RECT.y ||
+        e.y > DIAL_RECT.y+DIAL_RECT.h-1
+    ) {
+      return;
+    }
+
+    if (e.y < CENTER.y) {
+      cumulative += e.dx;
+    } else {
+      cumulative -= e.dx;
+    }
+
+    if (e.x < CENTER.x) {
+      cumulative -= e.dy;
+    } else {
+      cumulative += e.dy;
+    }
+
+    function stepHandler(step) {
+      cumulative -= THRESHOLD * step;
+      cb(step);
+    }
+
+    while (cumulative > THRESHOLD) {
+      stepHandler(1);
+    }
+    while (cumulative < -THRESHOLD) {
+      stepHandler(-1);
+    }
+
+    E.stopEventPropagation();
+  }
+
+  return onDrag;
+}
+
+exports = Dial;

modules/Dial.md

@@ -0,0 +1,60 @@
+Bangle.js Dial Library
+======================
+
+> Take a look at README.md for hints on developing with this library.
+
+Usage
+-----
+
+```JS
+var Dial = require("Dial");
+var dial = new Dial(cb, options)
+Bangle.on("drag", dial);
+
+or
+
+var dial = require("Dial")(cb, options);
+Bangle.on("drag", dial);
+```
+
+For example:
+
+```JS
+let cb = (plusOrMinusOne)=>{print(plusOrMinusOne)};
+let options = {
+  stepsPerWholeTurn : 6,
+  dialRect : {
+    x: 0,
+    y: 0,
+    w: g.getWidth()/2,
+    h: g.getHeight()/2,
+  }
+}
+
+let dial = require("Dial")(cb, options);
+Bangle.on("drag", dial);
+```
+
+`cb` (first argument) is a callback function that should expect either `+1` or `-1` as argument when called.
+
+`options` (second argument) (optional) is an object containing:
+
+`stepsPerWholeTurn` - how many steps there are in one complete turn of the dial.
+`dialRect` - decides the area of the screen the dial is set up on.
+
+Defaults:
+```js
+{ stepsPerWholeTurn : 7
+  dialRect : {
+    x: 0,
+    y: 0,
+    w: g.getWidth(),
+    h: g.getHeight(),
+  },
+}
+```
+
+Notes
+-----
+
+A complementary library for drawing graphics is provided in the Dial_Display module.

modules/Dial_Display.js

@@ -0,0 +1,59 @@
+let dialDisplayGenerator = function(options) {
+  "ram";
+  const SCREEN_W = g.getWidth();
+  const SCREEN_H = g.getHeight();
+
+  options = Object.assign(
+    { stepsPerWholeTurn : 7, // 7 chosen as it felt the best in use.
+      dialRect : {
+        x: 0,
+        y: 0,
+        w: SCREEN_W,
+        h: SCREEN_H,
+      },
+    }, options);
+
+  const DIAL_RECT = 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;
+    }
+
+    //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);
+
+    return this.value;
+  }
+  return dialDisplay;
+}
+
+exports = dialDisplayGenerator;

modules/Dial_Display.md

@@ -0,0 +1,65 @@
+Bangle.js Dial Display Library
+======================
+
+
+> Take a look at README.md for hints on developing with this library.
+
+Usage
+-----
+
+```JS
+var DialDisplay = require("Dial_Display");
+var dialDisplay = new DialDisplay(options);
+var value = dialDisplay(-1, 0, true)
+```
+
+For example in use with the Dial module:
+
+```JS
+var options = {
+  stepsPerWholeTurn : 6,
+  dialRect : {
+    x: 0,
+    y: 0,
+    w: g.getWidth()/2,
+    h: g.getHeight()/2,
+  }
+}
+
+var DialDisplay = require("Dial_Display");
+var dialDisplay = new DialDisplay(options);
+
+var cb = (step)=>{
+  var value = dialDisplay(step, undefined, true);
+};
+
+var Dial = require("Dial");
+var dial = new Dial(cb, options)
+Bangle.on("drag", dial);
+```
+
+`options` (first argument) (optional) is an object containing:
+
+`stepsPerWholeTurn` - how many steps there are in one complete turn of the dial.
+`dialRect` - decides the area of the screen the dial is set up on.
+
+Defaults:
+```js
+{ stepsPerWholeTurn : 7
+  dialRect : {
+    x: 0,
+    y: 0,
+    w: g.getWidth(),
+    h: g.getHeight(),
+  },
+}
+```
+
+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.
+
+Notes:
+======
+- It would be nice to choose what colors are used. Something for the future.