Merge branch 'master' of https://github.com/dapgo/BangleApps

2023-01-19 08:06:20 +01:00 · 2023-01-19 08:06:20 +01:00 · 9b9ff3a24b
parent 63371ba51e cdbc331b17
commit 9b9ff3a24b
173 changed files with 2908 additions and 1360 deletions
--- a/.eslintignore
+++ b/.eslintignore
@ -4,4 +4,5 @@ apps/schoolCalendar/fullcalendar/main.js
 apps/authentiwatch/qr_packed.js
 apps/qrcode/qr-scanner.umd.min.js
 apps/gipy/pkg/gpconv.js
+apps/health/chart.min.js
 *.test.js
--- a/.github/ISSUE_TEMPLATE/bangle-bug-report-custom-form.yaml
+++ b/.github/ISSUE_TEMPLATE/bangle-bug-report-custom-form.yaml
@ -58,3 +58,7 @@ body:

    validations:
      required: true
+  - type: textarea
+    id: apps
+    attributes:
+      label: Installed apps
--- a/README.md
+++ b/README.md
@ -98,7 +98,7 @@ This is the best way to test...

 **Note:** It's a great idea to get a local copy of the repository on your PC,
 then run `bin/sanitycheck.js` - it'll run through a bunch of common issues
-that there might be.
+that there might be. To get the project running locally, you have to initialize and update the git submodules first: `git submodule --init && git submodule update`.

 Be aware of the delay between commits and updates on github.io - it can take a few minutes (and a 'hard refresh' of your browser) for changes to take effect.

--- a/apps/a_clock_timer/ChangeLog
+++ b/apps/a_clock_timer/ChangeLog
@ -1 +1,4 @@
 0.01: Beta version for Bangle 2 (2021/11/28)
+0.02: Shows night time on the map (2022/12/28)
+0.03: Add 1 minute timer with upper taps (2023/01/05)
+1.00: Page to set up custom time zones (2023/01/06)
--- a/apps/a_clock_timer/README.md
+++ b/apps/a_clock_timer/README.md
@ -2,14 +2,17 @@

 * Works with Bangle 2
 * Timer
-  *  Right tap: start/increase by 10 minutes; Left tap: decrease by 5 minutes
+  *  Top Right tap: increase by 1 minute
+  *  Top Left tap: decrease by 1 minute
+  *  Bottom Right tap: increase by 10 minutes
+  *  Bottom Left tap: decrease by 5 minutes
  *  Short buzz at T-30, T-20, T-10 ; Double buzz at T
 * Other time zones
-  *  Currently hardcoded to Paris and Tokyo (this will be customizable in a future version)
+  *  Showing Paris and Tokyo by default, but you can customize this using the dedicated configuration page on the app store
 * World Map
-  *  The yellow line shows the position of the sun
+  *  The map shows day and night on Earth and the position of the Sun (yellow line)

