forked from FOSS/BangleApps
656 lines
16 KiB
JavaScript
656 lines
16 KiB
JavaScript
/* jshint esversion: 6 */
|
|
/**
|
|
* Control the music on your Gadgetbridge-connected phone
|
|
**/
|
|
{
|
|
let autoClose = false; // only if opened automatically
|
|
let state = "";
|
|
let info = {
|
|
artist: "",
|
|
album: "",
|
|
track: "",
|
|
n: 0,
|
|
c: 0,
|
|
};
|
|
const TIMEOUT = 5*1000*60; // auto close timeout: 5 minutes
|
|
|
|
/**
|
|
* Base ticker class, needs children to implement `redraw`
|
|
*/
|
|
class Ticker {
|
|
constructor(ms) {
|
|
this.i = null;
|
|
this.ms = ms;
|
|
this.active = false;
|
|
this.onLCD = (on) => {
|
|
if (this.i) {
|
|
clearInterval(this.i);
|
|
this.i = null;
|
|
}
|
|
if (on) {
|
|
this.i = setInterval(() => {this.tick();}, this.ms);
|
|
this.redraw();
|
|
}
|
|
};
|
|
}
|
|
start() {
|
|
if (this.i) {
|
|
clearInterval(this.i);
|
|
}
|
|
this.i = setInterval(() => {this.tick();}, this.ms);
|
|
this.active = true;
|
|
Bangle.on("lcdPower", this.onLCD);
|
|
}
|
|
stop() {
|
|
if (this.i) {
|
|
clearInterval(this.i);
|
|
this.i = null;
|
|
}
|
|
this.active = false;
|
|
Bangle.removeListener("lcdPower", this.onLCD);
|
|
}
|
|
tick() {
|
|
// default: just redraw
|
|
if (Bangle.isLCDOn()) {
|
|
this.redraw();
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Draw time and date
|
|
*/
|
|
class Clock extends Ticker {
|
|
constructor() {
|
|
super(1000);
|
|
this.lastTime = -1;
|
|
}
|
|
tick() {
|
|
// only redraw if time has changed
|
|
const now = new Date;
|
|
if (Bangle.isLCDOn() && now.getHours()*60+now.getMinutes()!==this.lastTime) {
|
|
this.redraw();
|
|
this.lastTime = now.getHours()*60+now.getMinutes();
|
|
}
|
|
}
|
|
redraw() {
|
|
drawDateTime();
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Keep redrawing music while fading out
|
|
*/
|
|
class Fader extends Ticker {
|
|
constructor() {
|
|
super(500);
|
|
}
|
|
redraw() {
|
|
drawMusic();
|
|
}
|
|
start() {
|
|
this.since = Date.now();
|
|
super.start();
|
|
}
|
|
stop() {
|
|
super.stop();
|
|
this.since = Date.now(); // force redraw at 100% brightness
|
|
this.redraw();
|
|
this.since = null;
|
|
}
|
|
brightness() {
|
|
if (!fadeOut.since) {
|
|
return 1;
|
|
}
|
|
return Math.max(0, 1-((Date.now()-fadeOut.since)/TIMEOUT));
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Scroll long track names
|
|
*/
|
|
class Scroller extends Ticker {
|
|
constructor() {
|
|
super(200);
|
|
}
|
|
tick() {
|
|
this.offset += 10;
|
|
if (Bangle.isLCDOn()) {
|
|
this.redraw();
|
|
}
|
|
}
|
|
redraw() {
|
|
drawScroller();
|
|
}
|
|
start() {
|
|
this.offset = 0;
|
|
super.start();
|
|
}
|
|
}
|
|
|
|
/**
|
|
* @param {string} text
|
|
* @return {number} Maximum font size to make text fit on screen
|
|
*/
|
|
function fitText(text) {
|
|
if (!text.length) {
|
|
return Infinity;
|
|
}
|
|
// make a guess, then shrink/grow until it fits
|
|
const getWidth = (size) => g.setFont("Vector", size).stringWidth(text);
|
|
let guess = Math.floor(24000/getWidth(100));
|
|
if (getWidth(guess)===240) { // good guess!
|
|
return guess;
|
|
}
|
|
if (getWidth(guess)<240) {
|
|
do {
|
|
guess++;
|
|
} while(getWidth(guess)<=240);
|
|
return guess-1;
|
|
}
|
|
// width > 240
|
|
do {
|
|
guess--;
|
|
} while(getWidth(guess)>240);
|
|
return guess;
|
|
}
|
|
|
|
/**
|
|
* @param name
|
|
* @return {string} Semi-random color to use for given info
|
|
*/
|
|
function infoColor(name) {
|
|
let h, s, v;
|
|
if (name==="num") {
|
|
// always white
|
|
h = 0;
|
|
s = 0;
|
|
} else {
|
|
// make color depend deterministically on info
|
|
let code = 0;
|
|
const textCode = t => {
|
|
let c = 0;
|
|
for(let i = 0; i<t.length; i++) {
|
|
c += t.charCodeAt(i);
|
|
}
|
|
return c%360;
|
|
};
|
|
switch(name) {
|
|
case "track":
|
|
code += textCode(info.track);
|
|
// fallthrough: also use album+artist
|
|
case "album":
|
|
code += textCode(info.album);
|
|
// fallthrough: also use artist
|
|
default:
|
|
code += textCode(info[name]);
|
|
}
|
|
h = code%360;
|
|
s = 0.7;
|
|
}
|
|
v = fadeOut.brightness();
|
|
// dark magic
|
|
const hsv2rgb = (h, s, v) => {
|
|
const f = (n) => {
|
|
const k = (n+h/60)%6;
|
|
return v-v*s*Math.max(Math.min(k, 4-k, 1), 0);
|
|
};
|
|
return {r: f(5), g: f(3), b: f(1)};
|
|
};
|
|
const rgb = hsv2rgb(h, s, v);
|
|
const f2hex = (f) => ("00"+(Math.round(f*255)).toString(16)).substr(-2);
|
|
return "#"+f2hex(rgb.r)+f2hex(rgb.g)+f2hex(rgb.b);
|
|
}
|
|
/**
|
|
* Remember track color until info changes
|
|
* Because we need this every time we move the scroller
|
|
* @return {string}
|
|
*/
|
|
function trackColor() {
|
|
if (!("track_color" in info) || fadeOut.active) {
|
|
info.track_color = infoColor("track");
|
|
}
|
|
return info.track_color;
|
|
}
|
|
|
|
////////////////////
|
|
// Drawing functions
|
|
////////////////////
|
|
/**
|
|
* Draw date and time
|
|
* @return {*}
|
|
*/
|
|
function drawDateTime() {
|
|
const now = new Date;
|
|
const l = require("locale");
|
|
const is12hour = (require("Storage").readJSON("setting.json", 1) || {})["12hour"];
|
|
let time;
|
|
if (is12hour) {
|
|
const date12 = new Date(now.getTime());
|
|
const hours = date12.getHours();
|
|
if (hours===0) {
|
|
date12.setHours(12);
|
|
} else if (hours>12) {
|
|
date12.setHours(hours-12);
|
|
}
|
|
time = l.time(date12, true)+l.meridian(now);
|
|
} else {
|
|
time = l.time(now, true);
|
|
}
|
|
g.reset();
|
|
g.setFont("Vector", 24)
|
|
.setFontAlign(-1, -1) // top left
|
|
.clearRect(10, 30, 119, 54)
|
|
.drawString(time, 10, 30);
|
|
|
|
const date = require("locale").date(now, true);
|
|
g.setFont("Vector", 16)
|
|
.setFontAlign(0, 1) // bottom center
|
|
.setClipRect(35, 198, 199, 214)
|
|
.clearRect(31, 198, 199, 214)
|
|
.drawString(date, 119, 240-26);
|
|
}
|
|
|
|
/**
|
|
* Draw track number and total count
|
|
*/
|
|
function drawNum() {
|
|
let num = "";
|
|
if ("n" in info && info.n>0) {
|
|
num = "#"+info.n;
|
|
if ("c" in info && info.c>0) { // I've seen { c:-1 }
|
|
num += "/"+info.c;
|
|
}
|
|
}
|
|
g.reset();
|
|
g.setFont("Vector", 30)
|
|
.setFontAlign(1, -1) // top right
|
|
.setClipRect(225, 30, 120, 60)
|
|
.clearRect(225, 30, 120, 60)
|
|
.drawString(num, 225, 30);
|
|
}
|
|
/**
|
|
* Clear rectangle used by track title
|
|
*/
|
|
function clearTrack() {
|
|
g.clearRect(0, 60, 239, 119);
|
|
}
|
|
/**
|
|
* Draw track title
|
|
*/
|
|
function drawTrack() {
|
|
let size = fitText(info.track);
|
|
if (size>40) {
|
|
size = 40;
|
|
}
|
|
if (size<25) {
|
|
// the title is too long: start up the scroller
|
|
if (!scroller.active) {
|
|
scroller.start();
|
|
}
|
|
return;
|
|
} else if (scroller.active) {
|
|
scroller.stop();
|
|
}
|
|
// stationary track
|
|
g.reset();
|
|
g.setFont("Vector", size)
|
|
.setFontAlign(0, 1) // center bottom
|
|
.setColor(trackColor());
|
|
clearTrack();
|
|
g.drawString(info.track, 119, 109);
|
|
}
|
|
/**
|
|
* Draw scrolling track title
|
|
*/
|
|
function drawScroller() {
|
|
g.reset();
|
|
g.setFont("Vector", 40);
|
|
const w = g.stringWidth(info.track)+40;
|
|
scroller.offset = scroller.offset%w;
|
|
g.setFontAlign(-1, 1) // left bottom
|
|
.setColor(trackColor());
|
|
clearTrack();
|
|
g.drawString(info.track, -scroller.offset+40, 109)
|
|
.drawString(info.track, -scroller.offset+40+w, 109);
|
|
}
|
|
|
|
/**
|
|
* Draw track artist and album
|
|
*/
|
|
function drawArtistAlbum() {
|
|
// we just use small enough fonts to make these always fit
|
|
// calculate stuff before clear+redraw
|
|
const artistColor = infoColor("artist");
|
|
const albumColor = infoColor("album");
|
|
let artistSize = fitText(info.artist);
|
|
if (artistSize>30) {
|
|
artistSize = 30;
|
|
}
|
|
let albumSize = fitText(info.album);
|
|
if (albumSize>20) {
|
|
albumSize = 20;
|
|
}
|
|
g.reset();
|
|
g.clearRect(0, 120, 240, 189);
|
|
let top = 124;
|
|
if (info.artist) {
|
|
g.setFont("Vector", artistSize)
|
|
.setFontAlign(0, -1) // center top
|
|
.setColor(artistColor)
|
|
.drawString(info.artist, 119, top);
|
|
top += artistSize+4; // fit album neatly under artist
|
|
}
|
|
if (info.album) {
|
|
g.setFont("Vector", albumSize)
|
|
.setFontAlign(0, -1) // center top
|
|
.setColor(albumColor)
|
|
.drawString(info.album, 119, top);
|
|
}
|
|
}
|
|
|
|
const icons = {
|
|
pause: function(x, y, s) {
|
|
const w1 = s/3;
|
|
g.drawRect(x, y, x+w1, y+s);
|
|
g.drawRect(x+s-w1, y, x+s, y+s);
|
|
},
|
|
play: function(x, y, s) {
|
|
g.drawPoly([
|
|
x, y,
|
|
x+s, y+s/2,
|
|
x, y+s,
|
|
], true);
|
|
},
|
|
previous: function(x, y, s) {
|
|
const w2 = s*1/5;
|
|
g.drawPoly([
|
|
x+s, y,
|
|
x+w2, y+s/2,
|
|
x+s, y+s,
|
|
], true);
|
|
g.drawRect(x, y, x+w2, y+s);
|
|
},
|
|
next: function(x, y, s) {
|
|
const w2 = s*4/5;
|
|
g.drawPoly([
|
|
x, y,
|
|
x+w2, y+s/2,
|
|
x, y+s,
|
|
], true);
|
|
g.drawRect(x+w2, y, x+s, y+s);
|
|
},
|
|
};
|
|
function controlColor(control) {
|
|
if (volCmd && control===volCmd) {
|
|
// volume button kept pressed down
|
|
return "#ff0000";
|
|
}
|
|
return (control in tCommand) ? "#ff0000" : "#008800";
|
|
}
|
|
function drawControl(control, x, y) {
|
|
g.setColor(controlColor(control));
|
|
const s = 20;
|
|
if (state!==controlState) {
|
|
g.clearRect(x, y, x+s, y+s);
|
|
}
|
|
icons[control](x, y, s);
|
|
}
|
|
let controlState;
|
|
function drawControls() {
|
|
g.reset();
|
|
if (state==="play") {
|
|
// left touch
|
|
drawControl("pause", 10, 190);
|
|
// right touch
|
|
drawControl("next", 200, 190);
|
|
} else {
|
|
drawControl("previous", 10, 190);
|
|
drawControl("play", 200, 190);
|
|
}
|
|
g.setFont("6x8", 2);
|
|
// BTN1
|
|
g.setFontAlign(1, -1);
|
|
g.setColor(controlColor("volumeup"));
|
|
g.drawString("+", 240, 30);
|
|
// BTN2
|
|
g.setFontAlign(1, 1);
|
|
g.setColor(controlColor("volumedown"));
|
|
g.drawString("-", 240, 210);
|
|
controlState = state;
|
|
}
|
|
|
|
function drawMusic() {
|
|
drawNum();
|
|
drawTrack();
|
|
drawArtistAlbum();
|
|
}
|
|
|
|
/////////////////////////
|
|
|
|
/**
|
|
* Update music info
|
|
* @param event
|
|
*/
|
|
function setInfo(event) {
|
|
info = event;
|
|
delete (info.t);
|
|
scroller.offset = 0;
|
|
if (Bangle.isLCDOn()) {
|
|
drawMusic();
|
|
}
|
|
}
|
|
|
|
let tQuit;
|
|
function updateState() {
|
|
// if paused for five minutes, load the clock
|
|
// (but timeout resets if we get new info, even while paused)
|
|
if (tQuit) {
|
|
clearTimeout(tQuit);
|
|
}
|
|
tQuit = null;
|
|
fadeOut.stop();
|
|
if (state!=="play" && autoClose) {
|
|
if (state==="stop") { // never actually happens with my phone :-(
|
|
load();
|
|
} else { // also quit when paused for a long time
|
|
tQuit = setTimeout(load, TIMEOUT);
|
|
fadeOut.start();
|
|
}
|
|
}
|
|
if (Bangle.isLCDOn()) {
|
|
drawControls();
|
|
}
|
|
}
|
|
|
|
// create tickers
|
|
const clock = new Clock();
|
|
const fadeOut = new Fader();
|
|
const scroller = new Scroller();
|
|
|
|
////////////////////
|
|
// Events
|
|
////////////////////
|
|
|
|
let tLauncher;
|
|
// we put starting of watches inside a function, so we can defer it until we
|
|
// asked the user about autoStart
|
|
function startLauncherWatch() {
|
|
// long-press: launcher
|
|
// short-press: toggle play/pause
|
|
setWatch(function() {
|
|
if (tLauncher) {
|
|
clearTimeout(tLauncher);
|
|
}
|
|
tLauncher = setTimeout(Bangle.showLauncher, 1000);
|
|
}, BTN2, {repeat: true, edge: "rising"});
|
|
setWatch(function() {
|
|
if (tLauncher) {
|
|
clearTimeout(tLauncher);
|
|
tLauncher = null;
|
|
}
|
|
togglePlay();
|
|
}, BTN2, {repeat: true, edge: "falling"});
|
|
}
|
|
|
|
let tCommand = {};
|
|
/**
|
|
* Send command and highlight corresponding control
|
|
* @param command "play/pause/next/previous/volumeup/volumedown"
|
|
*/
|
|
function sendCommand(command) {
|
|
Bluetooth.println(JSON.stringify({t: "music", n: command}));
|
|
// for controlColor
|
|
if (command in tCommand) {
|
|
clearTimeout(tCommand[command]);
|
|
}
|
|
tCommand[command] = setTimeout(function() {
|
|
delete tCommand[command];
|
|
drawControls();
|
|
}, 200);
|
|
drawControls();
|
|
}
|
|
|
|
// BTN1/3: volume control (with repeat after long-press)
|
|
let tVol, volCmd;
|
|
function volUp() {
|
|
volStart("up");
|
|
}
|
|
function volDown() {
|
|
volStart("down");
|
|
}
|
|
function volStart(dir) {
|
|
const command = "volume"+dir;
|
|
stopVol();
|
|
sendCommand(command);
|
|
volCmd = command;
|
|
tVol = setTimeout(repeatVol, 500);
|
|
}
|
|
function repeatVol() {
|
|
sendCommand(volCmd);
|
|
tVol = setTimeout(repeatVol, 100);
|
|
}
|
|
function stopVol() {
|
|
if (tVol) {
|
|
clearTimeout(tVol);
|
|
tVol = null;
|
|
}
|
|
volCmd = null;
|
|
drawControls();
|
|
}
|
|
function startVolWatches() {
|
|
setWatch(volUp, BTN1, {repeat: true, edge: "rising"});
|
|
setWatch(stopVol, BTN1, {repeat: true, edge: "falling"});
|
|
setWatch(volDown, BTN3, {repeat: true, edge: "rising"});
|
|
setWatch(stopVol, BTN3, {repeat: true, edge: "falling"});
|
|
}
|
|
|
|
// touch/swipe: navigation
|
|
function togglePlay() {
|
|
sendCommand(state==="play" ? "pause" : "play");
|
|
}
|
|
function startTouchWatches() {
|
|
Bangle.on("touch", function(side) {
|
|
switch(side) {
|
|
case 1:
|
|
sendCommand(state==="play" ? "pause" : "previous");
|
|
break;
|
|
case 2:
|
|
sendCommand(state==="play" ? "next" : "play");
|
|
break;
|
|
case 3:
|
|
togglePlay();
|
|
}
|
|
});
|
|
Bangle.on("swipe", function(dir) {
|
|
sendCommand(dir===1 ? "previous" : "next");
|
|
});
|
|
}
|
|
/////////////////////
|
|
// Startup
|
|
/////////////////////
|
|
// check for saved music state (by widget) to load
|
|
g.clear();
|
|
global.gbmusic_active = true; // we don't need our widget
|
|
Bangle.loadWidgets();
|
|
Bangle.drawWidgets();
|
|
delete (global.gbmusic_active);
|
|
|
|
function startEmulator() {
|
|
if (typeof Bluetooth==="undefined") { // emulator!
|
|
Bluetooth = {
|
|
println: (line) => {console.log("Bluetooth:", line);},
|
|
};
|
|
// some example info
|
|
GB({"t": "musicinfo", "artist": "Some Artist Name", "album": "The Album Name", "track": "The Track Title Goes Here", "dur": 241, "c": 2, "n": 2});
|
|
GB({"t": "musicstate", "state": "play", "position": 0, "shuffle": 1, "repeat": 1});
|
|
}
|
|
}
|
|
function startWatches() {
|
|
startVolWatches();
|
|
startLauncherWatch();
|
|
startTouchWatches();
|
|
}
|
|
|
|
function start() {
|
|
// start listening for music updates
|
|
const _GB = global.GB;
|
|
global.GB = (event) => {
|
|
// we eat music events!
|
|
switch(event.t) {
|
|
case "musicinfo":
|
|
setInfo(event);
|
|
break;
|
|
case "musicstate":
|
|
state = event.state;
|
|
updateState();
|
|
break;
|
|
default:
|
|
// pass on other events
|
|
if (_GB) {
|
|
setTimeout(_GB, 0, event);
|
|
}
|
|
return;
|
|
}
|
|
};
|
|
drawMusic();
|
|
updateState();
|
|
startWatches();
|
|
clock.start();
|
|
startEmulator();
|
|
Bangle.on("lcdPower", function(on) {
|
|
if (on) {
|
|
drawMusic();
|
|
drawControls();
|
|
}
|
|
});
|
|
}
|
|
|
|
let saved = require("Storage").readJSON("gbmusic.load.json", true);
|
|
require("Storage").erase("gbmusic.load.json");
|
|
if (saved) {
|
|
// autoloaded: load state was saved by widget
|
|
info = saved.info;
|
|
state = saved.state;
|
|
delete (saved);
|
|
autoClose = true;
|
|
start();
|
|
} else {
|
|
const s = require("Storage").readJSON("gbmusic.json", 1) || {};
|
|
if (!("autoStart" in s)) {
|
|
// user opened the app, but has not picked a setting yet
|
|
// ask them about autoloading now
|
|
E.showPrompt(
|
|
"Automatically load\n"+
|
|
"when playing music?\n",
|
|
).then(function(autoStart) {
|
|
s.autoStart = autoStart;
|
|
require("Storage").writeJSON("gbmusic.json", s);
|
|
setTimeout(start, 0);
|
|
});
|
|
} else {
|
|
start();
|
|
}
|
|
}
|
|
}
|