diff --git a/apps/spotrem/ChangeLog b/apps/spotrem/ChangeLog index f214545514..28540f5dda 100644 --- a/apps/spotrem/ChangeLog +++ b/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. + diff --git a/apps/spotrem/README.md b/apps/spotrem/README.md index 346ec9eba9..2625a48a67 100644 --- a/apps/spotrem/README.md +++ b/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). diff --git a/apps/spotrem/app.js b/apps/spotrem/app.js index bbe706b935..9d018eadc3 100644 --- a/apps/spotrem/app.js +++ b/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"); - } + } ); }; diff --git a/apps/spotrem/metadata.json b/apps/spotrem/metadata.json index 8ecc0d867c..ee6af62df2 100644 --- a/apps/spotrem/metadata.json +++ b/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", diff --git a/modules/Dial.js b/modules/Dial.js new file mode 100644 index 0000000000..c41f992d00 --- /dev/null +++ b/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; diff --git a/modules/Dial.md b/modules/Dial.md new file mode 100644 index 0000000000..c85d84a5eb --- /dev/null +++ b/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. diff --git a/modules/Dial_Display.js b/modules/Dial_Display.js new file mode 100644 index 0000000000..bfc1b9df7b --- /dev/null +++ b/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{ + print(step); + dialDisplay(step); +}; + +let dial = require("Dial")(cb); +Bangle.on("drag", dial);