Merge branch 'master' into app_settings

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": [
@@ -392,7 +392,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,
@@ -892,7 +893,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",
@@ -999,7 +1000,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",
@@ -1020,5 +1021,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"}
+    ]
   }
 ]

apps/gbridge/ChangeLog

@@ -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

apps/gbridge/app.js

@@ -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();},
 };

apps/gbridge/widget.js

@@ -1,126 +1,196 @@
-(function() {
+(() => {
-  var musicState = "stop";
+
-  var musicInfo = {"artist":"","album":"","track":""};
+  const state = {
-  var scrollPos = 0;
+    music: "stop",
-  function gb(j) {
+
-    Bluetooth.println(JSON.stringify(j));
+    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.setClipRect(0, 240, 239, 319);
     g.setColor("#222222");
-    g.fillRect(1,241,238,318);
+    g.fillRect(1, 241, 238, 318);
-    render(320-size);
+
+    render(320 - size);
+
     g.setColor("#ffffff");
-    g.fillRect(0,240,1,319);
+    g.fillRect(0, 240, 1, 319);
-    g.fillRect(238,240,239,319);
+    g.fillRect(238, 240, 239, 319);
-    g.fillRect(2,318,238,319);
+    g.fillRect(2, 318, 238, 319);
+
     Bangle.setLCDPower(1); // light up
     Bangle.setLCDMode(oldMode); // clears cliprect
+
     function anim() {
-      scrollPos-=2;
+      state.scrollPos -= 2;
-      if (scrollPos<-size) scrollPos=-size;
+      if (state.scrollPos < -size) {
-      Bangle.setLCDOffset(scrollPos);
+        state.scrollPos = -size;
-      if (scrollPos>-size) setTimeout(anim,15);
+      }
-    }
+      Bangle.setLCDOffset(state.scrollPos);
-    anim();
+      if (state.scrollPos > -size) setTimeout(anim, 15);
-  }
-  function hide() {
-    function anim() {
-      scrollPos+=4;
-      if (scrollPos>0) scrollPos=0;
-      Bangle.setLCDOffset(scrollPos);
-      if (scrollPos<0) setTimeout(anim,10);
     }
     anim();
   }
 
-  Bangle.on('touch',function() {
+  function hideNotification() {
-    if (scrollPos) hide();
+    function anim() {
-  });
+      state.scrollPos += 4;
-  Bangle.on('swipe',function(dir) {
+      if (state.scrollPos > 0) state.scrollPos = 0;
-    if (musicState=="play") {
+      Bangle.setLCDOffset(state.scrollPos);
-      gb({t:"music",n:dir>0?"next":"previous"});
+      if (state.scrollPos < 0) setTimeout(anim, 10);
     }
-  });
+    anim();
-  gb({t:"status",bat:E.getBattery()});
+  }
 
-  global.GB = function(j) {
+  function handleNotificationEvent(event) {
-    switch (j.t) {
+
+    // 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();
+      var l = txt[i];
+      if (l.length > MAXCHARS) {
+        var p = MAXCHARS;
+        while (p > MAXCHARS - 8 && !" \t-_".includes(l[p]))
+          p--;
+        if (p == MAXCHARS - 8) p = MAXCHARS;
+        txt[i] = l.substr(0, p);
+        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();
+  }
+
+  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);
+        var x = 40;
+        g.setFont("4x6", 2);
+        g.setColor("#ffffff");
+        g.drawString(state.musicInfo.artist, x, y + 8);
+
+        g.setFont("6x8", 1);
+        g.setColor("#ffffff");
+        g.drawString(state.musicInfo.track, x, y + 22);
+      });
+    }
+
+    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":
-        show(80,function(y) {
+        handleNotificationEvent(event);
-          // TODO: icon based on src?
+        break;
-          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");
-          var MAXCHARS = 38;
-          for (var i=0;i<txt.length;i++) {
-            txt[i] = txt[i].trim();
-            var l = txt[i];
-            if (l.length>MAXCHARS) {
-              var p = MAXCHARS;
-              while (p>MAXCHARS-8 && !" \t-_".includes(l[p]))
-                p--;
-              if (p==MAXCHARS-8) p=MAXCHARS;
-              txt[i] = l.substr(0,p);
-              txt.splice(i+1,0,l.substr(p));
-            }
-          }
-          g.setFontAlign(-1,-1);
-          g.drawString(txt.join("\n"),10,y+40);
-          Bangle.buzz();
-        });
-      break;
       case "musicinfo":
-        musicInfo = j;
+        state.musicInfo = event;
         break;
       case "musicstate":
-      musicState = j.state;
+        handleMusicStateUpdate(event);
-      if (musicState=="play")
+        break;
-        show(40,function(y) {
+      case "call":
-          g.setColor("#ffffff");
+        handleCallEvent(event);
-          g.drawImage(require("heatshrink").decompress(atob("jEYwILI/EAv/8gP/ARcMgOAASN8h+A/kfwP8n4CD/E/gHgjg/HA=")),8,y+8);
+        break;
-          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.setFont("6x8",1);
-          g.setColor("#ffffff");
-          g.drawString(musicInfo.track,x,y+22);
-        });
-      if (musicState=="pause")
-        hide();
-      break;
     }
   };
 
-function draw() {
+  // Touch control
-  g.setColor(-1);
+  Bangle.on("touch", () => {
-  if (NRF.getSecurityStatus().connected)
+    if (state.scrollPos) {
-    g.drawImage(require("heatshrink").decompress(atob("i0WwgHExAABCIwJCBYwJEBYkIBQ2ACgvzCwoECx/z/AKDD4WD+YLBEIYKCx//+cvnAKCBwU/mc4/8/HYv//Ev+Y4EEAePn43DBQkzn4rCEIoABBIwKHO4cjmczK42I6mqlqEEBQeIBQaDED4IgDUhi6KaBbmIA==")),this.x+1,this.y+1);
+      hideNotification();
-  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() {
-  WIDGETS["gbridgew"].draw();
-  g.flip();// turns screen on
-}
-NRF.on('connected',changed);
-NRF.on('disconnected',changed);
 
-WIDGETS["gbridgew"]={area:"tl",width:24,draw:draw};
+  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)
+      g.drawImage(require("heatshrink").decompress(atob("i0WwgHExAABCIwJCBYwJEBYkIBQ2ACgvzCwoECx/z/AKDD4WD+YLBEIYKCx//+cvnAKCBwU/mc4/8/HYv//Ev+Y4EEAePn43DBQkzn4rCEIoABBIwKHO4cjmczK42I6mqlqEEBQeIBQaDED4IgDUhi6KaBbmIA==")), this.x + 1, this.y + 1);
+    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 changedConnectionState() {
+    WIDGETS["gbridgew"].draw();
+    g.flip(); // turns screen on
+  }
+
+  NRF.on("connected", changedConnectionState);
+  NRF.on("disconnected", changedConnectionState);
+
+  WIDGETS["gbridgew"] = { area: "tl", width: 24, draw: draw };
+
+  gbSend({ t: "status", bat: E.getBattery() });
 })();

apps/heart/interface.html

@@ -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"),
+  Util.saveCSV(name, csv);
-      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);
 }
 
 

apps/locale/locale.html

@@ -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() {
 

apps/locale/locales.js

@@ -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" }},
 };

apps/marioclock/ChangeLog

@@ -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

apps/marioclock/marioclock-app.js

@@ -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 settings = (storage.readJSON('setting.json', 1) || {});
-const timeout = settings.timeout||10;
+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();

apps/rpgdice/ChangeLog

@@ -0,0 +1 @@
+0.01: First release

apps/rpgdice/app-icon.js

@@ -0,0 +1 @@
+require("heatshrink").decompress(atob("mEwwgMJgMQgMZzOREaERiERzIACiIVOAIIUCz///ORgIXNIQIAC/4ABJJYsBCogYEAYMQiAWGLAoAJJI8JLAYoCAAgJBJIIwGBohxBJI4YBJIwOFC4w5EC4hdOzIgCyLFDC45hHAAZJDgJAKMQwyBSYSOBxIXGPRTdChOfxChHbpRhBC4P5GAgAOgEZFAKjIBAz1EC5YYJxAvBJ4IXQzGIxEQB4RbPCoOIwEAOKAsCC4QvCFiAXDdwwsMC5eebogVGAALWBC42f/AWLC4zwCUgIEBCxK+DE4bsFC5+f/IrBC4RzHXwkZzATEDgP/RZAXFz5ECf4oXMCYKICC6hABMAQXOgAXBLgLrHRxZfCC6sBCo4XLLwIXBbAgXRMIQAGRxgwChIXVgEQIYimOGAZ6CSgOJC6CrCC4TZBC6IwCC4QWQPQYXKOggAFPQOfC5AWKPQgXGCpR6FOwoWOPQQXDIZYwHC4QVRAAQXBBxgA="))

apps/rpgdice/app.js

@@ -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"});

apps/swatch/ChangeLog

@@ -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

apps/swatch/interface.html

@@ -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>

apps/swatch/stopwatch.js

@@ -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 
+    else if (i<32)
-    {g.drawString(lapTimes.length-i+": "+timeToText(lapTimes[i]),125,timeY + 30 + (i-18)*8);}
+    {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() {
+function getLapTimesArray() {
-  for (var v in lapTimes){
+  return lapTimes.map(timeToText).reverse();
-   saveTimes[v]=v+1+"-"+timeToText(lapTimes[(lapTimes.length-1)-v]); 
-  }
 }
 
 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) {
-  lapTimes.unshift(tCurrent-tStart);
+    tCurrent = Date.now();
-  tStart = tCurrent;
+    lapTimes.unshift(tCurrent-tStart);
-  if (!started)
+  }
-  {
+  tStart = tCurrent;
-    var timenow= Date();
+  if (!started) { // save
-    saveconvert();
+    var timenow= Date();
-    require("Storage").writeJSON("StpWch-"+timenow.toString(), saveTimes);
+    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();
   }
-  updateLabels();
 }, BTN1, {repeat:true});
 setWatch(function() { // Reset
   if (!started) {
@@ -101,3 +105,5 @@ setWatch(function() { // Reset
 }, BTN3, {repeat:true});
 
 updateLabels();
+Bangle.loadWidgets();
+Bangle.drawWidgets();

apps/toucher/ChangeLog

@@ -1 +1,2 @@
 0.01: New App!
+0.02: Add swipe support and doucle tap to run application

apps/toucher/app.js

@@ -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();
+});

apps/widmp/ChangeLog

@@ -0,0 +1 @@
+0.01: New App!

apps/widmp/widget.js

@@ -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 };
+
+})();

index.html

@@ -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>

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...`);
     });
   });

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");
   });
 });

js/ui.js

@@ -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();
+      });
+    });
+  });
+}

lib/interface.js

@@ -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) {