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,75 @@ let swipeHandler = function(LR, _) {
   }
 };
 
+let dx = 0;
+let dy = 0;
+let volumeChangedThisGoAround = false;
+let knobTimeout;
+let dragHandler = function(e) {
+
+  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.
+    cb(Math.sign(dx))
+    resetOuterScopeVariables();
+    let volumeKnob = require("Dial")(cb);
+    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)
+          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 for the dial would be neat and is being considered.

modules/Dial_Display.js

@@ -0,0 +1,68 @@
+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) {
+    let prevValue = this.value;
+    if (value) this.value = value;
+    if (!this.value) this.value = 0;
+    if (this.isFirstDraw===undefined) 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.clear();
+      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(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).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(0,0,0).fillCircle(CENTER.x, CENTER.y, 9);
+
+    return this.value;
+  }
+  return dialDisplay;
+}
+
+let options = {};
+let dialDisplay = dialDisplayGenerator(options);
+
+let cb = (step)=>{
+  print(step);
+  dialDisplay(step);
+};
+
+let dial = require("Dial")(cb);
+Bangle.on("drag", dial);