spotrem: add volume knob

Author: thyttan

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.
+
 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,24 +97,150 @@ let swipeHandler = function(LR, _) {
   }
 };
 
+let dx = 0;
 let dy = 0;
+let volumeChangedThisGoAround = false;
+let knobTimeout;
 let dragHandler = function(e) {
 
   let cb = ud => {
-    if (ud) Bangle.musicControl(ud>0 ? "volumedown" : "volumeup");
+    if (ud) Bangle.musicControl(ud<0 ? "volumedown" : "volumeup");
   }
 
-  // replace the ud callback functionality of setui "updown" mode (copy it here)
-  // add on my volume knob.
+  let resetOuterScopeVariables = ()=>{
+    dy=0;
+    dx=0;
+    volumeChangedThisGoAround=false;
+  }
+
+  dx += e.dx;
   dy += e.dy;
-  if (!e.b) dy=0;
+  if (!e.b) {resetOuterScopeVariables();}
+
   while (Math.abs(dy)>32) {
-    if (dy>0) { dy-=32; cb(1) }
-    else { dy+=32; cb(-1) }
+    if (dy>0) { dy-=32; cb(-1) }
+    else { dy+=32; cb(1) }
+    volumeChangedThisGoAround = true;
     Bangle.buzz(20);
   }
+
+  if (volumeChangedThisGoAround && Math.abs(dx)>32) {
+      // setup volume knob here.
+    cb(Math.sign(dx))
+    resetOuterScopeVariables();
+    let volumeKnob = 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);
+          knobTimeout = undefined;
+          print("removed volume knob")
+        }, 350);
+      }
+    Bangle.prependListener("drag", timingOutVolumeKnob);
+    Bangle.prependListener("swipe", swipeMask);
+  }
 };
 
+
+dial = function(cb, options) {
+    "ram";
+    options = options || {};
+
+    const SCREEN_W = g.getWidth();
+    const SCREEN_H = g.getHeight();
+
+    const DIAL_RECT = options.dialRect || {
+      x: 0,
+      y: 0,
+      x2: SCREEN_W - 1,
+      y2: SCREEN_H - 1,
+      w: SCREEN_W,
+      h: SCREEN_H,
+    };
+
+    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 || 10;
+    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.x2 ||
+        e.y < DIAL_RECT.y ||
+        e.y > DIAL_RECT.y2
+      ) {
+        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) {
+        Bangle.buzz(20, 0.3);
+        cumulative -= THRESHOLD * step;
+        cb(step);
+      }
+
+      while (cumulative > THRESHOLD) {
+        stepHandler(1);
+      }
+      while (cumulative < -THRESHOLD) {
+        stepHandler(-1);
+      }
+
+      E.stopEventPropagation();
+    }
+    
+    return onDrag;
+/*
+    if (exports.dial._handler) {
+      Bangle.removeListener("drag", dial._handler);
+    }
+
+    exports.dial._handler = onDrag;
+    Bangle.prependListener("drag", onDrag);
+    
+    Bangle.prependListener("swipe", ()=>{ 
+      E.stopEventPropagation();
+    }
+                          );*/
+  };
+
 // Navigation input on the main layout
 let setUI = function() {
   Bangle.setUI(

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",