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,83 @@ 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)=>{
+      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)=>{
+        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_Display.js

@@ -0,0 +1,68 @@
+function DialDisplay(options) {
+  const SCREEN_W = g.getWidth();
+  const SCREEN_H = g.getHeight();
+
+  this.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);
+
+  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 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/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);
+
+  delete this.prevValue;
+};
+
+exports = DialDisplay;

modules/Dial_Display.md

@@ -0,0 +1,72 @@
+Bangle.js Dial Display Module
+=============================
+
+
+> Take a look at README.md for hints on developing with this module.
+
+Usage
+-----
+
+```JS
+var DialDisplay = require("Dial_Display");
+var dialDisplay = new DialDisplay(options);
+
+dialDisplay.step(-1);
+
+var value = dialDisplay.value;
+
+// ... after some time:
+dialDisplay.reset();
+dialDisplay.set(0);
+```
+
+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) => {
+  dialDisplay.reset();
+  dialDisplay.step(step);
+};
+
+var dial = require("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 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:
+======
+- It would be nice to choose what colors are used. Something for the future.

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,54 @@
+Bangle.js Dial Module
+=====================
+
+> Take a look at README.md for hints on developing with this module.
+
+Usage
+-----
+
+```JS
+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 module for drawing graphics is provided in the Dial_Display module.