-![](screenshot.png)
+![](screenshot-1.png) ![](screenshot.png)

 ## Creator
 [@alainsaas](https://github.com/alainsaas)
--- a/apps/a_clock_timer/app.js
+++ b/apps/a_clock_timer/app.js
@ -18,19 +18,29 @@ var timervalue = 0;
 var istimeron = false;
 var timertick;

-Bangle.on('touch',t=>{
-  if (t == 1) {
+Bangle.on('touch',(touchside, touchdata)=>{
+  if (touchside == 1) {
    Bangle.buzz(30);
-    if (timervalue < 5*60) { timervalue = 1 ; }
-    else { timervalue -= 5*60; }
+    var changevalue = 0;
+    if(touchdata.y > 88) {
+      changevalue += 60*5;
+    } else {
+      changevalue += 60*1;
+    }
+    if (timervalue < changevalue) { timervalue = 1 ; }
+    else { timervalue -= changevalue; }
  }
-  else if (t == 2) {
+  else if (touchside == 2) {
    Bangle.buzz(30);
    if (!istimeron) {
      istimeron = true;
      timertick = setInterval(countDown, 1000);
    }
-    timervalue += 60*10;
+    if(touchdata.y > 88) {
+      timervalue += 60*10;
+    } else {
+      timervalue += 60*1;
+    }
  }
 });

@ -73,12 +83,13 @@ function countDown() {
 function showWelcomeMessage() {
  g.reset().clearRect(0, 76, 44+44, g.getHeight()/2+6);
  g.setFontAlign(0, 0).setFont("6x8");
-  g.drawString("Touch right to", 44, 80);
+  g.drawString("Tap right to", 44, 80);
  g.drawString("start timer", 44, 88);
  setTimeout(function(){ g.reset().clearRect(0, 76, 44+44, g.getHeight()/2+6); }, 8000);
 }

 // time
+var offsets = require("Storage").readJSON("a_clock_timer.settings.json") || [ ["PAR",1], ["TYO",9] ];
 var drawTimeout;

 function getGmt() {
@ -103,10 +114,24 @@ function draw() {
  g.reset().clearRect(0,24,g.getWidth(),g.getHeight()-IMAGEHEIGHT);
  g.drawImage(getImg(),0,g.getHeight()-IMAGEHEIGHT);

-  var x_sun = 176 - (getGmt().getHours() / 24 * 176 + 4);
+  var gmtHours = getGmt().getHours();
+
+  var x_sun = 176 - (gmtHours / 24 * 176 + 4);
  g.setColor('#ff0').drawLine(x_sun, g.getHeight()-IMAGEHEIGHT, x_sun, g.getHeight());
  g.reset();

+  var x_night_start = (176 - (((gmtHours-6)%24) / 24 * 176 + 4)) % 176;
+  var x_night_end = 176 - (((gmtHours+6)%24) / 24 * 176 + 4);
+  g.setColor('#000');
+  for (let x = x_night_start; x < (x_night_end < x_night_start ? 176 : x_night_end); x+=2) {
+    g.drawLine(x, g.getHeight()-IMAGEHEIGHT, x, g.getHeight());
+  }
+  if (x_night_end < x_night_start) {
+    for (let x = 0; x < x_night_end; x+=2) {
+      g.drawLine(x, g.getHeight()-IMAGEHEIGHT, x, g.getHeight());
+    }
+  }
+
  var locale = require("locale");

  var date = new Date();
@ -114,8 +139,8 @@ function draw() {
  g.setFont("Michroma36").drawString(locale.time(date,1), g.getWidth()/2, 46);
  g.setFont("6x8");
  g.drawString(locale.date(new Date(),1), 125, 68);
-  g.drawString("PAR "+locale.time(getTimeFromTimezone(1),1), 125, 80);
-  g.drawString("TYO "+locale.time(getTimeFromTimezone(9),1), 125, 88);
+  g.drawString(offsets[0][0]+" "+locale.time(getTimeFromTimezone(offsets[0][1]),1), 125, 80);
+  g.drawString(offsets[1][0]+" "+locale.time(getTimeFromTimezone(offsets[1][1]),1), 125, 88);

  queueNextDraw();
 }
--- a/apps/a_clock_timer/custom.html
+++ b/apps/a_clock_timer/custom.html
@ -0,0 +1,58 @@
+<html>
+  <head>
+    <link rel="stylesheet" href="../../css/spectre.min.css">
+  </head>
+  <body>
+      <p>You can set the 2 additional timezones displayed by the clock.</p>
+      <table id="a_clock_timer-offsets">
+          <tr>
+          <th>Name</th>
+          <th>UTC Offset (Hours)</th>
+          </tr>
+      </table>
+    <p>Click <button id="upload" class="btn btn-primary">Upload</button></p>
+    <script src="../../core/lib/customize.js"></script>
+    <script>
+      var offsets=[];
+      try{
+          var stored = localStorage.getItem('a_clock_timer-offset-list')
+          if(stored) offsets = JSON.parse(stored);
+          if (!offsets || offsets.length!=2) {
+              throw "Offsets invalid";
+          }
+        } catch(e){
+            offsets=[
+                ["PAR",1],
+                ["TYO",9],
+           ];
+        }
+      console.log(offsets);
+      var tbl=document.getElementById("a_clock_timer-offsets");
+      for (var i=0; i<2; i++) {
+        var $offset = document.createElement('tr')
+        $offset.innerHTML = `
+            <td><input type="text" size="4" maxlength="3" id="name_${i}" value="${offsets[i][0]}"></td>
+            <td><input type="number" id="offset_${i}" value="${offsets[i][1]}"></td>`
+        tbl.append($offset);
+      }
+      document.getElementById("upload").addEventListener("click", function() {
+          var storage_offsets=[];
+          var app_offsets=[];
+          for (var i=0; i<2; i++) {
+              var name=document.getElementById("name_"+i).value;
+              var offset=document.getElementById("offset_"+i).value;
+              app_offsets.push([name,offset]);
+              storage_offsets.push([name,offset]);
+          }
+          console.log(storage_offsets);
+          console.log(app_offsets);
+        localStorage.setItem('a_clock_timer-offset-list',JSON.stringify(storage_offsets));
+        sendCustomizedApp({
+          storage:[
+            {name:"a_clock_timer.settings.json", content:JSON.stringify(app_offsets)},
+          ]
+        });
+      });
+    </script>
+  </body>
+</html>
--- a/apps/a_clock_timer/metadata.json
+++ b/apps/a_clock_timer/metadata.json
@ -1,17 +1,19 @@
 {
  "id": "a_clock_timer",
  "name": "A Clock with Timer",
-  "version": "0.01",
+  "version": "1.00",
  "description": "A Clock with Timer, Map and Time Zones",
  "icon": "app.png",
-  "screenshots": [{"url":"screenshot.png"}],
+  "screenshots": [{"url":"screenshot.png"},{"url":"screenshot-1.png"}],
  "type": "clock",
  "tags": "clock",
  "supports": ["BANGLEJS2"],
  "allow_emulator": true,
  "readme": "README.md",
+  "custom": "custom.html",
  "storage": [
    {"name":"a_clock_timer.app.js","url":"app.js"},
    {"name":"a_clock_timer.img","url":"app-icon.js","evaluate":true}
-  ]
+  ],
+  "data": [{"name":"a_clock_timer.settings.json"}]
 }
--- a/apps/a_clock_timer/screenshot-1.png
+++ b/apps/a_clock_timer/screenshot-1.png
--- a/apps/a_clock_timer/screenshot.png
+++ b/apps/a_clock_timer/screenshot.png
--- a/apps/a_speech_timer/ChangeLog
+++ b/apps/a_speech_timer/ChangeLog
@ -1,2 +1,3 @@
 1.00: Release (2021/12/01)
 1.01: Grey font when timer is frozen (2021/12/04)
+1.02: Force light theme, since the app is not designed for dark theme (2022/12/28)
--- a/apps/a_speech_timer/app.js
+++ b/apps/a_speech_timer/app.js
@ -166,6 +166,7 @@ function draw() {
  g.drawRect(88+8,138-24, 176-10, 138+22);
 }

+g.setTheme({bg:"#fff",fg:"#000",dark:false}).clear();
 require("FontHaxorNarrow7x17").add(Graphics);
 g.clear();
 Bangle.loadWidgets();
--- a/apps/a_speech_timer/metadata.json
+++ b/apps/a_speech_timer/metadata.json
@ -2,7 +2,7 @@
 "id":"a_speech_timer",
 "name":"Speech Timer",
 "icon": "app.png",
-"version":"1.01",
+"version":"1.02",
 "description": "A timer designed to help keeping your speeches and presentations to time.",
 "tags": "tool,timer",
 "readme":"README.md",
--- a/apps/agenda/ChangeLog
+++ b/apps/agenda/ChangeLog
@ -9,3 +9,5 @@
      Fix clkinfo icon
 0.09: Ensure Agenda supplies an image for clkinfo items
 0.10: Update clock_info to avoid a redraw
+0.11: Setting to use "Today" and "Yesterday" instead of dates
+      Added dynamic, short and range fields to clkinfo
--- a/apps/agenda/agenda.clkinfo.js
+++ b/apps/agenda/agenda.clkinfo.js
@ -1,7 +1,14 @@
 (function() {
+  function getPassedSec(date) {
+    var now = new Date();
+    var passed = (now-date)/1000;
+    if(passed<0) return 0;
+    return passed;
+  }
  var agendaItems = {
      name: "Agenda",
      img: atob("GBiBAAAAAAAAAADGMA///w///wf//wAAAA///w///w///w///x///h///h///j///D///X//+f//8wAABwAADw///w///wf//gAAAA=="),
+      dynamic: true,
      items: []
    };
  var locale = require("locale");
@ -15,11 +22,15 @@
    var title = entry.title.slice(0,12);
    var date = new Date(entry.timestamp*1000);
    var dateStr = locale.date(date).replace(/\d\d\d\d/,"");
+    var shortStr = ((date-now) > 86400000 || entry.allDay) ? dateStr : locale.time(date,1);
    dateStr += entry.durationInSeconds < 86400 ? "/ " + locale.time(date,1) : "";

    agendaItems.items.push({
      name: "Agenda "+i,
-      get: () => ({ text: title + "\n" + dateStr, img: agendaItems.img }),
+      hasRange: true,
+      get: () => ({ text: title + "\n" + dateStr,
+        img: agendaItems.img, short: shortStr.trim(),
+        v: getPassedSec(date), min: 0, max: entry.durationInSeconds}),
      show: function() {},
      hide: function () {}
    });
--- a/apps/agenda/agenda.js
+++ b/apps/agenda/agenda.js
@ -33,16 +33,32 @@ CALENDAR=CALENDAR.sort((a,b)=>a.timestamp - b.timestamp);
 function getDate(timestamp) {
  return new Date(timestamp*1000);
 }
+function formatDay(date) {
+  if (!settings.useToday) {
+    return Locale.date(date);
+  }
+  const dateformatted = date.toISOString().split('T')[0]; // yyyy-mm-dd
+  const today = new Date(Date.now()).toISOString().split('T')[0]; // yyyy-mm-dd
+  if (dateformatted == today) {
+     return /*LANG*/"Today ";
+  } else {
+    const tomorrow = new Date(Date.now() + 86400 * 1000).toISOString().split('T')[0]; // yyyy-mm-dd
+    if (dateformatted == tomorrow) {
+       return /*LANG*/"Tomorrow ";
+    }
+    return Locale.date(date);
+  }
+}
 function formatDateLong(date, includeDay, allDay) {
  let shortTime = Locale.time(date,1)+Locale.meridian(date);
  if(allDay) shortTime = "";
-  if(includeDay || allDay)
-    return Locale.date(date)+" "+shortTime;
+  if(includeDay || allDay) {
+    return formatDay(date)+" "+shortTime;
+  }
  return shortTime;
 }
 function formatDateShort(date, allDay) {
-  return Locale.date(date).replace(/\d\d\d\d/,"")+(allDay?
-    "" : Locale.time(date,1)+Locale.meridian(date));
+  return formatDay(date).replace(/\d\d\d\d/,"")+(allDay?"":Locale.time(date,1)+Locale.meridian(date));
 }

 var lines = [];
--- a/apps/agenda/metadata.json
+++ b/apps/agenda/metadata.json
@ -1,7 +1,7 @@
 {
  "id": "agenda",
  "name": "Agenda",
-  "version": "0.10",
+  "version": "0.11",
  "description": "Simple agenda",
  "icon": "agenda.png",
  "screenshots": [{"url":"screenshot_agenda_overview.png"}, {"url":"screenshot_agenda_event1.png"}, {"url":"screenshot_agenda_event2.png"}],
--- a/apps/agenda/settings.js
+++ b/apps/agenda/settings.js
@ -43,6 +43,13 @@
        updateSettings();
      }
    },
+    /*LANG*/"Use 'Today',..." : {
+      value : !!settings.useToday,
+      onchange: v => {
+        settings.useToday = v;
+        updateSettings();
+      }
+    },
  };
  E.showMenu(mainmenu);
 })
--- a/apps/agpsdata/ChangeLog
+++ b/apps/agpsdata/ChangeLog
@ -3,3 +3,5 @@
 0.03: Do not load AGPS data on boot
      Increase minimum interval to 6 hours
 0.04: Write AGPS data chunks with delay to improve reliability
+0.05: Show last success date
+      Do not start A-GPS update automatically
--- a/apps/agpsdata/app.js
+++ b/apps/agpsdata/app.js
@ -23,12 +23,26 @@ Bangle.drawWidgets();

 let waiting = false;

-function start() {
+function start(restart) {
  g.reset();
  g.clear();
  waiting = false;
-  display("Retry?", "touch to retry");
+  if (!restart) {
+    display("Start?", "touch to start");
+  }
+  else {
+    display("Retry?", "touch to retry");
+  }
  Bangle.on("touch", () => { updateAgps(); });
+
+  const file = "agpsdata.json";
+  let data = require("Storage").readJSON(file, 1) || {};
+  if (data.lastUpdate) {
+    g.setFont("Vector", 11);
+    g.drawString("last success:", 5, g.getHeight() - 22);
+    g.drawString(new Date(data.lastUpdate).toISOString(), 5, g.getHeight() - 11);
+  }
+
 }

 function updateAgps() {
@ -36,7 +50,7 @@ function updateAgps() {
  g.clear();
  if (!waiting) {
    waiting = true;
-    display("Updating A-GPS...", "takes ~ 10 seconds");
+    display("Updating A-GPS...", "takes ~10 seconds");
    require("agpsdata").pull(function() {
      waiting = false;
      display("A-GPS updated.", "touch to close");
@ -45,10 +59,10 @@ function updateAgps() {
    function(error) {
      waiting = false;
      E.showAlert(error, "Error")
-                    .then(() => { start(); });
+                    .then(() => { start(true); });
    });
  } else {
    display("Waiting...");
  }
 }
-updateAgps();
+start(false);
--- a/apps/agpsdata/metadata.json
+++ b/apps/agpsdata/metadata.json
@ -2,7 +2,7 @@
  "name": "A-GPS Data Downloader App",
  "shortName":"A-GPS Data",
  "icon": "agpsdata.png",
-  "version":"0.04",
+  "version":"0.05",
  "description": "Once installed, this app allows you to download assisted GPS (A-GPS) data directly to your Bangle.js **via Gadgetbridge on an Android phone** when you run the app. If you just want to upload the latest AGPS data from this app loader, please use the `Assisted GPS Update (AGPS)` app.",
  "tags": "boot,tool,assisted,gps,agps,http",
  "allow_emulator":true, 
--- a/apps/aiclock/ChangeLog
+++ b/apps/aiclock/ChangeLog
@ -3,3 +3,5 @@
 0.03: Indicate battery level through line occurrence.
 0.04: Use widget_utils module.
 0.05: Support for clkinfo.
+0.06: ClockInfo Fix: Use .get instead of .show as .show is not implemented for weather etc.
+0.07: Use clock_info.addInteractive instead of a custom implementation
--- a/apps/aiclock/README.md
+++ b/apps/aiclock/README.md
@ -11,8 +11,7 @@ The original output of stable diffusion is shown here:
 My implementation is shown below. Note that horizontal lines occur randomly, but the
 probability is correlated with the battery level. So if your screen contains only
 a few lines its time to charge your bangle again ;) Also note that the upper text
-implementes the clkinfo module and can be configured via touch left/right/up/down.
-Touch at the center to trigger the selected action.
+implements the clkinfo module and can be configured via touch and swipe left/right and up/down.

 ![](impl.png)

--- a/apps/aiclock/aiclock.app.js
+++ b/apps/aiclock/aiclock.app.js
@ -1,7 +1,6 @@
 /************************************************
 * AI Clock
 */
- const storage = require('Storage');
 const clock_info = require("clock_info");


@ -21,147 +20,14 @@ Graphics.prototype.setFontGochiHand = function(scale) {
    return this;
 }

-/************************************************
- * Set some important constants such as width, height and center
- */
-var W = g.getWidth(),R=W/2;
-var H = g.getHeight();
-var cx = W/2;
-var cy = H/2;
-var drawTimeout;
-var lock_input = false;

-
-/************************************************
- * SETTINGS
- */
-const SETTINGS_FILE = "aiclock.setting.json";
-let settings = {
-    menuPosX: 0,
-    menuPosY: 0,
-};
-let saved_settings = storage.readJSON(SETTINGS_FILE, 1) || settings;
-for (const key in saved_settings) {
-  settings[key] = saved_settings[key]
-}
-
-
-/************************************************
- * Menu
- */
-function getDate(){
-    var date = new Date();
-    return ("0"+date.getDate()).substr(-2) + "/" + ("0"+(date.getMonth()+1)).substr(-2)
-}
-
-
-// Custom clockItems menu - therefore, its added here and not in a clkinfo.js file.
-var clockItems = {
-    name: getDate(),
-    img: null,
-    items: [
-    { name: "Week",
-      get: () => ({ text: "Week " + weekOfYear(), img: null}),
-      show: function() { clockItems.items[0].emit("redraw"); },
-      hide: function () {}
-    },
-    ]
-  };
-
-function weekOfYear() {
-    var date = new Date();
-    date.setHours(0, 0, 0, 0);
-    // Thursday in current week decides the year.
-    date.setDate(date.getDate() + 3 - (date.getDay() + 6) % 7);
-    // January 4 is always in week 1.
-    var week1 = new Date(date.getFullYear(), 0, 4);
-    // Adjust to Thursday in week 1 and count number of weeks from date to week1.
-    return 1 + Math.round(((date.getTime() - week1.getTime()) / 86400000
-                            - 3 + (week1.getDay() + 6) % 7) / 7);
-}
-
-
-
-// Load menu
-var menu = clock_info.load();
-menu = menu.concat(clockItems);
-
-
-  // Ensure that our settings are still in range (e.g. app uninstall). Otherwise reset the position it.
-  if(settings.menuPosX >= menu.length || settings.menuPosY > menu[settings.menuPosX].items.length ){
-    settings.menuPosX = 0;
-    settings.menuPosY = 0;
-  }
-
-  // Set draw functions for each item
-  menu.forEach((menuItm, x) => {
-    menuItm.items.forEach((item, y) => {
-      function drawItem() {
-        // For the clock, we have a special case, as we don't wanna redraw
-        // immediately when something changes. Instead, we update data each minute
-        // to save some battery etc. Therefore, we hide (and disable the listener)
-        // immedeately after redraw...
-        item.hide();
-
-        // After drawing the item, we enable inputs again...
-        lock_input = false;
-
-        var info = item.get();
-        drawMenuItem(info.text, info.img);
-      }
-
-      item.on('redraw', drawItem);
-    })
-  });
-
-
-  function canRunMenuItem(){
-    if(settings.menuPosY == 0){
-      return false;
-    }
-
-    var menuEntry = menu[settings.menuPosX];
-    var item = menuEntry.items[settings.menuPosY-1];
-    return item.run !== undefined;
-  }
-
-
-  function runMenuItem(){
-    if(settings.menuPosY == 0){
-      return;
-    }
-
-    var menuEntry = menu[settings.menuPosX];
-    var item = menuEntry.items[settings.menuPosY-1];
-    try{
-      var ret = item.run();
-      if(ret){
-        Bangle.buzz(300, 0.6);
-      }
-    } catch (ex) {
-      // Simply ignore it...
-    }
-  }
-
-
-/*
- * Based on the great multi clock from https://github.com/jeffmer/BangleApps/
- */
-Graphics.prototype.drawRotRect = function(w, r1, r2, angle) {
-    angle = angle % 360;
-    var w2=w/2, h=r2-r1, theta=angle*Math.PI/180;
-    return this.fillPoly(this.transformVertices([-w2,0,-w2,-h,w2,-h,w2,0],
-        {x:cx+r1*Math.sin(theta),y:cy-r1*Math.cos(theta),rotate:theta}));
-};
-
-
-function drawBackground() {
+function drawBackground(start, end) {
    g.setFontAlign(0,0);
-    g.setColor(g.theme.fg);
+    g.setColor("#000");

    var bat = E.getBattery() / 100.0;
-    var y = 0;
-    while(y < H){
+    var y = start;
+    while(y < end){
        // Show less lines in case of small battery level.
        if(Math.random() > bat){
            y += 5;
@ -177,6 +43,30 @@ function drawBackground() {
 }


+/************************************************
+ * Set some important constants such as width, height and center
+ */
+var W = g.getWidth(),R=W/2;
+var H = g.getHeight();
+var cx = W/2;
+var cy = H/2;
+var drawTimeout;
+
+var clkInfoY = 60;
+
+
+/*
+ * Based on the great multi clock from https://github.com/jeffmer/BangleApps/
+ */
+Graphics.prototype.drawRotRect = function(w, r1, r2, angle) {
+    angle = angle % 360;
+    var w2=w/2, h=r2-r1, theta=angle*Math.PI/180;
+    return this.fillPoly(this.transformVertices([-w2,0,-w2,-h,w2,-h,w2,0],
+        {x:cx+r1*Math.sin(theta),y:cy-r1*Math.cos(theta),rotate:theta}));
+};
+
+
+
 function drawCircle(isLocked){
    g.setColor(g.theme.fg);
    g.fillCircle(cx, cy, 12);
@ -186,56 +76,6 @@ function drawCircle(isLocked){
    g.fillCircle(cx, cy, 6);
 }

-function toAngle(a){
-    if (a < 0){
-        return 360 + a;
-    }
-
-    if(a > 360) {
-        return 360 - a;
-    }
-
-    return a
-}
-
-
-function drawMenuItem(text, image){
-    if(text == null){
-        drawTime();
-        return
-    }
-    // image = atob("GBiBAAD+AAH+AAH+AAH+AAH/AAOHAAYBgAwAwBgwYBgwYBgwIBAwOBAwOBgYIBgMYBgAYAwAwAYBgAOHAAH/AAH+AAH+AAH+AAD+AA==");
-
-    text = String(text);
-
-    g.reset().setBgColor("#fff").setColor("#000");
-    g.setFontAlign(0,0);
-    g.setFont("Vector", 20);
-
-    var imgWidth = image == null ? 0 : 24;
-    var strWidth = g.stringWidth(text);
-    var strHeight = text.split('\n').length > 1 ? 40 : Math.max(24, imgWidth+2);
-    var w = imgWidth + strWidth;
-
-    g.clearRect(cx-w/2-8, 40-strHeight/2-1, cx+w/2+4, 40+strHeight/2)
-
-    // Draw right line as designed by stable diffusion
-    g.drawLine(cx+w/2+5, 40-strHeight/2-1, cx+w/2+5, 40+strHeight/2);
-    g.drawLine(cx+w/2+6, 40-strHeight/2-1, cx+w/2+6, 40+strHeight/2);
-    g.drawLine(cx+w/2+7, 40-strHeight/2-1, cx+w/2+7, 40+strHeight/2);
-
-    // And finally the text
-    g.drawString(text, cx+imgWidth/2, 42);
-    g.drawString(text, cx+1+imgWidth/2, 41);
-
-    if(image != null) {
-        var scale = image.width ? imgWidth / image.width : 1;
-        g.drawImage(image, W/2 + -strWidth/2-4 - parseInt(imgWidth/2), 41-12, {scale: scale});
-    }
-
-    drawTime();
-}
-

 function drawTime(){
    // Draw digital time first
@ -292,35 +132,23 @@ function drawDigits(){
 }


-function drawDate(){
-    var menuEntry = menu[settings.menuPosX];
-
-    // The first entry is the overview...
-    if(settings.menuPosY == 0){
-        drawMenuItem(menuEntry.name, menuEntry.img);
-        return;
-    }
-
-    // Draw item if needed
-    lock_input = true;
-    var item = menuEntry.items[settings.menuPosY-1];
-    item.show();
+function draw(){
+    // Note that we force a redraw also of the clock info as
+    // we want to ensure (for design purpose) that the hands
+    // are above the clkinfo section.
+    clockInfoMenu.redraw();
 }


-
-
-
-function draw(){
+function drawMainClock(){
    // Queue draw in one minute
    queueDraw();

-    g.reset();
-    g.clearRect(0, 0, g.getWidth(), g.getHeight());
-    g.setColor(1,1,1);
+    g.setColor("#fff");
+    g.reset().clearRect(0, clkInfoY, g.getWidth(), g.getHeight());

-    drawBackground();
-    drawDate();
+    drawBackground(clkInfoY, H);
+    drawTime();
    drawCircle(Bangle.isLocked());
 }

@ -330,7 +158,7 @@ function draw(){
 */
 Bangle.on('lcdPower',on=>{
    if (on) {
-        draw(true);
+        draw();
    } else { // stop draw timer
        if (drawTimeout) clearTimeout(drawTimeout);
        drawTimeout = undefined;
@ -341,66 +169,10 @@ Bangle.on('lock', function(isLocked) {
    drawCircle(isLocked);
 });

-Bangle.on('touch', function(btn, e){
-    var left = parseInt(g.getWidth() * 0.22);
-    var right = g.getWidth() - left;
-    var upper = parseInt(g.getHeight() * 0.22);
-    var lower = g.getHeight() - upper;
-
-    var is_upper = e.y < upper;
-    var is_lower = e.y > lower;
-    var is_left = e.x < left && !is_upper && !is_lower;
-    var is_right = e.x > right && !is_upper && !is_lower;
-    var is_center = !is_upper && !is_lower && !is_left && !is_right;
-
-    if(lock_input){
-        return;
-    }
-
-    if(is_lower){
-        Bangle.buzz(40, 0.6);
-        settings.menuPosY = (settings.menuPosY+1) % (menu[settings.menuPosX].items.length+1);
-
-        draw();
-    }
-
-    if(is_upper){
-        Bangle.buzz(40, 0.6);
-        settings.menuPosY  = settings.menuPosY-1;
-        settings.menuPosY = settings.menuPosY < 0 ? menu[settings.menuPosX].items.length : settings.menuPosY;
-
-        draw();
-    }
-
-    if(is_right){
-        Bangle.buzz(40, 0.6);
-        settings.menuPosX = (settings.menuPosX+1) % menu.length;
-        settings.menuPosY = 0;
-        draw();
-    }
-
-    if(is_left){
-        Bangle.buzz(40, 0.6);
-        settings.menuPosY = 0;
-        settings.menuPosX  = settings.menuPosX-1;
-        settings.menuPosX = settings.menuPosX < 0 ? menu.length-1 : settings.menuPosX;
-        draw();
-    }
-
-    if(is_center){
-        if(canRunMenuItem()){
-            runMenuItem();
-        }
-    }
-});
-

 E.on("kill", function(){
-    try{
-        storage.write(SETTINGS_FILE, settings);
-    } catch(ex){
-        // If this fails, we still kill the app...
-    }
+    clockInfoMenu.remove();
+    delete clockInfoMenu;
 });


@ -416,6 +188,55 @@ function queueDraw() {
 }


+/************************************************
+ * Clock Info
+ */
+let clockInfoItems = clock_info.load();
+let clockInfoMenu = clock_info.addInteractive(clockInfoItems, {
+  x : 0,
+  y: 0,
+  w: W,
+  h: clkInfoY,
+  draw : (itm, info, options) => {
+    g.setFontAlign(0,0);
+    g.setFont("Vector", 20);
+
+    g.setColor("#fff");
+    g.fillRect(options.x, options.y, options.x+options.w, options.y+options.h);
+    drawBackground(0, clkInfoY+2);
+
+    // Set text and font
+    var image = info.img;
+    var text = String(info.text);
+
+    var imgWidth = image == null ? 0 : 24;
+    var strWidth = g.stringWidth(text);
+    var strHeight = text.split('\n').length > 1 ? 40 : Math.max(24, imgWidth+2);
+    var w = imgWidth + strWidth;
+
+    // Draw right line as designed by stable diffusion
+    g.setColor(options.focus ? "#0f0" : "#fff");
+    g.fillRect(cx-w/2-8, 40-strHeight/2-1, cx+w/2+4, 40+strHeight/2)
+
+    g.setColor("#000");
+    g.drawLine(cx+w/2+5, 40-strHeight/2-1, cx+w/2+5, 40+strHeight/2);
+    g.drawLine(cx+w/2+6, 40-strHeight/2-1, cx+w/2+6, 40+strHeight/2);
+    g.drawLine(cx+w/2+7, 40-strHeight/2-1, cx+w/2+7, 40+strHeight/2);
+
+    // Draw text and image
+    g.drawString(text, cx+imgWidth/2, 42);
+    g.drawString(text, cx+1+imgWidth/2, 41);
+
+    if(image != null) {
+        var scale = image.width ? imgWidth / image.width : 1;
+        g.drawImage(image, W/2 + -strWidth/2-4 - parseInt(imgWidth/2), 41-12, {scale: scale});
+    }
+
+    drawMainClock();
+  }
+});
+
+
 /*
 * Lets start widgets, listen for btn etc.
 */
@ -430,7 +251,7 @@ Bangle.loadWidgets();
 require('widget_utils').hide();

 // Clear the screen once, at startup and draw clock
-g.setTheme({bg:"#fff",fg:"#000",dark:false}).clear();
+g.setTheme({bg:"#fff",fg:"#000",dark:false});
 draw();

 // After drawing the watch face, we can draw the widgets
--- a/apps/aiclock/metadata.json
+++ b/apps/aiclock/metadata.json
@ -3,7 +3,7 @@
  "name": "AI Clock",
  "shortName":"AI Clock",
  "icon": "aiclock.png",
-  "version":"0.05",
+  "version":"0.07",
  "readme": "README.md",
  "supports": ["BANGLEJS2"],
  "description": "A watch face that was designed by an AI (stable diffusion) and implemented by a human.",
--- a/apps/alarm/ChangeLog
+++ b/apps/alarm/ChangeLog
@ -37,3 +37,4 @@
 0.34: Add "Confirm" option to alarm/timer edit menus
 0.35: Add automatic translation of more strings
 0.36: alarm widget moved out of app
+0.37: add message input and dated Events
--- a/apps/alarm/README.md
+++ b/apps/alarm/README.md
@ -1,15 +1,18 @@
 # Alarms & Timers

-This app allows you to add/modify any alarms and timers.
+This app allows you to add/modify any alarms, timers and events.
+
+Optional: When a keyboard app is detected, you can add a message to display when any of these is triggered.

 It uses the [`sched` library](https://github.com/espruino/BangleApps/blob/master/apps/sched) to handle the alarm scheduling in an efficient way that can work alongside other apps.

 ## Menu overview

 - `New...`
-  - `New Alarm` &rarr; Configure a new alarm
+  - `New Alarm` &rarr; Configure a new alarm (triggered based on time and day of week)
    - `Repeat` &rarr; Select when the alarm will fire. You can select a predefined option (_Once_, _Every Day_, _Workdays_ or _Weekends_ or you can configure the days freely)
-  - `New Timer` &rarr; Configure a new timer
+  - `New Timer` &rarr; Configure a new timer (triggered based on amount of time elapsed in hours/minutes/seconds)
+  - `New Event` &rarr; Configure a new event (triggered based on time and date)
 - `Advanced`
  - `Scheduler settings` &rarr; Open the [Scheduler](https://github.com/espruino/BangleApps/tree/master/apps/sched) settings page, see its [README](https://github.com/espruino/BangleApps/blob/master/apps/sched/README.md) for details
  - `Enable All` &rarr; Enable _all_ disabled alarms & timers
--- a/apps/alarm/app.js
+++ b/apps/alarm/app.js
@ -48,9 +48,10 @@ function showMainMenu() {
  };

  alarms.forEach((e, index) => {
-    var label = e.timer
+    var label = (e.timer
      ? require("time_utils").formatDuration(e.timer)
-      : require("time_utils").formatTime(e.t) + (e.rp ? ` ${decodeDOW(e)}` : "");
+      : (e.date ? `${e.date.substring(5,10)} ${require("time_utils").formatTime(e.t)}` : require("time_utils").formatTime(e.t) + (e.rp ? ` ${decodeDOW(e)}` : ""))
+      ) + (e.msg ? " " + e.msg : "");
    menu[label] = {
      value: e.on ? (e.timer ? iconTimerOn : iconAlarmOn) : (e.timer ? iconTimerOff : iconAlarmOff),
      onchange: () => setTimeout(e.timer ? showEditTimerMenu : showEditAlarmMenu, 10, e, index)
@ -67,11 +68,12 @@ function showNewMenu() {
    "": { "title": /*LANG*/"New..." },
    "< Back": () => showMainMenu(),
    /*LANG*/"Alarm": () => showEditAlarmMenu(undefined, undefined),
-    /*LANG*/"Timer": () => showEditTimerMenu(undefined, undefined)
+    /*LANG*/"Timer": () => showEditTimerMenu(undefined, undefined),
+    /*LANG*/"Event": () => showEditAlarmMenu(undefined, undefined, true)
  });
 }

-function showEditAlarmMenu(selectedAlarm, alarmIndex) {
+function showEditAlarmMenu(selectedAlarm, alarmIndex, withDate) {
  var isNew = alarmIndex === undefined;

  var alarm = require("sched").newDefaultAlarm();
@ -82,11 +84,16 @@ function showEditAlarmMenu(selectedAlarm, alarmIndex) {
  }

  var time = require("time_utils").decodeTime(alarm.t);
+  if (withDate && !alarm.date) alarm.date = new Date().toLocalISOString().slice(0,10);
+  var date = alarm.date ? new Date(alarm.date) : undefined;
+  var title = date ? (isNew ? /*LANG*/"New Event" : /*LANG*/"Edit Event") : (isNew ? /*LANG*/"New Alarm" : /*LANG*/"Edit Alarm");
+  var keyboard = "textinput";
+  try {keyboard = require(keyboard);} catch(e) {keyboard = null;}

  const menu = {
-    "": { "title": isNew ? /*LANG*/"New Alarm" : /*LANG*/"Edit Alarm" },
+    "": { "title": title },
    "< Back": () => {
-      prepareAlarmForSave(alarm, alarmIndex, time);
+      prepareAlarmForSave(alarm, alarmIndex, time, date);
      saveAndReload();
      showMainMenu();
    },
@ -106,6 +113,36 @@ function showEditAlarmMenu(selectedAlarm, alarmIndex) {
      wrap: true,
      onchange: v => time.m = v
    },
+    /*LANG*/"Day": {
+      value: date ? date.getDate() : null,
+      min: 1,
+      max: 31,
+      wrap: true,
+      onchange: v => date.setDate(v)
+    },
+    /*LANG*/"Month": {
+      value: date ? date.getMonth() + 1 : null,
+      format: v => require("date_utils").month(v),
+      onchange: v => date.setMonth((v+11)%12)
+    },
+    /*LANG*/"Year": {
+      value: date ? date.getFullYear() : null,
+      min: new Date().getFullYear(),
+      max: 2100,
+      onchange: v => date.setFullYear(v)
+    },
+    /*LANG*/"Message": {
+      value: alarm.msg,
+      onchange: () => {
+        setTimeout(() => {
+          keyboard.input({text:alarm.msg}).then(result => {
+            alarm.msg = result;
+            prepareAlarmForSave(alarm, alarmIndex, time, date, true);
+            setTimeout(showEditAlarmMenu, 10, alarm, alarmIndex, withDate);
+          });
+        }, 100);
+      }
+    },
    /*LANG*/"Enabled": {
      value: alarm.on,
      onchange: v => alarm.on = v
@ -115,8 +152,8 @@ function showEditAlarmMenu(selectedAlarm, alarmIndex) {
      onchange: () => setTimeout(showEditRepeatMenu, 100, alarm.rp, alarm.dow, (repeat, dow) => {
        alarm.rp = repeat;
        alarm.dow = dow;
-        alarm.t = require("time_utils").encodeTime(time);
-        setTimeout(showEditAlarmMenu, 10, alarm, alarmIndex);
+        prepareAlarmForSave(alarm, alarmIndex, time, date, true);
+        setTimeout(showEditAlarmMenu, 10, alarm, alarmIndex, withDate);
      })
    },
    /*LANG*/"Vibrate": require("buzz_menu").pattern(alarm.vibrate, v => alarm.vibrate = v),
@ -136,6 +173,15 @@ function showEditAlarmMenu(selectedAlarm, alarmIndex) {
    }
  };

+  if (!keyboard) delete menu[/*LANG*/"Message"];
+  if (alarm.date || withDate) {
+    delete menu[/*LANG*/"Repeat"];
+  } else {
+    delete menu[/*LANG*/"Day"];
+    delete menu[/*LANG*/"Month"];
+    delete menu[/*LANG*/"Year"];
+  }
+
  if (!isNew) {
    menu[/*LANG*/"Delete"] = () => {
      E.showPrompt(/*LANG*/"Are you sure?", { title: /*LANG*/"Delete Alarm" }).then((confirm) => {
@ -145,7 +191,7 @@ function showEditAlarmMenu(selectedAlarm, alarmIndex) {
          showMainMenu();
        } else {
          alarm.t = require("time_utils").encodeTime(time);
-          setTimeout(showEditAlarmMenu, 10, alarm, alarmIndex);
+          setTimeout(showEditAlarmMenu, 10, alarm, alarmIndex, withDate);
        }
      });
    };
@ -154,14 +200,17 @@ function showEditAlarmMenu(selectedAlarm, alarmIndex) {
  E.showMenu(menu);
 }

-function prepareAlarmForSave(alarm, alarmIndex, time) {
+function prepareAlarmForSave(alarm, alarmIndex, time, date, temp) {
  alarm.t = require("time_utils").encodeTime(time);
  alarm.last = alarm.t < require("time_utils").getCurrentTimeMillis() ? new Date().getDate() : 0;
+  if(date) alarm.date = date.toLocalISOString().slice(0,10);

-  if (alarmIndex === undefined) {
-    alarms.push(alarm);
-  } else {
-    alarms[alarmIndex] = alarm;
+  if(!temp) {
+    if (alarmIndex === undefined) {
+      alarms.push(alarm);
+    } else {
+      alarms[alarmIndex] = alarm;
+    }
  }
 }

@ -255,6 +304,8 @@ function showEditTimerMenu(selectedTimer, timerIndex) {
  }

  var time = require("time_utils").decodeTime(timer.timer);
+  var keyboard = "textinput";
+  try {keyboard = require(keyboard);} catch(e) {keyboard = null;}

  const menu = {
    "": { "title": isNew ? /*LANG*/"New Timer" : /*LANG*/"Edit Timer" },
@ -285,6 +336,18 @@ function showEditTimerMenu(selectedTimer, timerIndex) {
      wrap: true,
      onchange: v => time.s = v
    },
+    /*LANG*/"Message": {
+      value: timer.msg,
+      onchange: () => {
+        setTimeout(() => {
+          keyboard.input({text:timer.msg}).then(result => {
+            timer.msg = result;
+            prepareTimerForSave(timer, timerIndex, time, true);
+            setTimeout(showEditTimerMenu, 10, timer, timerIndex);
+          });
+        }, 100);
+      }
+    },
    /*LANG*/"Enabled": {
      value: timer.on,
      onchange: v => timer.on = v
@ -306,6 +369,7 @@ function showEditTimerMenu(selectedTimer, timerIndex) {
    }
  };

+  if (!keyboard) delete menu[/*LANG*/"Message"];
  if (!isNew) {
    menu[/*LANG*/"Delete"] = () => {
      E.showPrompt(/*LANG*/"Are you sure?", { title: /*LANG*/"Delete Timer" }).then((confirm) => {
@ -324,15 +388,17 @@ function showEditTimerMenu(selectedTimer, timerIndex) {
  E.showMenu(menu);
 }

-function prepareTimerForSave(timer, timerIndex, time) {
+function prepareTimerForSave(timer, timerIndex, time, temp) {
  timer.timer = require("time_utils").encodeTime(time);
  timer.t = require("time_utils").getCurrentTimeMillis() + timer.timer;
  timer.last = 0;

-  if (timerIndex === undefined) {
-    alarms.push(timer);
-  } else {
-    alarms[timerIndex] = timer;
+  if (!temp) {
+    if (timerIndex === undefined) {
+      alarms.push(timer);
+    } else {
+      alarms[timerIndex] = timer;
+    }
  }
 }

--- a/apps/alarm/metadata.json
+++ b/apps/alarm/metadata.json
@ -2,7 +2,7 @@
  "id": "alarm",
  "name": "Alarms & Timers",
  "shortName": "Alarms",
-  "version": "0.36",
+  "version": "0.37",
  "description": "Set alarms and timers on your Bangle",
  "icon": "app.png",
  "tags": "tool,alarm",
--- a/apps/android/ChangeLog
+++ b/apps/android/ChangeLog
@ -18,3 +18,4 @@
 0.18: Use new message library
      If connected to Gadgetbridge, allow GPS forwarding from phone (Gadgetbridge code still not merged)
 0.19: Add automatic translation for a couple of strings.
+0.20: Fix wrong event used for forwarded GPS data from Gadgetbridge and add mapper to map longitude value correctly.
--- a/apps/android/boot.js
+++ b/apps/android/boot.js
@ -134,7 +134,11 @@
        event.satellites = NaN;
        event.course = NaN;
        event.fix = 1;
-        Bangle.emit('gps', event);
+        if (event.long!==undefined) {
+          event.lon = event.long;
+          delete event.long;
+        }
+        Bangle.emit('GPS', event);
      },
      "is_gps_active": function() {
        gbSend({ t: "gps_power", status: Bangle._PWR && Bangle._PWR.GPS && Bangle._PWR.GPS.length>0 });
--- a/apps/android/metadata.json
+++ b/apps/android/metadata.json
@ -2,7 +2,7 @@
  "id": "android",
  "name": "Android Integration",
  "shortName": "Android",
-  "version": "0.19",
+  "version": "0.20",
  "description": "Display notifications/music/etc sent from the Gadgetbridge app on Android. This replaces the old 'Gadgetbridge' Bangle.js widget.",
  "icon": "app.png",
  "tags": "tool,system,messages,notifications,gadgetbridge",
--- a/apps/barclock/ChangeLog
+++ b/apps/barclock/ChangeLog
@ -14,3 +14,4 @@
 0.14: Use ClockFace_menu.addItems
 0.15: Add Power saving option
 0.16: Support Fast Loading
+0.17: Hide widgets instead of not loading them at all
--- a/apps/barclock/metadata.json
+++ b/apps/barclock/metadata.json
@ -1,7 +1,7 @@
 {
  "id": "barclock",
  "name": "Bar Clock",
-  "version": "0.16",
+  "version": "0.17",
  "description": "A simple digital clock showing seconds as a bar",
  "icon": "clock-bar.png",
  "screenshots": [{"url":"screenshot.png"},{"url":"screenshot_pm.png"}],
--- a/apps/barclock/settings.js
+++ b/apps/barclock/settings.js
@ -1,5 +1,10 @@
 (function(back) {
  let s = require("Storage").readJSON("barclock.settings.json", true) || {};
+  // migrate "don't load widgets" to "hide widgets"
+  if (!("hideWidgets" in s) && ("loadWidgets" in s) && !s.loadWidgets) {
+    s.hideWidgets = 1;
+  }
+  delete s.loadWidgets;

  function save(key, value) {
    s[key] = value;
@ -19,7 +24,7 @@
  };
  let items = {
    showDate: s.showDate,
-    loadWidgets: s.loadWidgets,
+    hideWidgets: s.hideWidgets,
  };
  // Power saving for Bangle.js 1 doesn't make sense (no updates while screen is off anyway)
  if (process.env.HWVERSION>1) {
--- a/apps/bwclk/ChangeLog
+++ b/apps/bwclk/ChangeLog
@ -22,3 +22,10 @@
 0.22: Use the new clkinfo module for the menu.
 0.23: Feedback of apps after run is now optional and decided by the corresponding clkinfo.
 0.24: Update clock_info to avoid a redraw
+0.25: Use Bangle.setUI({remove:...}) to allow loading the launcher without a full reset on fw2v16.
+      ClockInfo Fix: Use .get instead of .show as .show is not implemented for weather etc.
+0.26: Use clkinfo.addInteractive instead of a custom implementation
+0.27: Clean out some leftovers in the remove function after switching to
+clkinfo.addInteractive that would cause ReferenceError.
+0.28: Option to show (1) time only and (2) week of year.
+0.29: use setItem of clockInfoMenu to change the active item
--- a/apps/bwclk/README.md
+++ b/apps/bwclk/README.md
@ -5,16 +5,12 @@ A very minimalistic clock.

 ## Features
 The BW clock implements features that are exposed by other apps through the `clkinfo` module.
-For example, if you install the HomeAssistant app, this menu item will be shown if you click right
-and additionally allows you to send triggers directly from the clock (select triggers via up/down and
-send via click center). Here are examples of other apps that are integrated:
+For example, if you install the HomeAssistant app, this menu item will be shown if you first
+touch the bottom of the screen and then swipe left/right to the home assistant menu. To select
+sub-items simply swipe up/down. To run an action (e.g. trigger home assistant), simply select the clkinfo (border) and touch on the item again. See also the screenshot below:

- Bangle data such as steps, heart rate, battery or charging state.
- Show agenda entries. A timer for an agenda entry can also be set by simply clicking in the middle of the screen. This can be used to not forget a meeting etc. Note that only one agenda-timer can be set at a time. *Requirement: Gadgetbridge calendar sync enabled*
- Weather temperature as well as the wind speed can be shown. *Requirement: Weather app*
- HomeAssistant triggers can be executed directly. *Requirement: HomeAssistant app*
+![](screenshot_3.png)

-Note: If some apps are not installed (e.gt. weather app), then this menu item is hidden.

 ## Settings
 - Screen: Normal (widgets shown), Dynamic (widgets shown if unlocked) or Full (widgets are hidden).
@ -22,25 +18,6 @@ Note: If some apps are not installed (e.gt. weather app), then this menu item is
 - The colon (e.g. 7:35 = 735) can be hidden in the settings for an even larger time font to improve readability further.
 - Your bangle uses the sys color settings so you can change the color too.

-## Menu structure
-2D menu allows you to display lots of different data including data from 3rd party apps and it's also possible to control things e.g. to trigger HomeAssistant.
-
-Simply click left / right to go through the menu entries such as Bangle, Weather etc.
-and click up/down to move into this sub-menu. You can then click in the middle of the screen
-to e.g. send a trigger via HomeAssistant once you selected it. The actions really depend
-on the app that provide this sub-menu through the `clkinfo` module.
-
-```
-  Bangle  -- Agenda  --  Weather  --  HomeAssistant
-    |           |           |               |
- Battery     Entry 1   Temperature      Trigger1
-    |           |           |               |
-  Steps        ...         ...             ...
-    |
-   ...
-```
-
-
 ## Thanks to
 - Thanks to Gordon Williams not only for the great BangleJs, but specifically also for the implementation of `clkinfo` which simplified the BWClock a lot and moved complexety to the apps where it should be located.
 - <a href="https://www.flaticon.com/free-icons/" title="Icons">Icons created by Flaticon</a>
--- a/apps/bwclk/app.js
+++ b/apps/bwclk/app.js
@ -1,3 +1,5 @@
+{ // must be inside our own scope here so that when we are unloaded everything disappears
+
 /************************************************
 * Includes
 */
@ -12,8 +14,6 @@ const clock_info = require("clock_info");
 const SETTINGS_FILE = "bwclk.setting.json";
 const W = g.getWidth();
 const H = g.getHeight();
-var lock_input = false;
-

 /************************************************
 * Settings
@ -28,7 +28,20 @@ let settings = {

 let saved_settings = storage.readJSON(SETTINGS_FILE, 1) || settings;
 for (const key in saved_settings) {
-  settings[key] = saved_settings[key]
+  settings[key] = saved_settings[key];
+}
+
+let isFullscreen = function() {
+  var s = settings.screen.toLowerCase();
+  if(s == "dynamic"){
+    return Bangle.isLocked();
+  } else {
+    return s == "full";
+  }
+};
+
+let getLineY = function(){
+  return H/5*2 + (isFullscreen() ? 0 : 8);
 }

 /************************************************
@ -74,32 +87,22 @@ Graphics.prototype.setMiniFont = function(scale) {
  return this;
 };

-function imgLock(){
+let imgLock = function() {
  return {
    width : 16, height : 16, bpp : 1,
    transparent : 0,
    buffer : E.toArrayBuffer(atob("A8AH4A5wDDAYGBgYP/w//D/8Pnw+fD58Pnw//D/8P/w="))
-  }
-}
+  };
+};


 /************************************************
- * Menu
+ * Clock Info
 */
-// Custom bwItems menu - therefore, its added here and not in a clkinfo.js file.
-var bwItems = {
-  name: null,
-  img: null,
-  items: [
-  { name: "WeekOfYear",
-    get: () => ({ text: "Week " + weekOfYear(), img: null}),
-    show: function() {},
-    hide: function () {}
-  },
-  ]
-};
+let clockInfoItems = clock_info.load();

-function weekOfYear() {
+// Add some custom clock-infos
+let weekOfYear = function() {
  var date = new Date();
  date.setHours(0, 0, 0, 0);
  // Thursday in current week decides the year.
@ -111,87 +114,98 @@ function weekOfYear() {
                        - 3 + (week1.getDay() + 6) % 7) / 7);
 }

+clockInfoItems[0].items.unshift({ name : "weekofyear",
+  get : function() { return { text : "Week " + weekOfYear(),
+                              img : null}},
+  show : function() {},
+  hide : function() {},
+})

-// Load menu
-var menu = clock_info.load();
-menu = menu.concat(bwItems);
+// Empty for large time
+clockInfoItems[0].items.unshift({ name : "nop",
+  get : function() { return { text : null,
+                              img : null}},
+  show : function() {},
+  hide : function() {},
+})


-// Ensure that our settings are still in range (e.g. app uninstall). Otherwise reset the position it.
-if(settings.menuPosX >= menu.length || settings.menuPosY > menu[settings.menuPosX].items.length ){
-  settings.menuPosX = 0;
-  settings.menuPosY = 0;
-}

-// Set draw functions for each item
-menu.forEach((menuItm, x) => {
-  menuItm.items.forEach((item, y) => {
-    function drawItem() {
-      // For the clock, we have a special case, as we don't wanna redraw
-      // immediately when something changes. Instead, we update data each minute
-      // to save some battery etc. Therefore, we hide (and disable the listener)
-      // immedeately after redraw...
-      item.hide();
+let clockInfoMenu = clock_info.addInteractive(clockInfoItems, {
+  x : 0,
+  y: 135,
+  w: W,
+  h: H-135,
+  draw : (itm, info, options) => {
+    var hideClkInfo = info.text == null;

-      // After drawing the item, we enable inputs again...
-      lock_input = false;
+    g.setColor(g.theme.fg);
+    g.fillRect(options.x, options.y, options.x+options.w, options.y+options.h);

-      var info = item.get();
-      drawMenuItem(info.text, info.img);
+    g.setFontAlign(0,0);
+    g.setColor(g.theme.bg);
+
+    if (options.focus){
+      var y = hideClkInfo ? options.y+20 : options.y+2;
+      var h = hideClkInfo ? options.h-20 : options.h-2;
+      g.drawRect(options.x, y, options.x+options.w-2, y+h-1); // show if focused
+      g.drawRect(options.x+1, y+1, options.x+options.w-3, y+h-2); // show if focused
    }

-    item.on('redraw', drawItem);
-  })
+    // In case we hide the clkinfo, we show the time again as the time should
+    // be drawn larger.
+    if(hideClkInfo){
+      drawTime();
+      return;
+    }
+
+    // Set text and font
+    var image = info.img;
+    var text = String(info.text);
+    if(text.split('\n').length > 1){
+      g.setMiniFont();
+    } else {
+      g.setSmallFont();
+    }
+
+    // Compute sizes
+    var strWidth = g.stringWidth(text);
+    var imgWidth = image == null ? 0 : 24;
+    var midx = options.x+options.w/2;
+
+    // Draw
+    if (image) {
+      var scale = imgWidth / image.width;
+      g.drawImage(image, midx-parseInt(imgWidth*1.3/2)-parseInt(strWidth/2), options.y+6, {scale: scale});
+    }
+    g.drawString(text, midx+parseInt(imgWidth*1.3/2), options.y+20);
+
+    // In case we are in focus and the focus box changes (fullscreen yes/no)
+    // we draw the time again. Otherwise it could happen that a while line is
+    // not cleared correctly.
+    if(options.focus) drawTime();
+  }
 });


-function canRunMenuItem(){
-  if(settings.menuPosY == 0){
-    return false;
-  }
-
-  var menuEntry = menu[settings.menuPosX];
-  var item = menuEntry.items[settings.menuPosY-1];
-  return item.run !== undefined;
-}
-
-
-function runMenuItem(){
-  if(settings.menuPosY == 0){
-    return;
-  }
-
-  var menuEntry = menu[settings.menuPosX];
-  var item = menuEntry.items[settings.menuPosY-1];
-  try{
-    var ret = item.run();
-    if(ret){
-      Bangle.buzz(300, 0.6);
-    }
-  } catch (ex) {
-    // Simply ignore it...
-  }
-}
-
-
 /************************************************
 * Draw
 */
-function draw() {
+let draw = function() {
  // Queue draw again
  queueDraw();

  // Draw clock
  drawDate();
-  drawMenuAndTime();
+  drawTime();
  drawLock();
  drawWidgets();
-}
+};


-function drawDate(){
+let drawDate = function() {
    // Draw background
-    var y = H/5*2 + (isFullscreen() ? 0 : 8);
+    var y = getLineY()
    g.reset().clearRect(0,0,W,y);

    // Draw date
@ -216,17 +230,17 @@ function drawDate(){
    g.setMediumFont();
    g.setColor(g.theme.fg);
    g.drawString(dateStr, W/2 - fullDateW / 2, y+2);
-}
+};


-function drawTime(y, smallText){
+let drawTime = function() {
+  var hideClkInfo = clockInfoMenu.menuA == 0 && clockInfoMenu.menuB == 0;
+
  // Draw background
+  var y1 = getLineY();
+  var y = y1;
  var date = new Date();

-  // Draw time
-  g.setColor(g.theme.bg);
-  g.setFontAlign(0,0);
-
  var hours = String(date.getHours());
  var minutes = date.getMinutes();
  minutes = minutes < 10 ? String("0") + minutes : minutes;
@ -236,123 +250,68 @@ function drawTime(y, smallText){
  // Set y coordinates correctly
  y += parseInt((H - y)/2) + 5;

-  // Show large or small time depending on info entry
-  if(smallText){
+  if (hideClkInfo){
+    g.setLargeFont();
+  } else {
    y -= 15;
    g.setMediumFont();
-  } else {
-    g.setLargeFont();
  }
-  g.drawString(timeStr, W/2, y);
-}
-
-function drawMenuItem(text, image){
-  // First clear the time region
-  var y = H/5*2 + (isFullscreen() ? 0 : 8);

+  // Clear region and draw time
  g.setColor(g.theme.fg);
-  g.fillRect(0,y,W,H);
+  g.fillRect(0,y1,W,y+20 + (hideClkInfo ? 1 : 0) + (isFullscreen() ? 3 : 0));

-  // Draw menu text
-  var hasText = (text != null && text != "");
-  if(hasText){
-    g.setFontAlign(0,0);
-
-    // For multiline text we show an even smaller font...
-    text = String(text);
-    if(text.split('\n').length > 1){
-      g.setMiniFont();
-    } else {
-      g.setSmallFont();
-    }
-
-    var imgWidth = image == null ? 0 : 24;
-    var strWidth = g.stringWidth(text);
-    g.setColor(g.theme.fg).fillRect(0, 149-14, W, H);
-    g.setColor(g.theme.bg).drawString(text, W/2 + imgWidth/2 + 2, 149+3);
-
-    if(image != null){
-      var scale = imgWidth / image.width;
-      g.drawImage(image, W/2 + -strWidth/2-4 - parseInt(imgWidth/2), 149 - parseInt(imgWidth/2), {scale: scale});
-    }
-  }
-
-  // Draw time
-  drawTime(y, hasText);
-}
+  g.setColor(g.theme.bg);
+  g.setFontAlign(0,0);
+  g.drawString(timeStr, W/2, y);
+};


-function drawMenuAndTime(){
-  var menuEntry = menu[settings.menuPosX];
-
-  // The first entry is the overview...
-  if(settings.menuPosY == 0){
-    drawMenuItem(menuEntry.name, menuEntry.img);
-    return;
-  }
-
-  // Draw item if needed
-  lock_input = true;
-  var item = menuEntry.items[settings.menuPosY-1];
-  item.show();
-}
-
-
-function drawLock(){
+let drawLock = function() {
  if(settings.showLock && Bangle.isLocked()){
    g.setColor(g.theme.fg);
    g.drawImage(imgLock(), W-16, 2);
  }
-}
+};


-function drawWidgets(){
+let drawWidgets = function() {
  if(isFullscreen()){
    for (let wd of WIDGETS) {wd.draw=()=>{};wd.area="";}
  } else {
    Bangle.drawWidgets();
  }
-}
-
-
-function isFullscreen(){
-  var s = settings.screen.toLowerCase();
-  if(s == "dynamic"){
-    return Bangle.isLocked()
-  } else {
-    return s == "full"
-  }
-}
-
+};


 /************************************************
 * Listener
 */
 // timeout used to update every minute
-var drawTimeout;
+let drawTimeout;

 // schedule a draw for the next minute
-function queueDraw() {
+let queueDraw = function() {
  if (drawTimeout) clearTimeout(drawTimeout);
  drawTimeout = setTimeout(function() {
    drawTimeout = undefined;
    draw();
  }, 60000 - (Date.now() % 60000));
-}
+};


 // Stop updates when LCD is off, restart when on
-Bangle.on('lcdPower',on=>{
+let lcdListenerBw = function(on) {
  if (on) {
    draw(); // draw immediately, queue redraw
  } else { // stop draw timer
    if (drawTimeout) clearTimeout(drawTimeout);
    drawTimeout = undefined;
  }
-});
+};
+Bangle.on('lcdPower', lcdListenerBw);

-Bangle.on('lock', function(isLocked) {
+let lockListenerBw = function(isLocked) {
  if (drawTimeout) clearTimeout(drawTimeout);
  drawTimeout = undefined;

@ -363,85 +322,21 @@ Bangle.on('lock', function(isLocked) {
  }

  draw();
-});
-
-Bangle.on('charging',function(charging) {
-  if (drawTimeout) clearTimeout(drawTimeout);
-  drawTimeout = undefined;
+};
+Bangle.on('lock', lockListenerBw);

+let charging = function(charging){
  // Jump to battery
-  settings.menuPosX = 0;
-  settings.menuPosY = 1;
-  draw();
-});
-
-Bangle.on('touch', function(btn, e){
-  var widget_size = isFullscreen() ? 0 : 20; // Its not exactly 24px -- empirically it seems that 20 worked better...
-  var left = parseInt(g.getWidth() * 0.22);
-  var right = g.getWidth() - left;
-  var upper = parseInt(g.getHeight() * 0.22) + widget_size;
-  var lower = g.getHeight() - upper;
-
-  var is_upper = e.y < upper;
-  var is_lower = e.y > lower;
-  var is_left = e.x < left && !is_upper && !is_lower;
-  var is_right = e.x > right && !is_upper && !is_lower;
-  var is_center = !is_upper && !is_lower && !is_left && !is_right;
-
-  if(lock_input){
-    return;
-  }
-
-  if(is_lower){
-    Bangle.buzz(40, 0.6);
-    settings.menuPosY = (settings.menuPosY+1) % (menu[settings.menuPosX].items.length+1);
-
-    drawMenuAndTime();
-  }
-
-  if(is_upper){
-    if(e.y < widget_size){
-      return;
-    }
-
-    Bangle.buzz(40, 0.6);
-    settings.menuPosY  = settings.menuPosY-1;
-    settings.menuPosY = settings.menuPosY < 0 ? menu[settings.menuPosX].items.length : settings.menuPosY;
-
-    drawMenuAndTime();
-  }
-
-  if(is_right){
-    Bangle.buzz(40, 0.6);
-    settings.menuPosX = (settings.menuPosX+1) % menu.length;
-    settings.menuPosY = 0;
-    drawMenuAndTime();
-  }
-
-  if(is_left){
-    Bangle.buzz(40, 0.6);
-    settings.menuPosY = 0;
-    settings.menuPosX  = settings.menuPosX-1;
-    settings.menuPosX = settings.menuPosX < 0 ? menu.length-1 : settings.menuPosX;
-    drawMenuAndTime();
-  }
-
-  if(is_center){
-    if(canRunMenuItem()){
-      runMenuItem();
-    }
-  }
-});
-
-
-E.on("kill", function(){
-  try{
-    storage.write(SETTINGS_FILE, settings);
-  } catch(ex){
-    // If this fails, we still kill the app...
-  }
-});
+  clockInfoMenu.setItem(0, 2);
+  drawTime();
+}
+Bangle.on('charging', charging);

+let kill = function(){
+  clockInfoMenu.remove();
+  delete clockInfoMenu;
+};
+E.on("kill", kill);

 /************************************************
 * Startup Clock
@ -450,10 +345,25 @@ E.on("kill", function(){
 // The upper part is inverse i.e. light if dark and dark if light theme
 // is enabled. In order to draw the widgets correctly, we invert the
 // dark/light theme as well as the colors.
+let themeBackup = g.theme;
 g.setTheme({bg:g.theme.fg,fg:g.theme.bg, dark:!g.theme.dark}).clear();

 // Show launcher when middle button pressed
-Bangle.setUI("clock");
+Bangle.setUI({
+  mode : "clock",
+  remove : function() {
+    // Called to unload all of the clock app
+    Bangle.removeListener('lcdPower', lcdListenerBw);
+    Bangle.removeListener('lock', lockListenerBw);
+    Bangle.removeListener('charging', charging);
+    if (drawTimeout) clearTimeout(drawTimeout);
+    drawTimeout = undefined;
+    // save settings
+    kill();
+    E.removeListener("kill", kill);
+    g.setTheme(themeBackup);
+  }
+});

 // Load widgets and draw clock the first time
 Bangle.loadWidgets();
@ -464,3 +374,5 @@ for (let wd of WIDGETS) {wd._draw=wd.draw; wd._area=wd.area;}

 // Draw first time
 draw();
+
+} // End of app scope
--- a/apps/bwclk/metadata.json
+++ b/apps/bwclk/metadata.json
@ -1,11 +1,11 @@
 {
  "id": "bwclk",
  "name": "BW Clock",
-  "version": "0.24",
-  "description": "A very minimalistic clock to mainly show date and time.",
+  "version": "0.29",
+  "description": "A very minimalistic clock.",
  "readme": "README.md",
  "icon": "app.png",
-  "screenshots": [{"url":"screenshot.png"}, {"url":"screenshot_2.png"}, {"url":"screenshot_3.png"}, {"url":"screenshot_4.png"}],
+  "screenshots": [{"url":"screenshot.png"}, {"url":"screenshot_2.png"}, {"url":"screenshot_3.png"}],
  "type": "clock",
  "tags": "clock,clkinfo",
  "supports": ["BANGLEJS2"],
--- a/apps/bwclk/screenshot.png
+++ b/apps/bwclk/screenshot.png
--- a/apps/bwclk/screenshot_2.png
+++ b/apps/bwclk/screenshot_2.png
--- a/apps/bwclk/screenshot_3.png
+++ b/apps/bwclk/screenshot_3.png
--- a/apps/bwclk/screenshot_4.png
+++ b/apps/bwclk/screenshot_4.png
--- a/apps/circlesclock/ChangeLog
+++ b/apps/circlesclock/ChangeLog
@ -39,3 +39,4 @@
 0.21: Remade all icons without a palette for dark theme
      Now re-adds widgets if they were hidden when fast-loading
 0.22: Fixed crash if item has no image and cutting long overflowing text
+0.23: Setting circles colours per clkinfo and not position
--- a/apps/circlesclock/app.js
+++ b/apps/circlesclock/app.js
@ -20,24 +20,12 @@ let settings = Object.assign(
  storage.readJSON("circlesclock.default.json", true) || {},
  storage.readJSON(SETTINGS_FILE, true) || {}
 );
- //TODO deprecate this (and perhaps use in the clkinfo module)
-// Load step goal from health app and pedometer widget as fallback
-if (settings.stepGoal == undefined) {
-  let d = storage.readJSON("health.json", true) || {};
-  settings.stepGoal = d != undefined && d.settings != undefined ? d.settings.stepGoal : undefined;
-
-  if (settings.stepGoal == undefined) {
-    d = storage.readJSON("wpedom.json", true) || {};
-    settings.stepGoal = d != undefined && d.settings != undefined ? d.settings.goal : 10000;
-  }
-}

 let drawTimeout;
 const showWidgets = settings.showWidgets || false;
 const circleCount = settings.circleCount || 3;
 const showBigWeather = settings.showBigWeather || false;

-let hrtValue; //TODO deprecate this
 let now = Math.round(new Date().getTime() / 1000);

 // layout values:
@ -128,8 +116,11 @@ let draw = function() {
  queueDraw();
 }

-let getCircleColor = function(index) {
-  let color = settings["circle" + index + "color"];
+let getCircleColor = function(item, clkmenu) {
+  let colorKey = clkmenu.name;
+  if(!clkmenu.dynamic) colorKey += "/"+item.name;
+  colorKey += "_color";
+  let color = settings[colorKey];
  if (color && color != "") return color;
  return g.theme.fg;
 }
@ -138,7 +129,7 @@ let getGradientColor = function(color, percent) {
  if (isNaN(percent)) percent = 0;
  if (percent > 1) percent = 1;
  let colorList = [
-    '#00FF00', '#80FF00', '#FFFF00', '#FF8000', '#FF0000'
+    '#00ff00', '#80ff00', '#ffff00', '#ff8000', '#ff0000'
  ];
  if (color == "fg") {
    color = colorFg;
@ -151,6 +142,17 @@ let getGradientColor = function(color, percent) {
    let colorIndex = colorList.length - Math.round(colorList.length * percent);
    return colorList[Math.min(colorIndex, colorList.length)] || "#ff0000";
  }
+  colorList = [
+    '#0000ff', '#8800ff', '#ff00ff', '#ff0088', '#ff0000'
+  ];
+  if (color == "blue-red") {
+    let colorIndex = Math.round(colorList.length * percent);
+    return colorList[Math.min(colorIndex, colorList.length) - 1] || "#0000ff";
+  }
+  if (color == "red-blue") {
+    let colorIndex = colorList.length - Math.round(colorList.length * percent);
+    return colorList[Math.min(colorIndex, colorList.length)] || "#ff0000";
+  }
  return color;
 }

@ -172,10 +174,10 @@ let drawEmpty = function(img, w, color) {
      .drawImage(img, w - iconOffset, h3 + radiusOuter - iconOffset, {scale: 16/24});
 }

-let drawCircle = function(index, item, data) {
+let drawCircle = function(index, item, data, clkmenu) {
  var w = circlePosX[index-1];
  drawCircleBackground(w);
-  const color = getCircleColor(index);
+  const color = getCircleColor(item, clkmenu);
  //drawEmpty(info? info.img : null, w, color);
  var img = data.img;
  var percent = 1; //fill up if no range
@ -338,7 +340,8 @@ Bangle.setUI({

 let clockInfoDraw = (itm, info, options) => {
  //print("Draw",itm.name,options);
-  drawCircle(options.circlePosition, itm, info);
+  let clkmenu = clockInfoItems[options.menuA];
+  drawCircle(options.circlePosition, itm, info, clkmenu);
  if (options.focus) g.reset().drawRect(options.x, options.y, options.x+options.w-2, options.y+options.h-1)
 };
 let clockInfoItems = require("clock_info").load();
--- a/apps/circlesclock/default.json
+++ b/apps/circlesclock/default.json
@ -3,23 +3,21 @@
  "showWidgets": false,
  "weatherCircleData": "humidity",
  "circleCount": 3,
-  "circle1color": "green-red",
-  "circle2color": "#0000ff",
-  "circle3color": "red-green",
-  "circle4color": "#ffff00",
+  "Bangle/Battery_color":"red-green",
+  "Bangle/Steps_color":"#0000ff",
+  "Bangle/HRM_color":"green-red",
+  "Bangle/Altitude_color":"#00ff00",
+  "Weather/conditionWithTemperature_color":"#ffff00",
+  "Weather/condition_color":"#00ffff",
+  "Weather/humidity_color":"#00ffff",
+  "Weather/wind_color":"fg",
+  "Weather/temperature_color":"blue-red",
+  "Alarms_color":"#00ff00",
+  "Agenda_color":"#ff0000",
  "circle1colorizeIcon": true,
  "circle2colorizeIcon": true,
  "circle3colorizeIcon": true,
  "circle4colorizeIcon": false,
  "updateInterval": 60,
-  "showBigWeather": false,
-
-  "minHR": 40,
-  "maxHR": 200,
-  "confidence": 0,
-  "stepGoal": 10000,
-  "stepDistanceGoal": 8000,
-  "stepLength": 0.8,
-  "hrmValidity": 60
-
+  "showBigWeather": false
 }
--- a/apps/circlesclock/metadata.json
+++ b/apps/circlesclock/metadata.json
@ -1,7 +1,7 @@
 { "id": "circlesclock",
  "name": "Circles clock",
  "shortName":"Circles clock",
-  "version":"0.22",
+  "version":"0.23",
  "description": "A clock with three or four circles for different data at the bottom in a probably familiar style",
  "icon": "app.png",
  "screenshots": [{"url":"screenshot-dark.png"}, {"url":"screenshot-light.png"}, {"url":"screenshot-dark-4.png"}, {"url":"screenshot-light-4.png"}],
--- a/apps/circlesclock/settings.js
+++ b/apps/circlesclock/settings.js
@ -12,12 +12,10 @@
    storage.write(SETTINGS_FILE, settings);
  }

-  const valuesColors = ["",        "#ff0000", "#00ff00", "#0000ff", "#ffff00", "#ff00ff",
-  "#00ffff", "#fff",  "#000", "green-red",   "red-green", "fg"];
-  const namesColors =  ["default", "red",     "green",   "blue",    "yellow",  "magenta",
-  "cyan",    "white", "black", "green->red", "red->green", "foreground"];
-
-  const weatherData = ["empty", "humidity", "wind"];
+  const valuesColors = ["", "#ff0000", "#00ff00", "#0000ff", "#ffff00", "#ff00ff",
+  "#00ffff", "#fff", "#000", "green-red", "red-green", "blue-red", "red-blue", "fg"];
+  const namesColors =  ["default", "red", "green", "blue", "yellow", "magenta",
+  "cyan", "white", "black", "green->red", "red->green",  "blue->red", "red->blue", "foreground"];

  function showMainMenu() {
    let menu ={
@ -30,31 +28,11 @@
        step: 1,
        onchange: x => save('circleCount', x),
      },
-      /*LANG*/'circle 1': ()=>showCircleMenu(1),
-      /*LANG*/'circle 2': ()=>showCircleMenu(2),
-      /*LANG*/'circle 3': ()=>showCircleMenu(3),
-      /*LANG*/'circle 4': ()=>showCircleMenu(4),
-      /*LANG*/'battery warn': {
-        value: settings.batteryWarn,
-        min: 10,
-        max : 100,
-        step: 10,
-        format: x => {
-          return x + '%';
-        },
-        onchange: x => save('batteryWarn', x),
-      },
      /*LANG*/'show widgets': {
        value: !!settings.showWidgets,
        format: () => (settings.showWidgets ? 'Yes' : 'No'),
        onchange: x => save('showWidgets', x),
      },
-      /*LANG*/'weather data': {
-        value: weatherData.indexOf(settings.weatherCircleData),
-        min: 0, max: 2,
-        format: v => weatherData[v],
-        onchange: x => save('weatherCircleData', weatherData[x]),
-      },
      /*LANG*/'update interval': {
        value: settings.updateInterval,
        min: 0,
@ -65,41 +43,54 @@
        },
        onchange: x => save('updateInterval', x),
      },
-      //TODO deprecated local icons, may disappear in future
-      /*LANG*/'legacy weather icons': {
-        value: !!settings.legacyWeatherIcons,
-        format: () => (settings.legacyWeatherIcons ? 'Yes' : 'No'),
-        onchange: x => save('legacyWeatherIcons', x),
-      },
      /*LANG*/'show big weather': {
        value: !!settings.showBigWeather,
        format: () => (settings.showBigWeather ? 'Yes' : 'No'),
        onchange: x => save('showBigWeather', x),
-      }
+      },
+      /*LANG*/'colorize icons': ()=>showCircleMenus()
    };
+    clock_info.load().forEach(e=>{
+      if(e.dynamic) {
+        const colorKey = e.name + "_color";
+        menu[e.name+/*LANG*/' color'] = {
+          value: valuesColors.indexOf(settings[colorKey]) || 0,
+          min: 0, max: valuesColors.length - 1,
+          format: v => namesColors[v],
+          onchange: x => save(colorKey, valuesColors[x]),
+        };
+      } else {
+        let values = e.items.map(i=>e.name+"/"+i.name);
+        let names = e.name=="Bangle" ? e.items.map(i=>i.name) : values;
+        values.forEach((v,i)=>{
+          const colorKey = v + "_color";
+          menu[names[i]+/*LANG*/' color'] = {
+            value: valuesColors.indexOf(settings[colorKey]) || 0,
+            min: 0, max: valuesColors.length - 1,
+            format: v => namesColors[v],
+            onchange: x => save(colorKey, valuesColors[x]),
+          };
+        });
+      }
+    })
    E.showMenu(menu);
  }

-  function showCircleMenu(circleId) {
-    const circleName = "circle" + circleId;
-    const colorKey = circleName + "color";
-    const colorizeIconKey = circleName + "colorizeIcon";
-
-    const menu = {
-      '': { 'title': /*LANG*/'Circle ' + circleId },
-      /*LANG*/'< Back': ()=>showMainMenu(),
-      /*LANG*/'color': {
-        value: valuesColors.indexOf(settings[colorKey]) || 0,
-        min: 0, max: valuesColors.length - 1,
-        format: v => namesColors[v],
-        onchange: x => save(colorKey, valuesColors[x]),
-      },
-      /*LANG*/'colorize icon': {
+  function showCircleMenus() {
+      const menu = {
+        '': { 'title': /*LANG*/'Colorize icons'},
+        /*LANG*/'< Back': ()=>showMainMenu(),
+      };
+    for(var circleId=1; circleId<=4; ++circleId) {
+      const circleName = "circle" + circleId;
+      const colorKey = circleName + "color";
+      const colorizeIconKey = circleName + "colorizeIcon";
+      menu[/*LANG*/'circle ' + circleId] = {
        value: settings[colorizeIconKey] || false,
-        format: () => (settings[colorizeIconKey] ? 'Yes' : 'No'),
-        onchange: x => save(colorizeIconKey, x),
-      },
-    };
+          format: () => (settings[colorizeIconKey]? /*LANG*/'Yes': /*LANG*/'No'),
+          onchange: x => save(colorizeIconKey, x),
+      };
+    }
    E.showMenu(menu);
  }

--- a/apps/cogclock/ChangeLog
+++ b/apps/cogclock/ChangeLog
@ -1,3 +1,4 @@
 0.01: New clock
 0.02: Use ClockFace library, add settings
 0.03: Use ClockFace_menu.addSettingsFile
+0.04: Hide widgets instead of not loading them at all
--- a/apps/cogclock/metadata.json
+++ b/apps/cogclock/metadata.json
@ -1,7 +1,7 @@
 {
  "id": "cogclock",
  "name": "Cog Clock",
-  "version": "0.03",
+  "version": "0.04",
  "description": "A cross-shaped clock inside a cog",
  "icon": "icon.png",
  "screenshots": [{"url":"screenshot.png"}],
--- a/apps/cogclock/settings.js
+++ b/apps/cogclock/settings.js
@ -4,7 +4,7 @@
    /*LANG*/"< Back": back,
  };
  require("ClockFace_menu").addSettingsFile(menu, "cogclock.settings.json", [
-    "showDate", "loadWidgets"
+    "showDate", "hideWidgets"
  ]);
  E.showMenu(menu);
 });
--- a/apps/dragboard/ChangeLog
+++ b/apps/dragboard/ChangeLog
@ -4,3 +4,4 @@
 0.04: Now displays the opened text string at launch.
 0.05: Now scrolls text when string gets longer than screen width.
 0.06: The code is now more reliable and the input snappier. Widgets will be drawn if present.
+0.07: Settings for display colors
--- a/apps/dragboard/README.md
+++ b/apps/dragboard/README.md
@ -12,5 +12,8 @@ Known bugs:
 - Initially developed for use with dark theme set on Bangle.js 2 - that is still the preferred way to view it although it now works with other themes.
 - When repeatedly doing 'del' on an empty text-string, the letter case is changed back and forth between upper and lower case.

-To do: 
- Possibly provide a dragboard.settings.js file
+Settings: 
+- CAPS LOCK: all characters are displayed and typed in uppercase
+- ABC Color: color of the characters row
+- Num Color: color of the digits and symbols row
+- Highlight Color: color of the currently highlighted character
--- a/apps/dragboard/lib.js
+++ b/apps/dragboard/lib.js
@ -2,12 +2,14 @@ exports.input = function(options) {
  options = options||{};
  var text = options.text;
  if ("string"!=typeof text) text="";
+  let settings = require('Storage').readJSON('dragboard.json',1)||{}

  var R = Bangle.appRect;
+  const paramToColor = (param) => g.toColor(`#${settings[param].toString(16).padStart(3,0)}`);
  var BGCOLOR = g.theme.bg;
-  var HLCOLOR = g.theme.fg;
-  var ABCCOLOR = g.toColor(1,0,0);//'#FF0000';
-  var NUMCOLOR = g.toColor(0,1,0);//'#00FF00';
+  var HLCOLOR = settings.Highlight ? paramToColor("Highlight") : g.theme.fg;
+  var ABCCOLOR = settings.ABC ? paramToColor("ABC") : g.toColor(1,0,0);//'#FF0000';
+  var NUMCOLOR = settings.Num ? paramToColor("Num") : g.toColor(0,1,0);//'#00FF00';
  var BIGFONT = '6x8:3';
  var BIGFONTWIDTH = parseInt(BIGFONT.charAt(0)*parseInt(BIGFONT.charAt(-1)));
  var SMALLFONT = '6x8:1';
@ -102,6 +104,7 @@ exports.input = function(options) {
  //setTimeout(initDraw, 0); // So Bangle.appRect reads the correct environment. It would draw off to the side sometimes otherwise.

  function changeCase(abcHL) {
+    if (settings.uppercase) return;
    g.setColor(BGCOLOR);
    g.setFontAlign(-1, -1, 0);
    g.drawString(ABC, ABCPADDING, (R.y+R.h)/2);
--- a/apps/dragboard/metadata.json
+++ b/apps/dragboard/metadata.json
@ -1,6 +1,6 @@
 { "id": "dragboard",
  "name": "Dragboard",
-  "version":"0.06",
+  "version":"0.07",
  "description": "A library for text input via swiping keyboard",
  "icon": "app.png",
  "type":"textinput",
@ -9,6 +9,7 @@
  "screenshots": [{"url":"screenshot.png"}],  
  "readme": "README.md",
  "storage": [
-    {"name":"textinput","url":"lib.js"}
+    {"name":"textinput","url":"lib.js"},
+    {"name":"dragboard.settings.js","url":"settings.js"}
  ]
 }
--- a/apps/dragboard/settings.js
+++ b/apps/dragboard/settings.js
@ -0,0 +1,48 @@
+(function(back) {
+  let settings = require('Storage').readJSON('dragboard.json',1)||{};
+  const colors = {
+      4095: /*LANG*/"White",
+      4080: /*LANG*/"Yellow",
+      3840: /*LANG*/"Red",
+      3855: /*LANG*/"Magenta",
+      255: /*LANG*/"Cyan",
+      240: /*LANG*/"Green",
+      15: /*LANG*/"Blue",
+      0: /*LANG*/"Black",
+      '-1': /*LANG*/"Default"
+  };
+
+  const save = () => require('Storage').write('dragboard.json', settings);
+  function colorMenu(key) {
+    let menu = {'': {title: key}, '< Back': () => E.showMenu(appMenu)};
+    Object.keys(colors).forEach(color => {
+      var label = colors[color];
+      menu[label] = {
+        value: settings[key] == color,
+        onchange: () => {
+          if (color >= 0) {
+            settings[key] = color;
+          } else {
+            delete settings[key];
+          }
+          save();
+          setTimeout(E.showMenu, 10, appMenu);
+        }
+      };
+    });
+    return menu;
+  }
+
+  const appMenu = {
+      '': {title: 'Dragboard'}, '< Back': back,
+      /*LANG*/'CAPS LOCK': {
+        value: !!settings.uppercase,
+        onchange: v => {settings.uppercase = v; save();}
+      },
+      /*LANG*/'ABC Color': () => E.showMenu(colorMenu("ABC")),
+      /*LANG*/'Num Color': () => E.showMenu(colorMenu("Num")),
+      /*LANG*/'Highlight Color': () => E.showMenu(colorMenu("Highlight"))
+  };
+
+  E.showMenu(appMenu);
+});
--- a/apps/dtlaunch/ChangeLog
+++ b/apps/dtlaunch/ChangeLog
@ -23,4 +23,8 @@ button to exit is no longer an option.
 facilitate 'fast switching' of apps where available.
 0.20: Bangle 2: Revert use of Bangle.load() to classic load() calls since
 widgets would still be loaded when they weren't supposed to.
+0.21: Bangle 2: Call Bangle.drawWidgets() early on so that the widget field
+immediately follows the correct theme.
+0.22: Bangle 2: Change to not automatically marking the first app on a page
+when moving pages. Add caching for faster startups.

--- a/apps/dtlaunch/app-b2.js
+++ b/apps/dtlaunch/app-b2.js
@ -13,20 +13,25 @@
  }, require('Storage').readJSON("dtlaunch.json", true) || {});

  let s = require("Storage");
-  var apps = s.list(/\.info$/).map(app=>{
-    let a=s.readJSON(app,1);
-    return a && {
-      name:a.name, type:a.type, icon:a.icon, sortorder:a.sortorder, src:a.src
-    };}).filter(
-      app=>app && (app.type=="app" || (app.type=="clock" && settings.showClocks) || (app.type=="launch" && settings.showLaunchers) || !app.type));
-
-  apps.sort((a,b)=>{
-    let n=(0|a.sortorder)-(0|b.sortorder);
-    if (n) return n; // do sortorder first
-    if (a.name<b.name) return -1;
-    if (a.name>b.name) return 1;
-    return 0;
-  });
+  // Borrowed caching from Icon Launcher, code by halemmerich.
+  let launchCache = s.readJSON("launch.cache.json", true)||{};
+  let launchHash = require("Storage").hash(/\.info/);
+  if (launchCache.hash!=launchHash) {
+  launchCache = {
+    hash : launchHash,
+    apps : s.list(/\.info$/)
+      .map(app=>{var a=s.readJSON(app,1);return a&&{name:a.name,type:a.type,icon:a.icon,sortorder:a.sortorder,src:a.src};})
+      .filter(app=>app && (app.type=="app" || (app.type=="clock" && settings.showClocks) || !app.type))
+      .sort((a,b)=>{
+        var n=(0|a.sortorder)-(0|b.sortorder);
+        if (n) return n; // do sortorder first
+        if (a.name<b.name) return -1;
+        if (a.name>b.name) return 1;
+        return 0;
+      }) };
+    s.writeJSON("launch.cache.json", launchCache);
+  }
+  let apps = launchCache.apps;
  apps.forEach(app=>{
    if (app.icon)
      app.icon = s.read(app.icon); // should just be a link to a memory area
@ -84,12 +89,13 @@
    g.flip();
  };

+  Bangle.drawWidgets(); // To immediately update widget field to follow current theme - remove leftovers if previous app set custom theme.
  Bangle.loadWidgets();
  drawPage(0);

  let swipeListenerDt = function(dirLeftRight, dirUpDown){
    updateTimeoutToClock();
-    selected = 0;
+    selected = -1;
    oldselected=-1;
    if(settings.swipeExit && dirLeftRight==1) Bangle.showClock();
    if (dirUpDown==-1||dirLeftRight==-1){
@ -153,3 +159,4 @@
  updateTimeoutToClock();

 } // end of app scope
+
--- a/apps/dtlaunch/metadata.json
+++ b/apps/dtlaunch/metadata.json
@ -1,7 +1,7 @@
 {
  "id": "dtlaunch",
  "name": "Desktop Launcher",
-  "version": "0.20",
+  "version": "0.22",
  "description": "Desktop style App Launcher with six (four for Bangle 2) apps per page - fast access if you have lots of apps installed.",
  "screenshots": [{"url":"shot1.png"},{"url":"shot2.png"},{"url":"shot3.png"}],
  "icon": "icon.png",
--- a/apps/entonclk/ChangeLog
+++ b/apps/entonclk/ChangeLog
@ -1 +1,2 @@
 0.1: New App!
+0.2: Now with timer function
--- a/apps/entonclk/README.md
+++ b/apps/entonclk/README.md
@ -7,3 +7,15 @@ Things I changed:
 - The main font for the time is now Audiowide
 - Removed the written out day name and replaced it with steps and bpm
 - Changed the date string to a (for me) more readable string
+
+Timer function:
+- Touch the right side, to start the timer
+- Initial timer timeout is 300s/5min
+- Right touch again, add 300s/5min to timeout
+- Left touch, decrease timeout by 60s/1min
+- So it is easy, to add timeouts like 7min/3min or 12min
+- Special thanks to the maintainer of the a_clock_timer app from which I borrowed the code.
+
+Todo:
+- Make displayed information configurable, after https://github.com/espruino/BangleApps/issues/2226
+- Clean up code
--- a/apps/entonclk/app.js
+++ b/apps/entonclk/app.js
@ -1,67 +1,127 @@
+// Fonts
 Graphics.prototype.setFontAudiowide = function() {
-  // Actual height 33 (36 - 4)
  var widths = atob("CiAsESQjJSQkHyQkDA==");
  var font = atob("AAAAAAAAAAAAAAAAAAAAAPAAAAAAAfgAAAAAAfgAAAAAAfgAAAAAAfgAAAAAAPAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAgAAAAAADgAAAAAAHgAAAAAAfgAAAAAA/gAAAAAD/gAAAAAH/gAAAAAf/AAAAAB/8AAAAAD/4AAAAAP/gAAAAAf/AAAAAB/8AAAAAD/4AAAAAP/gAAAAAf+AAAAAB/8AAAAAH/wAAAAAP/gAAAAA/+AAAAAB/8AAAAAD/wAAAAAD/gAAAAAD+AAAAAAD4AAAAAADwAAAAAADAAAAAAACAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD/AAAAAA//+AAAAB///AAAAH///wAAAP///4AAAf///8AAA////+AAA/4AP+AAB/gAD/AAB/AA9/AAD+AB+/gAD+AD+/gAD+AD+/gAD8AH+fgAD8AP8fgAD8AP4fgAD8Af4fgAD8A/wfgAD8A/gfgAD8B/gfgAD8D/AfgAD8D+AfgAD8H+AfgAD8P8AfgAD8P4AfgAD8f4AfgAD8/wAfgAD8/gAfgAD+/gA/gAD+/AA/gAB/eAB/AAB/sAD/AAB/wAH/AAA////+AAAf///8AAAP///4AAAH///wAAAD///gAAAA//+AAAAAP/4AAAAAAAAAAAAAAAAAAAAAAAAAAAD8AAAAAAD8AAAAAAD8AAAAAAD8AAAAAAD8AAAAAAD8AAAAAAD/////gAD/////gAD/////gAD/////gAD/////gAD/////gAD/////gAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA//gAAAAH//gAAAAP//gAD8Af//gAD8A///gAD8B///gAD8B///gAD8B/AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD+D+AfgAD//+AfgAD//+AfgAB//8AfgAA//4AfgAAf/wAfgAAP/gAfgAAB8AAfgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD+B+A/gAD/////gAB/////AAB/////AAA////+AAAf///8AAAP///4AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD//4AAAAD//8AAAAD//+AAAAD//+AAAAD//+AAAAD//+AAAAD//+AAAAAAB+AAAAAAB+AAAAAAB+AAAAAAB+AAAAAAB+AAAAAAB+AAAAAAB+AAAAAAB+AAAAAAB+AAAAAAB+AAAAAAB+AAAAAAB+AAAAAAB+AAAAAAB+AAAAAAB+AAAAAAB+AAAAAAB+AAAAAAB+AAAAD/////gAD/////gAD/////gAD/////gAD/////gAD/////gAD/////gAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD//AAfgAD//wAfgAD//4AfgAD//8AfgAD//8AfgAD//+AfgAD8D+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B/A/gAD8B///gAD8B///gAD8A///AAD8A///AAAAAf/+AAAAAP/4AAAAAD/gAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAB///AAAAH///wAAAf///8AAAf///8AAA////+AAB/////AAB/h+H/AAD/B+B/gAD+B+A/gAD+B+A/gAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B/A/gAD8B///gAD8B///gAD8A///AAAAAf//AAAAAf/+AAAAAH/4AAAAAB/gAAAAAAAAAAAAAAAAAAAAAAAAAAD8AAAAAAD8AAAAAAD8AAAAAAD8AAAAAAD8AAAAgAD8AAABgAD8AAAHgAD8AAAfgAD8AAA/gAD8AAD/gAD8AAP/gAD8AA//gAD8AB//AAD8AH/8AAD8Af/wAAD8A//AAAD8D/+AAAD8P/4AAAD8f/gAAAD9//AAAAD//8AAAAD//wAAAAD//gAAAAD/+AAAAAD/4AAAAAD/wAAAAAD/AAAAAAD8AAAAAAA4AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA/gAAAAAH/4AAAAAP/8AAAH+f/+AAAf////AAA/////gAB/////gAB///A/gAD//+AfgAD//+AfgAD+D+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD+D+AfgAD//+AfgAD//+AfgAB///A/gAB/////gAA/////AAAP////AAAD+f/+AAAAAP/8AAAAAH/4AAAAAA+AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAH/AAAAAAf/wAAAAA//4AAAAB//8AAAAB//8AfgAD//+AfgAD/D+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD8B+AfgAD+B+A/gAD+B+A/gAD/B+B/gAB/////AAB/////AAA////+AAAf///8AAAP///4AAAH///wAAAB///AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAeAAPAAAA/AAfgAAA/AAfgAAA/AAfgAAA/AAfgAAAeAAPAAAAAAAAAAAAAAAAAAAAAAAAAA");
  var scale = 1; // size multiplier for this font
  g.setFontCustom(font, 46, widths, 48+(scale<<8)+(1<<16));
 };

+// Globals variables
+var timervalue = 0;
+var istimeron = false;
+var timertick;
+
+// Functions
 function getSteps() {
-		var steps = 0;
-		try{
-      if (WIDGETS.wpedom !== undefined) {
-          steps = WIDGETS.wpedom.getSteps();
-      } else if (WIDGETS.activepedom !== undefined) {
-          steps = WIDGETS.activepedom.getSteps();
-      } else {
-        steps = Bangle.getHealthStatus("day").steps;
-      }
+  var steps = 0;
+  try{
+    if (WIDGETS.wpedom !== undefined) {
+      steps = WIDGETS.wpedom.getSteps();
+    } else if (WIDGETS.activepedom !== undefined) {
+      steps = WIDGETS.activepedom.getSteps();
+    } else {
+      steps = Bangle.getHealthStatus("day").steps;
+    }
  } catch(ex) {
-      // In case we failed, we can only show 0 steps.
-      return "?";
+    // In case we failed, we can only show 0 steps.
+    return "?";
  }

-		return Math.round(steps);
+  return Math.round(steps);
 }

+function timeToString(duration) {
+  var hrs = ~~(duration / 3600);
+  var mins = ~~((duration % 3600) / 60);
+  var secs = ~~duration % 60;
+  var ret = "";
+  if (hrs > 0) {
+    ret += "" + hrs + ":" + (mins < 10 ? "0" : "");
+  }
+  ret += "" + mins + ":" + (secs < 10 ? "0" : "");
+  ret += "" + secs;
+  return ret;
+}
+
+function countDown() {
+  timervalue--;
+
+  g.reset().clearRect(0, 40, 44+99, g.getHeight()/2-25);
+
+  g.setFontAlign(0, -1, 0);
+  g.setFont("6x8", 2).drawString(timeToString(timervalue), 95, g.getHeight()/2-50);
+
+  if (timervalue <= 0) {
+    istimeron = false;
+    clearInterval(timertick);
+
+    Bangle.buzz().then(()=>{
+      return new Promise(resolve=>setTimeout(resolve, 500));
+    }).then(()=>{
+      return Bangle.buzz(1000);
+    });
+  }
+  else
+    if ((timervalue <= 30) && (timervalue % 10 == 0)) { Bangle.buzz(); }
+}
+
+// Touch
+Bangle.on('touch',t => {
+  if (t == 1) {
+    // Touch on the left, reduce timervalue about 60s
+    Bangle.buzz(30);
+    if (timervalue < 60) { timervalue = 1 ; }
+    else { timervalue -= 60; }
+  }
+  // Touch on the right, raise timervaule about 300s
+  else if (t == 2) {
+    Bangle.buzz(30);
+    if (!istimeron) {
+      istimeron = true;
+      timertick = setInterval(countDown, 1000);
+    }
+    timervalue += 60*5;
+  }
+});
+
 { // must be inside our own scope here so that when we are unloaded everything disappears
  // we also define functions using 'let fn = function() {..}' for the same reason. function decls are global
-let drawTimeout;
+  let drawTimeout;


-// Actually draw the watch face
-let draw = function() {
-  var x = g.getWidth() / 2;
-  var y = g.getHeight() / 2;
-  g.reset().clearRect(Bangle.appRect); // clear whole background (w/o widgets)
-  var date = new Date();
-  var timeStr = require("locale").time(date, 1); // Hour and minute
-  g.setFontAlign(0, 0).setFont("Audiowide").drawString(timeStr, x, y);
-  var dateStr = require("locale").date(date, 1).toUpperCase();
-  g.setFontAlign(0, 0).setFont("6x8", 2).drawString(dateStr, x, y+28);
-	g.setFontAlign(0, 0).setFont("6x8", 2);
-  g.drawString(getSteps(), 50, y+70);
-  g.drawString(Math.round(Bangle.getHealthStatus("last").bpm), g.getWidth() -37, y + 70);
+  // Actually draw the watch face
+  let draw = function() {
+    var x = g.getWidth() / 2;
+    var y = g.getHeight() / 2;
+    g.reset().clearRect(Bangle.appRect); // clear whole background (w/o widgets)
+    var date = new Date();
+    var timeStr = require("locale").time(date, 1); // Hour and minute
+    g.setFontAlign(0, 0).setFont("Audiowide").drawString(timeStr, x, y);
+    var dateStr = require("locale").date(date, 1).toUpperCase();
+    g.setFontAlign(0, 0).setFont("6x8", 2).drawString(dateStr, x, y+28);
+    g.setFontAlign(0, 0).setFont("6x8", 2);
+    g.drawString(getSteps(), 50, y+70);
+    g.drawString(Math.round(Bangle.getHealthStatus("last").bpm), g.getWidth() -37, y + 70);

-  // queue next draw
-  if (drawTimeout) clearTimeout(drawTimeout);
-  drawTimeout = setTimeout(function() {
-    drawTimeout = undefined;
-    draw();
-  }, 60000 - (Date.now() % 60000));
-};
-
-// Show launcher when middle button pressed
-Bangle.setUI({
-  mode : "clock",
-  remove : function() {
-    // Called to unload all of the clock app
+    // queue next draw
    if (drawTimeout) clearTimeout(drawTimeout);
-    drawTimeout = undefined;
-    delete Graphics.prototype.setFontAnton;
-  }});
-// Load widgets
-Bangle.loadWidgets();
-draw();
-setTimeout(Bangle.drawWidgets,0);
+    drawTimeout = setTimeout(function() {
+      drawTimeout = undefined;
+      draw();
+    }, 60000 - (Date.now() % 60000));
+  };
+
+  // Show launcher when middle button pressed
+  Bangle.setUI({
+    mode : "clock",
+    remove : function() {
+      // Called to unload all of the clock app
+      if (drawTimeout) clearTimeout(drawTimeout);
+      drawTimeout = undefined;
+      delete Graphics.prototype.setFontAnton;
+    }});
+  // Load widgets
+  Bangle.loadWidgets();
+  draw();
+  setTimeout(Bangle.drawWidgets,0);
 }
--- a/apps/entonclk/metadata.json
+++ b/apps/entonclk/metadata.json
@ -1,8 +1,8 @@
 {
  "id": "entonclk",
  "name": "Enton Clock",
-  "version": "0.1",
-  "description": "A simple clock using the Audiowide font. ",
+  "version": "0.2",
+  "description": "A simple clock using the Audiowide font with timer. ",
  "icon": "app.png",
  "screenshots": [{"url":"screenshot.png"}],
  "type": "clock",
--- a/apps/geminiclock/ChangeLog
+++ b/apps/geminiclock/ChangeLog
@ -0,0 +1 @@
+0.01: App created!
--- a/apps/geminiclock/README.md
+++ b/apps/geminiclock/README.md
@ -0,0 +1,20 @@
+# Gemini clock
+
+A simple clock face using the Buro Destruct Geminis font, inspired by their Pebble Watch designs: https://burodestruct.net/work/pebble-watchfaces
+
+![image](watch-in-use.jpg)
+
+It is designed for maximum legibility and utility whilst still showing widgets.
+
+If editing or remixing this code, please retain leading zeroes on the hours, they are an integral part of the design.
+
+The minutes are not right-aligned deliberately so that the numbers don't jump around too much when they change.
+
+
+## Creator
+Created by Giles Booth:
+- http://www.suppertime.co.uk/blogmywiki/
+- https://mastodon.social/@blogmywiki
+- https://github.com/blogmywiki
+
+
--- a/apps/geminiclock/app-icon.js
+++ b/apps/geminiclock/app-icon.js
@ -0,0 +1 @@
+require("heatshrink").decompress(atob("mEw4f/AoP//+iiE00u++/nnMooWSyhT/AA8C9u27dtAQNkgEKAwdQCIUD5MkyVJAQNOwG9DIf+oARBgIPDAQOZoHSA4cj0ARIyeA6AIDpnAI4X2FgXcwgRBp0SDQYRCgErKAVt+ARBi4HC3AREAAnMCIIFCgN4CJOuiYRDgFmCKFXhIR/CMSPFCI0reYazCCJEDuzXGUIvoCIXCfY0Brdt284pOfqjLBBwQCCzNArf///9DoMx3gaBEAYTBnmA5wZCiQDB4+QCIeY+3bFgPQFg3QCIeXKwdMCJfOCIcbI4gRLhIhCvARMR4oRPWYIR/CNNnCI+Z9u20AREtCPHzMbtv8wEXv7GB3ARHAQXJoGuA4VCCIjdCCIWTwHQfY8DnIHDAQNACI+AgNvHwIACI4Nd23btoCC3x3BEQsggEKCAm26iIGAH4ATA=="))
--- a/apps/geminiclock/app.png
+++ b/apps/geminiclock/app.png
--- a/apps/geminiclock/gemini-watch-app.js
+++ b/apps/geminiclock/gemini-watch-app.js
--- a/apps/geminiclock/metadata.json
+++ b/apps/geminiclock/metadata.json
@ -0,0 +1,17 @@
+{ "id": "geminiclock",
+  "name": "Gemini clock",
+  "shortName":"Gemini Clock",
+  "icon": "app.png",
+  "version":"0.01",
+  "description": "Watch face using retro Gemini font",
+  "type": "clock",
+  "tags": "clock",
+  "supports": ["BANGLEJS2"],
+  "screenshots": [{"url":"screenshot.png"}],
+  "readme": "README.md",
+  "allow_emulator": true,
+  "storage": [
+    {"name":"geminiclock.app.js","url":"gemini-watch-app.js"},
+    {"name":"geminiclock.img","url":"app-icon.js","evaluate":true}
+  ]
+}
--- a/apps/geminiclock/screenshot.png
+++ b/apps/geminiclock/screenshot.png
--- a/apps/geminiclock/watch-in-use.jpg
+++ b/apps/geminiclock/watch-in-use.jpg
--- a/apps/gipy/ChangeLog
+++ b/apps/gipy/ChangeLog
@ -63,3 +63,13 @@
 	* Record traveled distance to get a good average speed.
 	* Breaks (low speed) will not count in average speed.
 	* Bugfix in average speed.
+
+0.16:
+	* When lost indicates nearest point on path.
+	* Rescale display if lost and too far.
+	* New setting to hide points and increase display speed.
+	* Speed optimisations.
+	* Estimated time of Arrival/Going back.
+	* Display current and next segment in red so that you know where to go.
+	* Avoid angles flickering at low speed at the cost of less refresh.
+	* Splash screen while waiting for gps signal.
--- a/apps/gipy/README.md
+++ b/apps/gipy/README.md
@ -2,12 +2,10 @@

 Gipy allows you to follow gpx traces on your watch.

-![Screenshot](screenshot1.png)
+![Screenshot](splash.png)


-It is for now meant for bicycling and not hiking
-(it uses your movement to figure out your orientation
-and walking is too slow).
+It is mainly meant for bicycling but hiking might be fine.

 It is untested on Banglejs1. If you can try it, you would be welcome.

@ -20,10 +18,10 @@ It provides the following features :
 - display the path with current position from gps
 - detects and buzzes if you leave the path
 - buzzes before sharp turns
- buzzes before nodes with comments
+- buzzes before waypoints 
 (for example when you need to turn in https://mapstogpx.com/)
 - display instant / average speed
- display distance to next node
+- display distance to next point
 - display additional data from openstreetmap :
    - water points
    - toilets
@ -54,32 +52,47 @@ Your path will be displayed in svg.

 ### Starting Gipy

-Once you start gipy you will have a menu for selecting your trace (if more than one).
-Choose the one you want and here you go :
+At start you will have a menu for selecting your trace (if more than one).
+Choose the one you want and you will reach the splash screen where you'll wait for the gps signal.
+Once you have a signal you will reach the main screen:

-![Screenshot](screenshot2.png)
+![Screenshot](legend.png)

-On your screen you can see :
+On your screen you can see:

 - yourself (the big black dot)
 - the path (the top of the screen is in front of you)
+- on the path, current and next segments are red and other ones are black
 - if needed a projection of yourself on the path (small black dot)
- extremities of segments as white dots
- turning points as doubled white dots
- some text on the left (from top to bottom) :
+- points as white dots
+- waypoints as doubled white dots
+- some text on the left (from top to bottom):
+    * time to reach start point at current average speed
    * current time
+    * time to reach end point at current average speed
    * left distance till end of current segment
-    * distance from start of path / path length
+    * remaining distance / path length
    * average speed / instant speed
 - interest points from openstreetmap as color dots :
-    * red : bakery
-    * deep blue : water point
-    * cyan : toilets (often doubles as water point)
-    * green : artwork
+    * red: bakery
+    * deep blue: water point
+    * cyan: toilets (often doubles as water point)
+    * green: artwork
 - a *turn* indicator on the top right when you reach a turning point
 - a *gps* indicator (blinking) on the top right if you lose gps signal
 - a *lost* indicator on the top right if you stray too far away from path
- a black segment extending from you when you are lost, indicating the rough direction of where to go
+
+### Lost
+
+If you stray away from path we will rescale the display to continue displaying nearby segments and
+display the direction to follow as a black segment.
+
+Note that while lost, the app will slow down a lot since it will start scanning all possible points to figure out where you
+are. On path it just needed to scan a few points ahead and behind.
+
+![Lost](lost.png)
+
+The distance to next point displayed corresponds to the length of the black segment.

 ### Settings

@ -87,6 +100,7 @@ Few settings for now (feel free to suggest me more) :

 - keep gps alive : if turned off, will try to save battery by turning the gps off on long segments
 - max speed : used to compute how long to turn the gps off
+- display points : display/hide points (not waypoints)

 ### Caveats

--- a/apps/gipy/TODO
+++ b/apps/gipy/TODO
@ -1,10 +1,5 @@

-* bugs
-
- when exactly on turn, distance to next point is still often 50m
-    -----> it does not buzz very often on turns
-
- when going backwards we have a tendencing to get a wrong current_segment
+ use Bangle.project(latlong)

 * additional features

@ -15,7 +10,6 @@
 (and look at more than next point)

 - display distance to next water/toilet ?
- dynamic map rescale
 - display scale (100m)

 - compress path ?
--- a/apps/gipy/app.js
+++ b/apps/gipy/app.js
--- a/apps/gipy/interface.html
+++ b/apps/gipy/interface.html
@ -182,12 +182,21 @@ document
 document
  .getElementById("upload")
  .addEventListener('click', function() {
+    document.getElementById('upload').disabled = true;
    status.innerHTML = "uploading file";
    console.log("uploading");
    let gpc_string = vec_to_string(gpc_content);
    Util.writeStorage(gpc_filename + ".gpc", gpc_string, () => {
-      status.innerHTML = `${gpc_filename}.gpc uploaded`;
-      console.log("DONE");
+      status.innerHTML = "Checking upload";
+      Util.readStorage(gpc_filename + ".gpc", uploaded_content => {
+        if (uploaded_content == gpc_string) {
+            status.innerHTML = `${gpc_filename}.gpc uploaded`;
+            console.log("DONE");
+        } else {
+            status.innerHTML = "Upload FAILED";
+            document.getElementById('upload').disabled = false;
+        }
+      });
    });
 });

--- a/apps/gipy/legend.png
+++ b/apps/gipy/legend.png
--- a/apps/gipy/lost.png
+++ b/apps/gipy/lost.png
--- a/apps/gipy/metadata.json
+++ b/apps/gipy/metadata.json
@ -2,13 +2,13 @@
  "id": "gipy",
  "name": "Gipy",
  "shortName": "Gipy",
-  "version": "0.15",
-  "description": "Follow gpx files",
+  "version": "0.16",
+  "description": "Follow gpx files using the gps. Don't get lost in your bike trips and hikes.",
  "allow_emulator":false,
  "icon": "gipy.png",
  "type": "app",
  "tags": "tool,outdoors,gps",
-  "screenshots": [],
+  "screenshots": [{"url":"splash.png"}],
  "supports": ["BANGLEJS2"],
  "readme": "README.md",
  "interface": "interface.html",
--- a/apps/gipy/pkg/gpconv.d.ts
+++ b/apps/gipy/pkg/gpconv.d.ts
@ -46,11 +46,11 @@ export interface InitOutput {
  readonly __wbindgen_malloc: (a: number) => number;
  readonly __wbindgen_realloc: (a: number, b: number, c: number) => number;
  readonly __wbindgen_export_2: WebAssembly.Table;
-  readonly _dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h0601691a32604cdd: (a: number, b: number, c: number) => void;
+  readonly _dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h317df853f2d4653e: (a: number, b: number, c: number) => void;
  readonly __wbindgen_add_to_stack_pointer: (a: number) => number;
  readonly __wbindgen_free: (a: number, b: number) => void;
  readonly __wbindgen_exn_store: (a: number) => void;
-  readonly wasm_bindgen__convert__closures__invoke2_mut__h25ed812378167476: (a: number, b: number, c: number, d: number) => void;
+  readonly wasm_bindgen__convert__closures__invoke2_mut__h573cb80e0bf72240: (a: number, b: number, c: number, d: number) => void;
 }

 export type SyncInitInput = BufferSource | WebAssembly.Module;
--- a/apps/gipy/pkg/gpconv.js
+++ b/apps/gipy/pkg/gpconv.js
@ -98,14 +98,6 @@ function getInt32Memory0() {
    return cachedInt32Memory0;
 }

-const cachedTextDecoder = new TextDecoder('utf-8', { ignoreBOM: true, fatal: true });
-
-cachedTextDecoder.decode();
-
-function getStringFromWasm0(ptr, len) {
-    return cachedTextDecoder.decode(getUint8Memory0().subarray(ptr, ptr + len));
-}
-
 function addHeapObject(obj) {
    if (heap_next === heap.length) heap.push(heap.length + 1);
    const idx = heap_next;
@ -115,6 +107,14 @@ function addHeapObject(obj) {
    return idx;
 }

+const cachedTextDecoder = new TextDecoder('utf-8', { ignoreBOM: true, fatal: true });
+
+cachedTextDecoder.decode();
+
+function getStringFromWasm0(ptr, len) {
+    return cachedTextDecoder.decode(getUint8Memory0().subarray(ptr, ptr + len));
+}
+
 function debugString(val) {
    // primitive types
    const type = typeof val;
@ -205,7 +205,7 @@ function makeMutClosure(arg0, arg1, dtor, f) {
    return real;
 }
 function __wbg_adapter_24(arg0, arg1, arg2) {
-    wasm._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h0601691a32604cdd(arg0, arg1, addHeapObject(arg2));
+    wasm._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h317df853f2d4653e(arg0, arg1, addHeapObject(arg2));
 }

 function _assertClass(instance, klass) {
@ -310,7 +310,7 @@ function handleError(f, args) {
    }
 }
 function __wbg_adapter_69(arg0, arg1, arg2, arg3) {
-    wasm.wasm_bindgen__convert__closures__invoke2_mut__h25ed812378167476(arg0, arg1, addHeapObject(arg2), addHeapObject(arg3));
+    wasm.wasm_bindgen__convert__closures__invoke2_mut__h573cb80e0bf72240(arg0, arg1, addHeapObject(arg2), addHeapObject(arg3));
 }

 /**
@ -371,13 +371,13 @@ async function load(module, imports) {
 function getImports() {
    const imports = {};
    imports.wbg = {};
-    imports.wbg.__wbindgen_object_drop_ref = function(arg0) {
-        takeObject(arg0);
-    };
    imports.wbg.__wbg_gpcsvg_new = function(arg0) {
        const ret = GpcSvg.__wrap(arg0);
        return addHeapObject(ret);
    };
+    imports.wbg.__wbindgen_object_drop_ref = function(arg0) {
+        takeObject(arg0);
+    };
    imports.wbg.__wbindgen_string_get = function(arg0, arg1) {
        const obj = getObject(arg1);
        const ret = typeof(obj) === 'string' ? obj : undefined;
@ -386,15 +386,15 @@ function getImports() {
        getInt32Memory0()[arg0 / 4 + 1] = len0;
        getInt32Memory0()[arg0 / 4 + 0] = ptr0;
    };
-    imports.wbg.__wbindgen_string_new = function(arg0, arg1) {
-        const ret = getStringFromWasm0(arg0, arg1);
-        return addHeapObject(ret);
-    };
    imports.wbg.__wbindgen_object_clone_ref = function(arg0) {
        const ret = getObject(arg0);
        return addHeapObject(ret);
    };
-    imports.wbg.__wbg_fetch_386f87a3ebf5003c = function(arg0) {
+    imports.wbg.__wbindgen_string_new = function(arg0, arg1) {
+        const ret = getStringFromWasm0(arg0, arg1);
+        return addHeapObject(ret);
+    };
+    imports.wbg.__wbg_fetch_3894579f6e2af3be = function(arg0) {
        const ret = fetch(getObject(arg0));
        return addHeapObject(ret);
    };
@ -558,10 +558,6 @@ function getImports() {
        const ret = new Uint8Array(getObject(arg0));
        return addHeapObject(ret);
    };
-    imports.wbg.__wbg_stringify_d6471d300ded9b68 = function() { return handleError(function (arg0) {
-        const ret = JSON.stringify(getObject(arg0));
-        return addHeapObject(ret);
-    }, arguments) };
    imports.wbg.__wbg_get_765201544a2b6869 = function() { return handleError(function (arg0, arg1) {
        const ret = Reflect.get(getObject(arg0), getObject(arg1));
        return addHeapObject(ret);
@ -574,6 +570,10 @@ function getImports() {
        const ret = Reflect.set(getObject(arg0), getObject(arg1), getObject(arg2));
        return ret;
    }, arguments) };
+    imports.wbg.__wbg_stringify_d6471d300ded9b68 = function() { return handleError(function (arg0) {
+        const ret = JSON.stringify(getObject(arg0));
+        return addHeapObject(ret);
+    }, arguments) };
    imports.wbg.__wbindgen_debug_string = function(arg0, arg1) {
        const ret = debugString(getObject(arg1));
        const ptr0 = passStringToWasm0(ret, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
@ -588,8 +588,8 @@ function getImports() {
        const ret = wasm.memory;
        return addHeapObject(ret);
    };
-    imports.wbg.__wbindgen_closure_wrapper947 = function(arg0, arg1, arg2) {
-        const ret = makeMutClosure(arg0, arg1, 147, __wbg_adapter_24);
+    imports.wbg.__wbindgen_closure_wrapper929 = function(arg0, arg1, arg2) {
+        const ret = makeMutClosure(arg0, arg1, 143, __wbg_adapter_24);
        return addHeapObject(ret);
    };

--- a/apps/gipy/pkg/gpconv_bg.wasm
+++ b/apps/gipy/pkg/gpconv_bg.wasm
--- a/apps/gipy/pkg/gpconv_bg.wasm.d.ts
+++ b/apps/gipy/pkg/gpconv_bg.wasm.d.ts
@ -9,8 +9,8 @@ export function convert_gpx_strings(a: number, b: number, c: number, d: number,
 export function __wbindgen_malloc(a: number): number;
 export function __wbindgen_realloc(a: number, b: number, c: number): number;
 export const __wbindgen_export_2: WebAssembly.Table;
-export function _dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h0601691a32604cdd(a: number, b: number, c: number): void;
+export function _dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h317df853f2d4653e(a: number, b: number, c: number): void;
 export function __wbindgen_add_to_stack_pointer(a: number): number;
 export function __wbindgen_free(a: number, b: number): void;
 export function __wbindgen_exn_store(a: number): void;
-export function wasm_bindgen__convert__closures__invoke2_mut__h25ed812378167476(a: number, b: number, c: number, d: number): void;
+export function wasm_bindgen__convert__closures__invoke2_mut__h573cb80e0bf72240(a: number, b: number, c: number, d: number): void;
--- a/apps/gipy/screenshot1.png
+++ b/apps/gipy/screenshot1.png
--- a/apps/gipy/screenshot2.png
+++ b/apps/gipy/screenshot2.png
--- a/apps/gipy/splash.png
+++ b/apps/gipy/splash.png
--- a/apps/gpsinfo/ChangeLog
+++ b/apps/gpsinfo/ChangeLog
@ -7,3 +7,4 @@
 0.08: Leave GPS power switched on on exit (will switch off after 0.5 seconds anyway)
 0.09: Fix FIFO_FULL error
 0.10: Show satellites "in view" separated by GNS-system
+0.11: Show number of packets received
--- a/apps/gpsinfo/gps-info.js
+++ b/apps/gpsinfo/gps-info.js
@ -5,7 +5,7 @@ function satelliteImage() {
 var Layout = require("Layout");
 var layout;
 //Bangle.setGPSPower(1, "app");
-E.showMessage(/*LANG*/"Loading..."); // avoid showing rubbish on screen
+E.showMessage(/*LANG*/"Waiting for GNS data..."); // avoid showing rubbish on screen

 var lastFix = {
  fix: -1,
@ -19,6 +19,7 @@ var lastFix = {
 var SATinView = 0, lastSATinView = -1, nofGP = 0, nofBD = 0, nofGL = 0;
 const leaveNofixLayout = 1;  // 0 = stay on initial screen for debugging (default = 1)
 var listenerGPSraw = 0;
+var dataCounter = 0;

 function formatTime(now) {
  if (now == undefined) {
@ -80,11 +81,15 @@ function onGPS(fix) {
        type:"v", c: [
          {type:"txt", font:"6x8:2", label:"GPS Info" },
          {type:"img", src:satelliteImage, pad:4 },
-          {type:"txt", font:"6x8", label:"Waiting for GPS" },
+          {type:"txt", font:"6x8", label:"Waiting for GPS fix" },
          {type:"h", c: [
            {type:"txt", font:"10%", label:fix.satellites, pad:2, id:"sat" },
            {type:"txt", font:"6x8", pad:3, label:"Satellites used" }
          ]},
+          {type:"h", c: [
+            {type:"txt", font:"10%", label:dataCounter, pad:2, id:"dataCounter" },
+            {type:"txt", font:"6x8", pad:3, label:"packets received" }
+          ]},
          {type:"txt", font:"6x8", label:"", fillx:true, id:"progress" }
        ]},{lazy:false});
    }
@ -122,6 +127,9 @@ function onGPS(fix) {
      layout.progress.label = "in view GP/BD/GL: " + nofGP + " " + nofBD + " " + nofGL;
      // console.log("in view GP/BD/GL: " + nofGP + " " + nofBD + " " + nofGL);
      layout.render(layout.progress);
+      layout.clear(layout.dataCounter);
+      layout.dataCounter.label = ++dataCounter;
+      layout.render(layout.dataCounter);
    }
  }

--- a/apps/gpsinfo/metadata.json
+++ b/apps/gpsinfo/metadata.json
@ -1,11 +1,11 @@
 {
  "id": "gpsinfo",
  "name": "GPS Info",
-  "version": "0.10",
-  "description": "An application that displays information about altitude, lat/lon, satellites and time",
+  "version": "0.11",
+  "description": "An application that displays information about latitude, longitude, altitude, speed, satellites and time",
  "icon": "gps-info.png",
  "type": "app",
-  "tags": "gps,outdoors",
+  "tags": "gps,outdoors,tools",
  "supports": ["BANGLEJS","BANGLEJS2"],
  "storage": [
    {"name":"gpsinfo.app.js","url":"gps-info.js"},
--- a/apps/grocery/ChangeLog
+++ b/apps/grocery/ChangeLog
@ -1,2 +1,3 @@
 0.01: New App!
 0.02: Refactor code to store grocery list in separate file
+0.03: Sort selected items to bottom and enable Widgets
--- a/apps/grocery/app.js
+++ b/apps/grocery/app.js
@ -1,5 +1,6 @@
 var filename = 'grocery_list.json';
 var settings = require("Storage").readJSON(filename,1)|| { products: [] };
+let menu;

 function updateSettings() {
  require("Storage").writeJSON(filename, settings);
@ -11,19 +12,32 @@ function twoChat(n){
  return ''+n;
 }

-const mainMenu = settings.products.reduce(function(m, p, i){
-  const name = twoChat(p.quantity)+' '+p.name;
-  m[name] = {
-    value: p.ok,
-    format: v => v?'[x]':'[ ]',
-    onchange: v => {
-      settings.products[i].ok = v;
-      updateSettings();
-    }
-  };
-  return m;
-}, {
-  '': { 'title': 'Grocery list' }
-});
+function sortMenu() {
+  mainMenu.sort((a,b) => {
+    const byValue = a.value-b.value;
+    return byValue !== 0 ? byValue : a.index-b.index;
+  });
+  if (menu) {
+    menu.draw();
+  }
+}
+
+const mainMenu = settings.products.map((p,i) => ({
+  title: twoChat(p.quantity)+' '+p.name,
+  value: p.ok,
+  format: v => v?'[x]':'[ ]',
+  index: i,
+  onchange: v => {
+    settings.products[i].ok = v;
+    updateSettings();
+    sortMenu();
+  }
+}));
+sortMenu();
+
+mainMenu[''] = { 'title': 'Grocery list' };
 mainMenu['< Back'] = ()=>{load();};
-E.showMenu(mainMenu);
+
+Bangle.loadWidgets();
+menu = E.showMenu(mainMenu);
+Bangle.drawWidgets();
--- a/apps/grocery/interface.html
+++ b/apps/grocery/interface.html
@ -0,0 +1,138 @@
+<html>
+  <head>
+    <link rel="stylesheet" href="../../css/spectre.min.css">
+  </head>
+  <body>
+
+    <h4>List of products</h4>
+    <table class="table">
+      <thead>
+        <tr>
+          <th>name</th>
+          <th>quantity</th>
+          <th>done</th>
+          <th>actions</th>
+        </tr>
+      </thead>
+      <tbody id="products">
+
+      </tbody>
+    </table>
+    <br><br>
+    <h4>Add a new product</h4>
+    <form id="add_product_form">
+      <div class="columns">
+        <div class="column col-4 col-xs-12">
+          <input class="form-input input-sm" type="text" id="add_product_name" placeholder="Name">
+        </div>
+        <div class="column col-4 col-xs-12">
+          <input class="form-input input-sm" value="1" type="number" id="add_product_quantity" placeholder="Quantity">
+        </div>
+        <div class="column col-4 col-xs-12">
+          <button id="add_product_button" class="btn btn-primary btn-sm">Add</button>
+        </div>
+      </div>
+    </form>
+    <br><br>
+    <button id="reset" class="btn btn-error">Reload</button>
+    <button id="removeChecked" class="btn">Clear checked</button>
+    <button id="save" class="btn btn-primary">Save</button>
+
+    <script src="../../core/lib/interface.js"></script>
+
+    <script>
+      let settings;
+      let products;
+
+      var $name = document.getElementById('add_product_name')
+      var $form = document.getElementById('add_product_form')
+      var $button = document.getElementById('add_product_button')
+      var $quantity = document.getElementById('add_product_quantity')
+      var $list = document.getElementById('products')
+      var $reset = document.getElementById('reset')
+
+      $reset.addEventListener('click', reset)
+      document.getElementById('save').addEventListener('click', save);
+      document.getElementById('removeChecked').addEventListener('click', removeChecked);
+
+      $form.addEventListener('submit', event => {
+        event.preventDefault()
+
+        var name = $name.value.trim()
+        if(!name) return;
+
+        var quantity = parseInt($quantity.value)
+
+        products.push({
+          name, quantity,
+          ok: false
+        })
+
+        renderProducts()
+        $name.value = ''
+        $quantity.value = 1
+      })
+
+      function getData() {
+        // show loading window
+        Util.showModal("Loading...");
+        Util.readStorage('grocery_list.json', data=>{
+          // remove window
+          Util.hideModal();
+
+          settings = JSON.parse(data || "{products: []}");
+          products = settings.products;
+          renderProducts();
+        });
+      }
+
+      function save(){
+        settings.products = products;
+        Util.showModal("Saving...");
+        localStorage.setItem('grocery-product-list',JSON.stringify(products));
+        Util.writeStorage("grocery_list.json", JSON.stringify(settings), () => {
+          Util.hideModal();
+        });
+      }
+
+      function reset(){
+        getData();
+      }
+
+      function removeProduct(index){
+        products = products.filter((p,i) => i!==index)
+        renderProducts()
+      }
+
+      function handleChecked(index) {
+        products[index].ok = !products[index].ok;
+      }
+
+      function removeChecked() {
+        products = products.filter(p => !p.ok);
+        renderProducts()
+      }
+
+      function renderProducts(){
+        $list.innerHTML = ''
+        products.forEach((product,index) => {
+          var $product = document.createElement('tr')
+          $product.innerHTML = `<td>${product.name}</td>
+                                <td>${product.quantity}</td>
+                                <td><input type="checkbox" ${product.ok ? "checked" : ""} onchange="handleChecked(${index})"></td>
+                                <td><button class="btn btn-error" onclick="removeProduct(${index})">remove</button></td>`
+          $list.appendChild($product)
+        })
+
+        $name.focus()
+
+      }
+
+      // Called when app starts
+      function onInit() {
+        getData();
+      }
+    </script>
+  </body>
+</html>
+
--- a/apps/grocery/metadata.json
+++ b/apps/grocery/metadata.json
@ -1,13 +1,14 @@
 {
  "id": "grocery",
  "name": "Grocery",
-  "version": "0.02",
+  "version": "0.03",
  "description": "Simple grocery (shopping) list - Display a list of product and track if you already put them in your cart.",
  "icon": "grocery.png",
  "type": "app",
  "tags": "tool,outdoors,shopping,list",
  "supports": ["BANGLEJS", "BANGLEJS2"],
  "custom": "grocery.html",
+  "interface": "interface.html",
  "allow_emulator": true,
  "storage": [
    {"name":"grocery.app.js","url":"app.js"},
--- a/apps/health/ChangeLog
+++ b/apps/health/ChangeLog
@ -16,3 +16,7 @@
 0.15: Fix charts (fix #1366)
 0.16: Code tidyup, add back button in top left of health app graphs
 0.17: Add automatic translation of bar chart labels
+0.18: Show step goal in daily step chart
+0.19: Can show notification when daily step goal is reached
+0.20: Fix the settings page, it would not update settings correctly.
+0.21: Update boot.min.js.
--- a/apps/health/README.md
+++ b/apps/health/README.md
@ -1,6 +1,6 @@
 # Health Tracking

-Logs health data to a file every 10 minutes, and provides an app to view it
+Logs health data to a file in a defined interval, and provides an app to view it

 **BETA - requires firmware 2v11 or later**

@ -22,9 +22,11 @@ Stores:

 * **Heart Rt** - Whether to monitor heart rate or not
  * **Off** - Don't turn HRM on, but record heart rate if the HRM was turned on by another app/widget
+  * **3 Min** - Turn HRM on every 3 minutes (for each heath entry) and turn it off after 1 minute, or when a good reading is found
  * **10 Min** - Turn HRM on every 10 minutes (for each heath entry) and turn it off after 2 minutes, or when a good reading is found
  * **Always** - Keep HRM on all the time (more accurate recording, but reduces battery life to ~36 hours)
-* **Daily Step Goal** - Default 10000, daily step goal for pedometer apps to use
+* **Daily Step Goal** - Default 10000, daily step goal for pedometer apps to use and for the step goal notification
+* **Step Goal Notification** - True if you want a notification when the daily step goal is reached


 ## Technical Info
@ -49,3 +51,7 @@ and run `EspruinoDocs/bin/minify.js lib.js lib.min.js`
  * Yearly view
  * Heart rate 'zone' graph
  * .. other
+
+## License
+
+The graphs on the web interface use Chart.js, licensed under MIT License.
--- a/apps/health/app.js
+++ b/apps/health/app.js
@ -38,6 +38,7 @@ function menuHRM() {

 function stepsPerHour() {
  E.showMessage(/*LANG*/"Loading...");
+  current_selection = "stepsPerHour";
  var data = new Uint16Array(24);
  require("health").readDay(new Date(), h=>data[h.hr]+=h.steps);
  setButton(menuStepCount);
@ -46,14 +47,17 @@ function stepsPerHour() {

 function stepsPerDay() {
  E.showMessage(/*LANG*/"Loading...");
+  current_selection = "stepsPerDay";
  var data = new Uint16Array(31);
  require("health").readDailySummaries(new Date(), h=>data[h.day]+=h.steps);
  setButton(menuStepCount);
  barChart(/*LANG*/"DAY", data);
+  drawHorizontalLine(settings.stepGoal);
 }

 function hrmPerHour() {
  E.showMessage(/*LANG*/"Loading...");
+  current_selection = "hrmPerHour";
  var data = new Uint16Array(24);
  var cnt = new Uint8Array(23);
  require("health").readDay(new Date(), h=>{
@ -67,6 +71,7 @@ function hrmPerHour() {

 function hrmPerDay() {
  E.showMessage(/*LANG*/"Loading...");
+  current_selection = "hrmPerDay";
  var data = new Uint16Array(31);
  var cnt = new Uint8Array(31);
  require("health").readDailySummaries(new Date(), h=>{
@ -80,6 +85,7 @@ function hrmPerDay() {

 function movementPerHour() {
  E.showMessage(/*LANG*/"Loading...");
+  current_selection = "movementPerHour";
  var data = new Uint16Array(24);
  require("health").readDay(new Date(), h=>data[h.hr]+=h.movement);
  setButton(menuMovement);
@ -88,6 +94,7 @@ function movementPerHour() {

 function movementPerDay() {
  E.showMessage(/*LANG*/"Loading...");
+  current_selection = "movementPerDay";
  var data = new Uint16Array(31);
  require("health").readDailySummaries(new Date(), h=>data[h.day]+=h.movement);
  setButton(menuMovement);
@ -97,12 +104,14 @@ function movementPerDay() {
 // Bar Chart Code
 const w = g.getWidth();
 const h = g.getHeight();
+const bar_bot = 140;

 var data_len;
 var chart_index;
 var chart_max_datum;
 var chart_label;
 var chart_data;
+var current_selection;

 // find the max value in the array, using a loop due to array size
 function max(arr) {
@ -131,7 +140,6 @@ function barChart(label, dt) {
 }

 function drawBarChart() {
-  const bar_bot = 140;
  const bar_width = (w - 2) / 9;  // we want 9 bars, bar 5 in the centre
  var bar_top;
  var bar;
@ -157,6 +165,11 @@ function drawBarChart() {
  }
 }

+function drawHorizontalLine(value) {
+  const top = bar_bot - 100 * value / chart_max_datum;
+  g.setColor(g.theme.fg).drawLine(0, top ,g.getWidth(), top);
+}
+
 function setButton(fn) {
  Bangle.setUI({mode:"custom",
                back:fn,
@ -170,9 +183,13 @@ function setButton(fn) {
      return fn();
    }
    drawBarChart();
+    if (current_selection == "stepsPerDay") {
+      drawHorizontalLine(settings.stepGoal);
+    }
  }});
 }

 Bangle.loadWidgets();
 Bangle.drawWidgets();
+var settings = require("Storage").readJSON("health.json",1)||{};
 menuMain();
--- a/apps/health/boot.js
+++ b/apps/health/boot.js
@ -36,6 +36,10 @@ Bangle.on("health", health => {
  const DB_HEADER_LEN = 8;
  const DB_FILE_LEN = DB_HEADER_LEN + DB_RECORDS_PER_MONTH*DB_RECORD_LEN;

+  if (health && health.steps > 0) {
+    handleStepGoalNotification();
+  }
+
  function getRecordFN(d) {
    return "health-"+d.getFullYear()+"-"+(d.getMonth()+1)+".raw";
  }
@ -92,3 +96,21 @@ Bangle.on("health", health => {
    health.movement /= health.movCnt;
  require("Storage").write(fn, getRecordData(health), sumPos, DB_FILE_LEN);
 });
+
+function handleStepGoalNotification() {
+  var settings = require("Storage").readJSON("health.json",1)||{};
+  const steps = Bangle.getHealthStatus("day").steps;
+  if (settings.stepGoalNotification && settings.stepGoal > 0 && steps >= settings.stepGoal) {
+    const now = new Date(Date.now()).toISOString().split('T')[0]; // yyyy-mm-dd
+    if (!settings.stepGoalNotificationDate || settings.stepGoalNotificationDate < now) { // notification not yet shown today?
+      Bangle.buzz(200, 0.5);
+      require("notify").show({
+          title : settings.stepGoal + /*LANG*/ " steps",
+          body : /*LANG*/ "You reached your step goal!",
+          icon : atob("DAyBABmD6BaBMAsA8BCBCBCBCA8AAA==")
+      });
+      settings.stepGoalNotificationDate = now;
+      require("Storage").writeJSON("health.json", settings);
+    }
+  }
+}
--- a/apps/health/boot.min.js
+++ b/apps/health/boot.min.js
@ -1,4 +1,5 @@
-(function(){var a=0|(require("Storage").readJSON("health.json",1)||{}).hrm;if(1==a||2==a){function f(){Bangle.setHRMPower(1,"health");setTimeout(()=>Bangle.setHRMPower(0,"health"),6E4*a);if(1==a)for(var b=1;2>=b;b++)setTimeout(()=>{Bangle.setHRMPower(1,"health");setTimeout(()=>{Bangle.setHRMPower(0,"health")},2E5*b+6E4)},2E5*b)}Bangle.on("health",f);Bangle.on("HRM",b=>{80<b.confidence&&Bangle.setHRMPower(0,"health")});Bangle.getHealthStatus().bpmConfidence||f()}else Bangle.setHRMPower(0!=
-a,"health")})();Bangle.on("health",a=>{function f(c){return String.fromCharCode(c.steps>>8,c.steps&255,c.bpm,Math.min(c.movement/8,255))}var b=new Date(Date.now()-59E4),e=function(c){return 145*(c.getDate()-1)+6*c.getHours()+(0|6*c.getMinutes()/60)}(b);b=function(c){return"health-"+c.getFullYear()+"-"+(c.getMonth()+1)+".raw"}(b);var g=require("Storage").read(b);if(g){var d=g.substr(8+4*e,4);if("\u00ff\u00ff\u00ff\u00ff"!=d){print("HEALTH ERR: Already written!");return}}else require("Storage").write(b,
-"HEALTH1\x00",0,17988);var h=8+4*e;require("Storage").write(b,f(a),h,17988);if(143==e%145)if(e=h+4,"\u00ff\u00ff\u00ff\u00ff"!=g.substr(e,4))print("HEALTH ERR: Daily summary already written!");else{a={steps:0,bpm:0,movement:0,movCnt:0,bpmCnt:0};for(var k=0;144>k;k++)d=g.substr(h,4),"\u00ff\u00ff\u00ff\u00ff"!=d&&(a.steps+=(d.charCodeAt(0)<<8)+d.charCodeAt(1),a.movement+=d.charCodeAt(2),a.movCnt++,d=d.charCodeAt(2),a.bpm+=d,d&&a.bpmCnt++),h-=4;a.bpmCnt&&(a.bpm/=a.bpmCnt);a.movCnt&&(a.movement/=a.movCnt);
-require("Storage").write(b,f(a),e,17988)}})
+function l(){var a=require("Storage").readJSON("health.json",1)||{},d=Bangle.getHealthStatus("day").steps;a.stepGoalNotification&&0<a.stepGoal&&d>=a.stepGoal&&(d=(new Date(Date.now())).toISOString().split("T")[0],!a.stepGoalNotificationDate||a.stepGoalNotificationDate<d)&&(Bangle.buzz(200,.5),require("notify").show({title:a.stepGoal+" steps",body:"You reached your step goal!",icon:atob("DAyBABmD6BaBMAsA8BCBCBCBCA8AAA==")}),a.stepGoalNotificationDate=d,require("Storage").writeJSON("health.json",
+a))}(function(){var a=0|(require("Storage").readJSON("health.json",1)||{}).hrm;if(1==a||2==a){var d=function(){Bangle.setHRMPower(1,"health");setTimeout(function(){return Bangle.setHRMPower(0,"health")},6E4*a);if(1==a)for(var b=1;2>=b;b++)setTimeout(function(){Bangle.setHRMPower(1,"health");setTimeout(function(){Bangle.setHRMPower(0,"health")},2E5*b+6E4)},2E5*b)};Bangle.on("health",d);Bangle.on("HRM",function(b){80<b.confidence&&Bangle.setHRMPower(0,"health")});Bangle.getHealthStatus().bpmConfidence||
+d()}else Bangle.setHRMPower(0!=a,"health")})();Bangle.on("health",function(a){function d(c){return String.fromCharCode(c.steps>>8,c.steps&255,c.bpm,Math.min(c.movement/8,255))}var b=new Date(Date.now()-59E4);a&&0<a.steps&&l();var f=function(c){return 145*(c.getDate()-1)+6*c.getHours()+(0|6*c.getMinutes()/60)}(b);b=function(c){return"health-"+c.getFullYear()+"-"+(c.getMonth()+1)+".raw"}(b);var g=require("Storage").read(b);if(g){var e=g.substr(8+4*f,4);if("\u00ff\u00ff\u00ff\u00ff"!=e){print("HEALTH ERR: Already written!");
+return}}else require("Storage").write(b,"HEALTH1\x00",0,17988);var h=8+4*f;require("Storage").write(b,d(a),h,17988);if(143==f%145)if(f=h+4,"\u00ff\u00ff\u00ff\u00ff"!=g.substr(f,4))print("HEALTH ERR: Daily summary already written!");else{a={steps:0,bpm:0,movement:0,movCnt:0,bpmCnt:0};for(var k=0;144>k;k++)e=g.substr(h,4),"\u00ff\u00ff\u00ff\u00ff"!=e&&(a.steps+=(e.charCodeAt(0)<<8)+e.charCodeAt(1),a.movement+=e.charCodeAt(2),a.movCnt++,e=e.charCodeAt(2),a.bpm+=e,e&&a.bpmCnt++),h-=4;a.bpmCnt&&(a.bpm/=
+a.bpmCnt);a.movCnt&&(a.movement/=a.movCnt);require("Storage").write(b,d(a),f,17988)}})
--- a/apps/health/chart.min.js
+++ b/apps/health/chart.min.js
--- a/apps/health/interface.html
+++ b/apps/health/interface.html
@ -3,9 +3,10 @@
    <link rel="stylesheet" href="../../css/spectre.min.css">
  </head>
  <body>
-    <div id="table"></div>
+    <div id="content"></div>

    <script src="../../core/lib/interface.js"></script>
+    <script type="module" src="chart.min.js"></script>
    <script>
 const DB_RECORD_LEN = 4;
 const DB_RECORDS_PER_HR = 6;
@ -14,7 +15,7 @@ const DB_RECORDS_PER_MONTH = DB_RECORDS_PER_DAY*31;
 const DB_HEADER_LEN = 8;
 const DB_FILE_LEN = DB_HEADER_LEN + DB_RECORDS_PER_MONTH*DB_RECORD_LEN;

-var domTable = document.getElementById("table");
+var domContent = document.getElementById("content");

 function saveCSV(data, date, title) {
  // date = "2021-9"/ etc
@ -59,7 +60,7 @@ function downloadHealth(filename, callback) {
 }
 function getMonthList() {
  Util.showModal("Loading...");
-  domTable.innerHTML = "";
+  domContent.innerHTML = "";
  Puck.eval(`require("Storage").list(/^health-.*\\.raw$/)`,files=>{
    files = files.map(f => {
      var m = f.match(/^health-([^\.]+)\.raw$/);
@ -69,7 +70,7 @@ function getMonthList() {
        str : new Date(m[1]).toLocaleString(undefined, {month:'long',year:'numeric'})
      }
    })
-    var html = `<table class="table table-striped table-hover">
+    var htmlOverview = `<table class="table table-striped table-hover">
  <thead>
    <tr>
      <th>Month</th>
@ -78,36 +79,39 @@ function getMonthList() {
  </thead>
  <tbody>\n`;
    files.forEach(f => {
-      html += `
+      htmlOverview += `
      <tr>
        <td>${f.str}</td>
        <td>
          <button class="btn btn-primary" filename="${f.filename}" date="${f.date}" task="downloadcsv">Download CSV</button>
-          <button class="btn btn-default" filename="${f.filename}" date="${f.date}" task="delete">Delete</button>
+          <button class="btn btn-primary" filename="${f.filename}" date="${f.date}" monthstr="${f.str}" task="monthtable">Table</button>
+          <button class="btn btn-primary" filename="${f.filename}" date="${f.date}" monthstr="${f.str}" task="monthgraph">Graph</button>
+          <button class="btn btn-error" filename="${f.filename}" date="${f.date}" task="delete" style="float: right;margin-right: 5px;">Delete</button>
        </td>
      </tr>
      `;
    });
    if (files.length==0) {
-      html += `
+      htmlOverview += `
    <tr>
      <td>No data recorded</td>
      <td></td>
    </tr>
        `;
    }
-    html += `
+    htmlOverview += `
    </tbody>
 </table>`;
-    domTable.innerHTML = html;
+    domContent.innerHTML = htmlOverview;
    Util.hideModal();
-    var buttons = domTable.querySelectorAll("button");
+    var buttons = domContent.querySelectorAll("button");
    for (var i=0;i<buttons.length;i++) {
      buttons[i].addEventListener("click",event => {
        var button = event.currentTarget;
        var filename = button.getAttribute("filename");
        var date = button.getAttribute("date");
        if (!filename || !date) return;
+        var monthstr = button.getAttribute("monthstr");
        var task = button.getAttribute("task");
        if (task=="delete") {
          Util.showModal("Deleting...");
@ -119,11 +123,179 @@ function getMonthList() {
        if (task=="downloadcsv") {
          downloadHealth(filename, data => saveCSV(data, date, `Bangle.js Health ${date}`));
        }
+        if (task=="monthtable") {
+          viewMonthDataAsTable(filename, date, monthstr);
+        }
+        if (task=="monthgraph") {
+          viewMonthDataAsGraph(filename, date, monthstr);
+        }
      });
    }
  })
 }

+function getDailyData(data) {
+  var dailyData = [];
+  var idx = DB_HEADER_LEN;
+  for (var day = 0; day < 31; day++) {
+    var dayData = {steps: 0, bpm: 0, movement: 0};
+    for (var hr = 0; hr < 24; hr++) { // actually 25, see below
+      for (var m = 0; m < DB_RECORDS_PER_HR; m++) {
+        var h = data.substr(idx, DB_RECORD_LEN);
+        if (h != "\xFF\xFF\xFF\xFF") {
+          var h = {
+            day : day + 1,
+            hr : hr,
+            min : m * 10,
+            steps : (h.charCodeAt(0) << 8) | h.charCodeAt(1),
+            bpm : h.charCodeAt(2),
+            movement : h.charCodeAt(3)
+          };
+          dayData.steps += h.steps; // sum
+          dayData.bpm = (dayData.bpm + h.bpm) / 2; // average
+          dayData.movement += h.movement; // sum
+        }
+        idx += DB_RECORD_LEN;
+      }
+    }
+    idx += DB_RECORD_LEN; // +1 because we have an extra record with totals
+                          // for the end of the day
+                          
+    dailyData[day + 1] = dayData;
+   }
+   return dailyData;
+}
+
+function viewMonthDataAsTable(filename, date, monthstr) {
+  Util.showModal("Reading Health info...");
+  Util.readStorage(
+    filename, data => {
+      Util.hideModal();
+      
+      var htmlOverview = `<h1>` + monthstr + `</ h1>
+      <button class="btn btn-primary" id="backtomonth" style="float: right;margin-right: 5px;">Back</button>
+      <table class="table table-striped table-hover">
+      <thead>
+        <tr>
+          <th>Day</th>
+          <th>Steps</th>
+          <th>BPM</th>
+          <th>Movement</th>
+        </tr>
+      </thead>
+      <tbody>\n`;
+
+       var dailyData = getDailyData(data);
+       for (var i = 1; i < dailyData.length + 1; i++) {
+          var dayData = dailyData[i];
+          if (dayData) {
+            htmlOverview += `<tr>
+            <td>${i}</td>
+            <td>${dayData.steps}</td>
+            <td>${Math.round(dayData.bpm)}</td>
+            <td>${dayData.movement}</td></tr>`
+          }
+      }
+      htmlOverview += `</tbody></table>`;
+      domContent.innerHTML = htmlOverview;
+      domContent.querySelector("#backtomonth").addEventListener("click",event => {
+         getMonthList();
+      });
+    });
+}
+
+function viewMonthDataAsGraph(filename, date, monthstr) {
+  Util.showModal("Reading Health info...");
+  Util.readStorage(
+    filename, data => {
+      Util.hideModal();
+      
+      var html = `<h1>` + monthstr + `</ h1>
+      <button class="btn btn-primary" id="backtomonth" style="float: right;margin-right: 5px;">Back</button>
+      <h2>Steps</h2>
+      <canvas id="chartSteps"></canvas>
+      <h2>BPM</h2>
+      <canvas id="chartBPM"></canvas>
+      <h2>Movement</h2>
+      <canvas id="chartMovement"></canvas>`
+      domContent.innerHTML = html;
+       domContent.querySelector("#backtomonth").addEventListener("click",event => {
+         getMonthList();
+      });
+      
+      var labels = [];
+      var dataSteps = [], dataBPM = [], dataMovement = [];
+      
+      var dailyData = getDailyData(data);
+      for (var i = 1; i < dailyData.length + 1; i++) {
+         var dayData = dailyData[i];
+         if (dayData) {
+           labels.push(i);
+           dataSteps.push(dayData.steps);
+           dataBPM.push(dayData.bpm);
+           dataMovement.push(dayData.movement);
+        }
+      }
+      
+      new Chart(document.getElementById("chartSteps"), {
+          type: 'bar',
+          data: {
+            labels: labels,
+            datasets: [{
+              label: '# of steps',
+              data: dataSteps,
+              borderWidth: 1
+            }]
+          },
+          options: {
+            scales: {
+              y: {
+                beginAtZero: true
+              }
+            }
+          }
+        });
+        
+       new Chart(document.getElementById("chartBPM"), {
+          type: 'bar',
+          data: {
+            labels: labels,
+            datasets: [{
+              label: 'Beats per minute',
+              data: dataBPM,
+              borderWidth: 1
+            }]
+          },
+          options: {
+            scales: {
+              y: {
+                beginAtZero: true
+              }
+            }
+          }
+        });
+        
+       new Chart(document.getElementById("chartMovement"), {
+          type: 'bar',
+          data: {
+            labels: labels,
+            datasets: [{
+              label: 'Movement',
+              data: dataMovement,
+              borderWidth: 1
+            }]
+          },
+          options: {
+            scales: {
+              y: {
+                beginAtZero: true
+              }
+            }
+          }
+        });
+    });
+}
+
 function onInit() {
  getMonthList();
 }
--- a/Show More
+++ b/Show More
				`@ -0,0 +1 @@`
				`require("heatshrink").decompress(atob("mEw4f/AoP//+iiE00u++/nnMooWSyhT/AA8C9u27dtAQNkgEKAwdQCIUD5MkyVJAQNOwG9DIf+oARBgIPDAQOZoHSA4cj0ARIyeA6AIDpnAI4X2FgXcwgRBp0SDQYRCgErKAVt+ARBi4HC3AREAAnMCIIFCgN4CJOuiYRDgFmCKFXhIR/CMSPFCI0reYazCCJEDuzXGUIvoCIXCfY0Brdt284pOfqjLBBwQCCzNArf///9DoMx3gaBEAYTBnmA5wZCiQDB4+QCIeY+3bFgPQFg3QCIeXKwdMCJfOCIcbI4gRLhIhCvARMR4oRPWYIR/CNNnCI+Z9u20AREtCPHzMbtv8wEXv7GB3ARHAQXJoGuA4VCCIjdCCIWTwHQfY8DnIHDAQNACI+AgNvHwIACI4Nd23btoCC3x3BEQsggEKCAm26iIGAH4ATA=="))`