mirror of https://github.com/espruino/BangleApps
Merge branch 'app_settings' into widbatpc
Richard de Boer
commit
6c58d955c6
34
apps.json
34
apps.json
|
|
@ -91,7 +91,7 @@
|
|||
{ "id": "gbridge",
|
||||
"name": "Gadgetbridge",
|
||||
"icon": "app.png",
|
||||
"version":"0.05",
|
||||
"version":"0.06",
|
||||
"description": "The default notification handler for Gadgetbridge notifications from Android",
|
||||
"tags": "tool,system,android,widget",
|
||||
"storage": [
|
||||
|
|
@ -395,7 +395,8 @@
|
|||
{ "id": "swatch",
|
||||
"name": "Stopwatch",
|
||||
"icon": "stopwatch.png",
|
||||
"version":"0.03",
|
||||
"version":"0.05",
|
||||
"interface": "interface.html",
|
||||
"description": "Simple stopwatch with Lap Time logging to a JSON file",
|
||||
"tags": "health",
|
||||
"allow_emulator":true,
|
||||
|
|
@ -895,7 +896,7 @@
|
|||
{ "id": "marioclock",
|
||||
"name": "Mario Clock",
|
||||
"icon": "marioclock.png",
|
||||
"version":"0.04",
|
||||
"version":"0.05",
|
||||
"description": "Animated Mario clock, jumps to change the time!",
|
||||
"tags": "clock,mario,retro",
|
||||
"type": "clock",
|
||||
|
|
@ -1002,7 +1003,7 @@
|
|||
"name": "Touch Launcher",
|
||||
"shortName":"Menu",
|
||||
"icon": "app.png",
|
||||
"version":"0.01",
|
||||
"version":"0.02",
|
||||
"description": "Touch enable left to right launcher.",
|
||||
"tags": "tool,system,launcher",
|
||||
"type":"launch",
|
||||
|
|
@ -1023,5 +1024,30 @@
|
|||
{"name":"balltastic.app.js","url":"app.js"},
|
||||
{"name":"balltastic.img","url":"app-icon.js","evaluate":true}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "rpgdice",
|
||||
"name": "RPG dice",
|
||||
"icon": "rpgdice.png",
|
||||
"version": "0.01",
|
||||
"description": "Simple RPG dice rolling app.",
|
||||
"tags": "game,fun",
|
||||
"type": "app",
|
||||
"allow_emulator": true,
|
||||
"storage": [
|
||||
{"name":"rpgdice.app.js","url": "app.js"},
|
||||
{"name":"rpgdice.img","url": "app-icon.js","evaluate":true}
|
||||
]
|
||||
},
|
||||
{ "id": "widmp",
|
||||
"name": "Moon Phase Widget",
|
||||
"icon": "widget.png",
|
||||
"version":"0.01",
|
||||
"description": "Display the current moon phase in blueish for the northern hemisphere in eight phases",
|
||||
"tags": "widget,tools",
|
||||
"type":"widget",
|
||||
"storage": [
|
||||
{"name":"widmp.wid.js","url":"widget.js"}
|
||||
]
|
||||
}
|
||||
]
|
||||
|
|
|
|||
|
|
@ -2,4 +2,6 @@
|
|||
0.02: Increase contrast (darker notification background, white text)
|
||||
0.03: Gadgetbridge widget now shows connection state
|
||||
0.04: Tweaks for variable size widget system
|
||||
0.05: Optimize animation, limit title length
|
||||
0.05: Show incoming call notification
|
||||
Optimize animation, limit title length
|
||||
0.06: Gadgetbridge App 'Connected' state is no longer toggleable
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ function gb(j) {
|
|||
|
||||
var mainmenu = {
|
||||
"" : { "title" : "Gadgetbridge" },
|
||||
"Connected" : { value : NRF.getSecurityStatus().connected },
|
||||
"Connected" : { value : NRF.getSecurityStatus().connected?"Yes":"No" },
|
||||
"Find Phone" : function() { E.showMenu(findPhone); },
|
||||
"Exit" : ()=> {load();},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,69 +1,64 @@
|
|||
(function() {
|
||||
var musicState = "stop";
|
||||
var musicInfo = {"artist":"","album":"","track":""};
|
||||
var scrollPos = 0;
|
||||
function gb(j) {
|
||||
Bluetooth.println(JSON.stringify(j));
|
||||
(() => {
|
||||
|
||||
const state = {
|
||||
music: "stop",
|
||||
|
||||
musicInfo: {
|
||||
artist: "",
|
||||
album: "",
|
||||
track: ""
|
||||
},
|
||||
|
||||
scrollPos: 0
|
||||
};
|
||||
|
||||
function gbSend(message) {
|
||||
Bluetooth.println(JSON.stringify(message));
|
||||
}
|
||||
function show(size,render) {
|
||||
|
||||
function showNotification(size, render) {
|
||||
var oldMode = Bangle.getLCDMode();
|
||||
|
||||
Bangle.setLCDMode("direct");
|
||||
g.setClipRect(0, 240, 239, 319);
|
||||
g.setColor("#222222");
|
||||
g.fillRect(1, 241, 238, 318);
|
||||
|
||||
render(320 - size);
|
||||
|
||||
g.setColor("#ffffff");
|
||||
g.fillRect(0, 240, 1, 319);
|
||||
g.fillRect(238, 240, 239, 319);
|
||||
g.fillRect(2, 318, 238, 319);
|
||||
|
||||
Bangle.setLCDPower(1); // light up
|
||||
Bangle.setLCDMode(oldMode); // clears cliprect
|
||||
|
||||
function anim() {
|
||||
scrollPos-=2;
|
||||
if (scrollPos<-size) scrollPos=-size;
|
||||
Bangle.setLCDOffset(scrollPos);
|
||||
if (scrollPos>-size) setTimeout(anim,15);
|
||||
state.scrollPos -= 2;
|
||||
if (state.scrollPos < -size) {
|
||||
state.scrollPos = -size;
|
||||
}
|
||||
anim();
|
||||
}
|
||||
function hide() {
|
||||
function anim() {
|
||||
scrollPos+=4;
|
||||
if (scrollPos>0) scrollPos=0;
|
||||
Bangle.setLCDOffset(scrollPos);
|
||||
if (scrollPos<0) setTimeout(anim,10);
|
||||
Bangle.setLCDOffset(state.scrollPos);
|
||||
if (state.scrollPos > -size) setTimeout(anim, 15);
|
||||
}
|
||||
anim();
|
||||
}
|
||||
|
||||
Bangle.on('touch',function() {
|
||||
if (scrollPos) hide();
|
||||
});
|
||||
Bangle.on('swipe',function(dir) {
|
||||
if (musicState=="play") {
|
||||
gb({t:"music",n:dir>0?"next":"previous"});
|
||||
function hideNotification() {
|
||||
function anim() {
|
||||
state.scrollPos += 4;
|
||||
if (state.scrollPos > 0) state.scrollPos = 0;
|
||||
Bangle.setLCDOffset(state.scrollPos);
|
||||
if (state.scrollPos < 0) setTimeout(anim, 10);
|
||||
}
|
||||
anim();
|
||||
}
|
||||
});
|
||||
gb({t:"status",bat:E.getBattery()});
|
||||
|
||||
global.GB = function(j) {
|
||||
switch (j.t) {
|
||||
case "notify":
|
||||
show(80,function(y) {
|
||||
// TODO: icon based on src?
|
||||
var x = 120;
|
||||
g.setFontAlign(0,0);
|
||||
g.setFont("6x8",1);
|
||||
g.setColor("#40d040");
|
||||
g.drawString(j.src,x,y+7);
|
||||
g.setColor("#ffffff");
|
||||
g.setFont("6x8",2);
|
||||
if (j.title === undefined) g.drawString(j.title,x,y+25);
|
||||
else g.drawString(j.title.slice(0,17),x,y+25);
|
||||
g.setFont("6x8",1);
|
||||
g.setColor("#ffffff");
|
||||
// split text up a word boundaries
|
||||
var txt = j.body.split("\n");
|
||||
function handleNotificationEvent(event) {
|
||||
|
||||
// split text up at word boundaries
|
||||
var txt = event.body.split("\n");
|
||||
var MAXCHARS = 38;
|
||||
for (var i = 0; i < txt.length; i++) {
|
||||
txt[i] = txt[i].trim();
|
||||
|
|
@ -77,36 +72,108 @@
|
|||
txt.splice(i + 1, 0, l.substr(p));
|
||||
}
|
||||
}
|
||||
|
||||
showNotification(80, (y) => {
|
||||
|
||||
// TODO: icon based on src?
|
||||
var x = 120;
|
||||
g.setFontAlign(0, 0);
|
||||
g.setFont("6x8", 1);
|
||||
g.setColor("#40d040");
|
||||
g.drawString(event.src, x, y + 7);
|
||||
|
||||
g.setColor("#ffffff");
|
||||
g.setFont("6x8", 2);
|
||||
if (event.title)
|
||||
g.drawString(event.title.slice(0,17), x, y + 25);
|
||||
|
||||
g.setFont("6x8", 1);
|
||||
g.setColor("#ffffff");
|
||||
g.setFontAlign(-1, -1);
|
||||
g.drawString(txt.join("\n"), 10, y + 40);
|
||||
Bangle.buzz();
|
||||
});
|
||||
break;
|
||||
case "musicinfo":
|
||||
musicInfo = j;
|
||||
break;
|
||||
case "musicstate":
|
||||
musicState = j.state;
|
||||
if (musicState=="play")
|
||||
show(40,function(y) {
|
||||
|
||||
Bangle.buzz();
|
||||
}
|
||||
|
||||
function handleMusicStateUpdate(event) {
|
||||
state.music = event.state
|
||||
|
||||
if (state.music == "play") {
|
||||
showNotification(40, (y) => {
|
||||
g.setColor("#ffffff");
|
||||
g.drawImage(require("heatshrink").decompress(atob("jEYwILI/EAv/8gP/ARcMgOAASN8h+A/kfwP8n4CD/E/gHgjg/HA=")), 8, y + 8);
|
||||
|
||||
g.setFontAlign(-1, -1);
|
||||
g.setFont("6x8",1);
|
||||
var x = 40;
|
||||
g.setFont("4x6", 2);
|
||||
g.setColor("#ffffff");
|
||||
g.drawString(musicInfo.artist,x,y+8);
|
||||
g.drawString(state.musicInfo.artist, x, y + 8);
|
||||
|
||||
g.setFont("6x8", 1);
|
||||
g.setColor("#ffffff");
|
||||
g.drawString(musicInfo.track,x,y+22);
|
||||
g.drawString(state.musicInfo.track, x, y + 22);
|
||||
});
|
||||
if (musicState=="pause")
|
||||
hide();
|
||||
}
|
||||
|
||||
if (state.music == "pause") {
|
||||
hideNotification();
|
||||
}
|
||||
}
|
||||
|
||||
function handleCallEvent(event) {
|
||||
|
||||
if (event.cmd == "accept") {
|
||||
showNotification(40, (y) => {
|
||||
g.setColor("#ffffff");
|
||||
g.drawImage(require("heatshrink").decompress(atob("jEYwIMJj4CCwACJh4CCCIMOAQMGAQMHAQMDAQMBCIMB4PwgHz/EAn4CBj4CBg4CBgACCAAw=")), 8, y + 8);
|
||||
|
||||
g.setFontAlign(-1, -1);
|
||||
var x = 40;
|
||||
g.setFont("4x6", 2);
|
||||
g.setColor("#ffffff");
|
||||
g.drawString(event.name, x, y + 8);
|
||||
|
||||
g.setFont("6x8", 1);
|
||||
g.setColor("#ffffff");
|
||||
g.drawString(event.number, x, y + 22);
|
||||
});
|
||||
|
||||
Bangle.buzz();
|
||||
}
|
||||
}
|
||||
|
||||
global.GB = (event) => {
|
||||
switch (event.t) {
|
||||
case "notify":
|
||||
handleNotificationEvent(event);
|
||||
break;
|
||||
case "musicinfo":
|
||||
state.musicInfo = event;
|
||||
break;
|
||||
case "musicstate":
|
||||
handleMusicStateUpdate(event);
|
||||
break;
|
||||
case "call":
|
||||
handleCallEvent(event);
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
// Touch control
|
||||
Bangle.on("touch", () => {
|
||||
if (state.scrollPos) {
|
||||
hideNotification();
|
||||
}
|
||||
});
|
||||
|
||||
Bangle.on("swipe", (dir) => {
|
||||
if (state.music == "play") {
|
||||
const command = dir > 0 ? "next" : "previous"
|
||||
gbSend({ t: "music", n: command });
|
||||
}
|
||||
});
|
||||
|
||||
function draw() {
|
||||
g.setColor(-1);
|
||||
if (NRF.getSecurityStatus().connected)
|
||||
|
|
@ -114,13 +181,16 @@ function draw() {
|
|||
else
|
||||
g.drawImage(require("heatshrink").decompress(atob("i0WwQFC1WgAgYFDAgIFClQFCwEK1W/AoIPB1f+CAMq1f7/WqwQPB/fq1Gq1/+/4dC/2/CAIaB/YbBAAO///qAoX/B4QbBDQQ7BDQQrBAAWoIIIACIIIVC0ECB4cACAZiBAoRtCAoIDBA")), this.x + 1, this.y + 1);
|
||||
}
|
||||
function changed() {
|
||||
|
||||
function changedConnectionState() {
|
||||
WIDGETS["gbridgew"].draw();
|
||||
g.flip(); // turns screen on
|
||||
}
|
||||
NRF.on('connected',changed);
|
||||
NRF.on('disconnected',changed);
|
||||
|
||||
NRF.on("connected", changedConnectionState);
|
||||
NRF.on("disconnected", changedConnectionState);
|
||||
|
||||
WIDGETS["gbridgew"] = { area: "tl", width: 24, draw: draw };
|
||||
|
||||
gbSend({ t: "status", bat: E.getBattery() });
|
||||
})();
|
||||
|
|
|
|||
|
|
@ -11,17 +11,7 @@ var domRecords = document.getElementById("records");
|
|||
|
||||
function saveRecord(record,name) {
|
||||
var csv = `${record.map(rec=>[rec.time, rec.bpm, rec.confidence].join(",")).join("\n")}`;
|
||||
var a = document.createElement("a"),
|
||||
file = new Blob([csv], {type: "Comma-separated value file"});
|
||||
var url = URL.createObjectURL(file);
|
||||
a.href = url;
|
||||
a.download = name+".csv";
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
setTimeout(function() {
|
||||
document.body.removeChild(a);
|
||||
window.URL.revokeObjectURL(url);
|
||||
}, 0);
|
||||
Util.saveCSV(name, csv);
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -56,7 +56,14 @@ exports = { name : "en_GB", currencySym:"£",
|
|||
});
|
||||
|
||||
var languageSelector = document.getElementById("languages");
|
||||
languageSelector.innerHTML = Object.keys(locales).map(l=>`<option value="${l}">${l}</option>`).join("\n");
|
||||
languageSelector.innerHTML = Object.keys(locales).map(l=>{
|
||||
var localeParts = l.split("_"); // en_GB -> ["en","GB"]
|
||||
var icon = "";
|
||||
// If we have a 2 char ISO country code, use it to get the unicode flag
|
||||
if (localeParts[1] && localeParts[1].length==2)
|
||||
icon = localeParts[1].toUpperCase().replace(/./g, char => String.fromCodePoint(char.charCodeAt(0)+127397) )+" ";
|
||||
return `<option value="${l}">${icon}${l}</option>`
|
||||
}).join("\n");
|
||||
|
||||
document.getElementById("upload").addEventListener("click", function() {
|
||||
|
||||
|
|
|
|||
|
|
@ -370,4 +370,21 @@ var locales = {
|
|||
abday: "Vas,Hét,Ke,Szer,Csüt,Pén,Szom",
|
||||
day: "Vasárnap,Hétfő,Kedd,Szerda,Csütörtök,Péntek,Szombat",
|
||||
trans: { yes: "igen", Yes: "Igen", no: "nem", No: "Nem", ok: "ok", on: "be", off: "ki" }},
|
||||
"pt_BR": {
|
||||
lang: "pt_BR",
|
||||
decimal_point: ",",
|
||||
thousands_sep: ".",
|
||||
currency_symbol: "R$", currency_first:true,
|
||||
int_curr_symbol: "BRL",
|
||||
speed: "kmh",
|
||||
distance: { 0: "m", 1: "km" },
|
||||
temperature: "°C",
|
||||
ampm: {0:"am",1:"pm"},
|
||||
timePattern: { 0: "%HH:%MM:%SS ", 1: "%HH:%MM" },
|
||||
datePattern: { 0: "", 1: "%d/%m/%y" },
|
||||
abmonth: "Jan,Fev,Mar,Abr,Mai,Jun,Jul,Ago,Set,Out,Nov,Dez",
|
||||
month: "Janeiro,Fevereiro,Março,Abril,Maio,Junho,Julho,Agosto,Setembro,Outubro,Novembro,Dezembro",
|
||||
abday: "Dom,Seg,Ter,Qua,Qui,Sex,Sab",
|
||||
day: "Domingo,Segunda-feira,Terça-feira,Quarta-feira,Quinta-feira,Sexta-feira,Sábado",
|
||||
trans: { yes: "sim", Yes: "Sim", no: "não", No: "Não", ok: "certo", on: "ligado", off: "desligado" }},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -2,3 +2,4 @@
|
|||
0.02: Fix day of the week and add padding
|
||||
0.03: use short date format from locale, take timeout from settings
|
||||
0.04: modify date to display to be more at the original idea but still localized
|
||||
0.05: use 12/24 hour clock from settings
|
||||
|
|
|
|||
|
|
@ -1,14 +1,15 @@
|
|||
/**********************************
|
||||
BangleJS MARIO CLOCK V0.1.0
|
||||
BangleJS MARIO CLOCK
|
||||
+ Based on Espruino Mario Clock V3 https://github.com/paulcockrell/espruino-mario-clock
|
||||
+ Converting images to 1bit BMP: Image > Mode > Indexed and tick the "Use black and white (1-bit) palette", Then export as BMP.
|
||||
+ Online Image convertor: https://www.espruino.com/Image+Converter
|
||||
**********************************/
|
||||
|
||||
var locale = require("locale");
|
||||
const locale = require("locale");
|
||||
const storage = require('Storage');
|
||||
const settings = (storage.readJSON('setting.json', 1) || {});
|
||||
const timeout = settings.timeout || 10;
|
||||
const is12Hour = settings["12hour"] || false;
|
||||
|
||||
// Screen dimensions
|
||||
let W, H;
|
||||
|
|
@ -273,7 +274,8 @@ function drawTime() {
|
|||
drawBrick(42, 25);
|
||||
|
||||
const t = new Date();
|
||||
const hours = ("0" + t.getHours()).substr(-2);
|
||||
const h = t.getHours();
|
||||
const hours = ("0" + ((is12Hour && h > 12) ? h - 12 : h)).substr(-2);
|
||||
const mins = ("0" + t.getMinutes()).substr(-2);
|
||||
|
||||
g.setFont("6x8");
|
||||
|
|
@ -374,8 +376,9 @@ function init() {
|
|||
Bangle.setLCDPower(true);
|
||||
}
|
||||
});
|
||||
|
||||
startTimers();
|
||||
}
|
||||
|
||||
// Initialise!
|
||||
init();
|
||||
startTimers();
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
0.01: First release
|
||||
|
|
@ -0,0 +1 @@
|
|||
require("heatshrink").decompress(atob("mEwwgMJgMQgMZzOREaERiERzIACiIVOAIIUCz///ORgIXNIQIAC/4ABJJYsBCogYEAYMQiAWGLAoAJJI8JLAYoCAAgJBJIIwGBohxBJI4YBJIwOFC4w5EC4hdOzIgCyLFDC45hHAAZJDgJAKMQwyBSYSOBxIXGPRTdChOfxChHbpRhBC4P5GAgAOgEZFAKjIBAz1EC5YYJxAvBJ4IXQzGIxEQB4RbPCoOIwEAOKAsCC4QvCFiAXDdwwsMC5eebogVGAALWBC42f/AWLC4zwCUgIEBCxK+DE4bsFC5+f/IrBC4RzHXwkZzATEDgP/RZAXFz5ECf4oXMCYKICC6hABMAQXOgAXBLgLrHRxZfCC6sBCo4XLLwIXBbAgXRMIQAGRxgwChIXVgEQIYimOGAZ6CSgOJC6CrCC4TZBC6IwCC4QWQPQYXKOggAFPQOfC5AWKPQgXGCpR6FOwoWOPQQXDIZYwHC4QVRAAQXBBxgA="))
|
||||
|
|
@ -0,0 +1,86 @@
|
|||
const dice = [4, 6, 8, 10, 12, 20, 100];
|
||||
const nFlips = 20;
|
||||
const delay = 500;
|
||||
|
||||
let dieIndex = 1;
|
||||
let face = 0;
|
||||
let rolling = false;
|
||||
|
||||
let bgColor;
|
||||
let fgColor;
|
||||
|
||||
function getDie() {
|
||||
return dice[dieIndex];
|
||||
}
|
||||
|
||||
function setColors(lastBounce) {
|
||||
if (lastBounce) {
|
||||
bgColor = 0xFFFF;
|
||||
fgColor = 0x0000;
|
||||
} else {
|
||||
bgColor = 0x0000
|
||||
fgColor = 0xFFFF;
|
||||
}
|
||||
}
|
||||
|
||||
function flipFace() {
|
||||
while(true) {
|
||||
let newFace = Math.floor(Math.random() * getDie()) + 1;
|
||||
if (newFace !== face) {
|
||||
face = newFace;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function draw() {
|
||||
g.setColor(bgColor);
|
||||
g.fillRect(0, 0, g.getWidth(), g.getHeight());
|
||||
g.setColor(fgColor);
|
||||
g.setFontAlign(0, 0);
|
||||
g.setFontVector(40);
|
||||
g.drawString('d' + getDie(), 180, 30);
|
||||
g.setFontVector(100);
|
||||
g.drawString(face, 120, 120);
|
||||
}
|
||||
|
||||
function roll(bounces) {
|
||||
flipFace();
|
||||
setColors(bounces === 0);
|
||||
draw();
|
||||
if (bounces > 0) {
|
||||
setTimeout(() => roll(bounces - 1), delay / bounces);
|
||||
} else {
|
||||
rolling = false;
|
||||
}
|
||||
}
|
||||
|
||||
function startRolling() {
|
||||
if (rolling) return;
|
||||
rolling = true;
|
||||
roll(nFlips);
|
||||
}
|
||||
|
||||
function changeDie() {
|
||||
if (rolling) return;
|
||||
dieIndex = (dieIndex + 1) % dice.length;
|
||||
draw();
|
||||
}
|
||||
|
||||
Bangle.on('lcdPower',function(on) {
|
||||
if (on) {
|
||||
startRolling();
|
||||
}
|
||||
});
|
||||
|
||||
g.clear();
|
||||
Bangle.loadWidgets();
|
||||
Bangle.drawWidgets();
|
||||
startRolling();
|
||||
|
||||
// Top button rolls the die, bottom button changes it
|
||||
setWatch(startRolling, BTN1, {repeat:true});
|
||||
setWatch(changeDie, BTN3, {repeat:true});
|
||||
|
||||
// Show launcher when middle button pressed
|
||||
setWatch(Bangle.showLauncher, BTN2, {repeat:false,edge:"falling"});
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 6.3 KiB |
|
|
@ -3,3 +3,5 @@
|
|||
Lap log now scrolls into 2nd column after 18th entry, able to display 36 entries before going off screen
|
||||
0.03: Added ability to save Lap log as a date named JSON file into memory
|
||||
Fixed bug from 0.01 where BN1 (reset) could clear the lap log when timer is running
|
||||
0.04: Changed save file filename, add interface.html to allow laps to be loaded
|
||||
0.05: Added widgets
|
||||
|
|
|
|||
|
|
@ -0,0 +1,90 @@
|
|||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href="../../css/spectre.min.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="records"></div>
|
||||
|
||||
<script src="../../lib/interface.js"></script>
|
||||
<script>
|
||||
var domRecords = document.getElementById("records");
|
||||
|
||||
function getLapTimes() {
|
||||
Util.showModal("Loading Lap Times...");
|
||||
domRecords.innerHTML = "";
|
||||
Puck.eval('require("Storage").list(/^swatch.*\.json/).map(fn=>({n:fn,d:require("Storage").readJSON(fn,1)}))',lapData=>{
|
||||
var html = `<div class="container">
|
||||
<div class="columns">\n`;
|
||||
lapData.forEach((lap,lapIndex) => {
|
||||
lap.date = lap.n.substr(7,16).replace("_"," ");
|
||||
html += `
|
||||
<div class="column col-12">
|
||||
<div class="card-header">
|
||||
<div class="card-title h5">${lap.date}</div>
|
||||
<div class="card-subtitle text-gray">${lap.d.length} Laps</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<table class="table table-striped table-hover">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>lap</th>
|
||||
<th>time</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
${ lap.d.map((d,n)=>`<tr><td>${n+1}</td><td>${d}</td></tr>`).join("\n") }
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<button class="btn btn-primary" idx="${lapIndex}" task="download">Download</button>
|
||||
<button class="btn btn-default" idx="${lapIndex}" task="delete">Delete</button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
});
|
||||
if (lapData.length==0) {
|
||||
html += `
|
||||
<div class="column col-12">
|
||||
<div class="card-header">
|
||||
<div class="card-title h5">No record</div>
|
||||
<div class="card-subtitle text-gray">No laps recorded</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
html += `
|
||||
</div>
|
||||
</div>`;
|
||||
domRecords.innerHTML = html;
|
||||
Util.hideModal();
|
||||
var buttons = domRecords.querySelectorAll("button");
|
||||
for (var i=0;i<buttons.length;i++) {
|
||||
buttons[i].addEventListener("click",event => {
|
||||
var button = event.currentTarget;
|
||||
var lapIndex = parseInt(button.getAttribute("idx"));
|
||||
var lap = lapData[lapIndex];
|
||||
if (!lap) throw new Error("Invalid index!");
|
||||
var task = button.getAttribute("task");
|
||||
if (task=="delete") {
|
||||
Util.showModal("Deleting lap time...");
|
||||
Util.eraseStorage(lap.n,()=>{
|
||||
Util.hideModal();
|
||||
getLapTimes();
|
||||
});
|
||||
}
|
||||
if (task=="download") {
|
||||
Util.saveCSV(lap.n.slice(0,-5)+".csv", lap.d.map((d,n)=>[n+1,d].join(",")).join("\n"));
|
||||
}
|
||||
});
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function onInit() {
|
||||
getLapTimes();
|
||||
}
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -4,7 +4,6 @@ var started = false;
|
|||
var timeY = 60;
|
||||
var hsXPos = 0;
|
||||
var lapTimes = [];
|
||||
var saveTimes = [];
|
||||
var displayInterval;
|
||||
|
||||
function timeToText(t) {
|
||||
|
|
@ -14,24 +13,26 @@ function timeToText(t) {
|
|||
return mins+":"+("0"+secs).substr(-2)+"."+("0"+hs).substr(-2);
|
||||
}
|
||||
function updateLabels() {
|
||||
g.clear();
|
||||
g.reset(1);
|
||||
g.clearRect(0,23,g.getWidth()-1,g.getHeight()-24);
|
||||
g.setFont("6x8",2);
|
||||
g.setFontAlign(0,0,3);
|
||||
g.drawString(started?"STOP":"GO",230,120);
|
||||
if (!started) g.drawString("RESET",230,190);
|
||||
if (!started) g.drawString("RESET",230,180);
|
||||
g.drawString(started?"LAP":"SAVE",230,50);
|
||||
g.setFont("6x8",1);
|
||||
g.setFontAlign(-1,-1);
|
||||
for (var i in lapTimes) {
|
||||
if (i<18)
|
||||
if (i<16)
|
||||
{g.drawString(lapTimes.length-i+": "+timeToText(lapTimes[i]),35,timeY + 30 + i*8);}
|
||||
else
|
||||
{g.drawString(lapTimes.length-i+": "+timeToText(lapTimes[i]),125,timeY + 30 + (i-18)*8);}
|
||||
else if (i<32)
|
||||
{g.drawString(lapTimes.length-i+": "+timeToText(lapTimes[i]),125,timeY + 30 + (i-16)*8);}
|
||||
}
|
||||
drawsecs();
|
||||
}
|
||||
function drawsecs() {
|
||||
var t = tCurrent-tStart;
|
||||
g.reset(1);
|
||||
g.setFont("Vector",48);
|
||||
g.setFontAlign(0,0);
|
||||
var secs = Math.floor(t/1000)%60;
|
||||
|
|
@ -51,10 +52,8 @@ function drawms() {
|
|||
g.clearRect(hsXPos,timeY,220,timeY+20);
|
||||
g.drawString("."+("0"+hs).substr(-2),hsXPos,timeY+10);
|
||||
}
|
||||
function saveconvert() {
|
||||
for (var v in lapTimes){
|
||||
saveTimes[v]=v+1+"-"+timeToText(lapTimes[(lapTimes.length-1)-v]);
|
||||
}
|
||||
function getLapTimesArray() {
|
||||
return lapTimes.map(timeToText).reverse();
|
||||
}
|
||||
|
||||
setWatch(function() { // Start/stop
|
||||
|
|
@ -80,16 +79,21 @@ setWatch(function() { // Start/stop
|
|||
}, BTN2, {repeat:true});
|
||||
setWatch(function() { // Lap
|
||||
Bangle.beep();
|
||||
if (started) tCurrent = Date.now();
|
||||
if (started) {
|
||||
tCurrent = Date.now();
|
||||
lapTimes.unshift(tCurrent-tStart);
|
||||
tStart = tCurrent;
|
||||
if (!started)
|
||||
{
|
||||
var timenow= Date();
|
||||
saveconvert();
|
||||
require("Storage").writeJSON("StpWch-"+timenow.toString(), saveTimes);
|
||||
}
|
||||
tStart = tCurrent;
|
||||
if (!started) { // save
|
||||
var timenow= Date();
|
||||
var filename = "swatch-"+(new Date()).toISOString().substr(0,16).replace("T","_")+".json";
|
||||
// this maxes out the 28 char maximum
|
||||
require("Storage").writeJSON(filename, getLapTimesArray());
|
||||
E.showMessage("Laps Saved","Stopwatch");
|
||||
setTimeout(updateLabels, 1000);
|
||||
} else {
|
||||
updateLabels();
|
||||
}
|
||||
}, BTN1, {repeat:true});
|
||||
setWatch(function() { // Reset
|
||||
if (!started) {
|
||||
|
|
@ -101,3 +105,5 @@ setWatch(function() { // Reset
|
|||
}, BTN3, {repeat:true});
|
||||
|
||||
updateLabels();
|
||||
Bangle.loadWidgets();
|
||||
Bangle.drawWidgets();
|
||||
|
|
|
|||
|
|
@ -1 +1,2 @@
|
|||
0.01: New App!
|
||||
0.02: Add swipe support and doucle tap to run application
|
||||
|
|
@ -103,10 +103,28 @@ function drawMenu(){
|
|||
}
|
||||
|
||||
drawMenu();
|
||||
|
||||
// Physical buttons
|
||||
setWatch(prev, BTN1, {repeat:true});
|
||||
setWatch(prev, BTN4, {repeat:true});
|
||||
|
||||
setWatch(next, BTN3, {repeat:true});
|
||||
setWatch(next, BTN5, {repeat:true});
|
||||
|
||||
setWatch(run, BTN2, {repeat:true,edge:"falling"});
|
||||
|
||||
// Screen event
|
||||
Bangle.on('touch', function(button){
|
||||
switch(button){
|
||||
case 1:
|
||||
prev();
|
||||
break;
|
||||
case 2:
|
||||
next();
|
||||
break;
|
||||
case 3:
|
||||
run();
|
||||
break;
|
||||
}
|
||||
});
|
||||
|
||||
Bangle.on('swipe', dir => {
|
||||
if(dir == 1) prev();
|
||||
else next();
|
||||
});
|
||||
|
|
@ -0,0 +1 @@
|
|||
0.01: New App!
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
/* jshint esversion: 6 */
|
||||
(() => {
|
||||
|
||||
const BLACK = 0, MOON = 0x41f, MC = 29.5305882, NM = 694039.09;
|
||||
var r = 12, mx = 0, my = 0;
|
||||
|
||||
var moon = {
|
||||
0: () => { g.reset().setColor(BLACK).fillRect(mx - r, my - r, mx + r, my + r);},
|
||||
1: () => { moon[0](); g.setColor(MOON).drawCircle(mx, my, r);},
|
||||
2: () => { moon[3](); g.setColor(BLACK).fillEllipse(mx - r / 2, my - r, mx + r / 2, my + r);},
|
||||
3: () => { moon[0](); g.setColor(MOON).fillCircle(mx, my, r).setColor(BLACK).fillRect(mx - r, my - r, mx, my + r);},
|
||||
4: () => { moon[3](); g.setColor(MOON).fillEllipse(mx - r / 2, my - r, mx + r / 2, my + r);},
|
||||
5: () => { moon[0](); g.setColor(MOON).fillCircle(mx, my, r);},
|
||||
6: () => { moon[7](); g.setColor(MOON).fillEllipse(mx - r / 2, my - r, mx + r / 2, my + r);},
|
||||
7: () => { moon[0](); g.setColor(MOON).fillCircle(mx, my, r).setColor(BLACK).fillRect(mx, my - r, mx + r + r, my + r);},
|
||||
8: () => { moon[7](); g.setColor(BLACK).fillEllipse(mx - r / 2, my - r, mx + r / 2, my + r);}
|
||||
};
|
||||
|
||||
function moonPhase(d) {
|
||||
var tmp, month = d.getMonth(), year = d.getFullYear(), day = d.getDate();
|
||||
if (month < 3) {year--; month += 12;}
|
||||
tmp = ((365.25 * year + 30.6 * ++month + day - NM) / MC);
|
||||
return Math.round(((tmp - (tmp | 0)) * 7)+1);
|
||||
}
|
||||
|
||||
function draw() {
|
||||
mx = this.x; my = this.y + 12;
|
||||
moon[moonPhase(Date())]();
|
||||
}
|
||||
|
||||
WIDGETS["widmoon"] = { area: "tr", width: 24, draw: draw };
|
||||
|
||||
})();
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
|
|
@ -129,6 +129,7 @@
|
|||
|
||||
<script src="https://www.puck-js.com/puck.js"></script>
|
||||
<script src="js/utils.js"></script>
|
||||
<script src="js/ui.js"></script>
|
||||
<script src="js/comms.js"></script>
|
||||
<script src="js/appinfo.js"></script>
|
||||
<script src="js/index.js"></script>
|
||||
|
|
|
|||
41
js/comms.js
41
js/comms.js
|
|
@ -9,14 +9,19 @@ reset : (opt) => new Promise((resolve,reject) => {
|
|||
});
|
||||
}),
|
||||
uploadApp : (app,skipReset) => {
|
||||
Progress.show({title:`Uploading ${app.name}`,sticky:true});
|
||||
return AppInfo.getFiles(app, httpGet).then(fileContents => {
|
||||
return new Promise((resolve,reject) => {
|
||||
console.log("uploadApp",fileContents.map(f=>f.name).join(", "));
|
||||
var maxBytes = fileContents.reduce((b,f)=>b+f.content.length, 0)||1;
|
||||
var currentBytes = 0;
|
||||
|
||||
// Upload each file one at a time
|
||||
function doUploadFiles() {
|
||||
// No files left - print 'reboot' message
|
||||
if (fileContents.length==0) {
|
||||
Puck.write(`\x10E.showMessage('Hold BTN3\\nto reload')\n`,(result) => {
|
||||
Progress.hide({sticky:true});
|
||||
if (result===null) return reject("");
|
||||
resolve(app);
|
||||
});
|
||||
|
|
@ -24,17 +29,27 @@ uploadApp : (app,skipReset) => {
|
|||
}
|
||||
var f = fileContents.shift();
|
||||
console.log(`Upload ${f.name} => ${JSON.stringify(f.content)}`);
|
||||
Progress.show({
|
||||
min:currentBytes / maxBytes,
|
||||
max:(currentBytes+f.content.length) / maxBytes});
|
||||
currentBytes += f.content.length;
|
||||
// Chould check CRC here if needed instead of returning 'OK'...
|
||||
// E.CRC32(require("Storage").read(${JSON.stringify(app.name)}))
|
||||
Puck.write(`\x10${f.cmd};Bluetooth.println("OK")\n`,(result) => {
|
||||
if (!result || result.trim()!="OK") return reject("Unexpected response "+(result||""));
|
||||
if (!result || result.trim()!="OK") {
|
||||
Progress.hide({sticky:true});
|
||||
return reject("Unexpected response "+(result||""));
|
||||
}
|
||||
doUploadFiles();
|
||||
}, true); // wait for a newline
|
||||
}
|
||||
// Start the upload
|
||||
function doUpload() {
|
||||
Puck.write(`\x10E.showMessage('Uploading\\n${app.id}...')\n`,(result) => {
|
||||
if (result===null) return reject("");
|
||||
if (result===null) {
|
||||
Progress.hide({sticky:true});
|
||||
return reject("");
|
||||
}
|
||||
doUploadFiles();
|
||||
});
|
||||
}
|
||||
|
|
@ -48,10 +63,15 @@ uploadApp : (app,skipReset) => {
|
|||
});
|
||||
},
|
||||
getInstalledApps : () => {
|
||||
Progress.show({title:`Getting app list...`,sticky:true});
|
||||
return new Promise((resolve,reject) => {
|
||||
Puck.write("\x03",(result) => {
|
||||
if (result===null) return reject("");
|
||||
if (result===null) {
|
||||
Progress.hide({sticky:true});
|
||||
return reject("");
|
||||
}
|
||||
Puck.eval('require("Storage").list(/\.info$/).map(f=>{var j=require("Storage").readJSON(f,1)||{};j.id=f.slice(0,-5);return j})', (appList,err) => {
|
||||
Progress.hide({sticky:true});
|
||||
if (appList===null) return reject(err || "");
|
||||
console.log("getInstalledApps", appList);
|
||||
resolve(appList);
|
||||
|
|
@ -60,6 +80,7 @@ getInstalledApps : () => {
|
|||
});
|
||||
},
|
||||
removeApp : app => { // expects an app structure
|
||||
Progress.show({title:`Removing ${app.name}`,sticky:true});
|
||||
var storage = [{name:app.id+".info"}].concat(app.storage);
|
||||
var cmds = storage.map(file=>{
|
||||
return `\x10require("Storage").erase(${toJS(file.name)});\n`;
|
||||
|
|
@ -67,15 +88,21 @@ removeApp : app => { // expects an app structure
|
|||
console.log("removeApp", cmds);
|
||||
return Comms.reset().then(new Promise((resolve,reject) => {
|
||||
Puck.write(`\x03\x10E.showMessage('Erasing\\n${app.id}...')${cmds}\x10E.showMessage('Hold BTN3\\nto reload')\n`,(result) => {
|
||||
Progress.hide({sticky:true});
|
||||
if (result===null) return reject("");
|
||||
resolve();
|
||||
});
|
||||
}));
|
||||
})).catch(function(reason) {
|
||||
Progress.hide({sticky:true});
|
||||
return Promise.reject(reason);
|
||||
});
|
||||
},
|
||||
removeAllApps : () => {
|
||||
Progress.show({title:"Removing all apps",progess:"animate",sticky:true});
|
||||
return new Promise((resolve,reject) => {
|
||||
// Use write with newline here so we wait for it to finish
|
||||
Puck.write('\x10E.showMessage("Erasing...");require("Storage").eraseAll();Bluetooth.println("OK");reset()\n', (result,err) => {
|
||||
Progress.hide({sticky:true});
|
||||
if (!result || result.trim()!="OK") return reject(err || "");
|
||||
resolve();
|
||||
}, true /* wait for newline */);
|
||||
|
|
@ -171,10 +198,10 @@ readStorageFile : (filename) => { // StorageFiles are different to normal storag
|
|||
fileContent = fileContent.substr(newLineIdx+1);
|
||||
}
|
||||
} else {
|
||||
showProgress(undefined,100*fileContent.length / (fileSize||1000000));
|
||||
Progress.show({percent:100*fileContent.length / (fileSize||1000000)});
|
||||
}
|
||||
if (finished) {
|
||||
hideProgress();
|
||||
Progress.hide();
|
||||
connection.received = "";
|
||||
connection.cb = undefined;
|
||||
resolve(fileContent);
|
||||
|
|
@ -188,7 +215,7 @@ readStorageFile : (filename) => { // StorageFiles are different to normal storag
|
|||
while (l!==undefined) { Bluetooth.print(l); l = f.readLine(); }
|
||||
Bluetooth.print("\xFF");
|
||||
})()\n`,() => {
|
||||
showProgress(`Reading ${JSON.stringify(filename)}`,0);
|
||||
Progress.show({title:`Reading ${JSON.stringify(filename)}`,percent:0});
|
||||
console.log(`StorageFile read started...`);
|
||||
});
|
||||
});
|
||||
|
|
|
|||
144
js/index.js
144
js/index.js
|
|
@ -14,119 +14,7 @@ httpGet("apps.json").then(apps=>{
|
|||
refreshFilter();
|
||||
});
|
||||
|
||||
// Status
|
||||
// =========================================== Top Navigation
|
||||
function showToast(message, type) {
|
||||
// toast-primary, toast-success, toast-warning or toast-error
|
||||
var style = "toast-primary";
|
||||
if (type=="success") style = "toast-success";
|
||||
else if (type=="error") style = "toast-error";
|
||||
else if (type!==undefined) console.log("showToast: unknown toast "+type);
|
||||
var toastcontainer = document.getElementById("toastcontainer");
|
||||
var msgDiv = htmlElement(`<div class="toast ${style}"></div>`);
|
||||
msgDiv.innerHTML = message;
|
||||
toastcontainer.append(msgDiv);
|
||||
setTimeout(function() {
|
||||
msgDiv.remove();
|
||||
}, 5000);
|
||||
}
|
||||
var progressToast; // the DOM element
|
||||
var progressSticky; // showProgress(,,"sticky") don't remove until hideProgress("sticky")
|
||||
var progressInterval; // the interval used if showProgress(..., "animate")
|
||||
var progressPercent; // the current progress percentage
|
||||
function showProgress(text, percent, sticky) {
|
||||
if (sticky=="sticky")
|
||||
progressSticky = true;
|
||||
if (!progressToast) {
|
||||
if (progressInterval) {
|
||||
clearInterval(progressInterval);
|
||||
progressInterval = undefined;
|
||||
}
|
||||
if (percent == "animate") {
|
||||
progressInterval = setInterval(function() {
|
||||
progressPercent += 2;
|
||||
if (progressPercent>100) progressPercent=0;
|
||||
showProgress(undefined, progressPercent);
|
||||
}, 100);
|
||||
percent = 0;
|
||||
}
|
||||
progressPercent = percent;
|
||||
|
||||
var toastcontainer = document.getElementById("toastcontainer");
|
||||
progressToast = htmlElement(`<div class="toast">
|
||||
${text ? `<div>${text}</div>`:``}
|
||||
<div class="bar bar-sm">
|
||||
<div class="bar-item" id="progressToast" role="progressbar" style="width:${percent}%;" aria-valuenow="${percent}" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>`);
|
||||
toastcontainer.append(progressToast);
|
||||
} else {
|
||||
var pt=document.getElementById("progressToast");
|
||||
pt.setAttribute("aria-valuenow",percent);
|
||||
pt.style.width = percent+"%";
|
||||
}
|
||||
}
|
||||
function hideProgress(sticky) {
|
||||
if (progressSticky && sticky!="sticky")
|
||||
return;
|
||||
progressSticky = false;
|
||||
if (progressInterval) {
|
||||
clearInterval(progressInterval);
|
||||
progressInterval = undefined;
|
||||
}
|
||||
if (progressToast) progressToast.remove();
|
||||
progressToast = undefined;
|
||||
}
|
||||
|
||||
Puck.writeProgress = function(charsSent, charsTotal) {
|
||||
if (charsSent===undefined) {
|
||||
hideProgress();
|
||||
return;
|
||||
}
|
||||
var percent = Math.round(charsSent*100/charsTotal);
|
||||
showProgress(undefined, percent);
|
||||
}
|
||||
function showPrompt(title, text, buttons) {
|
||||
if (!buttons) buttons={yes:1,no:1};
|
||||
return new Promise((resolve,reject) => {
|
||||
var modal = htmlElement(`<div class="modal active">
|
||||
<!--<a href="#close" class="modal-overlay" aria-label="Close"></a>-->
|
||||
<div class="modal-container">
|
||||
<div class="modal-header">
|
||||
<a href="#close" class="btn btn-clear float-right" aria-label="Close"></a>
|
||||
<div class="modal-title h5">${escapeHtml(title)}</div>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="content">
|
||||
${escapeHtml(text).replace(/\n/g,'<br/>')}
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<div class="modal-footer">
|
||||
${buttons.yes?'<button class="btn btn-primary" isyes="1">Yes</button>':''}
|
||||
${buttons.no?'<button class="btn" isyes="0">No</button>':''}
|
||||
${buttons.ok?'<button class="btn" isyes="1">Ok</button>':''}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>`);
|
||||
document.body.append(modal);
|
||||
modal.querySelector("a[href='#close']").addEventListener("click",event => {
|
||||
event.preventDefault();
|
||||
reject("User cancelled");
|
||||
modal.remove();
|
||||
});
|
||||
htmlToArray(modal.getElementsByTagName("button")).forEach(button => {
|
||||
button.addEventListener("click",event => {
|
||||
event.preventDefault();
|
||||
var isYes = event.target.getAttribute("isyes")=="1";
|
||||
if (isYes) resolve();
|
||||
else reject("User cancelled");
|
||||
modal.remove();
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
function showChangeLog(appid) {
|
||||
var app = appNameToApp(appid);
|
||||
function show(contents) {
|
||||
|
|
@ -170,12 +58,11 @@ function handleCustomApp(appTemplate) {
|
|||
Object.keys(appFiles).forEach(k => app[k] = appFiles[k]);
|
||||
console.log("Received custom app", app);
|
||||
modal.remove();
|
||||
showProgress(`Uploading ${app.name}`,undefined,"sticky");
|
||||
Comms.uploadApp(app).then(()=>{
|
||||
hideProgress("sticky");
|
||||
Progress.hide({sticky:true});
|
||||
resolve();
|
||||
}).catch(e => {
|
||||
hideProgress("sticky");
|
||||
Progress.hide({sticky:true});
|
||||
reject(e);
|
||||
});
|
||||
}, false);
|
||||
|
|
@ -334,9 +221,8 @@ function refreshLibrary() {
|
|||
// upload
|
||||
icon.classList.remove("icon-upload");
|
||||
icon.classList.add("loading");
|
||||
showProgress(`Uploading ${app.name}`,undefined,"sticky");
|
||||
Comms.uploadApp(app).then((appJSON) => {
|
||||
hideProgress("sticky");
|
||||
Progress.hide({sticky:true});
|
||||
if (appJSON) appsInstalled.push(appJSON);
|
||||
showToast(app.name+" Uploaded!", "success");
|
||||
icon.classList.remove("loading");
|
||||
|
|
@ -344,7 +230,7 @@ function refreshLibrary() {
|
|||
refreshMyApps();
|
||||
refreshLibrary();
|
||||
}).catch(err => {
|
||||
hideProgress("sticky");
|
||||
Progress.hide({sticky:true});
|
||||
showToast("Upload failed, "+err, "error");
|
||||
icon.classList.remove("loading");
|
||||
icon.classList.add("icon-upload");
|
||||
|
|
@ -403,19 +289,16 @@ function customApp(app) {
|
|||
|
||||
function updateApp(app) {
|
||||
if (app.custom) return customApp(app);
|
||||
showProgress(`Upgrading ${app.name}`,undefined,"sticky");
|
||||
return Comms.removeApp(app).then(()=>{
|
||||
showToast(app.name+" removed successfully. Updating...",);
|
||||
appsInstalled = appsInstalled.filter(a=>a.id!=app.id);
|
||||
return Comms.uploadApp(app);
|
||||
}).then((appJSON) => {
|
||||
hideProgress("sticky");
|
||||
if (appJSON) appsInstalled.push(appJSON);
|
||||
showToast(app.name+" Updated!", "success");
|
||||
refreshMyApps();
|
||||
refreshLibrary();
|
||||
}, err=>{
|
||||
hideProgress("sticky");
|
||||
showToast(app.name+" update failed, "+err,"error");
|
||||
refreshMyApps();
|
||||
refreshLibrary();
|
||||
|
|
@ -488,18 +371,15 @@ return `<div class="tile column col-6 col-sm-12 col-xs-12">
|
|||
|
||||
function getInstalledApps() {
|
||||
showLoadingIndicator("myappscontainer");
|
||||
showProgress(`Getting app list...`,undefined,"sticky");
|
||||
// Get apps and files
|
||||
return Comms.getInstalledApps()
|
||||
.then(appJSON => {
|
||||
hideProgress("sticky");
|
||||
appsInstalled = appJSON;
|
||||
refreshMyApps();
|
||||
refreshLibrary();
|
||||
})
|
||||
.then(() => handleConnectionChange(true))
|
||||
.catch(err=>{
|
||||
hideProgress("sticky");
|
||||
return Promise.reject();
|
||||
});
|
||||
}
|
||||
|
|
@ -555,15 +435,14 @@ document.getElementById("settime").addEventListener("click",event=>{
|
|||
});
|
||||
document.getElementById("removeall").addEventListener("click",event=>{
|
||||
showPrompt("Remove All","Really remove all apps?").then(() => {
|
||||
showProgress("Removing all apps","animate", "sticky");
|
||||
return Comms.removeAllApps();
|
||||
}).then(()=>{
|
||||
hideProgress("sticky");
|
||||
Progress.hide({sticky:true});
|
||||
appsInstalled = [];
|
||||
showToast("All apps removed","success");
|
||||
return getInstalledApps();
|
||||
}).catch(err=>{
|
||||
hideProgress("sticky");
|
||||
Progress.hide({sticky:true});
|
||||
showToast("App removal failed, "+err,"error");
|
||||
});
|
||||
});
|
||||
|
|
@ -578,24 +457,23 @@ document.getElementById("installdefault").addEventListener("click",event=>{
|
|||
appCount = defaultApps.length;
|
||||
return showPrompt("Install Defaults","Remove everything and install default apps?");
|
||||
}).then(() => {
|
||||
showProgress("Removing all apps","animate", "sticky");
|
||||
return Comms.removeAllApps();
|
||||
}).then(()=>{
|
||||
hideProgress("sticky");
|
||||
Progress.hide({sticky:true});
|
||||
appsInstalled = [];
|
||||
showToast(`Existing apps removed. Installing ${appCount} apps...`);
|
||||
return new Promise((resolve,reject) => {
|
||||
function upload() {
|
||||
var app = defaultApps.shift();
|
||||
if (app===undefined) return resolve();
|
||||
showProgress(`${app.name} (${appCount-defaultApps.length}/${appCount})`,undefined,"sticky");
|
||||
Progress.show({title:`${app.name} (${appCount-defaultApps.length}/${appCount})`,sticky:true});
|
||||
Comms.uploadApp(app,"skip_reset").then((appJSON) => {
|
||||
hideProgress("sticky");
|
||||
Progress.hide({sticky:true});
|
||||
if (appJSON) appsInstalled.push(appJSON);
|
||||
showToast(`(${appCount-defaultApps.length}/${appCount}) ${app.name} Uploaded`);
|
||||
upload();
|
||||
}).catch(function() {
|
||||
hideProgress("sticky");
|
||||
Progress.hide({sticky:true});
|
||||
reject()
|
||||
});
|
||||
}
|
||||
|
|
@ -607,7 +485,7 @@ document.getElementById("installdefault").addEventListener("click",event=>{
|
|||
showToast("Default apps successfully installed!","success");
|
||||
return getInstalledApps();
|
||||
}).catch(err=>{
|
||||
hideProgress("sticky");
|
||||
Progress.hide({sticky:true});
|
||||
showToast("App Install failed, "+err,"error");
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -0,0 +1,140 @@
|
|||
// General UI tools (progress bar, toast, prompt)
|
||||
|
||||
/// Handle progress bars
|
||||
var Progress = {
|
||||
domElement : null, // the DOM element
|
||||
sticky : false, // Progress.show({..., sticky:true}) don't remove until Progress.hide({sticky:true})
|
||||
interval : undefined, // the interval used if Progress.show({progress:"animate"})
|
||||
percent : undefined, // the current progress percentage
|
||||
min : 0, // scaling for percentage
|
||||
max : 1, // scaling for percentage
|
||||
|
||||
/* Show a Progress message
|
||||
Progress.show({
|
||||
sticky : bool // keep showing text even when Progress.hide is called (unless Progress.hide({sticky:true}))
|
||||
percent : number | "animate"
|
||||
min : // minimum scale for percentage (default 0)
|
||||
max : // maximum scale for percentage (default 1)
|
||||
}) */
|
||||
show : function(options) {
|
||||
options = options||{};
|
||||
var text = options.title;
|
||||
if (options.sticky) Progress.sticky = true;
|
||||
if (options.min!==undefined) Progress.min = options.min;
|
||||
if (options.max!==undefined) Progress.max = options.max;
|
||||
var percent = options.percent;
|
||||
if (percent!==undefined)
|
||||
percent = Progress.min*100 + (Progress.max-Progress.min)*percent;
|
||||
if (!Progress.domElement) {
|
||||
if (Progress.interval) {
|
||||
clearInterval(Progress.interval);
|
||||
Progress.interval = undefined;
|
||||
}
|
||||
if (percent == "animate") {
|
||||
Progress.interval = setInterval(function() {
|
||||
Progress.percent += 2;
|
||||
if (Progress.percent>100) Progress.percent=0;
|
||||
Progress.show({percent:Progress.percent});
|
||||
}, 100);
|
||||
percent = 0;
|
||||
}
|
||||
|
||||
var toastcontainer = document.getElementById("toastcontainer");
|
||||
Progress.domElement = htmlElement(`<div class="toast">
|
||||
${text ? `<div>${text}</div>`:``}
|
||||
<div class="bar bar-sm">
|
||||
<div class="bar-item" id="Progress.domElement" role="progressbar" style="width:${percent}%;" aria-valuenow="${percent}" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>`);
|
||||
toastcontainer.append(Progress.domElement);
|
||||
} else {
|
||||
var pt=document.getElementById("Progress.domElement");
|
||||
pt.setAttribute("aria-valuenow",percent);
|
||||
pt.style.width = percent+"%";
|
||||
}
|
||||
},
|
||||
// Progress.hide({sticky:true}) undoes Progress.show({title:"title", sticky:true})
|
||||
hide : function(options) {
|
||||
options = options||{};
|
||||
if (Progress.sticky && !options.sticky)
|
||||
return;
|
||||
Progress.sticky = false;
|
||||
Progress.min = 0;
|
||||
Progress.max = 1;
|
||||
if (Progress.interval) {
|
||||
clearInterval(Progress.interval);
|
||||
Progress.interval = undefined;
|
||||
}
|
||||
if (Progress.domElement) Progress.domElement.remove();
|
||||
Progress.domElement = undefined;
|
||||
}
|
||||
};
|
||||
|
||||
/// Add progress handler so we get nice uploads
|
||||
Puck.writeProgress = function(charsSent, charsTotal) {
|
||||
if (charsSent===undefined) {
|
||||
Progress.hide();
|
||||
return;
|
||||
}
|
||||
var percent = Math.round(charsSent*100/charsTotal);
|
||||
Progress.show({percent: percent});
|
||||
}
|
||||
|
||||
/// Show a 'toast' message for status
|
||||
function showToast(message, type) {
|
||||
// toast-primary, toast-success, toast-warning or toast-error
|
||||
var style = "toast-primary";
|
||||
if (type=="success") style = "toast-success";
|
||||
else if (type=="error") style = "toast-error";
|
||||
else if (type!==undefined) console.log("showToast: unknown toast "+type);
|
||||
var toastcontainer = document.getElementById("toastcontainer");
|
||||
var msgDiv = htmlElement(`<div class="toast ${style}"></div>`);
|
||||
msgDiv.innerHTML = message;
|
||||
toastcontainer.append(msgDiv);
|
||||
setTimeout(function() {
|
||||
msgDiv.remove();
|
||||
}, 5000);
|
||||
}
|
||||
|
||||
/// Show a yes/no prompt
|
||||
function showPrompt(title, text, buttons) {
|
||||
if (!buttons) buttons={yes:1,no:1};
|
||||
return new Promise((resolve,reject) => {
|
||||
var modal = htmlElement(`<div class="modal active">
|
||||
<!--<a href="#close" class="modal-overlay" aria-label="Close"></a>-->
|
||||
<div class="modal-container">
|
||||
<div class="modal-header">
|
||||
<a href="#close" class="btn btn-clear float-right" aria-label="Close"></a>
|
||||
<div class="modal-title h5">${escapeHtml(title)}</div>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="content">
|
||||
${escapeHtml(text).replace(/\n/g,'<br/>')}
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<div class="modal-footer">
|
||||
${buttons.yes?'<button class="btn btn-primary" isyes="1">Yes</button>':''}
|
||||
${buttons.no?'<button class="btn" isyes="0">No</button>':''}
|
||||
${buttons.ok?'<button class="btn" isyes="1">Ok</button>':''}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>`);
|
||||
document.body.append(modal);
|
||||
modal.querySelector("a[href='#close']").addEventListener("click",event => {
|
||||
event.preventDefault();
|
||||
reject("User cancelled");
|
||||
modal.remove();
|
||||
});
|
||||
htmlToArray(modal.getElementsByTagName("button")).forEach(button => {
|
||||
button.addEventListener("click",event => {
|
||||
event.preventDefault();
|
||||
var isYes = event.target.getAttribute("isyes")=="1";
|
||||
if (isYes) resolve();
|
||||
else reject("User cancelled");
|
||||
modal.remove();
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
|
|
@ -39,7 +39,10 @@ var Util = {
|
|||
window.postMessage({type:"readstoragefile",data:filename,id:__id});
|
||||
},
|
||||
eraseStorageFile : function(filename,callback) {
|
||||
Puck.write(`\x10require("Storage").open(${JSON.stringify(filename)}","r").erase()\n`,callback);
|
||||
Puck.write(`\x10require("Storage").open(${JSON.stringify(filename)},"r").erase()\n`,callback);
|
||||
},
|
||||
eraseStorage : function(filename,callback) {
|
||||
Puck.write(`\x10require("Storage").erase(${JSON.stringify(filename)})\n`,callback);
|
||||
},
|
||||
showModal : function(title) {
|
||||
if (!Util.domModal) {
|
||||
|
|
@ -66,6 +69,19 @@ var Util = {
|
|||
hideModal : function() {
|
||||
if (!Util.domModal) return;
|
||||
Util.domModal.classList.remove("active");
|
||||
},
|
||||
saveCSV : function(filename, csvData) {
|
||||
var a = document.createElement("a"),
|
||||
file = new Blob([csvData], {type: "Comma-separated value file"});
|
||||
var url = URL.createObjectURL(file);
|
||||
a.href = url;
|
||||
a.download = filename+".csv";
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
setTimeout(function() {
|
||||
document.body.removeChild(a);
|
||||
window.URL.revokeObjectURL(url);
|
||||
}, 0);
|
||||
}
|
||||
};
|
||||
window.addEventListener("message", function(event) {
|
||||
|
|
|
|||
Loading…
Reference in New Issue