spotrem: add volume knob gesture

apps/spotrem/ChangeLog

@@ -12,3 +12,5 @@ when fastloading.
 0.11: Further refactoring to shorten the code. Fixed search and play that was broken in v0.10.
 0.12: Fix some warnings from the linter.
 0.13: Move ui-handlers inside setUI-call.
+0.14: Add volume knob.
+

apps/spotrem/README.md

@@ -8,6 +8,8 @@ Swipe input:
 
 Swipe left/right to go to previous/next track. Swipe up/down to change the volume.
 
+If you have changed the volume by swipe up/down, you can use a "volume knob" to continuously change the volume. Clock wise circle gesture on the screen increases volume and vice versa. The knob will deactivate shortly after you release the finger from the watch screen, indicated by a double buzz.
+
 It's possible to start tracks by searching with the remote. Search term without tags will override search with tags.
 
 To start playing 'from cold' the command for previous/next track via touch or swipe can be used. Pressing just play/pause is not guaranteed to initiate spotify in all circumstances (this will probably change with subsequent releases).

apps/spotrem/app.js

@@ -97,18 +97,80 @@ let swipeHandler = function(LR, _) {
   }
 };
 
+let dx = 0;
+let dy = 0;
+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);
+  }
+
+  let resetOuterScopeVariables = ()=>{
+    dy=0;
+    dx=0;
+    volumeChangedThisGoAround=false;
+  }
+
+  dx += e.dx;
+  dy += e.dy;
+  if (!e.b) {resetOuterScopeVariables();}
+
+  while (Math.abs(dy)>32) {
+    if (dy>0) { dy-=32; cb(-1) }
+    else { dy+=32; cb(1) }
+    volumeChangedThisGoAround = true;
+  }
+
+  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)
+    resetOuterScopeVariables();
+    let volumeKnob = require("Dial")(cbVisual);
+    let timingOutVolumeKnob = (e)=>{
+        if (!e.b) {
+          setKnobTimeout();
+        } else if (knobTimeout) {
+          clearTimeout(knobTimeout);
+          knobTimeout = undefined;
+        }
+        volumeKnob(e);
+      }
+    let swipeMask = ()=>{
+        E.stopEventPropagation();
+      }
+    let setKnobTimeout = ()=>{
+        knobTimeout = setTimeout(()=>{
+          Bangle.removeListener("drag", timingOutVolumeKnob)
+          Bangle.removeListener("swipe", swipeMask);
+          Bangle.buzz(40);
+          setTimeout(Bangle.buzz, 150, 40, 0.8)
+          gfx();
+          knobTimeout = undefined;
+          print("removed volume knob")
+        }, 350);
+      }
+    Bangle.prependListener("drag", timingOutVolumeKnob);
+    Bangle.prependListener("swipe", swipeMask);
+  }
+};
+
 // Navigation input on the main layout
 let setUI = function() {
   Bangle.setUI(
-    {mode : "updown",
+    {mode : "custom",
      touch: touchHandler,
      swipe: swipeHandler,
+     drag: dragHandler,
      btn: ()=>load(),
      remove : ()=>widgetUtils.show(),
-    },
-      ud => {
-        if (ud) Bangle.musicControl(ud>0 ? "volumedown" : "volumeup");
-      }
+    }
   );
 };
 

apps/spotrem/metadata.json

@@ -1,7 +1,7 @@
 {
   "id": "spotrem",
   "name": "Remote for Spotify",
-  "version": "0.13",
+  "version": "0.14",
   "description": "Control spotify on your android device.",
   "readme": "README.md",
   "type": "app",

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.