From 770d28e6ba9fe70a90fa00c53c962264beaa172a Mon Sep 17 00:00:00 2001
From: flashback2k14 <yeahdev@gmail.com>
Date: Thu, 30 Apr 2020 13:22:06 +0200
Subject: [PATCH 01/38] initial commit

---
 apps.json                | 2272 +++++++++++++++++++++++++++-----------
 apps/timer/ChangeLog     |    1 +
 apps/timer/timer-icon.js |    5 +
 apps/timer/timer.app.js  |   46 +
 apps/timer/timer.png     |  Bin 0 -> 2140 bytes
 5 files changed, 1704 insertions(+), 620 deletions(-)
 create mode 100644 apps/timer/ChangeLog
 create mode 100644 apps/timer/timer-icon.js
 create mode 100644 apps/timer/timer.app.js
 create mode 100644 apps/timer/timer.png

diff --git a/apps.json b/apps.json
index 4754437846..4f74eb0c31 100644
--- a/apps.json
+++ b/apps.json
@@ -1,920 +1,1568 @@
 [
-  { "id": "boot",
+  {
+    "id": "boot",
     "name": "Bootloader",
     "icon": "bootloader.png",
-    "version":"0.15",
+    "version": "0.15",
     "description": "This is needed by Bangle.js to automatically load the clock, menu, widgets and settings",
     "tags": "tool,system",
-    "type":"bootloader",
+    "type": "bootloader",
     "storage": [
-      {"name":".boot0","url":"boot0.js"},
-      {"name":".bootcde","url":"bootloader.js"}
+      {
+        "name": ".boot0",
+        "url": "boot0.js"
+      },
+      {
+        "name": ".bootcde",
+        "url": "bootloader.js"
+      }
     ],
-    "sortorder" : -10
+    "sortorder": -10
   },
-  { "id": "moonphase",
+  {
+    "id": "moonphase",
     "name": "Moonphase",
     "icon": "app.png",
-    "version":"0.02",
+    "version": "0.02",
     "description": "Shows current moon phase. Now with GPS function.",
     "tags": "",
-    "allow_emulator":true,
+    "allow_emulator": true,
     "storage": [
-      {"name":"moonphase.app.js","url":"app.js"},
-      {"name":"moonphase.img","url":"app-icon.js","evaluate":true}
+      {
+        "name": "moonphase.app.js",
+        "url": "app.js"
+      },
+      {
+        "name": "moonphase.img",
+        "url": "app-icon.js",
+        "evaluate": true
+      }
     ]
   },
-  { "id": "daysl",
+  {
+    "id": "daysl",
     "name": "Days left",
     "icon": "app.png",
-    "version":"0.03",
+    "version": "0.03",
     "description": "Shows you the days left until a certain date. Date can be set with a settings app and is written to a file.",
     "tags": "",
-    "allow_emulator":false,
+    "allow_emulator": false,
     "storage": [
-        {"name":"daysl.app.js","url":"app.js"},
-        {"name":"daysl.img","url":"app-icon.js","evaluate":true},
-        {"name":"daysl.wid.js","url":"widget.js"}
+      {
+        "name": "daysl.app.js",
+        "url": "app.js"
+      },
+      {
+        "name": "daysl.img",
+        "url": "app-icon.js",
+        "evaluate": true
+      },
+      {
+        "name": "daysl.wid.js",
+        "url": "widget.js"
+      }
     ]
   },
-  { "id": "launch",
+  {
+    "id": "launch",
     "name": "Default Launcher",
-    "shortName":"Launcher",
+    "shortName": "Launcher",
     "icon": "app.png",
-    "version":"0.02",
+    "version": "0.02",
     "description": "This is needed by Bangle.js to display a menu allowing you to choose your own applications. You can replace this with a customised launcher.",
     "tags": "tool,system,launcher",
-    "type":"launch",
+    "type": "launch",
     "storage": [
-      {"name":"launch.app.js","url":"app.js"}
+      {
+        "name": "launch.app.js",
+        "url": "app.js"
+      }
     ],
-    "sortorder" : -10
+    "sortorder": -10
   },
-  { "id": "about",
+  {
+    "id": "about",
     "name": "About",
     "icon": "app.png",
-    "version":"0.05",
+    "version": "0.05",
     "description": "Bangle.js About page - showing software version, stats, and a collaborative mural from the Bangle.js KickStarter backers",
     "tags": "tool,system",
-    "allow_emulator":true,
+    "allow_emulator": true,
     "storage": [
-      {"name":"about.app.js","url":"app.js"},
-      {"name":"about.img","url":"app-icon.js","evaluate":true}
+      {
+        "name": "about.app.js",
+        "url": "app.js"
+      },
+      {
+        "name": "about.img",
+        "url": "app-icon.js",
+        "evaluate": true
+      }
     ]
   },
-  { "id": "locale",
+  {
+    "id": "locale",
     "name": "Languages",
     "icon": "locale.png",
-    "version":"0.06",
+    "version": "0.06",
     "description": "Translations for different countries",
     "tags": "tool,system,locale,translate",
     "type": "locale",
-    "custom":"locale.html",
+    "custom": "locale.html",
     "storage": [
-      {"name":"locale"}
+      {
+        "name": "locale"
+      }
     ],
-    "sortorder" : -10
+    "sortorder": -10
   },
-  { "id": "welcome",
+  {
+    "id": "welcome",
     "name": "Welcome",
     "icon": "app.png",
-    "version":"0.08",
+    "version": "0.08",
     "description": "Appears at first boot and explains how to use Bangle.js",
     "tags": "start,welcome",
-    "allow_emulator":true,
+    "allow_emulator": true,
     "storage": [
-      {"name":"welcome.boot.js","url":"boot.js"},
-      {"name":"welcome.app.js","url":"app.js"},
-      {"name":"welcome.settings.js","url":"settings.js"},
-      {"name":"welcome.img","url":"app-icon.js","evaluate":true}
+      {
+        "name": "welcome.boot.js",
+        "url": "boot.js"
+      },
+      {
+        "name": "welcome.app.js",
+        "url": "app.js"
+      },
+      {
+        "name": "welcome.settings.js",
+        "url": "settings.js"
+      },
+      {
+        "name": "welcome.img",
+        "url": "app-icon.js",
+        "evaluate": true
+      }
     ],
     "data": [
-      {"name":"welcome.json"}
+      {
+        "name": "welcome.json"
+      }
     ]
   },
-  { "id": "gbridge",
+  {
+    "id": "gbridge",
     "name": "Gadgetbridge",
     "icon": "app.png",
-    "version":"0.10",
+    "version": "0.10",
     "description": "The default notification handler for Gadgetbridge notifications from Android",
     "tags": "tool,system,android,widget",
-    "type":"widget",
+    "type": "widget",
     "storage": [
-      {"name":"gbridge.settings.js","url":"settings.js"},
-      {"name":"gbridge.img","url":"app-icon.js","evaluate":true},
-      {"name":"gbridge.wid.js","url":"widget.js"}
+      {
+        "name": "gbridge.settings.js",
+        "url": "settings.js"
+      },
+      {
+        "name": "gbridge.img",
+        "url": "app-icon.js",
+        "evaluate": true
+      },
+      {
+        "name": "gbridge.wid.js",
+        "url": "widget.js"
+      }
     ]
   },
-  { "id": "mclock",
+  {
+    "id": "mclock",
     "name": "Morphing Clock",
     "icon": "clock-morphing.png",
-    "version":"0.04",
+    "version": "0.04",
     "description": "7 segment clock that morphs between minutes and hours",
     "tags": "clock",
-    "type":"clock",
-    "allow_emulator":true,
+    "type": "clock",
+    "allow_emulator": true,
     "storage": [
-      {"name":"mclock.app.js","url":"clock-morphing.js"},
-      {"name":"mclock.img","url":"clock-morphing-icon.js","evaluate":true}
+      {
+        "name": "mclock.app.js",
+        "url": "clock-morphing.js"
+      },
+      {
+        "name": "mclock.img",
+        "url": "clock-morphing-icon.js",
+        "evaluate": true
+      }
     ],
-    "sortorder" : -9
+    "sortorder": -9
   },
-  { "id": "setting",
+  {
+    "id": "setting",
     "name": "Settings",
     "icon": "settings.png",
-    "version":"0.19",
+    "version": "0.19",
     "description": "A menu for setting up Bangle.js",
     "tags": "tool,system",
     "readme": "README.md",
     "storage": [
-      {"name":"setting.app.js","url":"settings.js"},
-      {"name":"setting.boot.js","url":"boot.js"},
-      {"name":"setting.img","url":"settings-icon.js","evaluate":true}
+      {
+        "name": "setting.app.js",
+        "url": "settings.js"
+      },
+      {
+        "name": "setting.boot.js",
+        "url": "boot.js"
+      },
+      {
+        "name": "setting.img",
+        "url": "settings-icon.js",
+        "evaluate": true
+      }
     ],
-    "sortorder" : -2
+    "sortorder": -2
   },
-  { "id": "alarm",
+  {
+    "id": "alarm",
     "name": "Default Alarm",
-    "shortName":"Alarms",
+    "shortName": "Alarms",
     "icon": "app.png",
-    "version":"0.07",
+    "version": "0.07",
     "description": "Set and respond to alarms",
     "tags": "tool,alarm,widget",
     "storage": [
-      {"name":"alarm.app.js","url":"app.js"},
-      {"name":"alarm.boot.js","url":"boot.js"},
-      {"name":"alarm.js","url":"alarm.js"},
-      {"name":"alarm.img","url":"app-icon.js","evaluate":true},
-      {"name":"alarm.wid.js","url":"widget.js"}
+      {
+        "name": "alarm.app.js",
+        "url": "app.js"
+      },
+      {
+        "name": "alarm.boot.js",
+        "url": "boot.js"
+      },
+      {
+        "name": "alarm.js",
+        "url": "alarm.js"
+      },
+      {
+        "name": "alarm.img",
+        "url": "app-icon.js",
+        "evaluate": true
+      },
+      {
+        "name": "alarm.wid.js",
+        "url": "widget.js"
+      }
     ],
     "data": [
-      {"name":"alarm.json"}
+      {
+        "name": "alarm.json"
+      }
     ]
   },
-  { "id": "wclock",
+  {
+    "id": "wclock",
     "name": "Word Clock",
     "icon": "clock-word.png",
-    "version":"0.02",
+    "version": "0.02",
     "description": "Display Time as Text",
     "tags": "clock",
-    "type":"clock",
-    "allow_emulator":true,
+    "type": "clock",
+    "allow_emulator": true,
     "storage": [
-      {"name":"wclock.app.js","url":"clock-word.js"},
-      {"name":"wclock.img","url":"clock-word-icon.js","evaluate":true}
+      {
+        "name": "wclock.app.js",
+        "url": "clock-word.js"
+      },
+      {
+        "name": "wclock.img",
+        "url": "clock-word-icon.js",
+        "evaluate": true
+      }
     ]
   },
-  { "id": "impwclock",
+  {
+    "id": "impwclock",
     "name": "Imprecise Word Clock",
     "icon": "clock-impword.png",
-    "version":"0.01",
+    "version": "0.01",
     "description": "Imprecise word clock for vacations, weekends, and those who never need accurate time.",
     "tags": "clock",
-    "type":"clock",
-    "allow_emulator":true,
+    "type": "clock",
+    "allow_emulator": true,
     "storage": [
-      {"name":"impwclock.app.js","url":"clock-impword.js"},
-      {"name":"impwclock.img","url":"clock-impword-icon.js","evaluate":true}
+      {
+        "name": "impwclock.app.js",
+        "url": "clock-impword.js"
+      },
+      {
+        "name": "impwclock.img",
+        "url": "clock-impword-icon.js",
+        "evaluate": true
+      }
     ]
   },
-  { "id": "aclock",
+  {
+    "id": "aclock",
     "name": "Analog Clock",
     "icon": "clock-analog.png",
     "version": "0.12",
     "description": "An Analog Clock",
     "tags": "clock",
-    "type":"clock",
-    "allow_emulator":true,
+    "type": "clock",
+    "allow_emulator": true,
     "storage": [
-      {"name":"aclock.app.js","url":"clock-analog.js"},
-      {"name":"aclock.img","url":"clock-analog-icon.js","evaluate":true}
+      {
+        "name": "aclock.app.js",
+        "url": "clock-analog.js"
+      },
+      {
+        "name": "aclock.img",
+        "url": "clock-analog-icon.js",
+        "evaluate": true
+      }
     ]
   },
-  { "id": "clock2x3",
+  {
+    "id": "clock2x3",
     "name": "2x3 Pixel Clock",
     "icon": "clock2x3.png",
-    "version":"0.04",
+    "version": "0.04",
     "description": "This is a simple clock using minimalist 2x3 pixel numerical digits",
     "tags": "clock",
     "type": "clock",
-    "allow_emulator":true,
+    "allow_emulator": true,
     "storage": [
-      {"name":"clock2x3.app.js","url":"clock2x3-app.js"},
-      {"name":"clock2x3.img","url":"clock2x3-icon.js","evaluate":true}
+      {
+        "name": "clock2x3.app.js",
+        "url": "clock2x3-app.js"
+      },
+      {
+        "name": "clock2x3.img",
+        "url": "clock2x3-icon.js",
+        "evaluate": true
+      }
     ]
   },
-  { "id": "trex",
+  {
+    "id": "trex",
     "name": "T-Rex",
     "icon": "trex.png",
-    "version":"0.01",
+    "version": "0.01",
     "description": "T-Rex game in the style of Chrome's offline game",
     "tags": "game",
-    "allow_emulator":true,
+    "allow_emulator": true,
     "storage": [
-      {"name":"trex.app.js","url":"trex.js"},
-      {"name":"trex.img","url":"trex-icon.js","evaluate":true}
+      {
+        "name": "trex.app.js",
+        "url": "trex.js"
+      },
+      {
+        "name": "trex.img",
+        "url": "trex-icon.js",
+        "evaluate": true
+      }
     ]
   },
-  { "id": "astroid",
+  {
+    "id": "astroid",
     "name": "Asteroids!",
     "icon": "asteroids.png",
-    "version":"0.01",
+    "version": "0.01",
     "description": "Retro asteroids game",
     "tags": "game",
-    "allow_emulator":true,
+    "allow_emulator": true,
     "storage": [
-      {"name":"astroid.app.js","url":"asteroids.js"},
-      {"name":"astroid.img","url":"asteroids-icon.js","evaluate":true}
+      {
+        "name": "astroid.app.js",
+        "url": "asteroids.js"
+      },
+      {
+        "name": "astroid.img",
+        "url": "asteroids-icon.js",
+        "evaluate": true
+      }
     ]
   },
-  { "id": "clickms",
+  {
+    "id": "clickms",
     "name": "Click Master",
     "icon": "click-master.png",
-    "version":"0.01",
+    "version": "0.01",
     "description": "Get several friends to start the game, then compete to see who can press BTN1 the most!",
     "tags": "game",
     "storage": [
-      {"name":"clickms.app.js","url":"click-master.js"},
-      {"name":"clickms.img","url":"click-master-icon.js","evaluate":true}
+      {
+        "name": "clickms.app.js",
+        "url": "click-master.js"
+      },
+      {
+        "name": "clickms.img",
+        "url": "click-master-icon.js",
+        "evaluate": true
+      }
     ]
   },
-  { "id": "horsey",
+  {
+    "id": "horsey",
     "name": "Horse Race!",
     "icon": "horse-race.png",
-    "version":"0.01",
+    "version": "0.01",
     "description": "Get several friends to start the game, then compete to see who can press BTN1 the most!",
     "tags": "game",
     "storage": [
-      {"name":"horsey.app.js","url":"horse-race.js"},
-      {"name":"horsey.img","url":"horse-race-icon.js","evaluate":true}
+      {
+        "name": "horsey.app.js",
+        "url": "horse-race.js"
+      },
+      {
+        "name": "horsey.img",
+        "url": "horse-race-icon.js",
+        "evaluate": true
+      }
     ]
   },
-  { "id": "compass",
+  {
+    "id": "compass",
     "name": "Compass",
     "icon": "compass.png",
-    "version":"0.02",
+    "version": "0.02",
     "description": "Simple compass that points North",
     "tags": "tool,outdoors",
     "storage": [
-      {"name":"compass.app.js","url":"compass.js"},
-      {"name":"compass.img","url":"compass-icon.js","evaluate":true}
+      {
+        "name": "compass.app.js",
+        "url": "compass.js"
+      },
+      {
+        "name": "compass.img",
+        "url": "compass-icon.js",
+        "evaluate": true
+      }
     ]
   },
-  { "id": "gpstime",
+  {
+    "id": "gpstime",
     "name": "GPS Time",
     "icon": "gpstime.png",
-    "version":"0.03",
+    "version": "0.03",
     "description": "Update the Bangle.js's clock based on the time from the GPS receiver",
     "tags": "tool,gps",
     "storage": [
-      {"name":"gpstime.app.js","url":"gpstime.js"},
-      {"name":"gpstime.img","url":"gpstime-icon.js","evaluate":true}
+      {
+        "name": "gpstime.app.js",
+        "url": "gpstime.js"
+      },
+      {
+        "name": "gpstime.img",
+        "url": "gpstime-icon.js",
+        "evaluate": true
+      }
     ]
   },
-  { "id": "openloc",
+  {
+    "id": "openloc",
     "name": "Open Location / Plus Codes",
     "shortName": "Open Location",
     "icon": "app.png",
-    "version":"0.01",
+    "version": "0.01",
     "description": "Convert your current GPS location to a series of characters",
     "tags": "tool,outdoors,gps",
     "storage": [
-      {"name":"openloc.app.js","url":"app.js"},
-      {"name":"openloc.img","url":"app-icon.js","evaluate":true}
+      {
+        "name": "openloc.app.js",
+        "url": "app.js"
+      },
+      {
+        "name": "openloc.img",
+        "url": "app-icon.js",
+        "evaluate": true
+      }
     ]
   },
-  { "id": "speedo",
+  {
+    "id": "speedo",
     "name": "Speedo",
     "icon": "speedo.png",
-    "version":"0.01",
+    "version": "0.01",
     "description": "Show the current speed according to the GPS",
     "tags": "tool,outdoors,gps",
     "storage": [
-      {"name":"speedo.app.js","url":"speedo.js"},
-      {"name":"speedo.img","url":"speedo-icon.js","evaluate":true}
+      {
+        "name": "speedo.app.js",
+        "url": "speedo.js"
+      },
+      {
+        "name": "speedo.img",
+        "url": "speedo-icon.js",
+        "evaluate": true
+      }
     ]
   },
-  { "id": "gpsrec",
+  {
+    "id": "gpsrec",
     "name": "GPS Recorder",
     "icon": "app.png",
-    "version":"0.08",
+    "version": "0.08",
     "interface": "interface.html",
     "description": "Application that allows you to record a GPS track. Can run in background",
     "tags": "tool,outdoors,gps,widget",
     "storage": [
-      {"name":"gpsrec.app.js","url":"app.js"},
-      {"name":"gpsrec.img","url":"app-icon.js","evaluate":true},
-      {"name":"gpsrec.wid.js","url":"widget.js"}
+      {
+        "name": "gpsrec.app.js",
+        "url": "app.js"
+      },
+      {
+        "name": "gpsrec.img",
+        "url": "app-icon.js",
+        "evaluate": true
+      },
+      {
+        "name": "gpsrec.wid.js",
+        "url": "widget.js"
+      }
     ],
     "data": [
-      {"name":"gpsrec.json"},
-      {"wildcard":".gpsrc?","storageFile": true}
+      {
+        "name": "gpsrec.json"
+      },
+      {
+        "wildcard": ".gpsrc?",
+        "storageFile": true
+      }
     ]
   },
-  { "id": "gpsnav",
+  {
+    "id": "gpsnav",
     "name": "GPS Navigation",
     "icon": "icon.png",
-    "version":"0.01",
+    "version": "0.01",
     "description": "Displays GPS Course and Speed, + Directions to waypoint and waypoint recording",
     "tags": "tool,outdoors,gps",
     "readme": "README.md",
     "storage": [
-      {"name":"gpsnav.app.js","url":"app.js"},
-      {"name":"waypoints.json","url":"waypoints.json","evaluate":false},
-      {"name":"gpsnav.img","url":"app-icon.js","evaluate":true}
+      {
+        "name": "gpsnav.app.js",
+        "url": "app.js"
+      },
+      {
+        "name": "waypoints.json",
+        "url": "waypoints.json",
+        "evaluate": false
+      },
+      {
+        "name": "gpsnav.img",
+        "url": "app-icon.js",
+        "evaluate": true
+      }
     ]
   },
-  { "id": "heart",
+  {
+    "id": "heart",
     "name": "Heart Rate Recorder",
     "icon": "app.png",
-    "version":"0.02",
+    "version": "0.02",
     "interface": "interface.html",
     "description": "Application that allows you to record your heart rate. Can run in background",
     "tags": "tool,health,widget",
     "storage": [
-      {"name":"heart.app.js","url":"app.js"},
-      {"name":"heart.img","url":"app-icon.js","evaluate":true},
-      {"name":"heart.wid.js","url":"widget.js"}
+      {
+        "name": "heart.app.js",
+        "url": "app.js"
+      },
+      {
+        "name": "heart.img",
+        "url": "app-icon.js",
+        "evaluate": true
+      },
+      {
+        "name": "heart.wid.js",
+        "url": "widget.js"
+      }
     ],
     "data": [
-      {"name":"heart.json"},
-      {"wildcard":".heart?","storageFile": true}
+      {
+        "name": "heart.json"
+      },
+      {
+        "wildcard": ".heart?",
+        "storageFile": true
+      }
     ]
   },
-  { "id": "slevel",
+  {
+    "id": "slevel",
     "name": "Spirit Level",
     "icon": "spiritlevel.png",
-    "version":"0.01",
+    "version": "0.01",
     "description": "Show the current angle of the watch, so you can use it to make sure something is absolutely flat",
     "tags": "tool",
     "storage": [
-      {"name":"slevel.app.js","url":"spiritlevel.js"},
-      {"name":"slevel.img","url":"spiritlevel-icon.js","evaluate":true}
+      {
+        "name": "slevel.app.js",
+        "url": "spiritlevel.js"
+      },
+      {
+        "name": "slevel.img",
+        "url": "spiritlevel-icon.js",
+        "evaluate": true
+      }
     ]
   },
-  { "id": "files",
+  {
+    "id": "files",
     "name": "App Manager",
     "icon": "files.png",
-    "version":"0.03",
+    "version": "0.03",
     "description": "Show currently installed apps, free space, and allow their deletion from the watch",
     "tags": "tool,system,files",
     "storage": [
-      {"name":"files.app.js","url":"files.js"},
-      {"name":"files.img","url":"files-icon.js","evaluate":true}
+      {
+        "name": "files.app.js",
+        "url": "files.js"
+      },
+      {
+        "name": "files.img",
+        "url": "files-icon.js",
+        "evaluate": true
+      }
     ]
   },
-  { "id": "weather",
+  {
+    "id": "weather",
     "name": "Weather",
     "icon": "icon.png",
-    "version":"0.01",
+    "version": "0.01",
     "description": "Show Gadgetbridge weather report",
     "readme": "readme.md",
     "tags": "widget,outdoors",
     "storage": [
-      {"name":"weather.app.js","url":"app.js"},
-      {"name":"weather.wid.js","url":"widget.js"},
-      {"name":"weather","url":"lib.js"},
-      {"name":"weather.img","url":"icon.js","evaluate":true}
-    ],
-    "data": [
-      {"name": "weather.json"}
-    ]
-  },
-  { "id": "widbat",
+      {
+        "name": "weather.app.js",
+        "url": "app.js"
+      },
+      {
+        "name": "weather.wid.js",
+        "url": "widget.js"
+      },
+      {
+        "name": "weather",
+        "url": "lib.js"
+      },
+      {
+        "name": "weather.img",
+        "url": "icon.js",
+        "evaluate": true
+      }
+    ],
+    "data": [
+      {
+        "name": "weather.json"
+      }
+    ]
+  },
+  {
+    "id": "widbat",
     "name": "Battery Level Widget",
     "icon": "widget.png",
-    "version":"0.05",
+    "version": "0.05",
     "description": "Show the current battery level and charging status in the top right of the clock",
     "tags": "widget,battery",
-    "type":"widget",
+    "type": "widget",
     "storage": [
-      {"name":"widbat.wid.js","url":"widget.js"}
+      {
+        "name": "widbat.wid.js",
+        "url": "widget.js"
+      }
     ]
   },
-  { "id": "widbatpc",
+  {
+    "id": "widbatpc",
     "name": "Battery Level Widget (with percentage)",
     "shortName": "Battery Widget",
     "icon": "widget.png",
-    "version":"0.11",
+    "version": "0.11",
     "description": "Show the current battery level and charging status in the top right of the clock, with charge percentage",
     "tags": "widget,battery",
-    "type":"widget",
+    "type": "widget",
     "storage": [
-      {"name":"widbatpc.wid.js","url":"widget.js"},
-      {"name":"widbatpc.settings.js","url":"settings.js"}
+      {
+        "name": "widbatpc.wid.js",
+        "url": "widget.js"
+      },
+      {
+        "name": "widbatpc.settings.js",
+        "url": "settings.js"
+      }
     ],
     "data": [
-      {"name":"widbatpc.json"}
+      {
+        "name": "widbatpc.json"
+      }
     ]
   },
-  { "id": "widbt",
+  {
+    "id": "widbt",
     "name": "Bluetooth Widget",
     "icon": "widget.png",
-    "version":"0.04",
+    "version": "0.04",
     "description": "Show the current Bluetooth connection status in the top right of the clock",
     "tags": "widget,bluetooth",
-    "type":"widget",
+    "type": "widget",
     "storage": [
-      {"name":"widbt.wid.js","url":"widget.js"}
+      {
+        "name": "widbt.wid.js",
+        "url": "widget.js"
+      }
     ]
   },
-  { "id": "widram",
+  {
+    "id": "widram",
     "name": "RAM Widget",
-    "shortName":"RAM Widget",
+    "shortName": "RAM Widget",
     "icon": "widget.png",
-    "version":"0.01",
+    "version": "0.01",
     "description": "Display your Bangle's available RAM percentage in a widget",
     "tags": "widget",
     "type": "widget",
     "storage": [
-      {"name":"widram.wid.js","url":"widget.js"}
+      {
+        "name": "widram.wid.js",
+        "url": "widget.js"
+      }
     ]
   },
-  { "id": "hrm",
+  {
+    "id": "hrm",
     "name": "Heart Rate Monitor",
     "icon": "heartrate.png",
-    "version":"0.01",
+    "version": "0.01",
     "description": "Measure your current heart rate",
     "tags": "health",
     "storage": [
-      {"name":"hrm.app.js","url":"heartrate.js"},
-      {"name":"hrm.img","url":"heartrate-icon.js","evaluate":true}
+      {
+        "name": "hrm.app.js",
+        "url": "heartrate.js"
+      },
+      {
+        "name": "hrm.img",
+        "url": "heartrate-icon.js",
+        "evaluate": true
+      }
     ]
   },
-  { "id": "widhrm",
+  {
+    "id": "widhrm",
     "name": "Simple Heart Rate widget",
     "icon": "widget.png",
-    "version":"0.03",
+    "version": "0.03",
     "description": "When the screen is on, the widget turns on the heart rate monitor and displays the current heart rate (or last known in grey). For this to work well you'll need at least a 15 second LCD Timeout.",
     "tags": "health,widget",
     "type": "widget",
     "storage": [
-      {"name":"widhrm.wid.js","url":"widget.js"}
+      {
+        "name": "widhrm.wid.js",
+        "url": "widget.js"
+      }
     ]
   },
-  { "id": "stetho",
+  {
+    "id": "stetho",
     "name": "Stethoscope",
     "icon": "stetho.png",
-    "version":"0.01",
+    "version": "0.01",
     "description": "Hear your heart rate",
     "tags": "health",
     "storage": [
-      {"name":"stetho.app.js","url":"stetho.js"},
-      {"name":"stetho.img","url":"stetho-icon.js","evaluate":true}
+      {
+        "name": "stetho.app.js",
+        "url": "stetho.js"
+      },
+      {
+        "name": "stetho.img",
+        "url": "stetho-icon.js",
+        "evaluate": true
+      }
     ]
   },
-  { "id": "swatch",
+  {
+    "id": "swatch",
     "name": "Stopwatch",
     "icon": "stopwatch.png",
-    "version":"0.07",
+    "version": "0.07",
     "interface": "interface.html",
     "description": "Simple stopwatch with Lap Time logging to a JSON file",
     "tags": "health",
-    "allow_emulator":true,
+    "allow_emulator": true,
     "readme": "README.md",
     "storage": [
-      {"name":"swatch.app.js","url":"stopwatch.js"},
-      {"name":"swatch.img","url":"stopwatch-icon.js","evaluate":true}
+      {
+        "name": "swatch.app.js",
+        "url": "stopwatch.js"
+      },
+      {
+        "name": "swatch.img",
+        "url": "stopwatch-icon.js",
+        "evaluate": true
+      }
     ]
   },
-  { "id": "hidmsic",
+  {
+    "id": "hidmsic",
     "name": "Bluetooth Music Controls",
     "shortName": "Music Control",
     "icon": "hid-music.png",
-    "version":"0.02",
+    "version": "0.02",
     "description": "Enable HID in settings, pair with your phone, then use this app to control music from your watch!",
     "tags": "bluetooth",
     "storage": [
-      {"name":"hidmsic.app.js","url":"hid-music.js"},
-      {"name":"hidmsic.img","url":"hid-music-icon.js","evaluate":true}
+      {
+        "name": "hidmsic.app.js",
+        "url": "hid-music.js"
+      },
+      {
+        "name": "hidmsic.img",
+        "url": "hid-music-icon.js",
+        "evaluate": true
+      }
     ]
   },
-  { "id": "hidkbd",
+  {
+    "id": "hidkbd",
     "name": "Bluetooth Keyboard",
     "shortName": "Bluetooth Kbd",
     "icon": "hid-keyboard.png",
-    "version":"0.02",
+    "version": "0.02",
     "description": "Enable HID in settings, pair with your phone/PC, then use this app to control other apps",
     "tags": "bluetooth",
     "storage": [
-      {"name":"hidkbd.app.js","url":"hid-keyboard.js"},
-      {"name":"hidkbd.img","url":"hid-keyboard-icon.js","evaluate":true}
+      {
+        "name": "hidkbd.app.js",
+        "url": "hid-keyboard.js"
+      },
+      {
+        "name": "hidkbd.img",
+        "url": "hid-keyboard-icon.js",
+        "evaluate": true
+      }
     ]
   },
-  { "id": "hidbkbd",
+  {
+    "id": "hidbkbd",
     "name": "Binary Bluetooth Keyboard",
     "shortName": "Binary BT Kbd",
     "icon": "hid-binary-keyboard.png",
-    "version":"0.02",
+    "version": "0.02",
     "description": "Enable HID in settings, pair with your phone/PC, then type messages using the onscreen keyboard by tapping repeatedly on the key you want",
     "tags": "bluetooth",
     "storage": [
-      {"name":"hidbkbd.app.js","url":"hid-binary-keyboard.js"},
-      {"name":"hidbkbd.img","url":"hid-binary-keyboard-icon.js","evaluate":true}
+      {
+        "name": "hidbkbd.app.js",
+        "url": "hid-binary-keyboard.js"
+      },
+      {
+        "name": "hidbkbd.img",
+        "url": "hid-binary-keyboard-icon.js",
+        "evaluate": true
+      }
     ]
   },
-  { "id": "animals",
+  {
+    "id": "animals",
     "name": "Animals Game",
     "icon": "animals.png",
-    "version":"0.01",
+    "version": "0.01",
     "description": "Simple toddler's game - displays a different number of animals each time the screen is pressed",
     "tags": "game",
     "storage": [
-      {"name":"animals.app.js","url":"animals.js"},
-      {"name":"animals.img","url":"animals-icon.js","evaluate":true},
-      {"name":"animals-snake.img","url":"animals-snake.js","evaluate":true},
-      {"name":"animals-duck.img","url":"animals-duck.js","evaluate":true},
-      {"name":"animals-swan.img","url":"animals-swan.js","evaluate":true},
-      {"name":"animals-fox.img","url":"animals-fox.js","evaluate":true},
-      {"name":"animals-camel.img","url":"animals-camel.js","evaluate":true},
-      {"name":"animals-pig.img","url":"animals-pig.js","evaluate":true},
-      {"name":"animals-sheep.img","url":"animals-sheep.js","evaluate":true},
-      {"name":"animals-mouse.img","url":"animals-mouse.js","evaluate":true}
+      {
+        "name": "animals.app.js",
+        "url": "animals.js"
+      },
+      {
+        "name": "animals.img",
+        "url": "animals-icon.js",
+        "evaluate": true
+      },
+      {
+        "name": "animals-snake.img",
+        "url": "animals-snake.js",
+        "evaluate": true
+      },
+      {
+        "name": "animals-duck.img",
+        "url": "animals-duck.js",
+        "evaluate": true
+      },
+      {
+        "name": "animals-swan.img",
+        "url": "animals-swan.js",
+        "evaluate": true
+      },
+      {
+        "name": "animals-fox.img",
+        "url": "animals-fox.js",
+        "evaluate": true
+      },
+      {
+        "name": "animals-camel.img",
+        "url": "animals-camel.js",
+        "evaluate": true
+      },
+      {
+        "name": "animals-pig.img",
+        "url": "animals-pig.js",
+        "evaluate": true
+      },
+      {
+        "name": "animals-sheep.img",
+        "url": "animals-sheep.js",
+        "evaluate": true
+      },
+      {
+        "name": "animals-mouse.img",
+        "url": "animals-mouse.js",
+        "evaluate": true
+      }
     ]
   },
-  { "id": "qrcode",
+  {
+    "id": "qrcode",
     "name": "Custom QR Code",
     "icon": "qrcode.png",
-    "version":"0.01",
+    "version": "0.01",
     "description": "Use this to upload a customised QR code to Bangle.js",
     "tags": "",
     "custom": "qrcode.html",
     "storage": [
-      {"name":"qrcode.app.js"},
-      {"name":"qrcode.img"}
+      {
+        "name": "qrcode.app.js"
+      },
+      {
+        "name": "qrcode.img"
+      }
     ]
   },
-  { "id": "beer",
+  {
+    "id": "beer",
     "name": "Beer Compass",
     "icon": "beercompass.png",
-    "version":"0.01",
+    "version": "0.01",
     "description": "Uploads all the pubs in an area onto your watch, so it can always point you at the nearest one",
     "tags": "",
     "custom": "beercompass.html",
     "storage": [
-      {"name":"beer.app.js"},
-      {"name":"beer.img"}
+      {
+        "name": "beer.app.js"
+      },
+      {
+        "name": "beer.img"
+      }
     ]
   },
-  { "id": "route",
+  {
+    "id": "route",
     "name": "Route Viewer",
     "icon": "route.png",
-    "version":"0.01",
+    "version": "0.01",
     "description": "Upload a KML file of a route, and have your watch display a map with how far around it you are",
     "tags": "",
     "custom": "route.html",
     "storage": [
-      {"name":"route.app.js"},
-      {"name":"route.img"}
+      {
+        "name": "route.app.js"
+      },
+      {
+        "name": "route.img"
+      }
     ]
   },
   {
     "id": "ncstart",
     "name": "NCEU Startup",
     "icon": "start.png",
-    "version":"0.05",
+    "version": "0.05",
     "description": "NodeConfEU 2019 'First Start' Sequence",
     "tags": "start,welcome",
     "storage": [
-      {"name":"ncstart.app.js","url":"start.js"},
-      {"name":"ncstart.boot.js","url":"boot.js"},
-      {"name":"ncstart.settings.js","url":"settings.js"},
-      {"name":"ncstart.img","url":"start-icon.js","evaluate":true},
-      {"name":"nc-bangle.img","url":"start-bangle.js","evaluate":true},
-      {"name":"nc-nceu.img","url":"start-nceu.js","evaluate":true},
-      {"name":"nc-nfr.img","url":"start-nfr.js","evaluate":true},
-      {"name":"nc-nodew.img","url":"start-nodew.js","evaluate":true},
-      {"name":"nc-tf.img","url":"start-tf.js","evaluate":true}
+      {
+        "name": "ncstart.app.js",
+        "url": "start.js"
+      },
+      {
+        "name": "ncstart.boot.js",
+        "url": "boot.js"
+      },
+      {
+        "name": "ncstart.settings.js",
+        "url": "settings.js"
+      },
+      {
+        "name": "ncstart.img",
+        "url": "start-icon.js",
+        "evaluate": true
+      },
+      {
+        "name": "nc-bangle.img",
+        "url": "start-bangle.js",
+        "evaluate": true
+      },
+      {
+        "name": "nc-nceu.img",
+        "url": "start-nceu.js",
+        "evaluate": true
+      },
+      {
+        "name": "nc-nfr.img",
+        "url": "start-nfr.js",
+        "evaluate": true
+      },
+      {
+        "name": "nc-nodew.img",
+        "url": "start-nodew.js",
+        "evaluate": true
+      },
+      {
+        "name": "nc-tf.img",
+        "url": "start-tf.js",
+        "evaluate": true
+      }
     ],
     "data": [
-      {"name":"ncstart.json"}
+      {
+        "name": "ncstart.json"
+      }
     ]
   },
-  { "id": "ncfrun",
+  {
+    "id": "ncfrun",
     "name": "NCEU 5K Fun Run",
     "icon": "nceu-funrun.png",
-    "version":"0.01",
+    "version": "0.01",
     "description": "Display a map of the NodeConf EU 2019 5K Fun Run route and your location on it",
     "tags": "health",
     "storage": [
-      {"name":"ncfrun.app.js","url":"nceu-funrun.js"},
-      {"name":"ncfrun.img","url":"nceu-funrun-icon.js","evaluate":true}
+      {
+        "name": "ncfrun.app.js",
+        "url": "nceu-funrun.js"
+      },
+      {
+        "name": "ncfrun.img",
+        "url": "nceu-funrun-icon.js",
+        "evaluate": true
+      }
     ]
   },
-  { "id": "widnceu",
+  {
+    "id": "widnceu",
     "name": "NCEU Logo Widget",
     "icon": "widget.png",
-    "version":"0.02",
+    "version": "0.02",
     "description": "Show the NodeConf EU logo in the top left",
     "tags": "widget",
-    "type":"widget",
+    "type": "widget",
     "storage": [
-      {"name":"widnceu.wid.js","url":"widget.js"}
+      {
+        "name": "widnceu.wid.js",
+        "url": "widget.js"
+      }
     ]
   },
-  { "id": "sclock",
+  {
+    "id": "sclock",
     "name": "Simple Clock",
     "icon": "clock-simple.png",
-    "version":"0.04",
+    "version": "0.04",
     "description": "A Simple Digital Clock",
     "tags": "clock",
-    "type":"clock",
-    "allow_emulator":true,
+    "type": "clock",
+    "allow_emulator": true,
     "storage": [
-      {"name":"sclock.app.js","url":"clock-simple.js"},
-      {"name":"sclock.img","url":"clock-simple-icon.js","evaluate":true}
+      {
+        "name": "sclock.app.js",
+        "url": "clock-simple.js"
+      },
+      {
+        "name": "sclock.img",
+        "url": "clock-simple-icon.js",
+        "evaluate": true
+      }
     ]
   },
-  { "id": "dclock",
+  {
+    "id": "dclock",
     "name": "Dev Clock",
     "icon": "clock-dev.png",
-    "version":"0.09",
+    "version": "0.09",
     "description": "A Digital Clock including timestamp (tst), beats(@), days in current month (dm) and days since new moon (l)",
     "tags": "clock",
-    "type":"clock",
-    "allow_emulator":true,
+    "type": "clock",
+    "allow_emulator": true,
     "storage": [
-      {"name":"dclock.app.js","url":"clock-dev.js"},
-      {"name":"dclock.img","url":"clock-dev-icon.js","evaluate":true}
+      {
+        "name": "dclock.app.js",
+        "url": "clock-dev.js"
+      },
+      {
+        "name": "dclock.img",
+        "url": "clock-dev-icon.js",
+        "evaluate": true
+      }
     ]
   },
-  { "id": "gesture",
+  {
+    "id": "gesture",
     "name": "Gesture Test",
     "icon": "gesture.png",
-    "version":"0.01",
+    "version": "0.01",
     "description": "BETA! Uploads a basic Tensorflow Gesture model, and then outputs each gesture as a message",
     "tags": "gesture,ai",
-    "type":"app",
+    "type": "app",
     "storage": [
-      {"name":"gesture.app.js","url":"gesture.js"},
-      {"name":".tfnames","url":"gesture-tfnames.js","evaluate":true},
-      {"name":".tfmodel","url":"gesture-tfmodel.js","evaluate":true},
-      {"name":"gesture.img","url":"gesture-icon.js","evaluate":true}
+      {
+        "name": "gesture.app.js",
+        "url": "gesture.js"
+      },
+      {
+        "name": ".tfnames",
+        "url": "gesture-tfnames.js",
+        "evaluate": true
+      },
+      {
+        "name": ".tfmodel",
+        "url": "gesture-tfmodel.js",
+        "evaluate": true
+      },
+      {
+        "name": "gesture.img",
+        "url": "gesture-icon.js",
+        "evaluate": true
+      }
     ]
   },
-  { "id": "pparrot",
+  {
+    "id": "pparrot",
     "name": "Party Parrot",
     "icon": "party-parrot.png",
-    "version":"0.01",
+    "version": "0.01",
     "description": "Party with a parrot on your wrist",
     "tags": "party,parrot,lol",
-    "type":"app",
-    "allow_emulator":true,
+    "type": "app",
+    "allow_emulator": true,
     "storage": [
-      {"name":"pparrot.app.js","url":"party-parrot.js"},
-      {"name":"pparrot.img","url":"party-parrot-icon.js","evaluate":true}
+      {
+        "name": "pparrot.app.js",
+        "url": "party-parrot.js"
+      },
+      {
+        "name": "pparrot.img",
+        "url": "party-parrot-icon.js",
+        "evaluate": true
+      }
     ]
   },
-  { "id": "hrings",
+  {
+    "id": "hrings",
     "name": "Hypno Rings",
     "icon": "hypno-rings.png",
-    "version":"0.01",
+    "version": "0.01",
     "description": "Experiment with trippy rings, press buttons for change",
     "tags": "rings,hypnosis,psychadelic",
-    "type":"app",
-    "allow_emulator":true,
+    "type": "app",
+    "allow_emulator": true,
     "storage": [
-      {"name":"hrings.app.js","url":"hypno-rings.js"},
-      {"name":"hrings.img","url":"hypno-rings-icon.js","evaluate":true}
+      {
+        "name": "hrings.app.js",
+        "url": "hypno-rings.js"
+      },
+      {
+        "name": "hrings.img",
+        "url": "hypno-rings-icon.js",
+        "evaluate": true
+      }
     ]
   },
-  { "id": "morse",
+  {
+    "id": "morse",
     "name": "Morse Code",
     "icon": "morse-code.png",
-    "version":"0.01",
+    "version": "0.01",
     "description": "Learn morse code by hearing/seeing/feeling the code. Tap to toggle buzz!",
     "tags": "morse,sound,visual,input",
-    "type":"app",
+    "type": "app",
     "storage": [
-      {"name":"morse.app.js","url":"morse-code.js"},
-      {"name":"morse.img","url":"morse-code-icon.js","evaluate":true}
+      {
+        "name": "morse.app.js",
+        "url": "morse-code.js"
+      },
+      {
+        "name": "morse.img",
+        "url": "morse-code-icon.js",
+        "evaluate": true
+      }
     ]
   },
   {
     "id": "blescan",
     "name": "BLE Scanner",
     "icon": "blescan.png",
-    "version":"0.01",
+    "version": "0.01",
     "description": "Scan for advertising BLE devices",
-    "tags" : "bluetooth",
-    "storage" : [
-      {"name":"blescan.app.js","url":"blescan.js"},
-      {"name":"blescan.img","url":"blescan-icon.js", "evaluate":true}
-    ]
-  },
-  { "id": "mmonday",
-  "name": "Manic Monday Tone",
-  "icon": "manic-monday-icon.png",
-  "version":"0.02",
-  "description": "The Bangles make a comeback",
-  "tags": "sound",
-  "storage": [
-    {"name":"mmonday.app.js","url":"manic-monday.js"},
-    {"name":"mmonday.img","url":"manic-monday-icon.js","evaluate":true}
-  ]
-  },
-  { "id": "jbells",
+    "tags": "bluetooth",
+    "storage": [
+      {
+        "name": "blescan.app.js",
+        "url": "blescan.js"
+      },
+      {
+        "name": "blescan.img",
+        "url": "blescan-icon.js",
+        "evaluate": true
+      }
+    ]
+  },
+  {
+    "id": "mmonday",
+    "name": "Manic Monday Tone",
+    "icon": "manic-monday-icon.png",
+    "version": "0.02",
+    "description": "The Bangles make a comeback",
+    "tags": "sound",
+    "storage": [
+      {
+        "name": "mmonday.app.js",
+        "url": "manic-monday.js"
+      },
+      {
+        "name": "mmonday.img",
+        "url": "manic-monday-icon.js",
+        "evaluate": true
+      }
+    ]
+  },
+  {
+    "id": "jbells",
     "name": "Jingle Bells",
     "icon": "jbells.png",
-    "version":"0.01",
+    "version": "0.01",
     "description": "Play Jingle Bells",
     "tags": "sound",
-    "type":"app",
+    "type": "app",
     "storage": [
-      {"name":"jbells.app.js","url":"jbells.js"},
-      {"name":"jbells.img","url":"jbells-icon.js","evaluate":true}
+      {
+        "name": "jbells.app.js",
+        "url": "jbells.js"
+      },
+      {
+        "name": "jbells.img",
+        "url": "jbells-icon.js",
+        "evaluate": true
+      }
     ]
   },
-  { "id": "scolor",
+  {
+    "id": "scolor",
     "name": "Show Color",
     "icon": "show-color.png",
-    "version":"0.01",
+    "version": "0.01",
     "description": "Display all available Colors and Names",
     "tags": "tool",
-    "type":"app",
-    "allow_emulator":true,
+    "type": "app",
+    "allow_emulator": true,
     "storage": [
-      {"name":"scolor.app.js","url":"show-color.js"},
-      {"name":"scolor.img","url":"show-color-icon.js","evaluate":true}
+      {
+        "name": "scolor.app.js",
+        "url": "show-color.js"
+      },
+      {
+        "name": "scolor.img",
+        "url": "show-color-icon.js",
+        "evaluate": true
+      }
     ]
   },
-  { "id": "miclock",
+  {
+    "id": "miclock",
     "name": "Mixed Clock",
     "icon": "clock-mixed.png",
-    "version":"0.04",
+    "version": "0.04",
     "description": "A mix of analog and digital Clock",
     "tags": "clock",
-    "type":"clock",
-    "allow_emulator":true,
+    "type": "clock",
+    "allow_emulator": true,
     "storage": [
-      {"name":"miclock.app.js","url":"clock-mixed.js"},
-      {"name":"miclock.img","url":"clock-mixed-icon.js","evaluate":true}
+      {
+        "name": "miclock.app.js",
+        "url": "clock-mixed.js"
+      },
+      {
+        "name": "miclock.img",
+        "url": "clock-mixed-icon.js",
+        "evaluate": true
+      }
     ]
   },
-  { "id": "bclock",
+  {
+    "id": "bclock",
     "name": "Binary Clock",
     "icon": "clock-binary.png",
-    "version":"0.02",
+    "version": "0.02",
     "description": "A simple binary clock watch face",
     "tags": "clock",
-    "type":"clock",
-    "allow_emulator":true,
+    "type": "clock",
+    "allow_emulator": true,
     "storage": [
-      {"name":"bclock.app.js","url":"clock-binary.js"},
-      {"name":"bclock.img","url":"clock-binary-icon.js","evaluate":true}
+      {
+        "name": "bclock.app.js",
+        "url": "clock-binary.js"
+      },
+      {
+        "name": "bclock.img",
+        "url": "clock-binary-icon.js",
+        "evaluate": true
+      }
     ]
   },
-  { "id": "clotris",
+  {
+    "id": "clotris",
     "name": "Clock-Tris",
     "icon": "clock-tris.png",
-    "version":"0.01",
+    "version": "0.01",
     "description": "A fully functional clone of a classic game of falling blocks",
     "tags": "game",
-    "allow_emulator":true,
+    "allow_emulator": true,
     "storage": [
-      {"name":"clotris.app.js","url":"clock-tris.js"},
-      {"name":"clotris.img","url":"clock-tris-icon.js","evaluate":true},
-      {"name":".trishig","url":"clock-tris-high"}
+      {
+        "name": "clotris.app.js",
+        "url": "clock-tris.js"
+      },
+      {
+        "name": "clotris.img",
+        "url": "clock-tris-icon.js",
+        "evaluate": true
+      },
+      {
+        "name": ".trishig",
+        "url": "clock-tris-high"
+      }
     ]
   },
-  { "id": "flappy",
+  {
+    "id": "flappy",
     "name": "Flappy Bird",
     "icon": "app.png",
-    "version":"0.03",
+    "version": "0.03",
     "description": "A Flappy Bird game clone",
     "tags": "game",
-    "allow_emulator":true,
+    "allow_emulator": true,
     "storage": [
-      {"name":"flappy.app.js","url":"app.js"},
-      {"name":"flappy.img","url":"app-icon.js","evaluate":true}
+      {
+        "name": "flappy.app.js",
+        "url": "app.js"
+      },
+      {
+        "name": "flappy.img",
+        "url": "app-icon.js",
+        "evaluate": true
+      }
     ]
   },
   {
     "id": "gpsinfo",
     "name": "GPS Info",
     "icon": "gps-info.png",
-    "version":"0.03",
+    "version": "0.03",
     "description": "An application that displays information about altitude, lat/lon, satellites and time",
     "tags": "gps",
     "type": "app",
     "storage": [
-      {"name":"gpsinfo.app.js","url": "gps-info.js"},
-      {"name":"gpsinfo.img","url": "gps-info-icon.js","evaluate": true}
+      {
+        "name": "gpsinfo.app.js",
+        "url": "gps-info.js"
+      },
+      {
+        "name": "gpsinfo.img",
+        "url": "gps-info-icon.js",
+        "evaluate": true
+      }
     ]
   },
   {
     "id": "pomodo",
-    "name":"Pomodoro",
-    "icon":"pomodoro.png",
-    "version":"0.01",
+    "name": "Pomodoro",
+    "icon": "pomodoro.png",
+    "version": "0.01",
     "description": "A simple pomodoro timer.",
     "tags": "pomodoro,cooking,tools",
     "type": "app",
-    "allow_emulator":true,
+    "allow_emulator": true,
     "storage": [
-      {"name":"pomodo.app.js","url": "pomodoro.js"},
-      {"name":"pomodo.img","url": "pomodoro-icon.js","evaluate": true}
+      {
+        "name": "pomodo.app.js",
+        "url": "pomodoro.js"
+      },
+      {
+        "name": "pomodo.img",
+        "url": "pomodoro-icon.js",
+        "evaluate": true
+      }
     ]
   },
-  { "id": "blobclk",
+  {
+    "id": "blobclk",
     "name": "Large Digit Blob Clock",
-    "shortName" : "Blob Clock",
+    "shortName": "Blob Clock",
     "icon": "clock-blob.png",
-    "version":"0.03",
+    "version": "0.03",
     "description": "A clock with big digits",
     "tags": "clock",
-    "type":"clock",
-    "allow_emulator":true,
+    "type": "clock",
+    "allow_emulator": true,
     "storage": [
-      {"name":"blobclk.app.js","url":"clock-blob.js"},
-      {"name":"blobclk.img","url":"clock-blob-icon.js","evaluate":true}
+      {
+        "name": "blobclk.app.js",
+        "url": "clock-blob.js"
+      },
+      {
+        "name": "blobclk.img",
+        "url": "clock-blob-icon.js",
+        "evaluate": true
+      }
     ]
   },
-  { "id": "boldclk",
+  {
+    "id": "boldclk",
     "name": "Bold Clock",
     "icon": "bold_clock.png",
-    "version":"0.02",
+    "version": "0.02",
     "description": "Simple, readable and practical clock",
     "tags": "clock",
-    "type":"clock",
-    "allow_emulator":true,
+    "type": "clock",
+    "allow_emulator": true,
     "storage": [
-      {"name":"boldclk.app.js","url":"bold_clock.js"},
-      {"name":"boldclk.img","url":"bold_clock-icon.js","evaluate":true}
+      {
+        "name": "boldclk.app.js",
+        "url": "bold_clock.js"
+      },
+      {
+        "name": "boldclk.img",
+        "url": "bold_clock-icon.js",
+        "evaluate": true
+      }
     ]
   },
-  { "id": "widclk",
+  {
+    "id": "widclk",
     "name": "Digital clock widget",
     "icon": "widget.png",
-    "version":"0.04",
+    "version": "0.04",
     "description": "A simple digital clock widget",
     "tags": "widget,clock",
-    "type":"widget",
+    "type": "widget",
     "storage": [
-      {"name":"widclk.wid.js","url":"widget.js"}
+      {
+        "name": "widclk.wid.js",
+        "url": "widget.js"
+      }
     ]
   },
-  { "id": "widpedom",
+  {
+    "id": "widpedom",
     "name": "Pedometer widget",
     "icon": "widget.png",
-    "version":"0.10",
+    "version": "0.10",
     "description": "Daily pedometer widget",
     "tags": "widget",
-    "type":"widget",
+    "type": "widget",
     "storage": [
-      {"name":"widpedom.wid.js","url":"widget.js"},
-      {"name":"widpedom.settings.js","url":"settings.js"}
+      {
+        "name": "widpedom.wid.js",
+        "url": "widget.js"
+      },
+      {
+        "name": "widpedom.settings.js",
+        "url": "settings.js"
+      }
     ]
   },
-  { "id": "berlinc",
+  {
+    "id": "berlinc",
     "name": "Berlin Clock",
     "icon": "berlin-clock.png",
-    "version":"0.02",
+    "version": "0.02",
     "description": "Berlin Clock (see https://en.wikipedia.org/wiki/Mengenlehreuhr)",
     "tags": "clock",
-    "type":"clock",
-    "allow_emulator":true,
+    "type": "clock",
+    "allow_emulator": true,
     "storage": [
-      {"name":"berlinc.app.js","url":"berlin-clock.js"},
-      {"name":"berlinc.img","url":"berlin-clock-icon.js","evaluate":true}
+      {
+        "name": "berlinc.app.js",
+        "url": "berlin-clock.js"
+      },
+      {
+        "name": "berlinc.img",
+        "url": "berlin-clock-icon.js",
+        "evaluate": true
+      }
     ]
   },
-  { "id": "ctrclk",
+  {
+    "id": "ctrclk",
     "name": "Centerclock",
     "icon": "app.png",
-    "version":"0.02",
+    "version": "0.02",
     "description": "Watch-centered digital 24h clock with date in dd.mm.yyyy format.",
     "tags": "clock",
-    "type":"clock",
-    "allow_emulator":true,
+    "type": "clock",
+    "allow_emulator": true,
     "storage": [
-      {"name":"ctrclk.app.js","url":"app.js"},
-      {"name":"ctrclk.img","url":"app-icon.js","evaluate":true}
+      {
+        "name": "ctrclk.app.js",
+        "url": "app.js"
+      },
+      {
+        "name": "ctrclk.img",
+        "url": "app-icon.js",
+        "evaluate": true
+      }
     ]
   },
-  { "id": "demoapp",
+  {
+    "id": "demoapp",
     "name": "Demo Loop",
     "icon": "app.png",
-    "version":"0.01",
+    "version": "0.01",
     "description": "Simple demo app - displays Bangle.js, JS logo, graphics, and Bangle.js information",
     "tags": "",
-    "type":"app",
-    "allow_emulator":true,
+    "type": "app",
+    "allow_emulator": true,
     "storage": [
-      {"name":"demoapp.app.js","url":"app.js"},
-      {"name":"demoapp.img","url":"app-icon.js","evaluate":true}
+      {
+        "name": "demoapp.app.js",
+        "url": "app.js"
+      },
+      {
+        "name": "demoapp.img",
+        "url": "app-icon.js",
+        "evaluate": true
+      }
     ],
-    "sortorder" : -9
+    "sortorder": -9
   },
-  { "id": "flagrse",
+  {
+    "id": "flagrse",
     "name": "Espruino Flag Raiser",
     "icon": "app.png",
-    "version":"0.01",
+    "version": "0.01",
     "description": "App to send a command to another Espruino to cause it to raise a flag",
     "tags": "",
     "storage": [
-      {"name":"flagrse.app.js","url":"app.js"},
-      {"name":"flagrse.img","url":"app-icon.js","evaluate":true}
+      {
+        "name": "flagrse.app.js",
+        "url": "app.js"
+      },
+      {
+        "name": "flagrse.img",
+        "url": "app-icon.js",
+        "evaluate": true
+      }
     ]
   },
   {
@@ -924,202 +1572,344 @@
     "version": "0.03",
     "description": "Pipboy themed clock",
     "tags": "clock",
-    "type":"clock",
-    "allow_emulator":true,
+    "type": "clock",
+    "allow_emulator": true,
     "storage": [
-      {"name":"pipboy.app.js","url":"app.js"},
-      {"name":"pipboy.img","url":"app-icon.js","evaluate":true}
+      {
+        "name": "pipboy.app.js",
+        "url": "app.js"
+      },
+      {
+        "name": "pipboy.img",
+        "url": "app-icon.js",
+        "evaluate": true
+      }
     ]
   },
-  { "id": "torch",
+  {
+    "id": "torch",
     "name": "Torch",
-    "shortName":"Torch",
+    "shortName": "Torch",
     "icon": "app.png",
-    "version":"0.02",
+    "version": "0.02",
     "description": "Turns screen white to help you see in the dark. Select from the launcher or press BTN1,BTN3,BTN1,BTN3 quickly to start when in any app that shows widgets",
     "tags": "tool,torch",
     "storage": [
-      {"name":"torch.app.js","url":"app.js"},
-      {"name":"torch.wid.js","url":"widget.js"},
-      {"name":"torch.img","url":"app-icon.js","evaluate":true}
+      {
+        "name": "torch.app.js",
+        "url": "app.js"
+      },
+      {
+        "name": "torch.wid.js",
+        "url": "widget.js"
+      },
+      {
+        "name": "torch.img",
+        "url": "app-icon.js",
+        "evaluate": true
+      }
     ]
   },
-  { "id": "wohrm",
+  {
+    "id": "wohrm",
     "name": "Workout HRM",
     "icon": "app.png",
-    "version":"0.07",
+    "version": "0.07",
     "readme": "README.md",
     "description": "Workout heart rate monitor notifies you with a buzz if your heart rate goes above or below the set limits.",
     "tags": "hrm,workout",
     "type": "app",
-    "allow_emulator":true,
+    "allow_emulator": true,
     "storage": [
-      {"name":"wohrm.app.js","url":"app.js"},
-      {"name":"wohrm.img","url":"app-icon.js","evaluate":true}
+      {
+        "name": "wohrm.app.js",
+        "url": "app.js"
+      },
+      {
+        "name": "wohrm.img",
+        "url": "app-icon.js",
+        "evaluate": true
+      }
     ]
   },
-  { "id": "widid",
+  {
+    "id": "widid",
     "name": "Bluetooth ID Widget",
     "icon": "widget.png",
-    "version":"0.02",
+    "version": "0.02",
     "description": "Display the last two tuple of your Bangle.js MAC address in the widget section. This is useful for figuring out which Bangle.js to connect to if you have more than one Bangle.js!",
     "tags": "widget,address,mac",
-    "type":"widget",
+    "type": "widget",
     "storage": [
-      {"name":"widid.wid.js","url":"widget.js"}
+      {
+        "name": "widid.wid.js",
+        "url": "widget.js"
+      }
     ]
   },
   {
     "id": "grocery",
     "name": "Grocery",
     "icon": "grocery.png",
-    "version":"0.01",
+    "version": "0.01",
     "description": "Simple grocery list - Display a list of product and track if you already put them in your cart.",
     "tags": "tool,outdoors",
     "type": "app",
-    "custom":"grocery.html",
+    "custom": "grocery.html",
     "storage": [
-      {"name":"grocery"},
-      {"name":"grocery.app.js"},
-      {"name":"grocery.img","url":"grocery-icon.js","evaluate":true}
+      {
+        "name": "grocery"
+      },
+      {
+        "name": "grocery.app.js"
+      },
+      {
+        "name": "grocery.img",
+        "url": "grocery-icon.js",
+        "evaluate": true
+      }
     ]
   },
-  { "id": "marioclock",
+  {
+    "id": "marioclock",
     "name": "Mario Clock",
     "icon": "marioclock.png",
-    "version":"0.12",
+    "version": "0.12",
     "description": "Animated retro Mario clock, with Gameboy style 8-bit grey-scale graphics.",
     "tags": "clock,mario,retro",
     "type": "clock",
-    "allow_emulator":true,
+    "allow_emulator": true,
     "readme": "README.md",
     "storage": [
-      {"name":"marioclock.app.js","url":"marioclock-app.js"},
-      {"name":"marioclock.img","url":"marioclock-icon.js","evaluate":true}
+      {
+        "name": "marioclock.app.js",
+        "url": "marioclock-app.js"
+      },
+      {
+        "name": "marioclock.img",
+        "url": "marioclock-icon.js",
+        "evaluate": true
+      }
     ]
   },
-  { "id": "cliock",
+  {
+    "id": "cliock",
     "name": "Commandline-Clock",
-    "shortName":"CLI-Clock",
+    "shortName": "CLI-Clock",
     "icon": "app.png",
-    "version":"0.07",
+    "version": "0.07",
     "description": "Simple CLI-Styled Clock",
     "tags": "clock,cli,command,bash,shell",
-    "type":"clock",
-    "allow_emulator":true,
+    "type": "clock",
+    "allow_emulator": true,
     "storage": [
-      {"name":"cliock.app.js","url":"app.js"},
-      {"name":"cliock.img","url":"app-icon.js","evaluate":true}
+      {
+        "name": "cliock.app.js",
+        "url": "app.js"
+      },
+      {
+        "name": "cliock.img",
+        "url": "app-icon.js",
+        "evaluate": true
+      }
     ]
   },
-  { "id": "widver",
+  {
+    "id": "widver",
     "name": "Firmware Version Widget",
     "icon": "widget.png",
-    "version":"0.01",
+    "version": "0.01",
     "description": "Display the version of the installed firmware in the top widget section.",
     "tags": "widget,tool,system",
-    "type":"widget",
+    "type": "widget",
     "storage": [
-      {"name":"widver.wid.js","url":"widget.js"}
+      {
+        "name": "widver.wid.js",
+        "url": "widget.js"
+      }
     ]
   },
-  { "id": "barclock",
+  {
+    "id": "barclock",
     "name": "Bar Clock",
     "icon": "clock-bar.png",
-    "version":"0.05",
+    "version": "0.05",
     "description": "A simple digital clock showing seconds as a bar",
     "tags": "clock",
-    "type":"clock",
-    "allow_emulator":true,
+    "type": "clock",
+    "allow_emulator": true,
     "storage": [
-      {"name":"barclock.app.js","url":"clock-bar.js"},
-      {"name":"barclock.img","url":"clock-bar-icon.js","evaluate":true}
+      {
+        "name": "barclock.app.js",
+        "url": "clock-bar.js"
+      },
+      {
+        "name": "barclock.img",
+        "url": "clock-bar-icon.js",
+        "evaluate": true
+      }
     ]
   },
-  { "id": "dotclock",
+  {
+    "id": "dotclock",
     "name": "Dot Clock",
     "icon": "clock-dot.png",
-    "version":"0.01",
+    "version": "0.01",
     "description": "A Minimal Dot Analog Clock",
     "tags": "clock",
-    "type":"clock",
-    "allow_emulator":true,
+    "type": "clock",
+    "allow_emulator": true,
     "storage": [
-      {"name":"dotclock.app.js","url":"clock-dot.js"},
-      {"name":"dotclock.img","url":"clock-dot-icon.js","evaluate":true}
+      {
+        "name": "dotclock.app.js",
+        "url": "clock-dot.js"
+      },
+      {
+        "name": "dotclock.img",
+        "url": "clock-dot-icon.js",
+        "evaluate": true
+      }
     ]
   },
-  { "id": "widtbat",
+  {
+    "id": "widtbat",
     "name": "Tiny Battery Widget",
     "icon": "widget.png",
-    "version":"0.01",
+    "version": "0.01",
     "description": "Tiny blueish battery widget, vibs and changes level color when charging",
     "tags": "widget,tool,system",
-    "type":"widget",
+    "type": "widget",
     "storage": [
-      {"name":"widtbat.wid.js","url":"widget.js"}
+      {
+        "name": "widtbat.wid.js",
+        "url": "widget.js"
+      }
     ]
   },
-  { "id": "chrono",
+  {
+    "id": "chrono",
     "name": "Chrono",
-    "shortName":"Chrono",
+    "shortName": "Chrono",
     "icon": "chrono.png",
-    "version":"0.01",
+    "version": "0.01",
     "description": "Single click BTN1 to add 5 minutes. Single click BTN2 to add 30 seconds. Single click BTN3 to add 5 seconds. Tap to pause or play to timer. Double click BTN1 to reset. When timer finishes the watch vibrates.",
     "tags": "Tools",
     "storage": [
-      {"name":"chrono.app.js","url":"chrono.js"},
-      {"name":"chrono.img","url":"chrono-icon.js","evaluate":true}
+      {
+        "name": "chrono.app.js",
+        "url": "chrono.js"
+      },
+      {
+        "name": "chrono.img",
+        "url": "chrono-icon.js",
+        "evaluate": true
+      }
+    ]
+  },
+  {
+    "id": "astrocalc",
+    "name": "Astrocalc",
+    "icon": "astrocalc.png",
+    "version": "0.02",
+    "description": "Calculates interesting information on the sun and moon cycles for the current day based on your location.",
+    "tags": "app,sun,moon,cycles,tool,outdoors",
+    "allow_emulator": true,
+    "storage": [
+      {
+        "name": "astrocalc.app.js",
+        "url": "astrocalc-app.js"
+      },
+      {
+        "name": "suncalc.js",
+        "url": "suncalc.js"
+      },
+      {
+        "name": "astrocalc.img",
+        "url": "astrocalc-icon.js",
+        "evaluate": true
+      },
+      {
+        "name": "first-quarter.img",
+        "url": "first-quarter-icon.js",
+        "evaluate": true
+      },
+      {
+        "name": "last-quarter.img",
+        "url": "last-quarter-icon.js",
+        "evaluate": true
+      },
+      {
+        "name": "waning-crescent.img",
+        "url": "waning-crescent-icon.js",
+        "evaluate": true
+      },
+      {
+        "name": "waning-gibbous.img",
+        "url": "waning-gibbous-icon.js",
+        "evaluate": true
+      },
+      {
+        "name": "full.img",
+        "url": "full-icon.js",
+        "evaluate": true
+      },
+      {
+        "name": "new.img",
+        "url": "new-icon.js",
+        "evaluate": true
+      },
+      {
+        "name": "waxing-gibbous.img",
+        "url": "waxing-gibbous-icon.js",
+        "evaluate": true
+      },
+      {
+        "name": "waxing-crescent.img",
+        "url": "waxing-crescent-icon.js",
+        "evaluate": true
+      }
     ]
   },
-  { "id": "astrocalc",
-    "name": "Astrocalc",
-    "icon": "astrocalc.png",
-    "version":"0.02",
-    "description": "Calculates interesting information on the sun and moon cycles for the current day based on your location.",
-    "tags": "app,sun,moon,cycles,tool,outdoors",
-    "allow_emulator":true,
-    "storage": [
-      {"name":"astrocalc.app.js","url":"astrocalc-app.js"},
-      {"name":"suncalc.js","url":"suncalc.js"},
-      {"name":"astrocalc.img","url":"astrocalc-icon.js","evaluate":true},
-      {"name":"first-quarter.img","url":"first-quarter-icon.js","evaluate":true},
-      {"name":"last-quarter.img","url":"last-quarter-icon.js","evaluate":true},
-      {"name":"waning-crescent.img","url":"waning-crescent-icon.js","evaluate":true},
-      {"name":"waning-gibbous.img","url":"waning-gibbous-icon.js","evaluate":true},
-      {"name":"full.img","url":"full-icon.js","evaluate":true},
-      {"name":"new.img","url":"new-icon.js","evaluate":true},
-      {"name":"waxing-gibbous.img","url":"waxing-gibbous-icon.js","evaluate":true},
-      {"name":"waxing-crescent.img","url":"waxing-crescent-icon.js","evaluate":true}
-    ]
-  },
-  { "id": "widhwt",
+  {
+    "id": "widhwt",
     "name": "Hand Wash Timer",
     "icon": "widget.png",
-    "version":"0.01",
+    "version": "0.01",
     "description": "Swipe your wrist over the watch face to start your personal Bangle.js hand wash timer for 35 sec. Start washing after the short buzz and stop after the long buzz.",
     "tags": "widget,tool",
-    "type":"widget",
+    "type": "widget",
     "storage": [
-      {"name":"widhwt.wid.js","url":"widget.js"}
+      {
+        "name": "widhwt.wid.js",
+        "url": "widget.js"
+      }
     ]
   },
-  { "id": "toucher",
+  {
+    "id": "toucher",
     "name": "Touch Launcher",
-    "shortName":"Toucher",
+    "shortName": "Toucher",
     "icon": "app.png",
-    "version":"0.06",
+    "version": "0.06",
     "description": "Touch enable left to right launcher.",
     "tags": "tool,system,launcher",
-    "type":"launch",
+    "type": "launch",
     "data": [
-      {"name":"toucher.json"}
+      {
+        "name": "toucher.json"
+      }
     ],
     "storage": [
-      {"name":"toucher.app.js","url":"app.js"},
-      {"name":"toucher.settings.js","url":"settings.js"}
+      {
+        "name": "toucher.app.js",
+        "url": "app.js"
+      },
+      {
+        "name": "toucher.settings.js",
+        "url": "settings.js"
+      }
     ],
-    "sortorder" : -10
+    "sortorder": -10
   },
   {
     "id": "balltastic",
@@ -1130,9 +1920,16 @@
     "tags": "game,fun",
     "type": "app",
     "storage": [
-        {"name":"balltastic.app.js","url":"app.js"},
-        {"name":"balltastic.img","url":"app-icon.js","evaluate":true}
-      ]
+      {
+        "name": "balltastic.app.js",
+        "url": "app.js"
+      },
+      {
+        "name": "balltastic.img",
+        "url": "app-icon.js",
+        "evaluate": true
+      }
+    ]
   },
   {
     "id": "rpgdice",
@@ -1144,22 +1941,34 @@
     "type": "app",
     "allow_emulator": true,
     "storage": [
-      {"name":"rpgdice.app.js","url": "app.js"},
-      {"name":"rpgdice.img","url": "app-icon.js","evaluate":true}
+      {
+        "name": "rpgdice.app.js",
+        "url": "app.js"
+      },
+      {
+        "name": "rpgdice.img",
+        "url": "app-icon.js",
+        "evaluate": true
+      }
     ]
   },
-  { "id": "widmp",
+  {
+    "id": "widmp",
     "name": "Moon Phase Widget",
     "icon": "widget.png",
-    "version":"0.01",
+    "version": "0.01",
     "description": "Display the current moon phase in blueish for the northern hemisphere in eight phases",
     "tags": "widget,tools",
-    "type":"widget",
+    "type": "widget",
     "storage": [
-      {"name":"widmp.wid.js","url":"widget.js"}
+      {
+        "name": "widmp.wid.js",
+        "url": "widget.js"
+      }
     ]
   },
-  { "id": "minionclk",
+  {
+    "id": "minionclk",
     "name": "Minion clock",
     "icon": "minionclk.png",
     "version": "0.02",
@@ -1168,171 +1977,286 @@
     "type": "clock",
     "allow_emulator": true,
     "storage": [
-      {"name":"minionclk.app.js","url":"app.js"},
-      {"name":"minionclk.img","url":"app-icon.js","evaluate":true}
+      {
+        "name": "minionclk.app.js",
+        "url": "app.js"
+      },
+      {
+        "name": "minionclk.img",
+        "url": "app-icon.js",
+        "evaluate": true
+      }
     ]
   },
-  { "id": "openstmap",
+  {
+    "id": "openstmap",
     "name": "OpenStreetMap",
-    "shortName":"OpenStMap",
+    "shortName": "OpenStMap",
     "icon": "app.png",
-    "version":"0.02",
+    "version": "0.02",
     "description": "[BETA] Loads map tiles from OpenStreetMap onto your Bangle.js and displays a map of where you are",
     "tags": "outdoors,gps",
     "custom": "custom.html",
     "storage": [
-      {"name":"openstmap.app.js","url":"app.js"},
-      {"name":"openstmap.img","url":"app-icon.js","evaluate":true}
+      {
+        "name": "openstmap.app.js",
+        "url": "app.js"
+      },
+      {
+        "name": "openstmap.img",
+        "url": "app-icon.js",
+        "evaluate": true
+      }
     ]
   },
-  { "id": "activepedom",
+  {
+    "id": "activepedom",
     "name": "Active Pedometer",
-    "shortName":"Active Pedometer",
+    "shortName": "Active Pedometer",
     "icon": "app.png",
-    "version":"0.04",
+    "version": "0.04",
     "description": "Pedometer that filters out arm movement and displays a step goal progress. Steps are saved to a daily file and can be viewed as graph.",
     "tags": "outdoors,widget",
-     "readme": "README.md",
+    "readme": "README.md",
     "storage": [
-      {"name":"activepedom.wid.js","url":"widget.js"},
-      {"name":"activepedom.settings.js","url":"settings.js"},
-      {"name":"activepedom.img","url":"app-icon.js","evaluate":true},
-      {"name":"activepedom.app.js","url":"app.js"}
+      {
+        "name": "activepedom.wid.js",
+        "url": "widget.js"
+      },
+      {
+        "name": "activepedom.settings.js",
+        "url": "settings.js"
+      },
+      {
+        "name": "activepedom.img",
+        "url": "app-icon.js",
+        "evaluate": true
+      },
+      {
+        "name": "activepedom.app.js",
+        "url": "app.js"
+      }
     ]
   },
-  { "id": "chronowid",
+  {
+    "id": "chronowid",
     "name": "Chrono Widget",
-    "shortName":"Chrono Widget",
+    "shortName": "Chrono Widget",
     "icon": "app.png",
-    "version":"0.03",
+    "version": "0.03",
     "description": "Chronometer (timer) which runs as widget.",
     "tags": "tools,widget",
-     "readme": "README.md",
+    "readme": "README.md",
     "storage": [
-      {"name":"chronowid.wid.js","url":"widget.js"},
-      {"name":"chronowid.app.js","url":"app.js"},
-      {"name":"chronowid.img","url":"app-icon.js","evaluate":true}
+      {
+        "name": "chronowid.wid.js",
+        "url": "widget.js"
+      },
+      {
+        "name": "chronowid.app.js",
+        "url": "app.js"
+      },
+      {
+        "name": "chronowid.img",
+        "url": "app-icon.js",
+        "evaluate": true
+      }
     ]
   },
-  { "id": "tabata",
+  {
+    "id": "tabata",
     "name": "Tabata",
     "shortName": "Tabata - Control High-Intensity Interval Training",
     "icon": "tabata.png",
-    "version":"0.01",
+    "version": "0.01",
     "description": "Control high-intensity interval training (according to tabata: https://en.wikipedia.org/wiki/Tabata_method).",
     "tags": "workout,health",
     "storage": [
-      {"name":"tabata.app.js","url":"tabata.js"},
-      {"name":"tabata.img","url":"tabata-icon.js","evaluate":true}
+      {
+        "name": "tabata.app.js",
+        "url": "tabata.js"
+      },
+      {
+        "name": "tabata.img",
+        "url": "tabata-icon.js",
+        "evaluate": true
+      }
     ]
   },
-  { "id": "custom",
+  {
+    "id": "custom",
     "name": "Custom Boot Code ",
     "icon": "custom.png",
-    "version":"0.01",
+    "version": "0.01",
     "description": "Add code you want to run at boot time",
     "tags": "tool,system",
     "type": "bootloader",
-    "custom":"custom.html",
+    "custom": "custom.html",
     "storage": [
-       {"name":"custom"}
+      {
+        "name": "custom"
+      }
     ]
   },
-  { "id": "devstopwatch",
-  "name": "Dev Stopwatch",
-  "shortName":"Dev Stopwatch",
-  "icon": "app.png",
-  "version":"0.01",
-  "description": "Stopwatch with 5 laps supported (cyclically replaced)",
-  "tags": "stopwatch, chrono, timer, chronometer",
-  "allow_emulator":true,
-  "storage": [
-    {"name":"devstopwatch.app.js","url":"app.js"},
-    {"name":"devstopwatch.img","url":"app-icon.js","evaluate":true}
-  ]
+  {
+    "id": "devstopwatch",
+    "name": "Dev Stopwatch",
+    "shortName": "Dev Stopwatch",
+    "icon": "app.png",
+    "version": "0.01",
+    "description": "Stopwatch with 5 laps supported (cyclically replaced)",
+    "tags": "stopwatch, chrono, timer, chronometer",
+    "allow_emulator": true,
+    "storage": [
+      {
+        "name": "devstopwatch.app.js",
+        "url": "app.js"
+      },
+      {
+        "name": "devstopwatch.img",
+        "url": "app-icon.js",
+        "evaluate": true
+      }
+    ]
   },
-  { "id": "batchart",
+  {
+    "id": "batchart",
     "name": "Battery Chart",
-    "shortName":"Battery Chart",
+    "shortName": "Battery Chart",
     "icon": "app.png",
-    "version":"0.09",
+    "version": "0.09",
     "readme": "README.md",
     "description": "A widget and an app for recording and visualizing battery percentage over time.",
     "tags": "app,widget,battery,time,record,chart,tool",
     "storage": [
-      {"name":"batchart.wid.js","url":"widget.js"},
-      {"name":"batchart.app.js","url":"app.js"},
-      {"name":"batchart.img","url":"app-icon.js","evaluate":true}
+      {
+        "name": "batchart.wid.js",
+        "url": "widget.js"
+      },
+      {
+        "name": "batchart.app.js",
+        "url": "app.js"
+      },
+      {
+        "name": "batchart.img",
+        "url": "app-icon.js",
+        "evaluate": true
+      }
     ]
   },
-  { "id": "nato",
+  {
+    "id": "nato",
     "name": "NATO Alphabet",
-    "shortName" : "NATOAlphabet",
+    "shortName": "NATOAlphabet",
     "icon": "nato.png",
-    "version":"0.01",
+    "version": "0.01",
     "type": "app",
     "description": "Learn the NATO Phonetic alphabet plus some numbers.",
     "tags": "app,learn,visual",
-    "allow_emulator":true,
+    "allow_emulator": true,
     "storage": [
-      {"name":"nato.app.js","url":"nato.js"},
-      {"name":"nato.img","url":"nato-icon.js","evaluate":true}
+      {
+        "name": "nato.app.js",
+        "url": "nato.js"
+      },
+      {
+        "name": "nato.img",
+        "url": "nato-icon.js",
+        "evaluate": true
+      }
     ]
   },
-  { "id": "numerals",
+  {
+    "id": "numerals",
     "name": "Numerals Clock",
     "shortName": "Numerals Clock",
     "icon": "numerals.png",
-    "version":"0.04",
+    "version": "0.04",
     "description": "A simple big numerals clock",
     "tags": "numerals,clock",
-	"type":"clock",
-    "allow_emulator":true,
+    "type": "clock",
+    "allow_emulator": true,
     "storage": [
-      {"name":"numerals.app.js","url":"numerals.app.js"},
-      {"name":"numerals.img","url":"numerals-icon.js","evaluate":true},
-      {"name":"numerals.settings.js","url":"numerals.settings.js"}
+      {
+        "name": "numerals.app.js",
+        "url": "numerals.app.js"
+      },
+      {
+        "name": "numerals.img",
+        "url": "numerals-icon.js",
+        "evaluate": true
+      },
+      {
+        "name": "numerals.settings.js",
+        "url": "numerals.settings.js"
+      }
     ],
-    "data":[
-      {"name":"numerals.json"}
+    "data": [
+      {
+        "name": "numerals.json"
+      }
     ]
   },
-  { "id": "bledetect",
+  {
+    "id": "bledetect",
     "name": "BLE Detector",
-    "shortName":"BLE Detector",
+    "shortName": "BLE Detector",
     "icon": "bledetect.png",
-    "version":"0.02",
+    "version": "0.02",
     "description": "Detect BLE devices and show some informations.",
     "tags": "app,bluetooth,tool",
     "readme": "README.md",
     "storage": [
-      {"name":"bledetect.app.js","url":"bledetect.js"},
-      {"name":"bledetect.img","url":"bledetect-icon.js","evaluate":true}
+      {
+        "name": "bledetect.app.js",
+        "url": "bledetect.js"
+      },
+      {
+        "name": "bledetect.img",
+        "url": "bledetect-icon.js",
+        "evaluate": true
+      }
     ]
   },
-  { "id": "snake",
+  {
+    "id": "snake",
     "name": "Snake",
-    "shortName":"Snake",
+    "shortName": "Snake",
     "icon": "snake.png",
-    "version":"0.02",
+    "version": "0.02",
     "description": "The classic snake game. Eat apples and don't bite your tail.",
     "tags": "game,fun",
     "readme": "README.md",
     "storage": [
-      {"name":"snake.app.js","url":"snake.js"},
-      {"name":"snake.img","url":"snake-icon.js","evaluate":true}
+      {
+        "name": "snake.app.js",
+        "url": "snake.js"
+      },
+      {
+        "name": "snake.img",
+        "url": "snake-icon.js",
+        "evaluate": true
+      }
     ]
   },
-    { "id": "calculator",
+  {
+    "id": "calculator",
     "name": "Calculator",
-    "shortName":"Calculator",
+    "shortName": "Calculator",
     "icon": "calculator.png",
-    "version":"0.02",
+    "version": "0.02",
     "description": "Basic calculator reminiscent of MacOs's one. Handy for small calculus.",
     "tags": "app,tool",
     "storage": [
-      {"name":"calculator.app.js","url":"app.js"},
-      {"name":"calculator.img","url":"calculator-icon.js","evaluate":true}
+      {
+        "name": "calculator.app.js",
+        "url": "app.js"
+      },
+      {
+        "name": "calculator.img",
+        "url": "calculator-icon.js",
+        "evaluate": true
+      }
     ]
   },
   {
@@ -1361,7 +2285,7 @@
     "id": "buffgym",
     "name": "BuffGym",
     "icon": "buffgym.png",
-    "version":"0.02",
+    "version": "0.02",
     "description": "BuffGym is the famous 5x5 workout program for the BangleJS",
     "tags": "tool,outdoors,gym,exercise",
     "type": "app",
@@ -1369,14 +2293,39 @@
     "allow_emulator": false,
     "readme": "README.md",
     "storage": [
-      {"name":"buffgym.app.js", "url": "buffgym.app.js"},
-      {"name":"buffgym-set.js","url":"buffgym-set.js"},
-      {"name":"buffgym-exercise.js","url":"buffgym-exercise.js"},
-      {"name":"buffgym-workout.js","url":"buffgym-workout.js"},
-      {"name":"buffgym-workout-a.json","url":"buffgym-workout-a.json"},
-      {"name":"buffgym-workout-b.json","url":"buffgym-workout-b.json"},
-      {"name":"buffgym-workout-index.json","url":"buffgym-workout-index.json"},
-      {"name":"buffgym.img","url":"buffgym-icon.js","evaluate":true}
+      {
+        "name": "buffgym.app.js",
+        "url": "buffgym.app.js"
+      },
+      {
+        "name": "buffgym-set.js",
+        "url": "buffgym-set.js"
+      },
+      {
+        "name": "buffgym-exercise.js",
+        "url": "buffgym-exercise.js"
+      },
+      {
+        "name": "buffgym-workout.js",
+        "url": "buffgym-workout.js"
+      },
+      {
+        "name": "buffgym-workout-a.json",
+        "url": "buffgym-workout-a.json"
+      },
+      {
+        "name": "buffgym-workout-b.json",
+        "url": "buffgym-workout-b.json"
+      },
+      {
+        "name": "buffgym-workout-index.json",
+        "url": "buffgym-workout-index.json"
+      },
+      {
+        "name": "buffgym.img",
+        "url": "buffgym-icon.js",
+        "evaluate": true
+      }
     ]
   },
   {
@@ -1421,71 +2370,108 @@
       }
     ]
   },
-  { "id": "blackjack",
+  {
+    "id": "blackjack",
     "name": "Black Jack game",
-    "shortName":"Black Jack game",
+    "shortName": "Black Jack game",
     "icon": "blackjack.png",
-    "version":"0.01",
+    "version": "0.01",
     "description": "Simple implementation of card game Black Jack",
     "tags": "game",
-    "allow_emulator":true,
+    "allow_emulator": true,
     "storage": [
-      {"name":"blackjack.app.js","url":"blackjack.app.js"},
-      {"name":"blackjack.img","url":"blackjack-icon.js","evaluate":true}
+      {
+        "name": "blackjack.app.js",
+        "url": "blackjack.app.js"
+      },
+      {
+        "name": "blackjack.img",
+        "url": "blackjack-icon.js",
+        "evaluate": true
+      }
     ]
   },
-  { "id": "hidcam",
+  {
+    "id": "hidcam",
     "name": "Camera shutter",
-    "shortName":"Cam shutter",
+    "shortName": "Cam shutter",
     "icon": "app.png",
-    "version":"0.03",
+    "version": "0.03",
     "description": "Enable HID, connect to your phone, start your camera and trigger the shot on your Bangle",
     "readme": "README.md",
     "tags": "bluetooth,tool",
     "storage": [
-        {"name":"hidcam.app.js","url":"app.js"},
-        {"name":"hidcam.img","url":"app-icon.js","evaluate":true}
+      {
+        "name": "hidcam.app.js",
+        "url": "app.js"
+      },
+      {
+        "name": "hidcam.img",
+        "url": "app-icon.js",
+        "evaluate": true
+      }
     ]
   },
   {
     "id": "rclock",
     "name": "Round clock with seconds,  minutes and date",
-    "shortName":"Round Clock",
+    "shortName": "Round Clock",
     "icon": "app.png",
-    "version":"0.01",
+    "version": "0.01",
     "description": "Designed round clock with ticks for minutes and seconds",
     "tags": "clock",
     "type": "clock",
     "storage": [
-      {"name":"rclock.app.js","url":"rclock.app.js"},
-      {"name":"rclock.img","url":"app-icon.js","evaluate":true}
+      {
+        "name": "rclock.app.js",
+        "url": "rclock.app.js"
+      },
+      {
+        "name": "rclock.img",
+        "url": "app-icon.js",
+        "evaluate": true
+      }
     ]
   },
-  { "id": "hamloc",
+  {
+    "id": "hamloc",
     "name": "QTH Locator / Maidenhead Locator System",
     "shortName": "QTH Locator",
     "icon": "app.png",
-    "version":"0.01",
+    "version": "0.01",
     "description": "Convert your current GPS location to the Maidenhead locator system used by HAM amateur radio operators",
     "tags": "tool,outdoors,gps",
     "storage": [
-      {"name":"hamloc.app.js","url":"app.js"},
-      {"name":"hamloc.img","url":"app-icon.js","evaluate":true}
+      {
+        "name": "hamloc.app.js",
+        "url": "app.js"
+      },
+      {
+        "name": "hamloc.img",
+        "url": "app-icon.js",
+        "evaluate": true
+      }
     ]
   },
-  { "id": "osmpoi",
+  {
+    "id": "osmpoi",
     "name": "POI Compass",
     "icon": "app.png",
-    "version":"0.02",
+    "version": "0.02",
     "description": "Uploads all the points of interest in an area onto your watch, same as Beer Compass with more p.o.i.",
     "tags": "tool,outdoors,gps",
     "custom": "osmpoi.html",
     "storage": [
-      {"name":"osmpoi.app.js"},
-      {"name":"osmpoi.img"}
+      {
+        "name": "osmpoi.app.js"
+      },
+      {
+        "name": "osmpoi.img"
+      }
     ]
   },
-  { "id": "pong",
+  {
+    "id": "pong",
     "name": "Pong",
     "shortName": "Pong",
     "icon": "pong.png",
@@ -1496,11 +2482,19 @@
     "allow_emulator": true,
     "readme": "README.md",
     "storage": [
-      {"name":"pong.app.js","url":"app.js"},
-      {"name":"pong.img","url":"app-icon.js","evaluate":true}
+      {
+        "name": "pong.app.js",
+        "url": "app.js"
+      },
+      {
+        "name": "pong.img",
+        "url": "app-icon.js",
+        "evaluate": true
+      }
     ]
   },
-  { "id": "ballmaze",
+  {
+    "id": "ballmaze",
     "name": "Ball Maze",
     "icon": "icon.png",
     "version": "0.01",
@@ -1509,11 +2503,20 @@
     "tags": "game",
     "type": "app",
     "storage": [
-      {"name": "ballmaze.app.js","url":"app.js"},
-      {"name": "ballmaze.img","url":"icon.js","evaluate": true}
+      {
+        "name": "ballmaze.app.js",
+        "url": "app.js"
+      },
+      {
+        "name": "ballmaze.img",
+        "url": "icon.js",
+        "evaluate": true
+      }
     ],
     "data": [
-      {"name": "ballmaze.json"}
+      {
+        "name": "ballmaze.json"
+      }
     ]
   },
   {
@@ -1537,16 +2540,45 @@
       }
     ]
   },
-  { "id": "hidjoystick",
+  {
+    "id": "hidjoystick",
     "name": "Bluetooth Joystick",
     "shortName": "Joystick",
     "icon": "app.png",
-    "version":"0.01",
+    "version": "0.01",
     "description": "Emulates a 2 axis/5 button Joystick using the accelerometer as stick input and buttons 1-3, touch left as button 4 and touch right as button 5.",
     "tags": "bluetooth",
     "storage": [
-      {"name":"hidjoystick.app.js","url":"app.js"},
-      {"name":"hidjoystick.img","url":"app-icon.js","evaluate":true}
+      {
+        "name": "hidjoystick.app.js",
+        "url": "app.js"
+      },
+      {
+        "name": "hidjoystick.img",
+        "url": "app-icon.js",
+        "evaluate": true
+      }
+    ]
+  },
+  {
+    "id": "timer",
+    "name": "My Timer App",
+    "shortName": "My Timer",
+    "icon": "timer.png",
+    "version": "0.01",
+    "description": "This is a description of my awesome timer app",
+    "allow_emulator": true,
+    "tags": "tool",
+    "storage": [
+      {
+        "name": "timer.app.js",
+        "url": "timer.app.js"
+      },
+      {
+        "name": "timer.img",
+        "url": "timer-icon.js",
+        "evaluate": true
+      }
     ]
   }
-]
+]
\ No newline at end of file
diff --git a/apps/timer/ChangeLog b/apps/timer/ChangeLog
new file mode 100644
index 0000000000..3dfc4c8696
--- /dev/null
+++ b/apps/timer/ChangeLog
@@ -0,0 +1 @@
+0.01: initial commit
\ No newline at end of file
diff --git a/apps/timer/timer-icon.js b/apps/timer/timer-icon.js
new file mode 100644
index 0000000000..b760044e2c
--- /dev/null
+++ b/apps/timer/timer-icon.js
@@ -0,0 +1,5 @@
+require('heatshrink').decompress(
+  atob(
+    'mEwxH+AClhCyoAYsIwuF4IwtF4Qxqw2GF4mG1YsqAAeF1eyAAIteFhAvHGLZbKR4guEGDItGwooBAweH6/X6wwGGKpVHE4PXGgWsAwQACGDIuFFoYvCw3WFwpjIFyuG2QkFRYQAJFwerwwvTwwmLGBeHDYQuoNwQcDFxlbCIWFRgwAJlb0HJohePdQoAKq0AlYJG1YfDRr+sgEAL4wABwxgNLy1WBZBgDF5uFLzYABwqQMBgWHdiBeKSByODJZReHBxaQMF4eyLznX2QvPLqBeM6/WcQYvZldbrYvN64jDF7rRNF7qPDGBqPPd54xDGBTvQPpowQ1YvLGAeHF54wDlYMIwwvPwovQGAIuJ6+FdxSQF1YwRABKONF4mGF7aONMEBeDRxQvFsOyFy+yP4gvL/1bSLXWRp7CdFwgvUCgKSS2QuUGAz0RdQguSGA+G1gtMLgguUeYoACwuH1aWE2QsBwpDGFyhiIAB2GFzAwUFrQxRLbYzOworBFkgA/AH4AuA=='
+  )
+);
diff --git a/apps/timer/timer.app.js b/apps/timer/timer.app.js
new file mode 100644
index 0000000000..c5ad76d0fe
--- /dev/null
+++ b/apps/timer/timer.app.js
@@ -0,0 +1,46 @@
+var counter = 31;
+var interval;
+
+function outOfTime() {
+  if (interval) {
+    return;
+  }
+
+  E.showMessage('Out of Time', 'My Timer');
+  Bangle.buzz();
+  Bangle.beep(200, 4000)
+    .then(() => new Promise((resolve) => setTimeout(resolve, 200)))
+    .then(() => Bangle.beep(200, 3000));
+  setTimeout(outOfTime, 10000);
+}
+
+function countDown() {
+  counter--;
+
+  if (counter <= 0) {
+    clearInterval(interval);
+    interval = undefined;
+    setWatch(startTimer, BTN2);
+    outOfTime();
+    return;
+  }
+
+  g.clear();
+
+  g.setFontAlign(0, 0);
+  g.setFont('6x8', 8);
+
+  g.drawString(counter, g.getWidth() / 2, g.getHeight() / 2);
+
+  g.flip();
+}
+
+function startTimer() {
+  counter = 31;
+  countDown();
+  if (!interval) {
+    interval = setInterval(countDown, 1000);
+  }
+}
+
+startTimer();
diff --git a/apps/timer/timer.png b/apps/timer/timer.png
new file mode 100644
index 0000000000000000000000000000000000000000..cd9524948a567971a1dc493bbb1c29888c995634
GIT binary patch
literal 2140
zcmV-i2&4CjP)<h;3K|Lk000e1NJLTq001xm001xu1^@s6R|5Hm00006VoOIv0RI60
z0RN!9r;`8x2oXs{K~!jg?OAP5ROc0b?%unfF3T<~upl4^5{MBY5R?>6&{%64Q$@gr
z#x&EJV#m~WD(Msx&~+SPOr6Z6Gc;2s(@rBr-P&p=D+y+xYIFjIs0C6&OsQZLEg)aZ
zE_Xlf+aH1T-rc+G2k_75-#Pa==RMEvd*6?9fki;o2OHjhz4^OK79+POB#V@Hm(uR+
zs6O}Hszu80#$pKo0n!P_wO5-9%NJ`5U=an(KuHMohsB&y)IuaNnM|}JrEAx;eX`VM
zw`AU%=v(T^2~$L{1*tnO8N!oWDUNGRj?C|%D2ki!*z*!#`ofqsK0flhp~-=#t@cUU
zAD@v(k(c~^q{ZX`AOoNz#~Bx0mlTyd7-|h62{_qxIAwg|-s!ueH?v&C8E~9XfE&{Q
z>S>AmV6rZIEZACt7SPa9dF;Q#U;K)7Oa=A+Xq8cT=CLy9R589N_bEd5r0Dbi9!%bV
z1(cXd=;z|1KfgWNvs&!Al$IkYaut#zvv9uWJ;Afp@f)!@V>bv~usJ4Rb&P={E?+~v
zlM*pdK~beX2|)`m{_|Od%OYtcz;@4PN~s0~DLb$xsR(jL1pufvZ*+@#e&rtICcYqu
z;RuIGb_k=>ci`e2A|sMB^u%;oa&qCczuFjogc4H;?X--X0I-ekrzH&5B>eyz(_V#a
zrf@!@)QQ-ca{w`6$zIPSlmy|57=+377@Ho%nC&hI2#-N+cWD%jgqTYF{S$r#q$?l1
zO+1QM$uua<sX|I*j%ZAF!e+ei#4jMD6?5j6P&6Wx@lZ*_anEv7@Nax|zhiq#PfrJc
z?74ExIfbgsg+(CL-}t`huq3>aSBr3E^qj>73n#~7aIzPy%Zh9LAEWEe1pvT`n5T~Y
zIPd7MeZ~0{P-!mEF+}zy0C%Noxeh-o`2B(xKMN<v;!NjT==|n_+oxcba2ZQ;R_w?$
z_KC&#TnZUZb_l%U8Hp4x<sO<>@gpN6*t&HqE?&GSKBh#Dyk#$fmOPx<)6OZ$gUR93
zzH*8Rc;lmWv7qo%zHfbM84`6XL#uoSH8nLbo6R_K<cLqsGTmwvq?8DJ-;92hZMtsE
z661>skT|8U0dT*8YIy{{v%Ex%8Zi3%`%za{2a2LlTU$FPw=nHhgefB3wu?A1$&S4v
zTC1nSXf#SduuG6|#mkT}%FrsG!NG$E!LlrN?%au-9P!m_7Bt0RZPJSZ-~I7hPn(Fz
z>%8S9z>#w)7eL~yEoW57O4uB7;Q-Lx-HnEZ21un+96o$FpqMpDMS^A6YM)?S9o=P~
zJh3UXfp4TmukpK{`@{bI`{8oAP+ne+)YQ~~V&sep@w#+@&*rlH(39sSKmsb4Z!g!+
zxsUk8<;$00Hk+YVt5H=|6;$kUz3{!Yvg4Va94`R`<T1W&(4+)4s3$5bD**ue_U(hg
zU<fKUUi-MfwmB?%Pmb6Wisc&-s#p<<e>62UL9f^2%9Sh7Xf&v(s0cboxI%dJw%I4;
zo*c2WP#E8kGof8&ckkYfAJwLV5Q0DM`xi7CP0%?s%1D9j<Q!fnhef{B6A%JetyY{n
zcP{8?iV~J5cJ2`qFv&Mq=Ty)G13-O!JxmAs@a}8vAcUZ(s0e1WIj9^qc0yn?wA`x+
zASOU?!G2&3?Y_Nb%N7g{4x+283kHJ$cDo(L#l>i9Y6>{V(A0pymNP25C&x<w1*(^C
z-<$Y4@Tx_Sk&%Jc)>aq{2CyuP;^JbowzdWodv{z=3RJSNVNZ^i01l*sZ}$yf53XVn
zWMpKZxw#p7y&g834M&e24JhtE9%HNI;hmlwu_+|@d3yiX4!g_m)zmLCGc(cB(t=H!
zHsRE%Q-1l=4hsfGx&=NZtv>0=^AaHae0>K1_vEuXZMc5BIi#XJk(rr^^XJb)tJV7D
zUL80K2lsHwt7ICd!BTj_lP7i><v`&$-*@5Waj;HnXjO**2gl;mzOw>fv^ue^u&~gp
zizd1caEzl4-*(IZ02X!>SNi_C&~^I6$35@C!j8Ianqr_)MeG&hiVCRt-Y0_;sCvHd
z($|gXf6y&PUr_W8wW0miKLoxwZR(BEY~u|vzR#VQre)Ot<=zBboD+>5)ff$NUkC)l
zQ@3&Ydaa;qr(l+FdR5#uUok!f7@z-e0u=Xi;9<wfYM(&EXK!N6c7LI2c4NpgfIqkY
z2Ge$n+ed*yV&oHV?Rc`P-&fq6E%8f@w|dr>CF=mJo%K!G$I*GG1qr&xp;h{9)CPs#
zp*FmKbw8$f^Bw>aBQmc2B>(Nwxnlhu=6Y?B6%=rW@0+rZ;ZJR^<KoS~z{LgLUiXB9
zWAWj?>(Kbw0k96?nJY$<d{?WD%J-Kepyux0rY&-<i#;LM+|{WJSeNn=RxjNc@Wp@H
zVZqgbv-q^{tYEd_7q5#;$ar~$aY7_Kcmcq-P2P0H$T33Umtt`;T7k5fwOAgRh1l>^
z=#;TgNYx-9u(D$qw%*2_u`kg#d;|R>U4l*OVKEdEBGRvEwNd${D~;ZS`3RWBn;&f0
zP66)%SeO@J1`1{gw@kn4x4WLIsSGAAq)$x7GtX*W41I`zl!Mm*3k5XAAWoZlL$8Y4
zHrHz73-kKO_r^!-VrhqT4*^~Qua^`ER5Fb-TAkRYQAO<awMhkn1^LWsG#VwYCqKy{
z60!jVxd74t!~;-EC|btQQlgNCu_~#0SS1hdRMP5`220@yv9rx1Ji;RchyMd1HLd>W
SY&F&Z0000<MNUMnLSTZTA`NW-

literal 0
HcmV?d00001


From 80ab3c9d3eb195611ec0b421af8b4c6599663e47 Mon Sep 17 00:00:00 2001
From: flashback2k14 <yeahdev@gmail.com>
Date: Thu, 30 Apr 2020 13:27:43 +0200
Subject: [PATCH 02/38] add demo readme

---
 apps.json            | 1 +
 apps/timer/ChangeLog | 2 +-
 apps/timer/README.md | 3 +++
 3 files changed, 5 insertions(+), 1 deletion(-)
 create mode 100644 apps/timer/README.md

diff --git a/apps.json b/apps.json
index 4f74eb0c31..acad966bce 100644
--- a/apps.json
+++ b/apps.json
@@ -2569,6 +2569,7 @@
     "description": "This is a description of my awesome timer app",
     "allow_emulator": true,
     "tags": "tool",
+    "readme": "README.md",
     "storage": [
       {
         "name": "timer.app.js",
diff --git a/apps/timer/ChangeLog b/apps/timer/ChangeLog
index 3dfc4c8696..2286a7f70e 100644
--- a/apps/timer/ChangeLog
+++ b/apps/timer/ChangeLog
@@ -1 +1 @@
-0.01: initial commit
\ No newline at end of file
+0.01: New App!
\ No newline at end of file
diff --git a/apps/timer/README.md b/apps/timer/README.md
new file mode 100644
index 0000000000..fadb1d8e4e
--- /dev/null
+++ b/apps/timer/README.md
@@ -0,0 +1,3 @@
+# My Timer
+
+- install => profit!

From 2f921394ec18c54869b87595f9f4f698fcceeccc Mon Sep 17 00:00:00 2001
From: flashback2k14 <yeahdev@gmail.com>
Date: Thu, 30 Apr 2020 14:00:33 +0200
Subject: [PATCH 03/38] add timer custom test

---
 apps.json                    |  3 ++-
 apps/timer/ChangeLog         |  3 ++-
 apps/timer/timer-custom.html | 39 ++++++++++++++++++++++++++++++++++++
 apps/timer/timer.app.js      |  8 +++++++-
 4 files changed, 50 insertions(+), 3 deletions(-)
 create mode 100644 apps/timer/timer-custom.html

diff --git a/apps.json b/apps.json
index acad966bce..08035724ff 100644
--- a/apps.json
+++ b/apps.json
@@ -2565,11 +2565,12 @@
     "name": "My Timer App",
     "shortName": "My Timer",
     "icon": "timer.png",
-    "version": "0.01",
+    "version": "0.02",
     "description": "This is a description of my awesome timer app",
     "allow_emulator": true,
     "tags": "tool",
     "readme": "README.md",
+    "custom": "timer-custom.html",
     "storage": [
       {
         "name": "timer.app.js",
diff --git a/apps/timer/ChangeLog b/apps/timer/ChangeLog
index 2286a7f70e..012570d763 100644
--- a/apps/timer/ChangeLog
+++ b/apps/timer/ChangeLog
@@ -1 +1,2 @@
-0.01: New App!
\ No newline at end of file
+0.01: New App!
+0.02: add custom html
\ No newline at end of file
diff --git a/apps/timer/timer-custom.html b/apps/timer/timer-custom.html
new file mode 100644
index 0000000000..9c67271191
--- /dev/null
+++ b/apps/timer/timer-custom.html
@@ -0,0 +1,39 @@
+<html>
+
+<head>
+  <link rel="stylesheet" href="../../css/spectre.min.css">
+</head>
+
+<body>
+  <p>
+    <label for="txtTest1"></label> <input id="txtTest1" type="text">
+    <label for="txtTest2"></label> <input id="txtTest2" type="text">
+    <button id="upload" class="btn btn-primary">Upload</button>
+  </p>
+  <script src="../../lib/customize.js"></script>
+  <script>
+    const txtTest1 = document.getElementById("txtTest1");
+    const txtTest2 = document.getElementById("txtTest2");
+    document.getElementById("upload").addEventListener("click", function () {
+      require("Storage").writeJSON("timer.data", { txtTest1, txtTest2 });
+
+      sendCustomizedApp({
+        id: "timer",
+        storage: [
+          {
+            name: "timer.app.js",
+            url: "timer.app.js"
+          },
+          {
+            name: "timer.img",
+            url: "timer-icon.js",
+            evaluate: true
+          }
+        ]
+      }
+      });
+    });
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/apps/timer/timer.app.js b/apps/timer/timer.app.js
index c5ad76d0fe..8473047089 100644
--- a/apps/timer/timer.app.js
+++ b/apps/timer/timer.app.js
@@ -6,7 +6,13 @@ function outOfTime() {
     return;
   }
 
-  E.showMessage('Out of Time', 'My Timer');
+  const data = require('Storage').readJSON('timer.data', true);
+  if (data) {
+    E.showMessage('Out of Time', `My Timer: ${data.txtTest1}, ${data.txtTest2}`);
+  } else {
+    E.showMessage('Out of Time', 'My Timer');
+  }
+
   Bangle.buzz();
   Bangle.beep(200, 4000)
     .then(() => new Promise((resolve) => setTimeout(resolve, 200)))

From 0516051295845a50906d650fd4003bc408f0822c Mon Sep 17 00:00:00 2001
From: flashback2k14 <yeahdev@gmail.com>
Date: Thu, 30 Apr 2020 14:02:29 +0200
Subject: [PATCH 04/38] bugfix custom page

---
 apps/timer/timer-custom.html | 1 -
 1 file changed, 1 deletion(-)

diff --git a/apps/timer/timer-custom.html b/apps/timer/timer-custom.html
index 9c67271191..8a5e6119ee 100644
--- a/apps/timer/timer-custom.html
+++ b/apps/timer/timer-custom.html
@@ -30,7 +30,6 @@
             evaluate: true
           }
         ]
-      }
       });
     });
   </script>

From 8a00aced80a86dda872a2e28b1ce44def3fdc4dc Mon Sep 17 00:00:00 2001
From: flashback2k14 <yeahdev@gmail.com>
Date: Thu, 30 Apr 2020 14:15:33 +0200
Subject: [PATCH 05/38] trying to write to storage for custom page

---
 apps/timer/timer-custom.html | 34 ++++++++-------
 lib/interface.js             | 85 ++++++++++++++++++++----------------
 2 files changed, 65 insertions(+), 54 deletions(-)

diff --git a/apps/timer/timer-custom.html b/apps/timer/timer-custom.html
index 8a5e6119ee..8f4e2072c3 100644
--- a/apps/timer/timer-custom.html
+++ b/apps/timer/timer-custom.html
@@ -11,26 +11,28 @@
     <button id="upload" class="btn btn-primary">Upload</button>
   </p>
   <script src="../../lib/customize.js"></script>
+  <script src="../../lib/interface.js"></script>
   <script>
     const txtTest1 = document.getElementById("txtTest1");
     const txtTest2 = document.getElementById("txtTest2");
     document.getElementById("upload").addEventListener("click", function () {
-      require("Storage").writeJSON("timer.data", { txtTest1, txtTest2 });
-
-      sendCustomizedApp({
-        id: "timer",
-        storage: [
-          {
-            name: "timer.app.js",
-            url: "timer.app.js"
-          },
-          {
-            name: "timer.img",
-            url: "timer-icon.js",
-            evaluate: true
-          }
-        ]
-      });
+      Util.writeJsonToStorageFile("timer.data", { txtTest1, txtTest2 }, () => {
+        sendCustomizedApp({
+          id: "timer",
+          storage: [
+            {
+              name: "timer.app.js",
+              url: "timer.app.js"
+            },
+            {
+              name: "timer.img",
+              url: "timer-icon.js",
+              evaluate: true
+            }
+          ]
+        });
+        alert("successfully customized!");
+      })
     });
   </script>
 </body>
diff --git a/lib/interface.js b/lib/interface.js
index 7e8be4fd95..02a0218b45 100644
--- a/lib/interface.js
+++ b/lib/interface.js
@@ -19,37 +19,42 @@ Util.eraseStorageFile(filename,callback)
 Util.showModal(title)
 Util.hideModal()
 */
-var __id = 0, __idlookup = [];
+var __id = 0,
+  __idlookup = [];
 var Puck = {
-  eval : function(data,callback) {
+  eval: function (data, callback) {
     __id++;
     __idlookup[__id] = callback;
-    window.postMessage({type:"eval",data:data,id:__id});
-  },write : function(data,callback) {
+    window.postMessage({ type: 'eval', data: data, id: __id });
+  },
+  write: function (data, callback) {
     __id++;
     __idlookup[__id] = callback;
-    window.postMessage({type:"write",data:data,id:__id});
-  }
+    window.postMessage({ type: 'write', data: data, id: __id });
+  },
 };
 
 var Util = {
-  readStorageFile : function(filename,callback) {
+  readStorageFile: function (filename, callback) {
     __id++;
     __idlookup[__id] = callback;
-    window.postMessage({type:"readstoragefile",data:filename,id:__id});
+    window.postMessage({ type: 'readstoragefile', data: filename, id: __id });
+  },
+  eraseStorageFile: function (filename, callback) {
+    Puck.write(`\x10require("Storage").open(${JSON.stringify(filename)},"r").erase()\n`, callback);
   },
-  eraseStorageFile : function(filename,callback) {
-    Puck.write(`\x10require("Storage").open(${JSON.stringify(filename)},"r").erase()\n`,callback);
+  eraseStorage: function (filename, callback) {
+    Puck.write(`\x10require("Storage").erase(${JSON.stringify(filename)})\n`, callback);
   },
-  eraseStorage : function(filename,callback) {
-    Puck.write(`\x10require("Storage").erase(${JSON.stringify(filename)})\n`,callback);
+  writeJsonToStorageFile: function (filename, data, callback) {
+    Puck.write(`\x10require("Storage").writeJSON(${JSON.stringify(filename)}, ${data});\n`, callback);
   },
-  showModal : function(title) {
+  showModal: function (title) {
     if (!Util.domModal) {
       Util.domModal = document.createElement('div');
-      Util.domModal.id = "status-modal";
-      Util.domModal.classList.add("modal");
-      Util.domModal.classList.add("active");
+      Util.domModal.id = 'status-modal';
+      Util.domModal.classList.add('modal');
+      Util.domModal.classList.add('active');
       Util.domModal.innerHTML = `<div class="modal-overlay"></div>
       <div class="modal-container">
         <div class="modal-header">
@@ -63,34 +68,38 @@ var Util = {
       </div>`;
       document.body.appendChild(Util.domModal);
     }
-    Util.domModal.querySelector(".content").innerHTML = title;
-    Util.domModal.classList.add("active");
+    Util.domModal.querySelector('.content').innerHTML = title;
+    Util.domModal.classList.add('active');
   },
-  hideModal : function() {
+  hideModal: function () {
     if (!Util.domModal) return;
-    Util.domModal.classList.remove("active");
+    Util.domModal.classList.remove('active');
   },
-  saveCSV : function(filename, csvData) {
-    var a = document.createElement("a"),
-        file = new Blob([csvData], {type: "Comma-separated value file"});
+  saveCSV: function (filename, csvData) {
+    var a = document.createElement('a'),
+      file = new Blob([csvData], { type: 'Comma-separated value file' });
     var url = URL.createObjectURL(file);
     a.href = url;
-    a.download = filename+".csv";
+    a.download = filename + '.csv';
     document.body.appendChild(a);
     a.click();
-    setTimeout(function() {
-        document.body.removeChild(a);
-        window.URL.revokeObjectURL(url);
+    setTimeout(function () {
+      document.body.removeChild(a);
+      window.URL.revokeObjectURL(url);
     }, 0);
-  }
+  },
 };
-window.addEventListener("message", function(event) {
-  var msg = event.data;
-  if (msg.type=="init") {
-    onInit();
-  } else if (msg.type=="evalrsp" || msg.type=="writersp"|| msg.type=="readstoragefilersp") {
-    var cb = __idlookup[msg.id];
-    delete __idlookup[msg.id];
-    cb(msg.data);
-  }
-}, false);
+window.addEventListener(
+  'message',
+  function (event) {
+    var msg = event.data;
+    if (msg.type == 'init') {
+      onInit();
+    } else if (msg.type == 'evalrsp' || msg.type == 'writersp' || msg.type == 'readstoragefilersp') {
+      var cb = __idlookup[msg.id];
+      delete __idlookup[msg.id];
+      cb(msg.data);
+    }
+  },
+  false
+);

From dafeaf3325af22edd4291dc568ad1c0592aaed27 Mon Sep 17 00:00:00 2001
From: flashback2k14 <yeahdev@gmail.com>
Date: Thu, 30 Apr 2020 14:29:40 +0200
Subject: [PATCH 06/38] trying to write to storage for custom page #2

---
 apps.json                    |  2 +-
 apps/timer/ChangeLog         |  3 ++-
 apps/timer/timer-custom.html | 39 ++++++++++++++++++++----------------
 apps/timer/timer.app.js      |  2 +-
 4 files changed, 26 insertions(+), 20 deletions(-)

diff --git a/apps.json b/apps.json
index 08035724ff..539ad67ee4 100644
--- a/apps.json
+++ b/apps.json
@@ -2565,7 +2565,7 @@
     "name": "My Timer App",
     "shortName": "My Timer",
     "icon": "timer.png",
-    "version": "0.02",
+    "version": "0.03",
     "description": "This is a description of my awesome timer app",
     "allow_emulator": true,
     "tags": "tool",
diff --git a/apps/timer/ChangeLog b/apps/timer/ChangeLog
index 012570d763..37268adfca 100644
--- a/apps/timer/ChangeLog
+++ b/apps/timer/ChangeLog
@@ -1,2 +1,3 @@
 0.01: New App!
-0.02: add custom html
\ No newline at end of file
+0.02: add custom html
+0.03: trying simplify custom app
\ No newline at end of file
diff --git a/apps/timer/timer-custom.html b/apps/timer/timer-custom.html
index 8f4e2072c3..f133a92b15 100644
--- a/apps/timer/timer-custom.html
+++ b/apps/timer/timer-custom.html
@@ -8,6 +8,8 @@
   <p>
     <label for="txtTest1"></label> <input id="txtTest1" type="text">
     <label for="txtTest2"></label> <input id="txtTest2" type="text">
+    <button id="save" class="btn btn-secondary">Save</button>
+
     <button id="upload" class="btn btn-primary">Upload</button>
   </p>
   <script src="../../lib/customize.js"></script>
@@ -15,24 +17,27 @@
   <script>
     const txtTest1 = document.getElementById("txtTest1");
     const txtTest2 = document.getElementById("txtTest2");
-    document.getElementById("upload").addEventListener("click", function () {
-      Util.writeJsonToStorageFile("timer.data", { txtTest1, txtTest2 }, () => {
-        sendCustomizedApp({
-          id: "timer",
-          storage: [
-            {
-              name: "timer.app.js",
-              url: "timer.app.js"
-            },
-            {
-              name: "timer.img",
-              url: "timer-icon.js",
-              evaluate: true
-            }
-          ]
-        });
+    document.getElementById("save").addEventListener("click", () => {
+      Util.writeJsonToStorageFile("timerdata", { txtTest1, txtTest2 }, () => {
         alert("successfully customized!");
-      })
+      });
+    });
+
+    document.getElementById("upload").addEventListener("click", function () {
+      sendCustomizedApp({
+        id: "timer",
+        storage: [
+          {
+            name: "timer.app.js",
+            url: "timer.app.js"
+          },
+          {
+            name: "timer.img",
+            url: "timer-icon.js",
+            evaluate: true
+          }
+        ]
+      });
     });
   </script>
 </body>
diff --git a/apps/timer/timer.app.js b/apps/timer/timer.app.js
index 8473047089..24b66e8924 100644
--- a/apps/timer/timer.app.js
+++ b/apps/timer/timer.app.js
@@ -6,7 +6,7 @@ function outOfTime() {
     return;
   }
 
-  const data = require('Storage').readJSON('timer.data', true);
+  const data = require('Storage').readJSON('timerdata', true);
   if (data) {
     E.showMessage('Out of Time', `My Timer: ${data.txtTest1}, ${data.txtTest2}`);
   } else {

From d9afbf9c203cf000599d4884b955f4ccb5c45add Mon Sep 17 00:00:00 2001
From: flashback2k14 <yeahdev@gmail.com>
Date: Thu, 30 Apr 2020 14:35:05 +0200
Subject: [PATCH 07/38] trying to write to storage for custom page #3

---
 js/index.js      | 781 ++++++++++++++++++++++++++---------------------
 lib/customize.js |   2 +-
 2 files changed, 435 insertions(+), 348 deletions(-)

diff --git a/js/index.js b/js/index.js
index 888d665e7a..de0f42ab7e 100644
--- a/js/index.js
+++ b/js/index.js
@@ -2,17 +2,17 @@ var appJSON = []; // List of apps and info from apps.json
 var appsInstalled = []; // list of app JSON
 var files = []; // list of files on Bangle
 var DEFAULTSETTINGS = {
-  pretokenise : true,
-  favourites : ["boot","launch","setting"]
+  pretokenise: true,
+  favourites: ['boot', 'launch', 'setting'],
 };
 var SETTINGS = JSON.parse(JSON.stringify(DEFAULTSETTINGS)); // clone
 
-httpGet("apps.json").then(apps=>{
+httpGet('apps.json').then((apps) => {
   try {
     appJSON = JSON.parse(apps);
-  } catch(e) {
+  } catch (e) {
     console.log(e);
-    showToast("App List Corrupted","error");
+    showToast('App List Corrupted', 'error');
   }
   appJSON.sort(appSorter);
   refreshLibrary();
@@ -23,25 +23,28 @@ httpGet("apps.json").then(apps=>{
 function showChangeLog(appid) {
   var app = appNameToApp(appid);
   function show(contents) {
-    showPrompt(app.name+" Change Log",contents,{ok:true}).catch(()=>{});
+    showPrompt(app.name + ' Change Log', contents, { ok: true }).catch(() => {});
   }
-  httpGet(`apps/${appid}/ChangeLog`).
-  then(show).catch(()=>show("No Change Log available"));
+  httpGet(`apps/${appid}/ChangeLog`)
+    .then(show)
+    .catch(() => show('No Change Log available'));
 }
 function showReadme(appid) {
   var app = appNameToApp(appid);
   var appPath = `apps/${appid}/`;
-  var markedOptions = { baseUrl : appPath };
+  var markedOptions = { baseUrl: appPath };
   function show(contents) {
     if (!contents) return;
-    showPrompt(app.name + " Documentation", marked(contents, markedOptions), {ok: true}, false).catch(() => {});
+    showPrompt(app.name + ' Documentation', marked(contents, markedOptions), { ok: true }, false).catch(() => {});
   }
-  httpGet(appPath+app.readme).then(show).catch(()=>show("Failed to load README."));
+  httpGet(appPath + app.readme)
+    .then(show)
+    .catch(() => show('Failed to load README.'));
 }
 function handleCustomApp(appTemplate) {
   // Pops up an IFRAME that allows an app to be customised
   if (!appTemplate.custom) throw new Error("App doesn't have custom HTML");
-  return new Promise((resolve,reject) => {
+  return new Promise((resolve, reject) => {
     var modal = htmlElement(`<div class="modal active">
       <a href="#close" class="modal-overlay " aria-label="Close"></a>
       <div class="modal-container" style="height:100%">
@@ -57,37 +60,46 @@ function handleCustomApp(appTemplate) {
       </div>
     </div>`);
     document.body.append(modal);
-    htmlToArray(modal.getElementsByTagName("a")).forEach(button => {
-      button.addEventListener("click",event => {
+    htmlToArray(modal.getElementsByTagName('a')).forEach((button) => {
+      button.addEventListener('click', (event) => {
         event.preventDefault();
         modal.remove();
-        reject("Window closed");
+        reject('Window closed');
       });
     });
 
-    var iframe = modal.getElementsByTagName("iframe")[0];
-    iframe.contentWindow.addEventListener("message", function(event) {
-      var appFiles = event.data;
-      var app = {};
-      Object.keys(appTemplate).forEach(k => app[k] = appTemplate[k]);
-      Object.keys(appFiles).forEach(k => app[k] = appFiles[k]);
-      console.log("Received custom app", app);
-      modal.remove();
-      Comms.uploadApp(app).then(()=>{
-        Progress.hide({sticky:true});
-        resolve();
-      }).catch(e => {
-        Progress.hide({sticky:true});
-        reject(e);
-      });
-    }, false);
+    var iframe = modal.getElementsByTagName('iframe')[0];
+    iframe.contentWindow.addEventListener(
+      'message',
+      function (event) {
+        if (event.data.type === 'write') {
+          return;
+        }
+        var appFiles = event.data;
+        var app = {};
+        Object.keys(appTemplate).forEach((k) => (app[k] = appTemplate[k]));
+        Object.keys(appFiles).forEach((k) => (app[k] = appFiles[k]));
+        console.log('Received custom app', app);
+        modal.remove();
+        Comms.uploadApp(app)
+          .then(() => {
+            Progress.hide({ sticky: true });
+            resolve();
+          })
+          .catch((e) => {
+            Progress.hide({ sticky: true });
+            reject(e);
+          });
+      },
+      false
+    );
   });
 }
 
 function handleAppInterface(app) {
   // IFRAME interface window that can be used to get data from the app
   if (!app.interface) throw new Error("App doesn't have interface HTML");
-  return new Promise((resolve,reject) => {
+  return new Promise((resolve, reject) => {
     var modal = htmlElement(`<div class="modal active">
       <a href="#close" class="modal-overlay " aria-label="Close"></a>
       <div class="modal-container" style="height:100%">
@@ -103,45 +115,49 @@ function handleAppInterface(app) {
       </div>
     </div>`);
     document.body.append(modal);
-    htmlToArray(modal.getElementsByTagName("a")).forEach(button => {
-      button.addEventListener("click",event => {
+    htmlToArray(modal.getElementsByTagName('a')).forEach((button) => {
+      button.addEventListener('click', (event) => {
         event.preventDefault();
         modal.remove();
         //reject("Window closed");
       });
     });
-    var iframe = modal.getElementsByTagName("iframe")[0];
-    iframe.onload = function() {
+    var iframe = modal.getElementsByTagName('iframe')[0];
+    iframe.onload = function () {
       var iwin = iframe.contentWindow;
-      iwin.addEventListener("message", function(event) {
-        var msg = event.data;
-        if (msg.type=="eval") {
-          Puck.eval(msg.data, function(result) {
-            iwin.postMessage({
-              type : "evalrsp",
-              data : result,
-              id : msg.id
+      iwin.addEventListener(
+        'message',
+        function (event) {
+          var msg = event.data;
+          if (msg.type == 'eval') {
+            Puck.eval(msg.data, function (result) {
+              iwin.postMessage({
+                type: 'evalrsp',
+                data: result,
+                id: msg.id,
+              });
             });
-          });
-        } else if (msg.type=="write") {
-          Puck.write(msg.data, function(result) {
-            iwin.postMessage({
-              type : "writersp",
-              data : result,
-              id : msg.id
+          } else if (msg.type == 'write') {
+            Puck.write(msg.data, function (result) {
+              iwin.postMessage({
+                type: 'writersp',
+                data: result,
+                id: msg.id,
+              });
             });
-          });
-        } else if (msg.type=="readstoragefile") {
-          Comms.readStorageFile(msg.data/*filename*/).then(function(result) {
-            iwin.postMessage({
-              type : "readstoragefilersp",
-              data : result,
-              id : msg.id
+          } else if (msg.type == 'readstoragefile') {
+            Comms.readStorageFile(msg.data /*filename*/).then(function (result) {
+              iwin.postMessage({
+                type: 'readstoragefilersp',
+                data: result,
+                id: msg.id,
+              });
             });
-          });
-        }
-      }, false);
-      iwin.postMessage({type:"init"});
+          }
+        },
+        false
+      );
+      iwin.postMessage({ type: 'init' });
     };
     iframe.src = `apps/${app.id}/${app.interface}`;
   });
@@ -152,10 +168,10 @@ function changeAppFavourite(favourite, app) {
   if (favourite) {
     SETTINGS.favourites = SETTINGS.favourites.concat([app.id]);
   } else {
-    if ([ "boot","setting"].includes(app.id)) {
-      showToast(app.name + ' is required, can\'t remove it' , 'warning');
-    }else {
-      SETTINGS.favourites = SETTINGS.favourites.filter(e => e != app.id);
+    if (['boot', 'setting'].includes(app.id)) {
+      showToast(app.name + " is required, can't remove it", 'warning');
+    } else {
+      SETTINGS.favourites = SETTINGS.favourites.filter((e) => e != app.id);
     }
   }
   saveSettings();
@@ -164,123 +180,146 @@ function changeAppFavourite(favourite, app) {
 
 // ===========================================  Top Navigation
 function showTab(tabname) {
-  htmlToArray(document.querySelectorAll("#tab-navigate .tab-item")).forEach(tab => {
-    tab.classList.remove("active");
+  htmlToArray(document.querySelectorAll('#tab-navigate .tab-item')).forEach((tab) => {
+    tab.classList.remove('active');
   });
-  htmlToArray(document.querySelectorAll(".bangle-tab")).forEach(tab => {
-    tab.style.display = "none";
+  htmlToArray(document.querySelectorAll('.bangle-tab')).forEach((tab) => {
+    tab.style.display = 'none';
   });
-  document.getElementById("tab-"+tabname).classList.add("active");
-  document.getElementById(tabname).style.display = "inherit";
+  document.getElementById('tab-' + tabname).classList.add('active');
+  document.getElementById(tabname).style.display = 'inherit';
 }
 
 // =========================================== Library
 
-var chips = Array.from(document.querySelectorAll('.chip')).map(chip => chip.attributes.filterid.value);
+var chips = Array.from(document.querySelectorAll('.chip')).map((chip) => chip.attributes.filterid.value);
 var hash = window.location.hash ? window.location.hash.slice(1) : '';
 
 var activeFilter = !!~chips.indexOf(hash) ? hash : '';
 var currentSearch = '';
 
-function refreshFilter(){
-  var filtersContainer = document.querySelector("#librarycontainer .filter-nav");
+function refreshFilter() {
+  var filtersContainer = document.querySelector('#librarycontainer .filter-nav');
   filtersContainer.querySelector('.active').classList.remove('active');
-  if(activeFilter) filtersContainer.querySelector('.chip[filterid="'+activeFilter+'"]').classList.add('active');
+  if (activeFilter) filtersContainer.querySelector('.chip[filterid="' + activeFilter + '"]').classList.add('active');
   else filtersContainer.querySelector('.chip[filterid]').classList.add('active');
 }
 function refreshLibrary() {
-  var panelbody = document.querySelector("#librarycontainer .panel-body");
+  var panelbody = document.querySelector('#librarycontainer .panel-body');
   var visibleApps = appJSON;
   var favourites = SETTINGS.favourites;
 
   if (activeFilter) {
-    if ( activeFilter == "favourites" ) {
-      visibleApps = visibleApps.filter(app => app.id && (favourites.filter( e => e == app.id).length));
-    }else{
-      visibleApps = visibleApps.filter(app => app.tags && app.tags.split(',').includes(activeFilter));
+    if (activeFilter == 'favourites') {
+      visibleApps = visibleApps.filter((app) => app.id && favourites.filter((e) => e == app.id).length);
+    } else {
+      visibleApps = visibleApps.filter((app) => app.tags && app.tags.split(',').includes(activeFilter));
     }
   }
 
   if (currentSearch) {
-    visibleApps = visibleApps.filter(app => app.name.toLowerCase().includes(currentSearch) || app.tags.includes(currentSearch));
+    visibleApps = visibleApps.filter(
+      (app) => app.name.toLowerCase().includes(currentSearch) || app.tags.includes(currentSearch)
+    );
   }
 
-  panelbody.innerHTML = visibleApps.map((app,idx) => {
-    var appInstalled = appsInstalled.find(a=>a.id==app.id);
-    var version = getVersionInfo(app, appInstalled);
-    var versionInfo = version.text;
-    if (versionInfo) versionInfo = " <small>("+versionInfo+")</small>";
-    var readme = `<a class="c-hand" onclick="showReadme('${app.id}')">Read more...</a>`;
-    var favourite = favourites.find(e => e == app.id);
-    return `<div class="tile column col-6 col-sm-12 col-xs-12">
+  panelbody.innerHTML = visibleApps
+    .map((app, idx) => {
+      var appInstalled = appsInstalled.find((a) => a.id == app.id);
+      var version = getVersionInfo(app, appInstalled);
+      var versionInfo = version.text;
+      if (versionInfo) versionInfo = ' <small>(' + versionInfo + ')</small>';
+      var readme = `<a class="c-hand" onclick="showReadme('${app.id}')">Read more...</a>`;
+      var favourite = favourites.find((e) => e == app.id);
+      return `<div class="tile column col-6 col-sm-12 col-xs-12">
     <div class="tile-icon">
-      <figure class="avatar"><img src="apps/${app.icon?`${app.id}/${app.icon}`:"unknown.png"}" alt="${escapeHtml(app.name)}"></figure><br/>
+      <figure class="avatar"><img src="apps/${app.icon ? `${app.id}/${app.icon}` : 'unknown.png'}" alt="${escapeHtml(
+        app.name
+      )}"></figure><br/>
     </div>
     <div class="tile-content">
       <p class="tile-title text-bold">${escapeHtml(app.name)} ${versionInfo}</p>
-      <p class="tile-subtitle">${escapeHtml(app.description)}${app.readme?`<br/>${readme}`:""}</p>
-      <a href="https://github.com/espruino/BangleApps/tree/master/apps/${app.id}" target="_blank" class="link-github"><img src="img/github-icon-sml.png" alt="See the code on GitHub"/></a>
+      <p class="tile-subtitle">${escapeHtml(app.description)}${app.readme ? `<br/>${readme}` : ''}</p>
+      <a href="https://github.com/espruino/BangleApps/tree/master/apps/${
+        app.id
+      }" target="_blank" class="link-github"><img src="img/github-icon-sml.png" alt="See the code on GitHub"/></a>
     </div>
     <div class="tile-action">
-      <button class="btn btn-link btn-action btn-lg ${!app.custom?"text-error":"d-hide"}" appid="${app.id}" title="Favorite"><i class="icon"></i>${favourite?"&#x2665;":"&#x2661;"}</button>
-      <button class="btn btn-link btn-action btn-lg ${(appInstalled&&app.interface)?"":"d-hide"}" appid="${app.id}" title="Download data from app"><i class="icon icon-download"></i></button>
-      <button class="btn btn-link btn-action btn-lg ${app.allow_emulator?"":"d-hide"}" appid="${app.id}" title="Try in Emulator"><i class="icon icon-share"></i></button>
-      <button class="btn btn-link btn-action btn-lg ${version.canUpdate?"":"d-hide"}" appid="${app.id}" title="Update App"><i class="icon icon-refresh"></i></button>
-      <button class="btn btn-link btn-action btn-lg ${(!appInstalled && !app.custom)?"":"d-hide"}" appid="${app.id}" title="Upload App"><i class="icon icon-upload"></i></button>
-      <button class="btn btn-link btn-action btn-lg ${appInstalled?"":"d-hide"}" appid="${app.id}" title="Remove App"><i class="icon icon-delete"></i></button>
-      <button class="btn btn-link btn-action btn-lg ${app.custom?"":"d-hide"}" appid="${app.id}" title="Customise and Upload App"><i class="icon icon-menu"></i></button>
+      <button class="btn btn-link btn-action btn-lg ${!app.custom ? 'text-error' : 'd-hide'}" appid="${
+        app.id
+      }" title="Favorite"><i class="icon"></i>${favourite ? '&#x2665;' : '&#x2661;'}</button>
+      <button class="btn btn-link btn-action btn-lg ${appInstalled && app.interface ? '' : 'd-hide'}" appid="${
+        app.id
+      }" title="Download data from app"><i class="icon icon-download"></i></button>
+      <button class="btn btn-link btn-action btn-lg ${app.allow_emulator ? '' : 'd-hide'}" appid="${
+        app.id
+      }" title="Try in Emulator"><i class="icon icon-share"></i></button>
+      <button class="btn btn-link btn-action btn-lg ${version.canUpdate ? '' : 'd-hide'}" appid="${
+        app.id
+      }" title="Update App"><i class="icon icon-refresh"></i></button>
+      <button class="btn btn-link btn-action btn-lg ${!appInstalled && !app.custom ? '' : 'd-hide'}" appid="${
+        app.id
+      }" title="Upload App"><i class="icon icon-upload"></i></button>
+      <button class="btn btn-link btn-action btn-lg ${appInstalled ? '' : 'd-hide'}" appid="${
+        app.id
+      }" title="Remove App"><i class="icon icon-delete"></i></button>
+      <button class="btn btn-link btn-action btn-lg ${app.custom ? '' : 'd-hide'}" appid="${
+        app.id
+      }" title="Customise and Upload App"><i class="icon icon-menu"></i></button>
     </div>
   </div>
-  `;}).join("");
+  `;
+    })
+    .join('');
   // set badge up top
-  var tab = document.querySelector("#tab-librarycontainer a");
-  tab.classList.add("badge");
-  tab.setAttribute("data-badge", appJSON.length);
-  htmlToArray(panelbody.getElementsByTagName("button")).forEach(button => {
-    button.addEventListener("click",event => {
+  var tab = document.querySelector('#tab-librarycontainer a');
+  tab.classList.add('badge');
+  tab.setAttribute('data-badge', appJSON.length);
+  htmlToArray(panelbody.getElementsByTagName('button')).forEach((button) => {
+    button.addEventListener('click', (event) => {
       var button = event.currentTarget;
       var icon = button.firstChild;
-      var appid = button.getAttribute("appid");
+      var appid = button.getAttribute('appid');
       var app = appNameToApp(appid);
-      if (!app) throw new Error("App "+appid+" not found");
+      if (!app) throw new Error('App ' + appid + ' not found');
       // check icon to figure out what we should do
-      if (icon.classList.contains("icon-share")) {
+      if (icon.classList.contains('icon-share')) {
         // emulator
-        var file = app.storage.find(f=>f.name.endsWith('.js'));
+        var file = app.storage.find((f) => f.name.endsWith('.js'));
         if (!file) {
-          console.error("No entrypoint found for "+appid);
+          console.error('No entrypoint found for ' + appid);
           return;
         }
         var baseurl = window.location.href;
-        baseurl = baseurl.substr(0,baseurl.lastIndexOf("/"));
-        var url = baseurl+"/apps/"+app.id+"/"+file.url;
+        baseurl = baseurl.substr(0, baseurl.lastIndexOf('/'));
+        var url = baseurl + '/apps/' + app.id + '/' + file.url;
         window.open(`https://espruino.com/ide/emulator.html?codeurl=${url}&upload`);
-      } else if (icon.classList.contains("icon-upload")) {
+      } else if (icon.classList.contains('icon-upload')) {
         // upload
-        icon.classList.remove("icon-upload");
-        icon.classList.add("loading");
+        icon.classList.remove('icon-upload');
+        icon.classList.add('loading');
         uploadApp(app);
-      } else if (icon.classList.contains("icon-menu")) {
+      } else if (icon.classList.contains('icon-menu')) {
         // custom HTML update
-        icon.classList.remove("icon-menu");
-        icon.classList.add("loading");
+        icon.classList.remove('icon-menu');
+        icon.classList.add('loading');
         customApp(app);
-      } else if (icon.classList.contains("icon-delete")) {
+      } else if (icon.classList.contains('icon-delete')) {
         // Remove app
-        icon.classList.remove("icon-delete");
-        icon.classList.add("loading");
+        icon.classList.remove('icon-delete');
+        icon.classList.add('loading');
         removeApp(app);
-      } else if (icon.classList.contains("icon-refresh")) {
+      } else if (icon.classList.contains('icon-refresh')) {
         // Update app
-        icon.classList.remove("icon-refresh");
-        icon.classList.add("loading");
+        icon.classList.remove('icon-refresh');
+        icon.classList.add('loading');
         updateApp(app);
-      } else if (icon.classList.contains("icon-download")) {
+      } else if (icon.classList.contains('icon-download')) {
         handleAppInterface(app);
-      } else if ( button.innerText == String.fromCharCode(0x2661)) {
-         changeAppFavourite(true, app);
-      } else if ( button.innerText == String.fromCharCode(0x2665) ) {
-         changeAppFavourite(false, app);
+      } else if (button.innerText == String.fromCharCode(0x2661)) {
+        changeAppFavourite(true, app);
+      } else if (button.innerText == String.fromCharCode(0x2665)) {
+        changeAppFavourite(false, app);
       }
     });
   });
@@ -291,105 +330,123 @@ refreshLibrary();
 // =========================================== My Apps
 
 function uploadApp(app) {
-  return getInstalledApps().then(()=>{
-    if (appsInstalled.some(i => i.id === app.id)) {
-      return updateApp(app);
-    }
-    Comms.uploadApp(app).then((appJSON) => {
-      Progress.hide({ sticky: true });
-      if (appJSON) {
-        appsInstalled.push(appJSON);
+  return getInstalledApps()
+    .then(() => {
+      if (appsInstalled.some((i) => i.id === app.id)) {
+        return updateApp(app);
       }
-      showToast(app.name + ' Uploaded!', 'success');
-    }).catch(err => {
-      Progress.hide({ sticky: true });
-      showToast('Upload failed, ' + err, 'error');
-    }).finally(()=>{
-      refreshMyApps();
-      refreshLibrary();
+      Comms.uploadApp(app)
+        .then((appJSON) => {
+          Progress.hide({ sticky: true });
+          if (appJSON) {
+            appsInstalled.push(appJSON);
+          }
+          showToast(app.name + ' Uploaded!', 'success');
+        })
+        .catch((err) => {
+          Progress.hide({ sticky: true });
+          showToast('Upload failed, ' + err, 'error');
+        })
+        .finally(() => {
+          refreshMyApps();
+          refreshLibrary();
+        });
+    })
+    .catch((err) => {
+      showToast('Device connection failed, ' + err, 'error');
     });
-  }).catch(err => {
-    showToast("Device connection failed, "+err,"error");
-  });
 }
 
 function removeApp(app) {
-  return showPrompt("Delete","Really remove '"+app.name+"'?").then(() => {
-    return getInstalledApps().then(()=>{
-      // a = from appid.info, app = from apps.json
-      return Comms.removeApp(appsInstalled.find(a => a.id === app.id));
-    });
-  }).then(()=>{
-    appsInstalled = appsInstalled.filter(a=>a.id!=app.id);
-    showToast(app.name+" removed successfully","success");
-    refreshMyApps();
-    refreshLibrary();
-  }, err=>{
-    showToast(app.name+" removal failed, "+err,"error");
-  });
+  return showPrompt('Delete', "Really remove '" + app.name + "'?")
+    .then(() => {
+      return getInstalledApps().then(() => {
+        // a = from appid.info, app = from apps.json
+        return Comms.removeApp(appsInstalled.find((a) => a.id === app.id));
+      });
+    })
+    .then(
+      () => {
+        appsInstalled = appsInstalled.filter((a) => a.id != app.id);
+        showToast(app.name + ' removed successfully', 'success');
+        refreshMyApps();
+        refreshLibrary();
+      },
+      (err) => {
+        showToast(app.name + ' removal failed, ' + err, 'error');
+      }
+    );
 }
 
 function customApp(app) {
-  return handleCustomApp(app).then((appJSON) => {
-    if (appJSON) appsInstalled.push(appJSON);
-    showToast(app.name+" Uploaded!", "success");
-    refreshMyApps();
-    refreshLibrary();
-  }).catch(err => {
-    showToast("Customise failed, "+err, "error");
-    refreshMyApps();
-    refreshLibrary();
-  });
+  return handleCustomApp(app)
+    .then((appJSON) => {
+      if (appJSON) appsInstalled.push(appJSON);
+      showToast(app.name + ' Uploaded!', 'success');
+      refreshMyApps();
+      refreshLibrary();
+    })
+    .catch((err) => {
+      showToast('Customise failed, ' + err, 'error');
+      refreshMyApps();
+      refreshLibrary();
+    });
 }
 
 function updateApp(app) {
   if (app.custom) return customApp(app);
-  return getInstalledApps().then(() => {
-    // a = from appid.info, app = from apps.json
-    let remove = appsInstalled.find(a => a.id === app.id);
-    // no need to remove files which will be overwritten anyway
-    remove.files = remove.files.split(',')
-      .filter(f => f !== app.id + '.info')
-      .filter(f => !app.storage.some(s => s.name === f))
-      .join(',');
-    let data = AppInfo.parseDataString(remove.data)
-    if ('data' in app) {
-      // only remove data files which are no longer declared in new app version
-      const removeData = (f) => !app.data.some(d => (d.name || d.wildcard)===f)
-      data.dataFiles = data.dataFiles.filter(removeData)
-      data.storageFiles = data.storageFiles.filter(removeData)
-    }
-    remove.data = AppInfo.makeDataString(data)
-    return Comms.removeApp(remove);
-  }).then(()=>{
-    showToast(`Updating ${app.name}...`);
-    appsInstalled = appsInstalled.filter(a=>a.id!=app.id);
-    return Comms.uploadApp(app);
-  }).then((appJSON) => {
-    if (appJSON) appsInstalled.push(appJSON);
-    showToast(app.name+" Updated!", "success");
-    refreshMyApps();
-    refreshLibrary();
-  }, err=>{
-    showToast(app.name+" update failed, "+err,"error");
-    refreshMyApps();
-    refreshLibrary();
-  });
+  return getInstalledApps()
+    .then(() => {
+      // a = from appid.info, app = from apps.json
+      let remove = appsInstalled.find((a) => a.id === app.id);
+      // no need to remove files which will be overwritten anyway
+      remove.files = remove.files
+        .split(',')
+        .filter((f) => f !== app.id + '.info')
+        .filter((f) => !app.storage.some((s) => s.name === f))
+        .join(',');
+      let data = AppInfo.parseDataString(remove.data);
+      if ('data' in app) {
+        // only remove data files which are no longer declared in new app version
+        const removeData = (f) => !app.data.some((d) => (d.name || d.wildcard) === f);
+        data.dataFiles = data.dataFiles.filter(removeData);
+        data.storageFiles = data.storageFiles.filter(removeData);
+      }
+      remove.data = AppInfo.makeDataString(data);
+      return Comms.removeApp(remove);
+    })
+    .then(() => {
+      showToast(`Updating ${app.name}...`);
+      appsInstalled = appsInstalled.filter((a) => a.id != app.id);
+      return Comms.uploadApp(app);
+    })
+    .then(
+      (appJSON) => {
+        if (appJSON) appsInstalled.push(appJSON);
+        showToast(app.name + ' Updated!', 'success');
+        refreshMyApps();
+        refreshLibrary();
+      },
+      (err) => {
+        showToast(app.name + ' update failed, ' + err, 'error');
+        refreshMyApps();
+        refreshLibrary();
+      }
+    );
 }
 
-
-
 function appNameToApp(appName) {
-  var app = appJSON.find(app=>app.id==appName);
+  var app = appJSON.find((app) => app.id == appName);
   if (app) return app;
   /* If app not known, add just one file
   which is the JSON - so we'll remove it from
   the menu but may not get rid of all files. */
-  return { id: appName,
-    name: "Unknown app "+appName,
-    icon: "../unknown.png",
-    description: "Unknown app",
-    storage: [ {name:appName+".info"}],
+  return {
+    id: appName,
+    name: 'Unknown app ' + appName,
+    icon: '../unknown.png',
+    description: 'Unknown app',
+    storage: [{ name: appName + '.info' }],
     unknown: true,
   };
 }
@@ -398,65 +455,76 @@ function showLoadingIndicator(id) {
   var panelbody = document.querySelector(`#${id} .panel-body`);
   var tab = document.querySelector(`#tab-${id} a`);
   // set badge up top
-  tab.classList.add("badge");
-  tab.setAttribute("data-badge", "");
+  tab.classList.add('badge');
+  tab.setAttribute('data-badge', '');
   // Loading indicator
-  panelbody.innerHTML = '<div class="tile column col-12"><div class="tile-content" style="min-height:48px;"><div class="loading loading-lg"></div></div></div>';
+  panelbody.innerHTML =
+    '<div class="tile column col-12"><div class="tile-content" style="min-height:48px;"><div class="loading loading-lg"></div></div></div>';
 }
 
 function getAppsToUpdate() {
   var appsToUpdate = [];
-  appsInstalled.forEach(appInstalled => {
+  appsInstalled.forEach((appInstalled) => {
     var app = appNameToApp(appInstalled.id);
-    if (app.version != appInstalled.version)
-      appsToUpdate.push(app);
+    if (app.version != appInstalled.version) appsToUpdate.push(app);
   });
   return appsToUpdate;
 }
 
 function refreshMyApps() {
-  var panelbody = document.querySelector("#myappscontainer .panel-body");
-  panelbody.innerHTML = appsInstalled.map(appInstalled => {
-var app = appNameToApp(appInstalled.id);
-var version = getVersionInfo(app, appInstalled);
-return `<div class="tile column col-6 col-sm-12 col-xs-12">
+  var panelbody = document.querySelector('#myappscontainer .panel-body');
+  panelbody.innerHTML = appsInstalled
+    .map((appInstalled) => {
+      var app = appNameToApp(appInstalled.id);
+      var version = getVersionInfo(app, appInstalled);
+      return `<div class="tile column col-6 col-sm-12 col-xs-12">
     <div class="tile-icon">
-      <figure class="avatar"><img src="apps/${app.icon?`${app.id}/${app.icon}`:"unknown.png"}" alt="${escapeHtml(app.name)}"></figure>
+      <figure class="avatar"><img src="apps/${app.icon ? `${app.id}/${app.icon}` : 'unknown.png'}" alt="${escapeHtml(
+        app.name
+      )}"></figure>
     </div>
     <div class="tile-content">
       <p class="tile-title text-bold">${escapeHtml(app.name)} <small>(${version.text})</small></p>
       <p class="tile-subtitle">${escapeHtml(app.description)}</p>
     </div>
     <div class="tile-action">
-      <button class="btn btn-link btn-action btn-lg ${(appInstalled&&app.interface)?"":"d-hide"}" appid="${app.id}" title="Download data from app"><i class="icon icon-download"></i></button>
-      <button class="btn btn-link btn-action btn-lg ${version.canUpdate?'':'d-hide'}" appid="${app.id}" title="Update App"><i class="icon icon-refresh"></i></button>
-      <button class="btn btn-link btn-action btn-lg" appid="${app.id}" title="Remove App"><i class="icon icon-delete"></i></button>
+      <button class="btn btn-link btn-action btn-lg ${appInstalled && app.interface ? '' : 'd-hide'}" appid="${
+        app.id
+      }" title="Download data from app"><i class="icon icon-download"></i></button>
+      <button class="btn btn-link btn-action btn-lg ${version.canUpdate ? '' : 'd-hide'}" appid="${
+        app.id
+      }" title="Update App"><i class="icon icon-refresh"></i></button>
+      <button class="btn btn-link btn-action btn-lg" appid="${
+        app.id
+      }" title="Remove App"><i class="icon icon-delete"></i></button>
     </div>
   </div>
-  `}).join("");
-  htmlToArray(panelbody.getElementsByTagName("button")).forEach(button => {
-    button.addEventListener("click",event => {
+  `;
+    })
+    .join('');
+  htmlToArray(panelbody.getElementsByTagName('button')).forEach((button) => {
+    button.addEventListener('click', (event) => {
       var button = event.currentTarget;
       var icon = button.firstChild;
-      var appid = button.getAttribute("appid");
+      var appid = button.getAttribute('appid');
       var app = appNameToApp(appid);
-      if (!app) throw new Error("App "+appid+" not found");
+      if (!app) throw new Error('App ' + appid + ' not found');
       // check icon to figure out what we should do
-      if (icon.classList.contains("icon-delete")) removeApp(app);
-      if (icon.classList.contains("icon-refresh")) updateApp(app);
-      if (icon.classList.contains("icon-download")) handleAppInterface(app);
+      if (icon.classList.contains('icon-delete')) removeApp(app);
+      if (icon.classList.contains('icon-refresh')) updateApp(app);
+      if (icon.classList.contains('icon-download')) handleAppInterface(app);
     });
   });
   var appsToUpdate = getAppsToUpdate();
-  var tab = document.querySelector("#tab-myappscontainer a");
-  var updateApps = document.querySelector("#myappscontainer .updateapps");
+  var tab = document.querySelector('#tab-myappscontainer a');
+  var updateApps = document.querySelector('#myappscontainer .updateapps');
   if (appsToUpdate.length) {
     updateApps.innerHTML = `Update ${appsToUpdate.length} apps`;
-    updateApps.classList.remove("hidden");
-    tab.setAttribute("data-badge", `${appsInstalled.length} ⬆${appsToUpdate.length}`);
+    updateApps.classList.remove('hidden');
+    tab.setAttribute('data-badge', `${appsInstalled.length} ⬆${appsToUpdate.length}`);
   } else {
-    updateApps.classList.add("hidden");
-    tab.setAttribute("data-badge", appsInstalled.length);
+    updateApps.classList.add('hidden');
+    tab.setAttribute('data-badge', appsInstalled.length);
   }
 }
 
@@ -465,10 +533,10 @@ function getInstalledApps(refresh) {
   if (haveInstalledApps && !refresh) {
     return Promise.resolve(appsInstalled);
   }
-  showLoadingIndicator("myappscontainer");
+  showLoadingIndicator('myappscontainer');
   // Get apps and files
   return Comms.getInstalledApps()
-    .then(appJSON => {
+    .then((appJSON) => {
       appsInstalled = appJSON;
       haveInstalledApps = true;
       refreshMyApps();
@@ -476,88 +544,99 @@ function getInstalledApps(refresh) {
     })
     .then(() => handleConnectionChange(true))
     .then(() => appsInstalled)
-    .catch(err=>{
+    .catch((err) => {
       return Promise.reject();
     });
 }
 
 /// Removes everything and install the given apps, eg: installMultipleApps(["boot","mclock"], "minimal")
 function installMultipleApps(appIds, promptName) {
-  var apps = appIds.map( appid => appJSON.find(app=>app.id==appid) );
-  if (apps.some(x=>x===undefined))
-    return Promise.reject("Not all apps found");
+  var apps = appIds.map((appid) => appJSON.find((app) => app.id == appid));
+  if (apps.some((x) => x === undefined)) return Promise.reject('Not all apps found');
   var appCount = apps.length;
-  return showPrompt("Install Defaults",`Remove everything and install ${promptName} apps?`).then(() => {
-    return Comms.removeAllApps();
-  }).then(()=>{
-    Progress.hide({sticky:true});
-    appsInstalled = [];
-    showToast(`Existing apps removed. Installing  ${appCount} apps...`);
-    return new Promise((resolve,reject) => {
-      function upload() {
-        var app = apps.shift();
-        if (app===undefined) return resolve();
-        Progress.show({title:`${app.name} (${appCount-apps.length}/${appCount})`,sticky:true});
-        Comms.uploadApp(app,"skip_reset").then((appJSON) => {
-          Progress.hide({sticky:true});
-          if (appJSON) appsInstalled.push(appJSON);
-          showToast(`(${appCount-apps.length}/${appCount}) ${app.name} Uploaded`);
-          upload();
-        }).catch(function() {
-          Progress.hide({sticky:true});
-          reject();
-        });
-      }
-      upload();
+  return showPrompt('Install Defaults', `Remove everything and install ${promptName} apps?`)
+    .then(() => {
+      return Comms.removeAllApps();
+    })
+    .then(() => {
+      Progress.hide({ sticky: true });
+      appsInstalled = [];
+      showToast(`Existing apps removed. Installing  ${appCount} apps...`);
+      return new Promise((resolve, reject) => {
+        function upload() {
+          var app = apps.shift();
+          if (app === undefined) return resolve();
+          Progress.show({ title: `${app.name} (${appCount - apps.length}/${appCount})`, sticky: true });
+          Comms.uploadApp(app, 'skip_reset')
+            .then((appJSON) => {
+              Progress.hide({ sticky: true });
+              if (appJSON) appsInstalled.push(appJSON);
+              showToast(`(${appCount - apps.length}/${appCount}) ${app.name} Uploaded`);
+              upload();
+            })
+            .catch(function () {
+              Progress.hide({ sticky: true });
+              reject();
+            });
+        }
+        upload();
+      });
+    })
+    .then(() => {
+      return Comms.setTime();
+    })
+    .then(() => {
+      showToast('Apps successfully installed!', 'success');
+      return getInstalledApps(true);
     });
-  }).then(()=>{
-    return Comms.setTime();
-  }).then(()=>{
-    showToast("Apps successfully installed!","success");
-    return getInstalledApps(true);
-  });
 }
 
-var connectMyDeviceBtn = document.getElementById("connectmydevice");
+var connectMyDeviceBtn = document.getElementById('connectmydevice');
 
 function handleConnectionChange(connected) {
   connectMyDeviceBtn.textContent = connected ? 'Disconnect' : 'Connect';
   connectMyDeviceBtn.classList.toggle('is-connected', connected);
 }
 
-htmlToArray(document.querySelectorAll(".btn.refresh")).map(button => button.addEventListener("click", () => {
-  getInstalledApps(true).catch(err => {
-    showToast("Getting app list failed, "+err,"error");
-  });
-}));
-htmlToArray(document.querySelectorAll(".btn.updateapps")).map(button => button.addEventListener("click", () => {
-  var appsToUpdate = getAppsToUpdate();
-  var count = appsToUpdate.length;
-  function updater() {
-    if (!appsToUpdate.length) return;
-    var app = appsToUpdate.pop();
-    return updateApp(app).then(function() {
-      return updater();
+htmlToArray(document.querySelectorAll('.btn.refresh')).map((button) =>
+  button.addEventListener('click', () => {
+    getInstalledApps(true).catch((err) => {
+      showToast('Getting app list failed, ' + err, 'error');
     });
-  }
-  updater().then(err => {
-    showToast(`Updated ${count} apps`,"success");
-  }).catch(err => {
-    showToast("Update failed, "+err,"error");
-  });
-}));
-connectMyDeviceBtn.addEventListener("click", () => {
+  })
+);
+htmlToArray(document.querySelectorAll('.btn.updateapps')).map((button) =>
+  button.addEventListener('click', () => {
+    var appsToUpdate = getAppsToUpdate();
+    var count = appsToUpdate.length;
+    function updater() {
+      if (!appsToUpdate.length) return;
+      var app = appsToUpdate.pop();
+      return updateApp(app).then(function () {
+        return updater();
+      });
+    }
+    updater()
+      .then((err) => {
+        showToast(`Updated ${count} apps`, 'success');
+      })
+      .catch((err) => {
+        showToast('Update failed, ' + err, 'error');
+      });
+  })
+);
+connectMyDeviceBtn.addEventListener('click', () => {
   if (connectMyDeviceBtn.classList.contains('is-connected')) {
     Comms.disconnectDevice();
   } else {
-    getInstalledApps(true).catch(err => {
-      showToast("Device connection failed, "+err,"error");
+    getInstalledApps(true).catch((err) => {
+      showToast('Device connection failed, ' + err, 'error');
     });
   }
 });
 Comms.watchConnectionChange(handleConnectionChange);
 
-var filtersContainer = document.querySelector("#librarycontainer .filter-nav");
+var filtersContainer = document.querySelector('#librarycontainer .filter-nav');
 filtersContainer.addEventListener('click', ({ target }) => {
   if (target.classList.contains('active')) return;
 
@@ -567,25 +646,25 @@ filtersContainer.addEventListener('click', ({ target }) => {
   window.location.hash = activeFilter;
 });
 
-var librarySearchInput = document.querySelector("#searchform input");
+var librarySearchInput = document.querySelector('#searchform input');
 
-librarySearchInput.addEventListener('input', evt => {
+librarySearchInput.addEventListener('input', (evt) => {
   currentSearch = evt.target.value.toLowerCase();
   refreshLibrary();
 });
 
 // =========================================== About
 
-if (window.location.host=="banglejs.com") {
-  document.getElementById("apploaderlinks").innerHTML =
+if (window.location.host == 'banglejs.com') {
+  document.getElementById('apploaderlinks').innerHTML =
     'This is the official Bangle.js App Loader - you can also try the <a href="https://espruino.github.io/BangleApps/">Development Version</a> for the most recent apps.';
-} else if (window.location.host=="espruino.github.io") {
-  document.title += " [Development]";
-  document.getElementById("apploaderlinks").innerHTML =
+} else if (window.location.host == 'espruino.github.io') {
+  document.title += ' [Development]';
+  document.getElementById('apploaderlinks').innerHTML =
     'This is the development Bangle.js App Loader - you can also try the <a href="https://banglejs.com/apps/">Official Version</a> for stable apps.';
 } else {
-  document.title += " [Unofficial]";
-  document.getElementById("apploaderlinks").innerHTML =
+  document.title += ' [Unofficial]';
+  document.getElementById('apploaderlinks').innerHTML =
     'This is not the official Bangle.js App Loader - you can try the <a href="https://banglejs.com/apps/">Official Version</a> here.';
 }
 
@@ -593,22 +672,22 @@ if (window.location.host=="banglejs.com") {
 var SETTINGS_HOOKS = {}; // stuff to get called when a setting is loaded
 /// Load settings and update controls
 function loadSettings() {
-  var j = localStorage.getItem("settings");
-  if (typeof j != "string") return;
+  var j = localStorage.getItem('settings');
+  if (typeof j != 'string') return;
   try {
     var s = JSON.parse(j);
-    Object.keys(s).forEach( k => {
-      SETTINGS[k]=s[k];
+    Object.keys(s).forEach((k) => {
+      SETTINGS[k] = s[k];
       if (SETTINGS_HOOKS[k]) SETTINGS_HOOKS[k]();
-    } );
+    });
   } catch (e) {
-    console.error("Invalid settings");
+    console.error('Invalid settings');
   }
 }
 /// Save settings
 function saveSettings() {
-  localStorage.setItem("settings", JSON.stringify(SETTINGS));
-  console.log("Changed settings", SETTINGS);
+  localStorage.setItem('settings', JSON.stringify(SETTINGS));
+  console.log('Changed settings', SETTINGS);
 }
 // Link in settings DOM elements
 function settingsCheckbox(id, name) {
@@ -617,56 +696,64 @@ function settingsCheckbox(id, name) {
     setting.checked = SETTINGS[name];
   }
   SETTINGS_HOOKS[name] = update;
-  setting.addEventListener('click', function() {
+  setting.addEventListener('click', function () {
     SETTINGS[name] = setting.checked;
     saveSettings();
   });
 }
-settingsCheckbox("settings-pretokenise", "pretokenise");
+settingsCheckbox('settings-pretokenise', 'pretokenise');
 loadSettings();
 
-document.getElementById("defaultsettings").addEventListener("click",event=>{
+document.getElementById('defaultsettings').addEventListener('click', (event) => {
   SETTINGS = JSON.parse(JSON.stringify(DEFAULTSETTINGS)); // clone
   saveSettings();
   loadSettings(); // update all settings
   refreshLibrary(); // favourites were in settings
 });
 
-document.getElementById("settime").addEventListener("click",event=>{
-  Comms.setTime().then(()=>{
-    showToast("Time set successfully","success");
-  }, err=>{
-    showToast("Error setting time, "+err,"error");
-  });
+document.getElementById('settime').addEventListener('click', (event) => {
+  Comms.setTime().then(
+    () => {
+      showToast('Time set successfully', 'success');
+    },
+    (err) => {
+      showToast('Error setting time, ' + err, 'error');
+    }
+  );
 });
-document.getElementById("removeall").addEventListener("click",event=>{
-  showPrompt("Remove All","Really remove all apps?").then(() => {
-    return Comms.removeAllApps();
-  }).then(()=>{
-    Progress.hide({sticky:true});
-    appsInstalled = [];
-    showToast("All apps removed","success");
-    return getInstalledApps(true);
-  }).catch(err=>{
-    Progress.hide({sticky:true});
-    showToast("App removal failed, "+err,"error");
-  });
+document.getElementById('removeall').addEventListener('click', (event) => {
+  showPrompt('Remove All', 'Really remove all apps?')
+    .then(() => {
+      return Comms.removeAllApps();
+    })
+    .then(() => {
+      Progress.hide({ sticky: true });
+      appsInstalled = [];
+      showToast('All apps removed', 'success');
+      return getInstalledApps(true);
+    })
+    .catch((err) => {
+      Progress.hide({ sticky: true });
+      showToast('App removal failed, ' + err, 'error');
+    });
 });
 // Install all default apps in one go
-document.getElementById("installdefault").addEventListener("click",event=>{
-  httpGet("defaultapps.json").then(json=>{
-    return installMultipleApps(JSON.parse(json), "default");
-  }).catch(err=>{
-    Progress.hide({sticky:true});
-    showToast("App Install failed, "+err,"error");
-  });
+document.getElementById('installdefault').addEventListener('click', (event) => {
+  httpGet('defaultapps.json')
+    .then((json) => {
+      return installMultipleApps(JSON.parse(json), 'default');
+    })
+    .catch((err) => {
+      Progress.hide({ sticky: true });
+      showToast('App Install failed, ' + err, 'error');
+    });
 });
 
 // Install all favourite apps in one go
-document.getElementById("installfavourite").addEventListener("click",event=>{
+document.getElementById('installfavourite').addEventListener('click', (event) => {
   var favApps = SETTINGS.favourites;
-  installMultipleApps(favApps, "favourite").catch(err=>{
-    Progress.hide({sticky:true});
-    showToast("App Install failed, "+err,"error");
+  installMultipleApps(favApps, 'favourite').catch((err) => {
+    Progress.hide({ sticky: true });
+    showToast('App Install failed, ' + err, 'error');
   });
 });
diff --git a/lib/customize.js b/lib/customize.js
index a60b8ee00d..0cd3029fca 100644
--- a/lib/customize.js
+++ b/lib/customize.js
@@ -21,5 +21,5 @@ sendCustomizedApp({
 });
 */
 function sendCustomizedApp(app) {
-  window.postMessage(app);
+  window.postMessage({ type: 'custom', ...app });
 }

From cebe34e090175a40c323fcb99be94834676a64ab Mon Sep 17 00:00:00 2001
From: flashback2k14 <yeahdev@gmail.com>
Date: Thu, 30 Apr 2020 14:57:07 +0200
Subject: [PATCH 08/38] trying to write to storage for custom page #4

---
 apps/timer/timer-custom.html | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/apps/timer/timer-custom.html b/apps/timer/timer-custom.html
index f133a92b15..0cb5ba3c49 100644
--- a/apps/timer/timer-custom.html
+++ b/apps/timer/timer-custom.html
@@ -29,12 +29,11 @@
         storage: [
           {
             name: "timer.app.js",
-            url: "timer.app.js"
+            url: "timer/timer.app.js"
           },
           {
             name: "timer.img",
-            url: "timer-icon.js",
-            evaluate: true
+            url: "timer/timer-icon.js",
           }
         ]
       });

From a13356776af6b1a1f1068f03bef4773e4e7c03f7 Mon Sep 17 00:00:00 2001
From: flashback2k14 <yeahdev@gmail.com>
Date: Thu, 30 Apr 2020 14:59:24 +0200
Subject: [PATCH 09/38] trying to write to storage for custom page #5

---
 lib/customize.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/customize.js b/lib/customize.js
index 0cd3029fca..72d54157b3 100644
--- a/lib/customize.js
+++ b/lib/customize.js
@@ -21,5 +21,5 @@ sendCustomizedApp({
 });
 */
 function sendCustomizedApp(app) {
-  window.postMessage({ type: 'custom', ...app });
+  window.postMessage({ type: 'app', ...app });
 }

From bab528ed91ee83c3ca360add9045f9c2a341def7 Mon Sep 17 00:00:00 2001
From: flashback2k14 <yeahdev@gmail.com>
Date: Thu, 30 Apr 2020 15:01:56 +0200
Subject: [PATCH 10/38] trying to write to storage for custom page #6

---
 apps/timer/timer-custom.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/timer/timer-custom.html b/apps/timer/timer-custom.html
index 0cb5ba3c49..27ab7ef7f5 100644
--- a/apps/timer/timer-custom.html
+++ b/apps/timer/timer-custom.html
@@ -18,7 +18,7 @@
     const txtTest1 = document.getElementById("txtTest1");
     const txtTest2 = document.getElementById("txtTest2");
     document.getElementById("save").addEventListener("click", () => {
-      Util.writeJsonToStorageFile("timerdata", { txtTest1, txtTest2 }, () => {
+      Util.writeJsonToStorageFile("timerdata", { txtTest1: txtTest1.value, txtTest2: txtTest2.value }, () => {
         alert("successfully customized!");
       });
     });

From 645aa88140a3f7a535082f92c566137230bdd09b Mon Sep 17 00:00:00 2001
From: flashback2k14 <yeahdev@gmail.com>
Date: Thu, 30 Apr 2020 15:05:27 +0200
Subject: [PATCH 11/38] trying to write to storage for custom page #7

---
 apps/timer/timer-custom.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/timer/timer-custom.html b/apps/timer/timer-custom.html
index 27ab7ef7f5..67100a8e92 100644
--- a/apps/timer/timer-custom.html
+++ b/apps/timer/timer-custom.html
@@ -29,11 +29,11 @@
         storage: [
           {
             name: "timer.app.js",
-            url: "timer/timer.app.js"
+            url: "timer.app.js"
           },
           {
             name: "timer.img",
-            url: "timer/timer-icon.js",
+            url: "timer-icon.js",
           }
         ]
       });

From 960796e08c8276f2b18d99bc5fbf2b8c93cf5ce7 Mon Sep 17 00:00:00 2001
From: flashback2k14 <yeahdev@gmail.com>
Date: Thu, 30 Apr 2020 15:11:02 +0200
Subject: [PATCH 12/38] trying to write to storage for custom page #8

---
 apps/timer/timer.app.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/timer/timer.app.js b/apps/timer/timer.app.js
index 24b66e8924..287b170f7d 100644
--- a/apps/timer/timer.app.js
+++ b/apps/timer/timer.app.js
@@ -8,7 +8,7 @@ function outOfTime() {
 
   const data = require('Storage').readJSON('timerdata', true);
   if (data) {
-    E.showMessage('Out of Time', `My Timer: ${data.txtTest1}, ${data.txtTest2}`);
+    E.showMessage(`Out of Time: ${data.txtTest1}, ${data.txtTest2}, ${JSON.stringify(data)}`, 'My Timer');
   } else {
     E.showMessage('Out of Time', 'My Timer');
   }

From 7fb4ed46afb01e1578069fe4670d4fe44519691d Mon Sep 17 00:00:00 2001
From: flashback2k14 <yeahdev@gmail.com>
Date: Thu, 30 Apr 2020 19:47:33 +0200
Subject: [PATCH 13/38] trying to write to storage for custom page #9

---
 apps/timer/timer-custom.html | 22 ++++++++--------------
 apps/timer/timer.app.js      |  8 ++++++++
 lib/customize.js             |  2 +-
 3 files changed, 17 insertions(+), 15 deletions(-)

diff --git a/apps/timer/timer-custom.html b/apps/timer/timer-custom.html
index 67100a8e92..da108c2a10 100644
--- a/apps/timer/timer-custom.html
+++ b/apps/timer/timer-custom.html
@@ -18,24 +18,18 @@
     const txtTest1 = document.getElementById("txtTest1");
     const txtTest2 = document.getElementById("txtTest2");
     document.getElementById("save").addEventListener("click", () => {
-      Util.writeJsonToStorageFile("timerdata", { txtTest1: txtTest1.value, txtTest2: txtTest2.value }, () => {
-        alert("successfully customized!");
-      });
+      // Util.writeJsonToStorageFile("timerdata", { txtTest1: txtTest1.value, txtTest2: txtTest2.value }, () => {
+      //   alert("successfully customized!");
+      // });
+
+      Util.listFiles().then(data => {
+        console.log(data);
+      })
     });
 
     document.getElementById("upload").addEventListener("click", function () {
       sendCustomizedApp({
-        id: "timer",
-        storage: [
-          {
-            name: "timer.app.js",
-            url: "timer.app.js"
-          },
-          {
-            name: "timer.img",
-            url: "timer-icon.js",
-          }
-        ]
+        id: "timer"
       });
     });
   </script>
diff --git a/apps/timer/timer.app.js b/apps/timer/timer.app.js
index 287b170f7d..7b8c01a3e2 100644
--- a/apps/timer/timer.app.js
+++ b/apps/timer/timer.app.js
@@ -43,6 +43,14 @@ function countDown() {
 
 function startTimer() {
   counter = 31;
+
+  const data = require('Storage').readJSON('timerdata', true);
+  if (data) {
+    E.showMessage(`Out of Time: ${data.txtTest1}, ${data.txtTest2}, ${JSON.stringify(data)}`, 'My Timer');
+  } else {
+    E.showMessage('Out of Time', 'My Timer');
+  }
+
   countDown();
   if (!interval) {
     interval = setInterval(countDown, 1000);
diff --git a/lib/customize.js b/lib/customize.js
index 72d54157b3..a60b8ee00d 100644
--- a/lib/customize.js
+++ b/lib/customize.js
@@ -21,5 +21,5 @@ sendCustomizedApp({
 });
 */
 function sendCustomizedApp(app) {
-  window.postMessage({ type: 'app', ...app });
+  window.postMessage(app);
 }

From cbc8515faa5ccb930451cd9b1beea69c8cdcd8ef Mon Sep 17 00:00:00 2001
From: flashback2k14 <yeahdev@gmail.com>
Date: Thu, 30 Apr 2020 19:53:15 +0200
Subject: [PATCH 14/38] trying to write to storage for custom page #10

---
 apps/timer/timer-custom.html | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/apps/timer/timer-custom.html b/apps/timer/timer-custom.html
index da108c2a10..f63a8e5208 100644
--- a/apps/timer/timer-custom.html
+++ b/apps/timer/timer-custom.html
@@ -14,6 +14,7 @@
   </p>
   <script src="../../lib/customize.js"></script>
   <script src="../../lib/interface.js"></script>
+  <script src="../../js/comms.js"></script>
   <script>
     const txtTest1 = document.getElementById("txtTest1");
     const txtTest2 = document.getElementById("txtTest2");
@@ -22,7 +23,7 @@
       //   alert("successfully customized!");
       // });
 
-      Util.listFiles().then(data => {
+      Comms.listFiles().then(data => {
         console.log(data);
       })
     });

From 871e968b3a4cc07f73af1b03163cbcddaec157fe Mon Sep 17 00:00:00 2001
From: flashback2k14 <yeahdev@gmail.com>
Date: Thu, 30 Apr 2020 20:26:28 +0200
Subject: [PATCH 15/38] trying to write to storage for custom page #11

---
 apps/buffgym/buffgym.html    | 498 ++++++++++++++++++-----------------
 apps/timer/timer-custom.html |  14 +-
 apps/timer/timer.app.js      |   4 +-
 js/index.js                  |   3 -
 lib/interface.js             |   3 -
 5 files changed, 260 insertions(+), 262 deletions(-)

diff --git a/apps/buffgym/buffgym.html b/apps/buffgym/buffgym.html
index 3c18932e9a..293feffc2e 100644
--- a/apps/buffgym/buffgym.html
+++ b/apps/buffgym/buffgym.html
@@ -1,250 +1,256 @@
 <html>
-  <head>
-    <link rel="stylesheet" href="../../css/spectre.min.css">
-  </head>
-  <body>
-    <h1>BuffGym</h1>
-    <p>
-      Enter in your weights for each exercise, start light and keep consistent with your training. The weight increment field is how much the app will increase your weights for an exercise if you successfully complete all the reps and sets for an exercise. Make sure its a value that matches the weights in your gym.
-    </p>
-    <p>
-      For more information on how to train this program refer the <a href="https://stronglifts.com/5x5/" target="_BLANK">Stronglifts website</a>
-    </p>
-    <form id="workouts-form">
-      <h4>Workout A</h4>
-      <table class="table">
-        <thead>
-          <tr>
-            <th>Exercise</th>
-            <th>Sets / Reps</th>
-            <th>Weight</th>
-            <th>Weight increment</th>
-          </tr>
-        </thead>
-        <tbody id="workout-a-exercises">
-          <tr>
-            <td>
-              Squats
-            </td>
-            <td>
-              5x5
-            </td>
-            <td>
-              <input type="number" value="0" id="buffgym-workout-a-squats-weight" />
-            </td>
-            <td>
-              <input type="number" value="2.5" id="buffgym-workout-a-squats-weight-increment" />
-            </td>
-          </tr>
-          <tr>
-            <td>
-              Overhead press
-            </td>
-            <td>
-              5x5
-            </td>
-            <td>
-              <input type="number" value="0" id="buffgym-workout-a-overhead-press-weight" />
-            </td>
-            <td>
-              <input type="number" value="2.5" id="buffgym-workout-a-overhead-press-weight-increment" />
-            </td>
-          </tr>
-          <tr>
-            <td>
-              Deadlift
-            </td>
-            <td>
-              1x5
-            </td>
-            <td>
-              <input type="number" value="0" id="buffgym-workout-a-deadlift-weight" />
-            </td>
-            <td>
-              <input type="number" value="2.5" id="buffgym-workout-a-deadlift-weight-increment" />
-            </td>
-          </tr>
-          <tr>
-            <td>
-              Pullups
-            </td>
-            <td>
-              3x10
-            </td>
-            <td>
-              <input type="number" value="0" id="buffgym-workout-a-pullups-weight" />
-            </td>
-            <td>
-              <input type="number" value="2.5" id="buffgym-workout-a-pullups-weight-increment" />
-            </td>
-          </tr>
-        </tbody>
-      </table>
-      <h4>Workout B</h4>
-      <table class="table">
-        <thead>
-          <tr>
-            <th>Exercise</th>
-            <th>Sets / Reps</th>
-            <th>Weight</th>
-            <th>Weight increment</th>
-          </tr>
-        </thead>
-        <tbody id="workout-b-exercises">
-          <tr>
-            <td>
-              Squats
-            </td>
-            <td>
-              5x5
-            </td>
-            <td>
-              <input type="number" value="0" id="buffgym-workout-b-squats-weight" />
-            </td>
-            <td>
-              <input type="number" value="2.5" id="buffgym-workout-b-squats-weight-increment" />
-            </td>
-          </tr>
-          <tr>
-            <td>
-              Bench press
-            </td>
-            <td>
-              5x5
-            </td>
-            <td>
-              <input type="number" value="0" id="buffgym-workout-b-bench-press-weight" />
-            </td>
-            <td>
-              <input type="number" value="2.5" id="buffgym-workout-b-bench-press-weight-increment" />
-            </td>
-          </tr>
-          <tr>
-            <td>
-              Row
-            </td>
-            <td>
-              5x5
-            </td>
-            <td>
-              <input type="number" value="0" id="buffgym-workout-b-row-weight" />
-            </td>
-            <td>
-              <input type="number" value="2.5" id="buffgym-workout-b-row-weight-increment" />
-            </td>
-          </tr>
-          <tr>
-            <td>
-              Tricep extension
-            </td>
-            <td>
-              3x10
-            </td>
-            <td>
-              <input type="number" value="0" id="buffgym-workout-b-triceps-weight" />
-            </td>
-            <td>
-              <input type="number" value="2.5" id="buffgym-workout-b-triceps-weight-increment" />
-            </td>
-          </tr>
-        </tbody>
-      </table>
-    </form>
-    <br><br>
-    <button id="upload" class="btn btn-primary">Upload</button>
-    
-    <script src="../../lib/interface.js"></script>
 
-    <script>
-        function workoutA() {
-            return {
-                "title": "Workout A",
-                "exercises": [
-                    {
-                        "title": "Squats",
-                        "weight": Number(document.getElementById("buffgym-workout-a-squats-weight").value),
-                        "weightIncrement": Number(document.getElementById("buffgym-workout-a-squats-weight-increment").value),
-                        "unit": "Kg",
-                        "sets": [5, 5, 5, 5, 5],
-                        "restPeriod": 90
-                    },
-                    {
-                        "title": "Overhead press",
-                        "weight": Number(document.getElementById("buffgym-workout-a-overhead-press-weight").value),
-                        "weightIncrement": Number(document.getElementById("buffgym-workout-a-overhead-press-weight-increment").value),
-                        "unit": "Kg",
-                        "sets": [5, 5, 5, 5, 5],
-                        "restPeriod": 90
-                    },
-                    {
-                        "title": "Deadlift",
-                        "weight": Number(document.getElementById("buffgym-workout-a-deadlift-weight").value),
-                        "weightIncrement": Number(document.getElementById("buffgym-workout-a-deadlift-weight-increment").value),
-                        "unit": "Kg",
-                        "sets": [5],
-                        "restPeriod": 90
-                    },
-                    {
-                        "title": "Pullups",
-                        "weight": Number(document.getElementById("buffgym-workout-a-pullups-weight").value),
-                        "weightIncrement": Number(document.getElementById("buffgym-workout-a-pullups-weight-increment").value),
-                        "unit": "Kg",
-                        "sets": [10, 10, 10],
-                        "restPeriod": 90
-                    }
-                ]
-            };
-        }
+<head>
+  <link rel="stylesheet" href="../../css/spectre.min.css">
+</head>
 
-        function workoutB() {
-            return {
-                "title": "Workout B",
-                "exercises": [
-                    {
-                        "title": "Squats",
-                        "weight": Number(document.getElementById("buffgym-workout-b-squats-weight").value),
-                        "weightIncrement": Number(document.getElementById("buffgym-workout-b-squats-weight-increment").value),
-                        "unit": "Kg",
-                        "sets": [5, 5, 5, 5, 5],
-                        "restPeriod": 90
-                    },
-                    {
-                        "title": "Bench press",
-                        "weight": Number(document.getElementById("buffgym-workout-b-bench-press-weight").value),
-                        "weightIncrement": Number(document.getElementById("buffgym-workout-b-bench-press-weight-increment").value),
-                        "unit": "Kg",
-                        "sets": [5, 5, 5, 5, 5],
-                        "restPeriod": 90
-                    },
-                    {
-                        "title": "Row",
-                        "weight": Number(document.getElementById("buffgym-workout-b-row-weight").value),
-                        "weightIncrement": Number(document.getElementById("buffgym-workout-b-row-weight-increment").value),
-                        "unit":"Kg",
-                        "sets": [5, 5, 5, 5, 5],
-                        "restPeriod": 90
-                    },
-                    {
-                        "title": "Tricep extension",
-                        "weight": Number(document.getElementById("buffgym-workout-b-triceps-weight").value),
-                        "weightIncrement": Number(document.getElementById("buffgym-workout-b-triceps-weight-increment").value),
-                        "unit": "Kg",
-                        "sets": [10, 10, 10],
-                        "restPeriod": 90
-                    }
-                ]
-            };
-        }
+<body>
+  <h1>BuffGym</h1>
+  <p>
+    Enter in your weights for each exercise, start light and keep consistent with your training. The weight increment
+    field is how much the app will increase your weights for an exercise if you successfully complete all the reps and
+    sets for an exercise. Make sure its a value that matches the weights in your gym.
+  </p>
+  <p>
+    For more information on how to train this program refer the <a href="https://stronglifts.com/5x5/"
+      target="_BLANK">Stronglifts website</a>
+  </p>
+  <form id="workouts-form">
+    <h4>Workout A</h4>
+    <table class="table">
+      <thead>
+        <tr>
+          <th>Exercise</th>
+          <th>Sets / Reps</th>
+          <th>Weight</th>
+          <th>Weight increment</th>
+        </tr>
+      </thead>
+      <tbody id="workout-a-exercises">
+        <tr>
+          <td>
+            Squats
+          </td>
+          <td>
+            5x5
+          </td>
+          <td>
+            <input type="number" value="0" id="buffgym-workout-a-squats-weight" />
+          </td>
+          <td>
+            <input type="number" value="2.5" id="buffgym-workout-a-squats-weight-increment" />
+          </td>
+        </tr>
+        <tr>
+          <td>
+            Overhead press
+          </td>
+          <td>
+            5x5
+          </td>
+          <td>
+            <input type="number" value="0" id="buffgym-workout-a-overhead-press-weight" />
+          </td>
+          <td>
+            <input type="number" value="2.5" id="buffgym-workout-a-overhead-press-weight-increment" />
+          </td>
+        </tr>
+        <tr>
+          <td>
+            Deadlift
+          </td>
+          <td>
+            1x5
+          </td>
+          <td>
+            <input type="number" value="0" id="buffgym-workout-a-deadlift-weight" />
+          </td>
+          <td>
+            <input type="number" value="2.5" id="buffgym-workout-a-deadlift-weight-increment" />
+          </td>
+        </tr>
+        <tr>
+          <td>
+            Pullups
+          </td>
+          <td>
+            3x10
+          </td>
+          <td>
+            <input type="number" value="0" id="buffgym-workout-a-pullups-weight" />
+          </td>
+          <td>
+            <input type="number" value="2.5" id="buffgym-workout-a-pullups-weight-increment" />
+          </td>
+        </tr>
+      </tbody>
+    </table>
+    <h4>Workout B</h4>
+    <table class="table">
+      <thead>
+        <tr>
+          <th>Exercise</th>
+          <th>Sets / Reps</th>
+          <th>Weight</th>
+          <th>Weight increment</th>
+        </tr>
+      </thead>
+      <tbody id="workout-b-exercises">
+        <tr>
+          <td>
+            Squats
+          </td>
+          <td>
+            5x5
+          </td>
+          <td>
+            <input type="number" value="0" id="buffgym-workout-b-squats-weight" />
+          </td>
+          <td>
+            <input type="number" value="2.5" id="buffgym-workout-b-squats-weight-increment" />
+          </td>
+        </tr>
+        <tr>
+          <td>
+            Bench press
+          </td>
+          <td>
+            5x5
+          </td>
+          <td>
+            <input type="number" value="0" id="buffgym-workout-b-bench-press-weight" />
+          </td>
+          <td>
+            <input type="number" value="2.5" id="buffgym-workout-b-bench-press-weight-increment" />
+          </td>
+        </tr>
+        <tr>
+          <td>
+            Row
+          </td>
+          <td>
+            5x5
+          </td>
+          <td>
+            <input type="number" value="0" id="buffgym-workout-b-row-weight" />
+          </td>
+          <td>
+            <input type="number" value="2.5" id="buffgym-workout-b-row-weight-increment" />
+          </td>
+        </tr>
+        <tr>
+          <td>
+            Tricep extension
+          </td>
+          <td>
+            3x10
+          </td>
+          <td>
+            <input type="number" value="0" id="buffgym-workout-b-triceps-weight" />
+          </td>
+          <td>
+            <input type="number" value="2.5" id="buffgym-workout-b-triceps-weight-increment" />
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </form>
+  <br><br>
+  <button id="upload" class="btn btn-primary">Upload</button>
 
-        document.getElementById("upload").addEventListener("click", function() {
-          Puck.eval(`require("Storage").writeJSON("buffgym-workout-a.json",${JSON.stringify(workoutA())})`, ()=>{
-            Puck.eval(`require("Storage").writeJSON("buffgym-workout-b.json",${JSON.stringify(workoutB())})`, ()=>{
-              Puck.eval(`Bangle.buzz()`, () => {
-                console.log("all done");
-              })
-            })
-          });
-        });
-    </script>
-  </body>
-</html>
+  <script src="../../lib/interface.js"></script>
+
+  <script>
+    function workoutA() {
+      return {
+        "title": "Workout A",
+        "exercises": [
+          {
+            "title": "Squats",
+            "weight": Number(document.getElementById("buffgym-workout-a-squats-weight").value),
+            "weightIncrement": Number(document.getElementById("buffgym-workout-a-squats-weight-increment").value),
+            "unit": "Kg",
+            "sets": [5, 5, 5, 5, 5],
+            "restPeriod": 90
+          },
+          {
+            "title": "Overhead press",
+            "weight": Number(document.getElementById("buffgym-workout-a-overhead-press-weight").value),
+            "weightIncrement": Number(document.getElementById("buffgym-workout-a-overhead-press-weight-increment").value),
+            "unit": "Kg",
+            "sets": [5, 5, 5, 5, 5],
+            "restPeriod": 90
+          },
+          {
+            "title": "Deadlift",
+            "weight": Number(document.getElementById("buffgym-workout-a-deadlift-weight").value),
+            "weightIncrement": Number(document.getElementById("buffgym-workout-a-deadlift-weight-increment").value),
+            "unit": "Kg",
+            "sets": [5],
+            "restPeriod": 90
+          },
+          {
+            "title": "Pullups",
+            "weight": Number(document.getElementById("buffgym-workout-a-pullups-weight").value),
+            "weightIncrement": Number(document.getElementById("buffgym-workout-a-pullups-weight-increment").value),
+            "unit": "Kg",
+            "sets": [10, 10, 10],
+            "restPeriod": 90
+          }
+        ]
+      };
+    }
+
+    function workoutB() {
+      return {
+        "title": "Workout B",
+        "exercises": [
+          {
+            "title": "Squats",
+            "weight": Number(document.getElementById("buffgym-workout-b-squats-weight").value),
+            "weightIncrement": Number(document.getElementById("buffgym-workout-b-squats-weight-increment").value),
+            "unit": "Kg",
+            "sets": [5, 5, 5, 5, 5],
+            "restPeriod": 90
+          },
+          {
+            "title": "Bench press",
+            "weight": Number(document.getElementById("buffgym-workout-b-bench-press-weight").value),
+            "weightIncrement": Number(document.getElementById("buffgym-workout-b-bench-press-weight-increment").value),
+            "unit": "Kg",
+            "sets": [5, 5, 5, 5, 5],
+            "restPeriod": 90
+          },
+          {
+            "title": "Row",
+            "weight": Number(document.getElementById("buffgym-workout-b-row-weight").value),
+            "weightIncrement": Number(document.getElementById("buffgym-workout-b-row-weight-increment").value),
+            "unit": "Kg",
+            "sets": [5, 5, 5, 5, 5],
+            "restPeriod": 90
+          },
+          {
+            "title": "Tricep extension",
+            "weight": Number(document.getElementById("buffgym-workout-b-triceps-weight").value),
+            "weightIncrement": Number(document.getElementById("buffgym-workout-b-triceps-weight-increment").value),
+            "unit": "Kg",
+            "sets": [10, 10, 10],
+            "restPeriod": 90
+          }
+        ]
+      };
+    }
+
+    document.getElementById("upload").addEventListener("click", function () {
+      Puck.eval(`require("Storage").writeJSON("buffgym-workout-a.json",${JSON.stringify(workoutA())})`, () => {
+        Puck.eval(`require("Storage").writeJSON("buffgym-workout-b.json",${JSON.stringify(workoutB())})`, () => {
+          Puck.eval(`Bangle.buzz()`, () => {
+            console.log("all done");
+          })
+        })
+      });
+    });
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/apps/timer/timer-custom.html b/apps/timer/timer-custom.html
index f63a8e5208..6b7b47bfbe 100644
--- a/apps/timer/timer-custom.html
+++ b/apps/timer/timer-custom.html
@@ -14,18 +14,16 @@
   </p>
   <script src="../../lib/customize.js"></script>
   <script src="../../lib/interface.js"></script>
-  <script src="../../js/comms.js"></script>
   <script>
     const txtTest1 = document.getElementById("txtTest1");
     const txtTest2 = document.getElementById("txtTest2");
     document.getElementById("save").addEventListener("click", () => {
-      // Util.writeJsonToStorageFile("timerdata", { txtTest1: txtTest1.value, txtTest2: txtTest2.value }, () => {
-      //   alert("successfully customized!");
-      // });
-
-      Comms.listFiles().then(data => {
-        console.log(data);
-      })
+      const data = { txtTest1: txtTest1.value, txtTest2: txtTest2.value };
+      Puck.eval(`require("Storage").writeJSON("timerdat",${data})`, () => {
+        Puck.eval(`Bangle.buzz()`, () => {
+          console.log("all done");
+        })
+      });
     });
 
     document.getElementById("upload").addEventListener("click", function () {
diff --git a/apps/timer/timer.app.js b/apps/timer/timer.app.js
index 7b8c01a3e2..78619d5f64 100644
--- a/apps/timer/timer.app.js
+++ b/apps/timer/timer.app.js
@@ -6,7 +6,7 @@ function outOfTime() {
     return;
   }
 
-  const data = require('Storage').readJSON('timerdata', true);
+  const data = require('Storage').readJSON('timerdat', true);
   if (data) {
     E.showMessage(`Out of Time: ${data.txtTest1}, ${data.txtTest2}, ${JSON.stringify(data)}`, 'My Timer');
   } else {
@@ -44,7 +44,7 @@ function countDown() {
 function startTimer() {
   counter = 31;
 
-  const data = require('Storage').readJSON('timerdata', true);
+  const data = require('Storage').readJSON('timerdat', true);
   if (data) {
     E.showMessage(`Out of Time: ${data.txtTest1}, ${data.txtTest2}, ${JSON.stringify(data)}`, 'My Timer');
   } else {
diff --git a/js/index.js b/js/index.js
index de0f42ab7e..03dccd3e78 100644
--- a/js/index.js
+++ b/js/index.js
@@ -72,9 +72,6 @@ function handleCustomApp(appTemplate) {
     iframe.contentWindow.addEventListener(
       'message',
       function (event) {
-        if (event.data.type === 'write') {
-          return;
-        }
         var appFiles = event.data;
         var app = {};
         Object.keys(appTemplate).forEach((k) => (app[k] = appTemplate[k]));
diff --git a/lib/interface.js b/lib/interface.js
index 02a0218b45..1fe58fdee1 100644
--- a/lib/interface.js
+++ b/lib/interface.js
@@ -46,9 +46,6 @@ var Util = {
   eraseStorage: function (filename, callback) {
     Puck.write(`\x10require("Storage").erase(${JSON.stringify(filename)})\n`, callback);
   },
-  writeJsonToStorageFile: function (filename, data, callback) {
-    Puck.write(`\x10require("Storage").writeJSON(${JSON.stringify(filename)}, ${data});\n`, callback);
-  },
   showModal: function (title) {
     if (!Util.domModal) {
       Util.domModal = document.createElement('div');

From 27cea62dab9f9f213472235eb1b11d8569c76a94 Mon Sep 17 00:00:00 2001
From: flashback2k14 <yeahdev@gmail.com>
Date: Thu, 30 Apr 2020 20:36:24 +0200
Subject: [PATCH 16/38] trying to write to storage for custom page #12

---
 js/index.js | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/js/index.js b/js/index.js
index 03dccd3e78..b3c682aee8 100644
--- a/js/index.js
+++ b/js/index.js
@@ -72,6 +72,14 @@ function handleCustomApp(appTemplate) {
     iframe.contentWindow.addEventListener(
       'message',
       function (event) {
+        if (
+          event.data.type !== 'app' ||
+          event.data.type !== 'widget' ||
+          event.data.type !== 'launch' ||
+          event.data.type !== 'bootloader'
+        ) {
+          return;
+        }
         var appFiles = event.data;
         var app = {};
         Object.keys(appTemplate).forEach((k) => (app[k] = appTemplate[k]));

From fa300a6abc745f9d21cd176d442a55b89c9f0345 Mon Sep 17 00:00:00 2001
From: flashback2k14 <yeahdev@gmail.com>
Date: Thu, 30 Apr 2020 21:05:18 +0200
Subject: [PATCH 17/38] trying to write to storage for custom page #13

---
 apps/timer/timer-custom.html | 2 +-
 apps/timer/timer.app.js      | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/timer/timer-custom.html b/apps/timer/timer-custom.html
index 6b7b47bfbe..7973dc98cc 100644
--- a/apps/timer/timer-custom.html
+++ b/apps/timer/timer-custom.html
@@ -19,7 +19,7 @@
     const txtTest2 = document.getElementById("txtTest2");
     document.getElementById("save").addEventListener("click", () => {
       const data = { txtTest1: txtTest1.value, txtTest2: txtTest2.value };
-      Puck.eval(`require("Storage").writeJSON("timerdat",${data})`, () => {
+      Puck.eval(`require("Storage").writeJSON("timerdat.json",${data})`, () => {
         Puck.eval(`Bangle.buzz()`, () => {
           console.log("all done");
         })
diff --git a/apps/timer/timer.app.js b/apps/timer/timer.app.js
index 78619d5f64..4e4d82d507 100644
--- a/apps/timer/timer.app.js
+++ b/apps/timer/timer.app.js
@@ -6,7 +6,7 @@ function outOfTime() {
     return;
   }
 
-  const data = require('Storage').readJSON('timerdat', true);
+  const data = require('Storage').readJSON('timerdat.json', true);
   if (data) {
     E.showMessage(`Out of Time: ${data.txtTest1}, ${data.txtTest2}, ${JSON.stringify(data)}`, 'My Timer');
   } else {
@@ -44,7 +44,7 @@ function countDown() {
 function startTimer() {
   counter = 31;
 
-  const data = require('Storage').readJSON('timerdat', true);
+  const data = require('Storage').readJSON('timerdat.json', true);
   if (data) {
     E.showMessage(`Out of Time: ${data.txtTest1}, ${data.txtTest2}, ${JSON.stringify(data)}`, 'My Timer');
   } else {

From 315a64c40925f3d840c0fb567a5f4cc25ff08d2e Mon Sep 17 00:00:00 2001
From: flashback2k14 <yeahdev@gmail.com>
Date: Fri, 1 May 2020 12:39:25 +0200
Subject: [PATCH 18/38] change app structure

---
 apps.json                                 |  14 +++++---
 apps/timer/ChangeLog                      |   3 +-
 apps/timer/{timer.app.js => app/index.js} |   4 +--
 apps/timer/{ => assets}/timer-icon.js     |   0
 apps/timer/{ => assets}/timer.png         | Bin
 apps/timer/custom/index.html              |  42 ++++++++++++++++++++++
 apps/timer/data/custom.json               |   0
 apps/timer/timer-custom.html              |  37 -------------------
 js/index.js                               |  16 ++++-----
 9 files changed, 63 insertions(+), 53 deletions(-)
 rename apps/timer/{timer.app.js => app/index.js} (88%)
 rename apps/timer/{ => assets}/timer-icon.js (100%)
 rename apps/timer/{ => assets}/timer.png (100%)
 create mode 100644 apps/timer/custom/index.html
 create mode 100644 apps/timer/data/custom.json
 delete mode 100644 apps/timer/timer-custom.html

diff --git a/apps.json b/apps.json
index 539ad67ee4..e199a622b8 100644
--- a/apps.json
+++ b/apps.json
@@ -2564,22 +2564,26 @@
     "id": "timer",
     "name": "My Timer App",
     "shortName": "My Timer",
-    "icon": "timer.png",
-    "version": "0.03",
+    "icon": "assets/timer.png",
+    "version": "0.04",
     "description": "This is a description of my awesome timer app",
     "allow_emulator": true,
     "tags": "tool",
     "readme": "README.md",
-    "custom": "timer-custom.html",
+    "custom": "custom/index.html",
     "storage": [
       {
         "name": "timer.app.js",
-        "url": "timer.app.js"
+        "url": "app/index.js"
       },
       {
         "name": "timer.img",
-        "url": "timer-icon.js",
+        "url": "assets/timer-icon.js",
         "evaluate": true
+      },
+      {
+        "name": "timer.custom.json",
+        "url": "data/custom.json"
       }
     ]
   }
diff --git a/apps/timer/ChangeLog b/apps/timer/ChangeLog
index 37268adfca..e0cac0bc11 100644
--- a/apps/timer/ChangeLog
+++ b/apps/timer/ChangeLog
@@ -1,3 +1,4 @@
 0.01: New App!
 0.02: add custom html
-0.03: trying simplify custom app
\ No newline at end of file
+0.03: trying simplify custom app
+0.04: change app structure, custom page saving 
\ No newline at end of file
diff --git a/apps/timer/timer.app.js b/apps/timer/app/index.js
similarity index 88%
rename from apps/timer/timer.app.js
rename to apps/timer/app/index.js
index 4e4d82d507..7b25f1fac6 100644
--- a/apps/timer/timer.app.js
+++ b/apps/timer/app/index.js
@@ -6,7 +6,7 @@ function outOfTime() {
     return;
   }
 
-  const data = require('Storage').readJSON('timerdat.json', true);
+  const data = require('Storage').readJSON('timer.custom.json', true);
   if (data) {
     E.showMessage(`Out of Time: ${data.txtTest1}, ${data.txtTest2}, ${JSON.stringify(data)}`, 'My Timer');
   } else {
@@ -44,7 +44,7 @@ function countDown() {
 function startTimer() {
   counter = 31;
 
-  const data = require('Storage').readJSON('timerdat.json', true);
+  const data = require('Storage').readJSON('timer.custom.json', true);
   if (data) {
     E.showMessage(`Out of Time: ${data.txtTest1}, ${data.txtTest2}, ${JSON.stringify(data)}`, 'My Timer');
   } else {
diff --git a/apps/timer/timer-icon.js b/apps/timer/assets/timer-icon.js
similarity index 100%
rename from apps/timer/timer-icon.js
rename to apps/timer/assets/timer-icon.js
diff --git a/apps/timer/timer.png b/apps/timer/assets/timer.png
similarity index 100%
rename from apps/timer/timer.png
rename to apps/timer/assets/timer.png
diff --git a/apps/timer/custom/index.html b/apps/timer/custom/index.html
new file mode 100644
index 0000000000..2bb4d2baac
--- /dev/null
+++ b/apps/timer/custom/index.html
@@ -0,0 +1,42 @@
+<html>
+
+<head>
+  <link rel="stylesheet" href="../../../css/spectre.min.css">
+</head>
+
+<body>
+  <p>
+    <label for="txtTest1">Test 1</label> <input id="txtTest1" type="text">
+    <label for="txtTest2">Test 2</label> <input id="txtTest2" type="text">
+    <!-- <button id="save" class="btn btn-secondary">Save</button> -->
+
+    <button id="upload" class="btn btn-primary">Upload</button>
+  </p>
+  <script src="../../../lib/customize.js"></script>
+  <script src="../../../lib/interface.js"></script>
+  <script>
+    const txtTest1 = document.getElementById("txtTest1");
+    const txtTest2 = document.getElementById("txtTest2");
+
+    // document.getElementById("save").addEventListener("click", () => {
+    //   const data = { txtTest1: txtTest1.value, txtTest2: txtTest2.value };
+    //   Puck.eval(`require("Storage").writeJSON("timerdat.json",${data})`, () => {
+    //     Puck.eval(`Bangle.buzz()`, () => {
+    //       console.log("all done");
+    //     })
+    //   });
+    // });
+
+    document.getElementById("upload").addEventListener("click", function () {
+      const data = { txtTest1: txtTest1.value, txtTest2: txtTest2.value };
+      sendCustomizedApp({
+        id: "timer",
+        storage: [
+          { name: "timer.custom.json", content: JSON.stringify(data) }
+        ]
+      });
+    });
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/apps/timer/data/custom.json b/apps/timer/data/custom.json
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/apps/timer/timer-custom.html b/apps/timer/timer-custom.html
deleted file mode 100644
index 7973dc98cc..0000000000
--- a/apps/timer/timer-custom.html
+++ /dev/null
@@ -1,37 +0,0 @@
-<html>
-
-<head>
-  <link rel="stylesheet" href="../../css/spectre.min.css">
-</head>
-
-<body>
-  <p>
-    <label for="txtTest1"></label> <input id="txtTest1" type="text">
-    <label for="txtTest2"></label> <input id="txtTest2" type="text">
-    <button id="save" class="btn btn-secondary">Save</button>
-
-    <button id="upload" class="btn btn-primary">Upload</button>
-  </p>
-  <script src="../../lib/customize.js"></script>
-  <script src="../../lib/interface.js"></script>
-  <script>
-    const txtTest1 = document.getElementById("txtTest1");
-    const txtTest2 = document.getElementById("txtTest2");
-    document.getElementById("save").addEventListener("click", () => {
-      const data = { txtTest1: txtTest1.value, txtTest2: txtTest2.value };
-      Puck.eval(`require("Storage").writeJSON("timerdat.json",${data})`, () => {
-        Puck.eval(`Bangle.buzz()`, () => {
-          console.log("all done");
-        })
-      });
-    });
-
-    document.getElementById("upload").addEventListener("click", function () {
-      sendCustomizedApp({
-        id: "timer"
-      });
-    });
-  </script>
-</body>
-
-</html>
\ No newline at end of file
diff --git a/js/index.js b/js/index.js
index b3c682aee8..235b9813c5 100644
--- a/js/index.js
+++ b/js/index.js
@@ -72,14 +72,14 @@ function handleCustomApp(appTemplate) {
     iframe.contentWindow.addEventListener(
       'message',
       function (event) {
-        if (
-          event.data.type !== 'app' ||
-          event.data.type !== 'widget' ||
-          event.data.type !== 'launch' ||
-          event.data.type !== 'bootloader'
-        ) {
-          return;
-        }
+        // if (
+        //   event.data.type !== 'app' ||
+        //   event.data.type !== 'widget' ||
+        //   event.data.type !== 'launch' ||
+        //   event.data.type !== 'bootloader'
+        // ) {
+        //   return;
+        // }
         var appFiles = event.data;
         var app = {};
         Object.keys(appTemplate).forEach((k) => (app[k] = appTemplate[k]));

From 125f5eb1fb7f411f0964ad6ba61dbcea0b2cc73f Mon Sep 17 00:00:00 2001
From: flashback2k14 <yeahdev@gmail.com>
Date: Fri, 1 May 2020 12:47:02 +0200
Subject: [PATCH 19/38] fix uploading app

---
 apps/timer/custom/index.html | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/apps/timer/custom/index.html b/apps/timer/custom/index.html
index 2bb4d2baac..5db61b858d 100644
--- a/apps/timer/custom/index.html
+++ b/apps/timer/custom/index.html
@@ -32,7 +32,19 @@
       sendCustomizedApp({
         id: "timer",
         storage: [
-          { name: "timer.custom.json", content: JSON.stringify(data) }
+          {
+            name: "timer.custom.json",
+            content: JSON.stringify(data)
+          },
+          {
+            name: "timer.app.js",
+            url: "app/index.js"
+          },
+          {
+            name: "timer.img",
+            url: "assets/timer-icon.js",
+            evaluate: true
+          }
         ]
       });
     });

From 6c159ee6beab4b9432f30d9ca0981973a033957c Mon Sep 17 00:00:00 2001
From: flashback2k14 <yeahdev@gmail.com>
Date: Fri, 1 May 2020 12:59:08 +0200
Subject: [PATCH 20/38] fix uploading app #2

---
 apps/timer/app/index.js | 16 +++++-----------
 1 file changed, 5 insertions(+), 11 deletions(-)

diff --git a/apps/timer/app/index.js b/apps/timer/app/index.js
index 7b25f1fac6..db29522dbb 100644
--- a/apps/timer/app/index.js
+++ b/apps/timer/app/index.js
@@ -1,5 +1,5 @@
-var counter = 31;
-var interval;
+let counter = 6;
+let interval;
 
 function outOfTime() {
   if (interval) {
@@ -8,7 +8,7 @@ function outOfTime() {
 
   const data = require('Storage').readJSON('timer.custom.json', true);
   if (data) {
-    E.showMessage(`Out of Time: ${data.txtTest1}, ${data.txtTest2}, ${JSON.stringify(data)}`, 'My Timer');
+    E.showMessage(`Out of Time:\n${data.txtTest1},\n${data.txtTest2}`, 'My Timer');
   } else {
     E.showMessage('Out of Time', 'My Timer');
   }
@@ -17,6 +17,7 @@ function outOfTime() {
   Bangle.beep(200, 4000)
     .then(() => new Promise((resolve) => setTimeout(resolve, 200)))
     .then(() => Bangle.beep(200, 3000));
+
   setTimeout(outOfTime, 10000);
 }
 
@@ -42,14 +43,7 @@ function countDown() {
 }
 
 function startTimer() {
-  counter = 31;
-
-  const data = require('Storage').readJSON('timer.custom.json', true);
-  if (data) {
-    E.showMessage(`Out of Time: ${data.txtTest1}, ${data.txtTest2}, ${JSON.stringify(data)}`, 'My Timer');
-  } else {
-    E.showMessage('Out of Time', 'My Timer');
-  }
+  counter = 6;
 
   countDown();
   if (!interval) {

From 11571bbacce9c2ab31f290553442c6fbb29c50a8 Mon Sep 17 00:00:00 2001
From: flashback2k14 <yeahdev@gmail.com>
Date: Fri, 1 May 2020 13:18:13 +0200
Subject: [PATCH 21/38] small structure improvements

---
 apps/timer/custom/index.html | 55 +++++++++---------------------------
 apps/timer/custom/script.js  | 30 ++++++++++++++++++++
 js/index.js                  |  8 ------
 3 files changed, 43 insertions(+), 50 deletions(-)
 create mode 100644 apps/timer/custom/script.js

diff --git a/apps/timer/custom/index.html b/apps/timer/custom/index.html
index 5db61b858d..f1700346c6 100644
--- a/apps/timer/custom/index.html
+++ b/apps/timer/custom/index.html
@@ -5,50 +5,21 @@
 </head>
 
 <body>
-  <p>
-    <label for="txtTest1">Test 1</label> <input id="txtTest1" type="text">
-    <label for="txtTest2">Test 2</label> <input id="txtTest2" type="text">
-    <!-- <button id="save" class="btn btn-secondary">Save</button> -->
+  <div class="container">
+    <div class="form-group">
+      <label class="form-label" for="txtTest1">Test 1</label>
+      <input class="form-input" type="text" id="txtTest1" placeholder="Test 1">
+    </div>
 
-    <button id="upload" class="btn btn-primary">Upload</button>
-  </p>
-  <script src="../../../lib/customize.js"></script>
-  <script src="../../../lib/interface.js"></script>
-  <script>
-    const txtTest1 = document.getElementById("txtTest1");
-    const txtTest2 = document.getElementById("txtTest2");
-
-    // document.getElementById("save").addEventListener("click", () => {
-    //   const data = { txtTest1: txtTest1.value, txtTest2: txtTest2.value };
-    //   Puck.eval(`require("Storage").writeJSON("timerdat.json",${data})`, () => {
-    //     Puck.eval(`Bangle.buzz()`, () => {
-    //       console.log("all done");
-    //     })
-    //   });
-    // });
+    <div class="form-group">
+      <label class="form-label" for="txtTest2">Test 2</label>
+      <input class="form-input" type="text" id="txtTest2" placeholder="Test 2">
+    </div>
 
-    document.getElementById("upload").addEventListener("click", function () {
-      const data = { txtTest1: txtTest1.value, txtTest2: txtTest2.value };
-      sendCustomizedApp({
-        id: "timer",
-        storage: [
-          {
-            name: "timer.custom.json",
-            content: JSON.stringify(data)
-          },
-          {
-            name: "timer.app.js",
-            url: "app/index.js"
-          },
-          {
-            name: "timer.img",
-            url: "assets/timer-icon.js",
-            evaluate: true
-          }
-        ]
-      });
-    });
-  </script>
+    <button id="upload" class="btn btn-primary" style="float: right;">Upload</button>
+  </div>
+  <script src="../../../lib/customize.js"></script>
+  <script src="script.js"></script>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/apps/timer/custom/script.js b/apps/timer/custom/script.js
new file mode 100644
index 0000000000..fd10815105
--- /dev/null
+++ b/apps/timer/custom/script.js
@@ -0,0 +1,30 @@
+window.addEventListener('DOMContentLoaded', () => {
+  const txtTest1 = document.getElementById('txtTest1');
+  const txtTest2 = document.getElementById('txtTest2');
+
+  document.getElementById('upload').addEventListener('click', () => {
+    const data = {
+      txtTest1: txtTest1.value,
+      txtTest2: txtTest2.value,
+    };
+
+    sendCustomizedApp({
+      id: 'timer',
+      storage: [
+        {
+          name: 'timer.custom.json',
+          content: JSON.stringify(data),
+        },
+        {
+          name: 'timer.app.js',
+          url: 'app/index.js',
+        },
+        {
+          name: 'timer.img',
+          url: 'assets/timer-icon.js',
+          evaluate: true,
+        },
+      ],
+    });
+  });
+});
diff --git a/js/index.js b/js/index.js
index 235b9813c5..03dccd3e78 100644
--- a/js/index.js
+++ b/js/index.js
@@ -72,14 +72,6 @@ function handleCustomApp(appTemplate) {
     iframe.contentWindow.addEventListener(
       'message',
       function (event) {
-        // if (
-        //   event.data.type !== 'app' ||
-        //   event.data.type !== 'widget' ||
-        //   event.data.type !== 'launch' ||
-        //   event.data.type !== 'bootloader'
-        // ) {
-        //   return;
-        // }
         var appFiles = event.data;
         var app = {};
         Object.keys(appTemplate).forEach((k) => (app[k] = appTemplate[k]));

From 60ad48d915c095054ec10f6185bbb89bb8627329 Mon Sep 17 00:00:00 2001
From: flashback2k14 <yeahdev@gmail.com>
Date: Fri, 1 May 2020 13:47:53 +0200
Subject: [PATCH 22/38] try implement onInit hook for custom page #1

---
 apps/timer/custom/index.html | 16 ++++++++
 js/index.js                  | 76 +++++++++++++++++++++++++-----------
 2 files changed, 70 insertions(+), 22 deletions(-)

diff --git a/apps/timer/custom/index.html b/apps/timer/custom/index.html
index f1700346c6..78f75c822f 100644
--- a/apps/timer/custom/index.html
+++ b/apps/timer/custom/index.html
@@ -19,7 +19,23 @@
     <button id="upload" class="btn btn-primary" style="float: right;">Upload</button>
   </div>
   <script src="../../../lib/customize.js"></script>
+  <script src="../../../lib/interface.js"></script>
   <script src="script.js"></script>
+  <script>
+    function onInit() {
+      Puck.write('\x03', (result) => {
+        if (result === null) {
+          console.error('result === null');
+        }
+        Puck.eval(`require('Storage').readJSON('timer.custom.json', 1)`, (content, err) => {
+          if (content === null) {
+            console.error('content === null');
+          }
+          console.log(content);
+        });
+      });
+    }
+  </script>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/js/index.js b/js/index.js
index 03dccd3e78..d13ea82b79 100644
--- a/js/index.js
+++ b/js/index.js
@@ -54,7 +54,7 @@ function handleCustomApp(appTemplate) {
         </div>
         <div class="modal-body" style="height:100%">
           <div class="content" style="height:100%">
-            <iframe src="apps/${appTemplate.id}/${appTemplate.custom}" style="width:100%;height:100%;border:0px;">
+            <iframe style="width:100%;height:100%;border:0px;">
           </div>
         </div>
       </div>
@@ -69,27 +69,59 @@ function handleCustomApp(appTemplate) {
     });
 
     var iframe = modal.getElementsByTagName('iframe')[0];
-    iframe.contentWindow.addEventListener(
-      'message',
-      function (event) {
-        var appFiles = event.data;
-        var app = {};
-        Object.keys(appTemplate).forEach((k) => (app[k] = appTemplate[k]));
-        Object.keys(appFiles).forEach((k) => (app[k] = appFiles[k]));
-        console.log('Received custom app', app);
-        modal.remove();
-        Comms.uploadApp(app)
-          .then(() => {
-            Progress.hide({ sticky: true });
-            resolve();
-          })
-          .catch((e) => {
-            Progress.hide({ sticky: true });
-            reject(e);
-          });
-      },
-      false
-    );
+    iframe.onload = function () {
+      var iwin = iframe.contentWindow;
+      iwin.addEventListener(
+        'message',
+        function (event) {
+          var msg = event.data;
+          if (msg.type == 'eval') {
+            Puck.eval(msg.data, function (result) {
+              iwin.postMessage({
+                type: 'evalrsp',
+                data: result,
+                id: msg.id,
+              });
+            });
+          } else if (msg.type == 'write') {
+            Puck.write(msg.data, function (result) {
+              iwin.postMessage({
+                type: 'writersp',
+                data: result,
+                id: msg.id,
+              });
+            });
+          } else if (msg.type == 'readstoragefile') {
+            Comms.readStorageFile(msg.data /*filename*/).then(function (result) {
+              iwin.postMessage({
+                type: 'readstoragefilersp',
+                data: result,
+                id: msg.id,
+              });
+            });
+          } else {
+            var appFiles = event.data;
+            var app = {};
+            Object.keys(appTemplate).forEach((k) => (app[k] = appTemplate[k]));
+            Object.keys(appFiles).forEach((k) => (app[k] = appFiles[k]));
+            console.log('Received custom app', app);
+            modal.remove();
+            Comms.uploadApp(app)
+              .then(() => {
+                Progress.hide({ sticky: true });
+                resolve();
+              })
+              .catch((e) => {
+                Progress.hide({ sticky: true });
+                reject(e);
+              });
+          }
+        },
+        false
+      );
+      iwin.postMessage({ type: 'init' });
+    };
+    iframe.src = `apps/${appTemplate.id}/${appTemplate.custom}`;
   });
 }
 

From 6d62a0b5ac18c9d78d4da2c1db5d4286e4e6a7a1 Mon Sep 17 00:00:00 2001
From: flashback2k14 <yeahdev@gmail.com>
Date: Fri, 1 May 2020 13:53:46 +0200
Subject: [PATCH 23/38] try implement onInit hook for custom page #2

---
 apps.json            | 2 +-
 apps/timer/ChangeLog | 3 ++-
 js/index.js          | 2 +-
 3 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/apps.json b/apps.json
index e199a622b8..a0bb32bc5e 100644
--- a/apps.json
+++ b/apps.json
@@ -2565,7 +2565,7 @@
     "name": "My Timer App",
     "shortName": "My Timer",
     "icon": "assets/timer.png",
-    "version": "0.04",
+    "version": "0.05",
     "description": "This is a description of my awesome timer app",
     "allow_emulator": true,
     "tags": "tool",
diff --git a/apps/timer/ChangeLog b/apps/timer/ChangeLog
index e0cac0bc11..8b70a52536 100644
--- a/apps/timer/ChangeLog
+++ b/apps/timer/ChangeLog
@@ -1,4 +1,5 @@
 0.01: New App!
 0.02: add custom html
 0.03: trying simplify custom app
-0.04: change app structure, custom page saving 
\ No newline at end of file
+0.04: change app structure, custom page saving
+0.05: add onInit() hook
\ No newline at end of file
diff --git a/js/index.js b/js/index.js
index d13ea82b79..9688179094 100644
--- a/js/index.js
+++ b/js/index.js
@@ -99,7 +99,7 @@ function handleCustomApp(appTemplate) {
                 id: msg.id,
               });
             });
-          } else {
+          } else if (msg.type == 'app' || msg.type == 'widget' || msg.type == 'launch' || msg.type == 'bootloader') {
             var appFiles = event.data;
             var app = {};
             Object.keys(appTemplate).forEach((k) => (app[k] = appTemplate[k]));

From 12f479d8b4f2553f6b8c0efd384ae6082c9d321d Mon Sep 17 00:00:00 2001
From: flashback2k14 <yeahdev@gmail.com>
Date: Fri, 1 May 2020 14:01:08 +0200
Subject: [PATCH 24/38] try implement onInit hook for custom page #3

---
 apps/timer/custom/index.html | 3 ++-
 apps/timer/custom/script.js  | 1 +
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/apps/timer/custom/index.html b/apps/timer/custom/index.html
index 78f75c822f..c4288a19b9 100644
--- a/apps/timer/custom/index.html
+++ b/apps/timer/custom/index.html
@@ -27,9 +27,10 @@
         if (result === null) {
           console.error('result === null');
         }
-        Puck.eval(`require('Storage').readJSON('timer.custom.json', 1)`, (content, err) => {
+        Puck.eval('require("Storage").readJSON("timer.custom.json", true)', (content, err) => {
           if (content === null) {
             console.error('content === null');
+            return;
           }
           console.log(content);
         });
diff --git a/apps/timer/custom/script.js b/apps/timer/custom/script.js
index fd10815105..f5bfee2f98 100644
--- a/apps/timer/custom/script.js
+++ b/apps/timer/custom/script.js
@@ -10,6 +10,7 @@ window.addEventListener('DOMContentLoaded', () => {
 
     sendCustomizedApp({
       id: 'timer',
+      type: 'app',
       storage: [
         {
           name: 'timer.custom.json',

From c83c59b9428999b66d7cf062e197bb3a0bf454eb Mon Sep 17 00:00:00 2001
From: flashback2k14 <yeahdev@gmail.com>
Date: Fri, 1 May 2020 14:13:12 +0200
Subject: [PATCH 25/38] try implement onInit hook for custom page #4

---
 apps/timer/custom/index.html | 16 ----------------
 apps/timer/custom/script.js  | 21 ++++++++++++++++++++-
 js/index.js                  |  4 ++++
 3 files changed, 24 insertions(+), 17 deletions(-)

diff --git a/apps/timer/custom/index.html b/apps/timer/custom/index.html
index c4288a19b9..deeb5384a6 100644
--- a/apps/timer/custom/index.html
+++ b/apps/timer/custom/index.html
@@ -21,22 +21,6 @@
   <script src="../../../lib/customize.js"></script>
   <script src="../../../lib/interface.js"></script>
   <script src="script.js"></script>
-  <script>
-    function onInit() {
-      Puck.write('\x03', (result) => {
-        if (result === null) {
-          console.error('result === null');
-        }
-        Puck.eval('require("Storage").readJSON("timer.custom.json", true)', (content, err) => {
-          if (content === null) {
-            console.error('content === null');
-            return;
-          }
-          console.log(content);
-        });
-      });
-    }
-  </script>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/apps/timer/custom/script.js b/apps/timer/custom/script.js
index f5bfee2f98..4555ca464b 100644
--- a/apps/timer/custom/script.js
+++ b/apps/timer/custom/script.js
@@ -10,7 +10,6 @@ window.addEventListener('DOMContentLoaded', () => {
 
     sendCustomizedApp({
       id: 'timer',
-      type: 'app',
       storage: [
         {
           name: 'timer.custom.json',
@@ -28,4 +27,24 @@ window.addEventListener('DOMContentLoaded', () => {
       ],
     });
   });
+
+  onInit = () => {
+    Puck.write('\x03', () => {
+      Puck.eval('require("Storage").readJSON("timer.custom.json", true)', (content, err) => {
+        if (err) {
+          console.error(err);
+          return;
+        }
+        if (content === null) {
+          console.error('content === null');
+          return;
+        }
+
+        console.log(content);
+
+        txtTest1.value = content.txtTest1;
+        txtTest2.value = content.txtTest2;
+      });
+    });
+  };
 });
diff --git a/js/index.js b/js/index.js
index 9688179094..ced075e678 100644
--- a/js/index.js
+++ b/js/index.js
@@ -75,6 +75,10 @@ function handleCustomApp(appTemplate) {
         'message',
         function (event) {
           var msg = event.data;
+          if (!msg.type) {
+            msg.type = 'app';
+          }
+
           if (msg.type == 'eval') {
             Puck.eval(msg.data, function (result) {
               iwin.postMessage({

From 5a8001daa19454da04a710b67ea406a4b4651d83 Mon Sep 17 00:00:00 2001
From: flashback2k14 <yeahdev@gmail.com>
Date: Fri, 1 May 2020 14:24:35 +0200
Subject: [PATCH 26/38] try implement onInit hook for custom page #5

---
 apps/timer/custom/script.js | 49 ++++++++++++++++++++++++-------------
 1 file changed, 32 insertions(+), 17 deletions(-)

diff --git a/apps/timer/custom/script.js b/apps/timer/custom/script.js
index 4555ca464b..bf4642c062 100644
--- a/apps/timer/custom/script.js
+++ b/apps/timer/custom/script.js
@@ -8,23 +8,38 @@ window.addEventListener('DOMContentLoaded', () => {
       txtTest2: txtTest2.value,
     };
 
-    sendCustomizedApp({
-      id: 'timer',
-      storage: [
-        {
-          name: 'timer.custom.json',
-          content: JSON.stringify(data),
-        },
-        {
-          name: 'timer.app.js',
-          url: 'app/index.js',
-        },
-        {
-          name: 'timer.img',
-          url: 'assets/timer-icon.js',
-          evaluate: true,
-        },
-      ],
+    // sendCustomizedApp({
+    //   id: 'timer',
+    //   storage: [
+    //     {
+    //       name: 'timer.custom.json',
+    //       content: JSON.stringify(data),
+    //     },
+    //     {
+    //       name: 'timer.app.js',
+    //       url: 'app/index.js',
+    //     },
+    //     {
+    //       name: 'timer.img',
+    //       url: 'assets/timer-icon.js',
+    //       evaluate: true,
+    //     },
+    //   ],
+    // });
+
+    Puck.write('\x03', () => {
+      Puck.eval(`require("Storage").writeJSON("timer.custom.json", ${JSON.stringify(data)})`, (content, err) => {
+        if (err) {
+          console.error(err);
+          return;
+        }
+        if (content === null) {
+          console.error('content === null');
+          return;
+        }
+
+        console.log(content);
+      });
     });
   });
 

From 7937e2245295981472ff122c333588b14a8a2cbe Mon Sep 17 00:00:00 2001
From: flashback2k14 <yeahdev@gmail.com>
Date: Fri, 1 May 2020 14:31:39 +0200
Subject: [PATCH 27/38] save user setting insteaf of uploading app again

---
 apps.json                    |  2 +-
 apps/timer/ChangeLog         |  3 ++-
 apps/timer/custom/index.html |  2 +-
 apps/timer/custom/script.js  | 29 ++++-------------------------
 4 files changed, 8 insertions(+), 28 deletions(-)

diff --git a/apps.json b/apps.json
index a0bb32bc5e..eae3d5c213 100644
--- a/apps.json
+++ b/apps.json
@@ -2565,7 +2565,7 @@
     "name": "My Timer App",
     "shortName": "My Timer",
     "icon": "assets/timer.png",
-    "version": "0.05",
+    "version": "0.06",
     "description": "This is a description of my awesome timer app",
     "allow_emulator": true,
     "tags": "tool",
diff --git a/apps/timer/ChangeLog b/apps/timer/ChangeLog
index 8b70a52536..1f7d932fbd 100644
--- a/apps/timer/ChangeLog
+++ b/apps/timer/ChangeLog
@@ -2,4 +2,5 @@
 0.02: add custom html
 0.03: trying simplify custom app
 0.04: change app structure, custom page saving
-0.05: add onInit() hook
\ No newline at end of file
+0.05: add onInit() hook
+0.06: instead of uploading, simply save data
\ No newline at end of file
diff --git a/apps/timer/custom/index.html b/apps/timer/custom/index.html
index deeb5384a6..410f222ac8 100644
--- a/apps/timer/custom/index.html
+++ b/apps/timer/custom/index.html
@@ -16,7 +16,7 @@
       <input class="form-input" type="text" id="txtTest2" placeholder="Test 2">
     </div>
 
-    <button id="upload" class="btn btn-primary" style="float: right;">Upload</button>
+    <button id="save" class="btn btn-primary" style="float: right;">Save</button>
   </div>
   <script src="../../../lib/customize.js"></script>
   <script src="../../../lib/interface.js"></script>
diff --git a/apps/timer/custom/script.js b/apps/timer/custom/script.js
index bf4642c062..6b3be3826a 100644
--- a/apps/timer/custom/script.js
+++ b/apps/timer/custom/script.js
@@ -2,31 +2,12 @@ window.addEventListener('DOMContentLoaded', () => {
   const txtTest1 = document.getElementById('txtTest1');
   const txtTest2 = document.getElementById('txtTest2');
 
-  document.getElementById('upload').addEventListener('click', () => {
+  document.getElementById('save').addEventListener('click', () => {
     const data = {
       txtTest1: txtTest1.value,
       txtTest2: txtTest2.value,
     };
 
-    // sendCustomizedApp({
-    //   id: 'timer',
-    //   storage: [
-    //     {
-    //       name: 'timer.custom.json',
-    //       content: JSON.stringify(data),
-    //     },
-    //     {
-    //       name: 'timer.app.js',
-    //       url: 'app/index.js',
-    //     },
-    //     {
-    //       name: 'timer.img',
-    //       url: 'assets/timer-icon.js',
-    //       evaluate: true,
-    //     },
-    //   ],
-    // });
-
     Puck.write('\x03', () => {
       Puck.eval(`require("Storage").writeJSON("timer.custom.json", ${JSON.stringify(data)})`, (content, err) => {
         if (err) {
@@ -38,7 +19,7 @@ window.addEventListener('DOMContentLoaded', () => {
           return;
         }
 
-        console.log(content);
+        alert('successfully saved.');
       });
     });
   });
@@ -55,10 +36,8 @@ window.addEventListener('DOMContentLoaded', () => {
           return;
         }
 
-        console.log(content);
-
-        txtTest1.value = content.txtTest1;
-        txtTest2.value = content.txtTest2;
+        txtTest1.value = content['txtTest1'];
+        txtTest2.value = content['txtTest2'];
       });
     });
   };

From 1e5063e08ce5ad7c2a3684e35d1ba1598523e462 Mon Sep 17 00:00:00 2001
From: flashback2k14 <yeahdev@gmail.com>
Date: Fri, 1 May 2020 14:43:16 +0200
Subject: [PATCH 28/38] add upload button

---
 apps/timer/custom/index.html | 3 ++-
 apps/timer/custom/script.js  | 6 ++++++
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/apps/timer/custom/index.html b/apps/timer/custom/index.html
index 410f222ac8..4663907c87 100644
--- a/apps/timer/custom/index.html
+++ b/apps/timer/custom/index.html
@@ -16,7 +16,8 @@
       <input class="form-input" type="text" id="txtTest2" placeholder="Test 2">
     </div>
 
-    <button id="save" class="btn btn-primary" style="float: right;">Save</button>
+    <button id="upload" class="btn btn-primary" style="float: right;">Upload</button>
+    <button id="save" class="btn" style="float: right; margin-right: 12px">Save</button>
   </div>
   <script src="../../../lib/customize.js"></script>
   <script src="../../../lib/interface.js"></script>
diff --git a/apps/timer/custom/script.js b/apps/timer/custom/script.js
index 6b3be3826a..7406176fb0 100644
--- a/apps/timer/custom/script.js
+++ b/apps/timer/custom/script.js
@@ -24,6 +24,12 @@ window.addEventListener('DOMContentLoaded', () => {
     });
   });
 
+  document.getElementById('upload').addEventListener('click', () => {
+    sendCustomizedApp({
+      id: 'timer',
+    });
+  });
+
   onInit = () => {
     Puck.write('\x03', () => {
       Puck.eval('require("Storage").readJSON("timer.custom.json", true)', (content, err) => {

From 7dea6a9795304e8d1edd05f4c2710ec5d419e026 Mon Sep 17 00:00:00 2001
From: flashback2k14 <yeahdev@gmail.com>
Date: Fri, 1 May 2020 15:53:56 +0200
Subject: [PATCH 29/38] add color settings

---
 apps.json                    |  2 +-
 apps/timer/ChangeLog         |  3 +-
 apps/timer/app/index.js      | 20 +++++++----
 apps/timer/custom/index.html | 69 +++++++++++++++++++++++++++++++++---
 apps/timer/custom/script.js  | 68 +++++++++++++++++++++++++++++------
 5 files changed, 138 insertions(+), 24 deletions(-)

diff --git a/apps.json b/apps.json
index eae3d5c213..0363dd6304 100644
--- a/apps.json
+++ b/apps.json
@@ -2565,7 +2565,7 @@
     "name": "My Timer App",
     "shortName": "My Timer",
     "icon": "assets/timer.png",
-    "version": "0.06",
+    "version": "0.07",
     "description": "This is a description of my awesome timer app",
     "allow_emulator": true,
     "tags": "tool",
diff --git a/apps/timer/ChangeLog b/apps/timer/ChangeLog
index 1f7d932fbd..793752b486 100644
--- a/apps/timer/ChangeLog
+++ b/apps/timer/ChangeLog
@@ -3,4 +3,5 @@
 0.03: trying simplify custom app
 0.04: change app structure, custom page saving
 0.05: add onInit() hook
-0.06: instead of uploading, simply save data
\ No newline at end of file
+0.06: instead of uploading, simply save data
+0.07: add color settings
\ No newline at end of file
diff --git a/apps/timer/app/index.js b/apps/timer/app/index.js
index db29522dbb..e856a1804b 100644
--- a/apps/timer/app/index.js
+++ b/apps/timer/app/index.js
@@ -1,18 +1,20 @@
 let counter = 6;
 let interval;
+let uiConfig = {};
+
+function loadData() {
+  const data = require('Storage').readJSON('timer.custom.json', true);
+  if (data) {
+    uiConfig['textColor'] = data.textColor;
+    uiConfig['bgColor'] = data.bgColor;
+  }
+}
 
 function outOfTime() {
   if (interval) {
     return;
   }
 
-  const data = require('Storage').readJSON('timer.custom.json', true);
-  if (data) {
-    E.showMessage(`Out of Time:\n${data.txtTest1},\n${data.txtTest2}`, 'My Timer');
-  } else {
-    E.showMessage('Out of Time', 'My Timer');
-  }
-
   Bangle.buzz();
   Bangle.beep(200, 4000)
     .then(() => new Promise((resolve) => setTimeout(resolve, 200)))
@@ -34,6 +36,9 @@ function countDown() {
 
   g.clear();
 
+  g.setColor(uiConfig['textColor'] || 0xffff);
+  g.setBgColor(uiConfig['bgColor'] || 0x0000);
+
   g.setFontAlign(0, 0);
   g.setFont('6x8', 8);
 
@@ -51,4 +56,5 @@ function startTimer() {
   }
 }
 
+loadData();
 startTimer();
diff --git a/apps/timer/custom/index.html b/apps/timer/custom/index.html
index 4663907c87..e82c78b74b 100644
--- a/apps/timer/custom/index.html
+++ b/apps/timer/custom/index.html
@@ -2,22 +2,83 @@
 
 <head>
   <link rel="stylesheet" href="../../../css/spectre.min.css">
+  <style>
+    .toast {
+      position: absolute;
+      bottom: 8px;
+      right: 8px;
+      left: 8px;
+      width: 99%;
+    }
+  </style>
 </head>
 
 <body>
   <div class="container">
     <div class="form-group">
-      <label class="form-label" for="txtTest1">Test 1</label>
-      <input class="form-input" type="text" id="txtTest1" placeholder="Test 1">
+      <label class="form-label" for="textColor">Text color</label>
+      <select id="textColor" class="form-select">
+        <option disabled>Choose an option</option>
+        <option value="0x0000">Black</option>
+        <option value="0x000F">Navy</option>
+        <option value="0x03E0">DarkGreen</option>
+        <option value="0x03EF">DarkCyan</option>
+        <option value="0x7800">Maroon</option>
+        <option value="0x780F">Purple</option>
+        <option value="0x7BE0">Olive</option>
+        <option value="0xC618">LightGray</option>
+        <option value="0x7BEF">DarkGrey</option>
+        <option value="0x001F">Blue</option>
+        <option value="0x07E0">Green</option>
+        <option value="0x07FF">Cyan</option>
+        <option value="0xF800">RED</option>
+        <option value="0xF81F">Magenta</option>
+        <option value="0xFFE0">Yellow</option>
+        <option value="0xFFFF">White</option>
+        <option value="0xFD20">Orange</option>
+        <option value="0xAFE5">GreenYellow</option>
+        <option value="0xF81F">Pink</option>
+      </select>
     </div>
 
     <div class="form-group">
-      <label class="form-label" for="txtTest2">Test 2</label>
-      <input class="form-input" type="text" id="txtTest2" placeholder="Test 2">
+      <label class="form-label" for="bgColor">Background color</label>
+      <select id="bgColor" class="form-select">
+        <option disabled>Choose an option</option>
+        <option value="0x0000">Black</option>
+        <option value="0x000F">Navy</option>
+        <option value="0x03E0">DarkGreen</option>
+        <option value="0x03EF">DarkCyan</option>
+        <option value="0x7800">Maroon</option>
+        <option value="0x780F">Purple</option>
+        <option value="0x7BE0">Olive</option>
+        <option value="0xC618">LightGray</option>
+        <option value="0x7BEF">DarkGrey</option>
+        <option value="0x001F">Blue</option>
+        <option value="0x07E0">Green</option>
+        <option value="0x07FF">Cyan</option>
+        <option value="0xF800">RED</option>
+        <option value="0xF81F">Magenta</option>
+        <option value="0xFFE0">Yellow</option>
+        <option value="0xFFFF">White</option>
+        <option value="0xFD20">Orange</option>
+        <option value="0xAFE5">GreenYellow</option>
+        <option value="0xF81F">Pink</option>
+      </select>
     </div>
 
     <button id="upload" class="btn btn-primary" style="float: right;">Upload</button>
     <button id="save" class="btn" style="float: right; margin-right: 12px">Save</button>
+
+    <div class="clearfix"></div>
+
+    <div id="toastSuccess" class="toast toast-success d-none">
+      <span id="toastSuccessText"></span>
+    </div>
+
+    <div id="toastError" class="toast toast-error d-none">
+      <span id="toastErrorText"></span>
+    </div>
   </div>
   <script src="../../../lib/customize.js"></script>
   <script src="../../../lib/interface.js"></script>
diff --git a/apps/timer/custom/script.js b/apps/timer/custom/script.js
index 7406176fb0..40662d16e5 100644
--- a/apps/timer/custom/script.js
+++ b/apps/timer/custom/script.js
@@ -1,50 +1,96 @@
 window.addEventListener('DOMContentLoaded', () => {
-  const txtTest1 = document.getElementById('txtTest1');
-  const txtTest2 = document.getElementById('txtTest2');
+  const MessageType = Object.freeze({
+    SUCCESS: 'success',
+    ERROR: 'error',
+  });
+  let Ui;
+
+  _showMessage = (type, message) => {
+    const text = type === MessageType.SUCCESS ? Ui.toastSuccessText : Ui.toastErrorText;
+    const container = type === MessageType.SUCCESS ? Ui.toastSuccess : Ui.toastError;
+
+    text.textContent = message;
+    container.classList.remove('d-none');
+    container.classList.add('d-block');
+
+    setTimeout(() => {
+      container.classList.remove('d-block');
+      container.classList.add('d-none');
+      text.textContent = '';
+    }, 3000);
+  };
 
-  document.getElementById('save').addEventListener('click', () => {
+  _save = () => {
     const data = {
-      txtTest1: txtTest1.value,
-      txtTest2: txtTest2.value,
+      textColor: Ui.textColor.value,
+      bgColor: Ui.bgColor.value,
     };
 
     Puck.write('\x03', () => {
       Puck.eval(`require("Storage").writeJSON("timer.custom.json", ${JSON.stringify(data)})`, (content, err) => {
         if (err) {
           console.error(err);
+          _showMessage(MessageType.ERROR, JSON.stringify(err));
           return;
         }
+
         if (content === null) {
           console.error('content === null');
+          _showMessage(MessageType.ERROR, 'no content found.');
           return;
         }
 
-        alert('successfully saved.');
+        _showMessage(MessageType.SUCCESS, 'successfully saved.');
       });
     });
-  });
+  };
 
-  document.getElementById('upload').addEventListener('click', () => {
+  _upload = () => {
     sendCustomizedApp({
       id: 'timer',
     });
-  });
+  };
+
+  initUiElements = () => {
+    Ui = {
+      textColor: document.getElementById('textColor'),
+      bgColor: document.getElementById('bgColor'),
+      toastSuccess: document.getElementById('toastSuccess'),
+      toastSuccessText: document.getElementById('toastSuccessText'),
+      toastError: document.getElementById('toastError'),
+      toastErrorText: document.getElementById('toastErrorText'),
+      saveButton: document.getElementById('save'),
+      uploadButton: document.getElementById('upload'),
+    };
+  };
+
+  initListeners = () => {
+    Ui.saveButton.addEventListener('click', _save);
+    Ui.uploadButton.addEventListener('click', _upload);
+  };
 
   onInit = () => {
     Puck.write('\x03', () => {
       Puck.eval('require("Storage").readJSON("timer.custom.json", true)', (content, err) => {
         if (err) {
           console.error(err);
+          _showMessage(MessageType.ERROR, JSON.stringify(err));
           return;
         }
         if (content === null) {
           console.error('content === null');
+          _showMessage(MessageType.ERROR, 'no content found.');
           return;
         }
 
-        txtTest1.value = content['txtTest1'];
-        txtTest2.value = content['txtTest2'];
+        Ui.textColor.value = content['textColor'];
+        Ui.bgColor.value = content['bgColor'];
+
+        _showMessage(MessageType.SUCCESS, 'successfully saved.');
       });
     });
   };
+
+  initUiElements();
+  initListeners();
 });

From 4a3b896121b495150d1dba01fe7748ffb03fe94d Mon Sep 17 00:00:00 2001
From: flashback2k14 <yeahdev@gmail.com>
Date: Fri, 1 May 2020 16:03:58 +0200
Subject: [PATCH 30/38] change custom to interface setting

---
 apps.json                    | 4 ++--
 apps/timer/ChangeLog         | 3 ++-
 apps/timer/custom/index.html | 2 +-
 3 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/apps.json b/apps.json
index 0363dd6304..df63fcba19 100644
--- a/apps.json
+++ b/apps.json
@@ -2565,12 +2565,12 @@
     "name": "My Timer App",
     "shortName": "My Timer",
     "icon": "assets/timer.png",
-    "version": "0.07",
+    "version": "0.08",
     "description": "This is a description of my awesome timer app",
     "allow_emulator": true,
     "tags": "tool",
     "readme": "README.md",
-    "custom": "custom/index.html",
+    "interface": "custom/index.html",
     "storage": [
       {
         "name": "timer.app.js",
diff --git a/apps/timer/ChangeLog b/apps/timer/ChangeLog
index 793752b486..4a8374eddc 100644
--- a/apps/timer/ChangeLog
+++ b/apps/timer/ChangeLog
@@ -4,4 +4,5 @@
 0.04: change app structure, custom page saving
 0.05: add onInit() hook
 0.06: instead of uploading, simply save data
-0.07: add color settings
\ No newline at end of file
+0.07: add color settings
+0.08: change custom to interface setting
\ No newline at end of file
diff --git a/apps/timer/custom/index.html b/apps/timer/custom/index.html
index e82c78b74b..88d949ff91 100644
--- a/apps/timer/custom/index.html
+++ b/apps/timer/custom/index.html
@@ -67,7 +67,7 @@
       </select>
     </div>
 
-    <button id="upload" class="btn btn-primary" style="float: right;">Upload</button>
+    <!-- <button id="upload" class="btn btn-primary" style="float: right;">Upload</button> -->
     <button id="save" class="btn" style="float: right; margin-right: 12px">Save</button>
 
     <div class="clearfix"></div>

From 87e4c919b32b8736236f20b770fccff6d926dfc0 Mon Sep 17 00:00:00 2001
From: flashback2k14 <yeahdev@gmail.com>
Date: Fri, 1 May 2020 16:45:04 +0200
Subject: [PATCH 31/38] remove upload button from interface page

---
 apps/timer/custom/index.html | 79 ++++++++++++++++++------------------
 apps/timer/custom/script.js  | 14 ++-----
 2 files changed, 43 insertions(+), 50 deletions(-)

diff --git a/apps/timer/custom/index.html b/apps/timer/custom/index.html
index 88d949ff91..ade92fc908 100644
--- a/apps/timer/custom/index.html
+++ b/apps/timer/custom/index.html
@@ -19,25 +19,25 @@
       <label class="form-label" for="textColor">Text color</label>
       <select id="textColor" class="form-select">
         <option disabled>Choose an option</option>
-        <option value="0x0000">Black</option>
-        <option value="0x000F">Navy</option>
-        <option value="0x03E0">DarkGreen</option>
-        <option value="0x03EF">DarkCyan</option>
-        <option value="0x7800">Maroon</option>
-        <option value="0x780F">Purple</option>
-        <option value="0x7BE0">Olive</option>
-        <option value="0xC618">LightGray</option>
-        <option value="0x7BEF">DarkGrey</option>
-        <option value="0x001F">Blue</option>
-        <option value="0x07E0">Green</option>
-        <option value="0x07FF">Cyan</option>
-        <option value="0xF800">RED</option>
-        <option value="0xF81F">Magenta</option>
-        <option value="0xFFE0">Yellow</option>
-        <option value="0xFFFF">White</option>
-        <option value="0xFD20">Orange</option>
-        <option value="0xAFE5">GreenYellow</option>
-        <option value="0xF81F">Pink</option>
+        <option value="#0000">Black</option>
+        <option value="#000F">Navy</option>
+        <option value="#03E0">DarkGreen</option>
+        <option value="#03EF">DarkCyan</option>
+        <option value="#7800">Maroon</option>
+        <option value="#780F">Purple</option>
+        <option value="#7BE0">Olive</option>
+        <option value="#C618">LightGray</option>
+        <option value="#7BEF">DarkGrey</option>
+        <option value="#001F">Blue</option>
+        <option value="#07E0">Green</option>
+        <option value="#07FF">Cyan</option>
+        <option value="#F800">RED</option>
+        <option value="#F81F">Magenta</option>
+        <option value="#FFE0">Yellow</option>
+        <option value="#FFFF">White</option>
+        <option value="#FD20">Orange</option>
+        <option value="#AFE5">GreenYellow</option>
+        <option value="#F81F">Pink</option>
       </select>
     </div>
 
@@ -45,30 +45,29 @@
       <label class="form-label" for="bgColor">Background color</label>
       <select id="bgColor" class="form-select">
         <option disabled>Choose an option</option>
-        <option value="0x0000">Black</option>
-        <option value="0x000F">Navy</option>
-        <option value="0x03E0">DarkGreen</option>
-        <option value="0x03EF">DarkCyan</option>
-        <option value="0x7800">Maroon</option>
-        <option value="0x780F">Purple</option>
-        <option value="0x7BE0">Olive</option>
-        <option value="0xC618">LightGray</option>
-        <option value="0x7BEF">DarkGrey</option>
-        <option value="0x001F">Blue</option>
-        <option value="0x07E0">Green</option>
-        <option value="0x07FF">Cyan</option>
-        <option value="0xF800">RED</option>
-        <option value="0xF81F">Magenta</option>
-        <option value="0xFFE0">Yellow</option>
-        <option value="0xFFFF">White</option>
-        <option value="0xFD20">Orange</option>
-        <option value="0xAFE5">GreenYellow</option>
-        <option value="0xF81F">Pink</option>
+        <option value="#0000">Black</option>
+        <option value="#000F">Navy</option>
+        <option value="#03E0">DarkGreen</option>
+        <option value="#03EF">DarkCyan</option>
+        <option value="#7800">Maroon</option>
+        <option value="#780F">Purple</option>
+        <option value="#7BE0">Olive</option>
+        <option value="#C618">LightGray</option>
+        <option value="#7BEF">DarkGrey</option>
+        <option value="#001F">Blue</option>
+        <option value="#07E0">Green</option>
+        <option value="#07FF">Cyan</option>
+        <option value="#F800">RED</option>
+        <option value="#F81F">Magenta</option>
+        <option value="#FFE0">Yellow</option>
+        <option value="#FFFF">White</option>
+        <option value="#FD20">Orange</option>
+        <option value="#AFE5">GreenYellow</option>
+        <option value="#F81F">Pink</option>
       </select>
     </div>
 
-    <!-- <button id="upload" class="btn btn-primary" style="float: right;">Upload</button> -->
-    <button id="save" class="btn" style="float: right; margin-right: 12px">Save</button>
+    <button id="save" class="btn disabled" style="float: right;">Save</button>
 
     <div class="clearfix"></div>
 
diff --git a/apps/timer/custom/script.js b/apps/timer/custom/script.js
index 40662d16e5..bce32d1f7b 100644
--- a/apps/timer/custom/script.js
+++ b/apps/timer/custom/script.js
@@ -1,9 +1,10 @@
 window.addEventListener('DOMContentLoaded', () => {
+  let Ui;
+
   const MessageType = Object.freeze({
     SUCCESS: 'success',
     ERROR: 'error',
   });
-  let Ui;
 
   _showMessage = (type, message) => {
     const text = type === MessageType.SUCCESS ? Ui.toastSuccessText : Ui.toastErrorText;
@@ -45,12 +46,6 @@ window.addEventListener('DOMContentLoaded', () => {
     });
   };
 
-  _upload = () => {
-    sendCustomizedApp({
-      id: 'timer',
-    });
-  };
-
   initUiElements = () => {
     Ui = {
       textColor: document.getElementById('textColor'),
@@ -60,13 +55,11 @@ window.addEventListener('DOMContentLoaded', () => {
       toastError: document.getElementById('toastError'),
       toastErrorText: document.getElementById('toastErrorText'),
       saveButton: document.getElementById('save'),
-      uploadButton: document.getElementById('upload'),
     };
   };
 
   initListeners = () => {
     Ui.saveButton.addEventListener('click', _save);
-    Ui.uploadButton.addEventListener('click', _upload);
   };
 
   onInit = () => {
@@ -85,8 +78,9 @@ window.addEventListener('DOMContentLoaded', () => {
 
         Ui.textColor.value = content['textColor'];
         Ui.bgColor.value = content['bgColor'];
+        Ui.saveButton.classList.remove('disabled');
 
-        _showMessage(MessageType.SUCCESS, 'successfully saved.');
+        _showMessage(MessageType.SUCCESS, 'successfully loaded.');
       });
     });
   };

From 3cf897a07cad622f8090fa98f61bebdc6c1b2acc Mon Sep 17 00:00:00 2001
From: flashback2k14 <yeahdev@gmail.com>
Date: Fri, 1 May 2020 17:01:04 +0200
Subject: [PATCH 32/38] add html color pickers

---
 apps/timer/custom/index.html | 50 ++++--------------------------------
 apps/timer/custom/script.js  |  3 +++
 2 files changed, 8 insertions(+), 45 deletions(-)

diff --git a/apps/timer/custom/index.html b/apps/timer/custom/index.html
index ade92fc908..d9f579a2ba 100644
--- a/apps/timer/custom/index.html
+++ b/apps/timer/custom/index.html
@@ -17,54 +17,12 @@
   <div class="container">
     <div class="form-group">
       <label class="form-label" for="textColor">Text color</label>
-      <select id="textColor" class="form-select">
-        <option disabled>Choose an option</option>
-        <option value="#0000">Black</option>
-        <option value="#000F">Navy</option>
-        <option value="#03E0">DarkGreen</option>
-        <option value="#03EF">DarkCyan</option>
-        <option value="#7800">Maroon</option>
-        <option value="#780F">Purple</option>
-        <option value="#7BE0">Olive</option>
-        <option value="#C618">LightGray</option>
-        <option value="#7BEF">DarkGrey</option>
-        <option value="#001F">Blue</option>
-        <option value="#07E0">Green</option>
-        <option value="#07FF">Cyan</option>
-        <option value="#F800">RED</option>
-        <option value="#F81F">Magenta</option>
-        <option value="#FFE0">Yellow</option>
-        <option value="#FFFF">White</option>
-        <option value="#FD20">Orange</option>
-        <option value="#AFE5">GreenYellow</option>
-        <option value="#F81F">Pink</option>
-      </select>
+      <input class="form-input disabled" id="textColor" type="color">
     </div>
 
     <div class="form-group">
       <label class="form-label" for="bgColor">Background color</label>
-      <select id="bgColor" class="form-select">
-        <option disabled>Choose an option</option>
-        <option value="#0000">Black</option>
-        <option value="#000F">Navy</option>
-        <option value="#03E0">DarkGreen</option>
-        <option value="#03EF">DarkCyan</option>
-        <option value="#7800">Maroon</option>
-        <option value="#780F">Purple</option>
-        <option value="#7BE0">Olive</option>
-        <option value="#C618">LightGray</option>
-        <option value="#7BEF">DarkGrey</option>
-        <option value="#001F">Blue</option>
-        <option value="#07E0">Green</option>
-        <option value="#07FF">Cyan</option>
-        <option value="#F800">RED</option>
-        <option value="#F81F">Magenta</option>
-        <option value="#FFE0">Yellow</option>
-        <option value="#FFFF">White</option>
-        <option value="#FD20">Orange</option>
-        <option value="#AFE5">GreenYellow</option>
-        <option value="#F81F">Pink</option>
-      </select>
+      <input class="form-input disabled" id="bgColor" type="color">
     </div>
 
     <button id="save" class="btn disabled" style="float: right;">Save</button>
@@ -72,10 +30,12 @@
     <div class="clearfix"></div>
 
     <div id="toastSuccess" class="toast toast-success d-none">
-      <span id="toastSuccessText"></span>
+      <i class="icon icon-check"></i>
+      <span id=" toastSuccessText"></span>
     </div>
 
     <div id="toastError" class="toast toast-error d-none">
+      <i class="icon icon-stop"></i>
       <span id="toastErrorText"></span>
     </div>
   </div>
diff --git a/apps/timer/custom/script.js b/apps/timer/custom/script.js
index bce32d1f7b..59d2c9705b 100644
--- a/apps/timer/custom/script.js
+++ b/apps/timer/custom/script.js
@@ -78,6 +78,9 @@ window.addEventListener('DOMContentLoaded', () => {
 
         Ui.textColor.value = content['textColor'];
         Ui.bgColor.value = content['bgColor'];
+
+        Ui.textColor.classList.remove('disabled');
+        Ui.bgColor.classList.remove('disabled');
         Ui.saveButton.classList.remove('disabled');
 
         _showMessage(MessageType.SUCCESS, 'successfully loaded.');

From b25c9895fba36dfc4bf5aa642180d99f16b3e09f Mon Sep 17 00:00:00 2001
From: flashback2k14 <yeahdev@gmail.com>
Date: Fri, 1 May 2020 17:04:46 +0200
Subject: [PATCH 33/38] bugfix dom id

---
 apps/timer/custom/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/timer/custom/index.html b/apps/timer/custom/index.html
index d9f579a2ba..44de673c89 100644
--- a/apps/timer/custom/index.html
+++ b/apps/timer/custom/index.html
@@ -31,7 +31,7 @@
 
     <div id="toastSuccess" class="toast toast-success d-none">
       <i class="icon icon-check"></i>
-      <span id=" toastSuccessText"></span>
+      <span id="toastSuccessText"></span>
     </div>
 
     <div id="toastError" class="toast toast-error d-none">

From b8c5a6fd540b1e997f296a8f3097df95229ca0d0 Mon Sep 17 00:00:00 2001
From: flashback2k14 <yeahdev@gmail.com>
Date: Fri, 1 May 2020 17:20:49 +0200
Subject: [PATCH 34/38] add timer seconds setting

---
 apps.json                    |  2 +-
 apps/timer/ChangeLog         |  3 ++-
 apps/timer/app/index.js      | 30 ++++++++++++++++++------------
 apps/timer/custom/index.html |  5 +++++
 apps/timer/custom/script.js  |  4 ++++
 5 files changed, 30 insertions(+), 14 deletions(-)

diff --git a/apps.json b/apps.json
index df63fcba19..f9077cb5b1 100644
--- a/apps.json
+++ b/apps.json
@@ -2565,7 +2565,7 @@
     "name": "My Timer App",
     "shortName": "My Timer",
     "icon": "assets/timer.png",
-    "version": "0.08",
+    "version": "0.09",
     "description": "This is a description of my awesome timer app",
     "allow_emulator": true,
     "tags": "tool",
diff --git a/apps/timer/ChangeLog b/apps/timer/ChangeLog
index 4a8374eddc..4a4998833b 100644
--- a/apps/timer/ChangeLog
+++ b/apps/timer/ChangeLog
@@ -5,4 +5,5 @@
 0.05: add onInit() hook
 0.06: instead of uploading, simply save data
 0.07: add color settings
-0.08: change custom to interface setting
\ No newline at end of file
+0.08: change custom to interface setting
+0.09: add timer seconds input
\ No newline at end of file
diff --git a/apps/timer/app/index.js b/apps/timer/app/index.js
index e856a1804b..a6a8a130bd 100644
--- a/apps/timer/app/index.js
+++ b/apps/timer/app/index.js
@@ -1,12 +1,19 @@
-let counter = 6;
+let counter;
 let interval;
-let uiConfig = {};
+let uiConfig;
 
 function loadData() {
   const data = require('Storage').readJSON('timer.custom.json', true);
   if (data) {
+    counter = data.timerSeconds;
+    uiConfig['timerSeconds'] = data.timerSeconds;
     uiConfig['textColor'] = data.textColor;
     uiConfig['bgColor'] = data.bgColor;
+  } else {
+    counter = 6;
+    uiConfig['timerSeconds'] = 6;
+    uiConfig['textColor'] = 0xffff;
+    uiConfig['bgColor'] = 0x0000;
   }
 }
 
@@ -15,6 +22,8 @@ function outOfTime() {
     return;
   }
 
+  E.showMessage('Out of Time.\nRestart with the middle button.', 'My Timer');
+
   Bangle.buzz();
   Bangle.beep(200, 4000)
     .then(() => new Promise((resolve) => setTimeout(resolve, 200)))
@@ -36,19 +45,16 @@ function countDown() {
 
   g.clear();
 
-  g.setColor(uiConfig['textColor'] || 0xffff);
-  g.setBgColor(uiConfig['bgColor'] || 0x0000);
-
-  g.setFontAlign(0, 0);
-  g.setFont('6x8', 8);
-
-  g.drawString(counter, g.getWidth() / 2, g.getHeight() / 2);
-
-  g.flip();
+  g.setColor(uiConfig['textColor'])
+    .setBgColor(uiConfig['bgColor'])
+    .setFontAlign(0, 0)
+    .setFont('6x8', 8)
+    .drawString(counter, g.getWidth() / 2, g.getHeight() / 2)
+    .flip();
 }
 
 function startTimer() {
-  counter = 6;
+  counter = uiConfig['timerSeconds'];
 
   countDown();
   if (!interval) {
diff --git a/apps/timer/custom/index.html b/apps/timer/custom/index.html
index 44de673c89..c2db1f4219 100644
--- a/apps/timer/custom/index.html
+++ b/apps/timer/custom/index.html
@@ -15,6 +15,11 @@
 
 <body>
   <div class="container">
+    <div class="form-group">
+      <label class="form-label" for="timerSeconds">Timer seconds</label>
+      <input class="form-input disabled" id="timerSeconds" type="number" min="0">
+    </div>
+
     <div class="form-group">
       <label class="form-label" for="textColor">Text color</label>
       <input class="form-input disabled" id="textColor" type="color">
diff --git a/apps/timer/custom/script.js b/apps/timer/custom/script.js
index 59d2c9705b..b185203849 100644
--- a/apps/timer/custom/script.js
+++ b/apps/timer/custom/script.js
@@ -23,6 +23,7 @@ window.addEventListener('DOMContentLoaded', () => {
 
   _save = () => {
     const data = {
+      timerSeconds: Ui.timerSeconds.value,
       textColor: Ui.textColor.value,
       bgColor: Ui.bgColor.value,
     };
@@ -48,6 +49,7 @@ window.addEventListener('DOMContentLoaded', () => {
 
   initUiElements = () => {
     Ui = {
+      timerSeconds: document.getElementById('timerSeconds'),
       textColor: document.getElementById('textColor'),
       bgColor: document.getElementById('bgColor'),
       toastSuccess: document.getElementById('toastSuccess'),
@@ -76,9 +78,11 @@ window.addEventListener('DOMContentLoaded', () => {
           return;
         }
 
+        Ui.timerSeconds.value = content['timerSeconds'];
         Ui.textColor.value = content['textColor'];
         Ui.bgColor.value = content['bgColor'];
 
+        Ui.timerSeconds.classList.remove('timerSeconds');
         Ui.textColor.classList.remove('disabled');
         Ui.bgColor.classList.remove('disabled');
         Ui.saveButton.classList.remove('disabled');

From 8db6a1e7af7dfa47296bec1da37d714e4ee8befd Mon Sep 17 00:00:00 2001
From: flashback2k14 <yeahdev@gmail.com>
Date: Fri, 1 May 2020 17:26:03 +0200
Subject: [PATCH 35/38] bugfix

---
 apps/timer/custom/script.js | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/apps/timer/custom/script.js b/apps/timer/custom/script.js
index b185203849..655d6b2b11 100644
--- a/apps/timer/custom/script.js
+++ b/apps/timer/custom/script.js
@@ -72,17 +72,12 @@ window.addEventListener('DOMContentLoaded', () => {
           _showMessage(MessageType.ERROR, JSON.stringify(err));
           return;
         }
-        if (content === null) {
-          console.error('content === null');
-          _showMessage(MessageType.ERROR, 'no content found.');
-          return;
-        }
 
         Ui.timerSeconds.value = content['timerSeconds'];
         Ui.textColor.value = content['textColor'];
         Ui.bgColor.value = content['bgColor'];
 
-        Ui.timerSeconds.classList.remove('timerSeconds');
+        Ui.timerSeconds.classList.remove('disabled');
         Ui.textColor.classList.remove('disabled');
         Ui.bgColor.classList.remove('disabled');
         Ui.saveButton.classList.remove('disabled');

From 049e564c5252bba17c9294a7d643bbe15fedea1a Mon Sep 17 00:00:00 2001
From: flashback2k14 <yeahdev@gmail.com>
Date: Fri, 1 May 2020 17:34:31 +0200
Subject: [PATCH 36/38] bugfix #2

---
 apps/timer/custom/script.js | 17 +++++++++++++----
 1 file changed, 13 insertions(+), 4 deletions(-)

diff --git a/apps/timer/custom/script.js b/apps/timer/custom/script.js
index 655d6b2b11..a5c3a7007d 100644
--- a/apps/timer/custom/script.js
+++ b/apps/timer/custom/script.js
@@ -47,6 +47,13 @@ window.addEventListener('DOMContentLoaded', () => {
     });
   };
 
+  _enableUi = () => {
+    Ui.timerSeconds.classList.remove('disabled');
+    Ui.textColor.classList.remove('disabled');
+    Ui.bgColor.classList.remove('disabled');
+    Ui.saveButton.classList.remove('disabled');
+  };
+
   initUiElements = () => {
     Ui = {
       timerSeconds: document.getElementById('timerSeconds'),
@@ -73,14 +80,16 @@ window.addEventListener('DOMContentLoaded', () => {
           return;
         }
 
+        if (!content) {
+          _enableUi();
+          return;
+        }
+
         Ui.timerSeconds.value = content['timerSeconds'];
         Ui.textColor.value = content['textColor'];
         Ui.bgColor.value = content['bgColor'];
 
-        Ui.timerSeconds.classList.remove('disabled');
-        Ui.textColor.classList.remove('disabled');
-        Ui.bgColor.classList.remove('disabled');
-        Ui.saveButton.classList.remove('disabled');
+        _enableUi();
 
         _showMessage(MessageType.SUCCESS, 'successfully loaded.');
       });

From a509631552e78397a8ccd22f027e33d365dd9ee1 Mon Sep 17 00:00:00 2001
From: flashback2k14 <yeahdev@gmail.com>
Date: Fri, 1 May 2020 17:43:33 +0200
Subject: [PATCH 37/38] bugfix #3

---
 apps/timer/app/index.js | 22 +++++++++++-----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/apps/timer/app/index.js b/apps/timer/app/index.js
index a6a8a130bd..a9ad61efe0 100644
--- a/apps/timer/app/index.js
+++ b/apps/timer/app/index.js
@@ -1,19 +1,19 @@
 let counter;
 let interval;
-let uiConfig;
+let uiConfig = {};
 
 function loadData() {
   const data = require('Storage').readJSON('timer.custom.json', true);
   if (data) {
     counter = data.timerSeconds;
-    uiConfig['timerSeconds'] = data.timerSeconds;
-    uiConfig['textColor'] = data.textColor;
-    uiConfig['bgColor'] = data.bgColor;
+    uiConfig.timerSeconds = data.timerSeconds;
+    uiConfig.textColor = data.textColor;
+    uiConfig.bgColor = data.bgColor;
   } else {
     counter = 6;
-    uiConfig['timerSeconds'] = 6;
-    uiConfig['textColor'] = 0xffff;
-    uiConfig['bgColor'] = 0x0000;
+    uiConfig.timerSeconds = 6;
+    uiConfig.textColor = 0xffff;
+    uiConfig.bgColor = 0x0000;
   }
 }
 
@@ -22,7 +22,7 @@ function outOfTime() {
     return;
   }
 
-  E.showMessage('Out of Time.\nRestart with the middle button.', 'My Timer');
+  E.showMessage('Restart with\nthe\nmiddle button.', 'Out of Time.');
 
   Bangle.buzz();
   Bangle.beep(200, 4000)
@@ -45,8 +45,8 @@ function countDown() {
 
   g.clear();
 
-  g.setColor(uiConfig['textColor'])
-    .setBgColor(uiConfig['bgColor'])
+  g.setColor(uiConfig.textColor)
+    .setBgColor(uiConfig.bgColor)
     .setFontAlign(0, 0)
     .setFont('6x8', 8)
     .drawString(counter, g.getWidth() / 2, g.getHeight() / 2)
@@ -54,7 +54,7 @@ function countDown() {
 }
 
 function startTimer() {
-  counter = uiConfig['timerSeconds'];
+  counter = uiConfig.timerSeconds;
 
   countDown();
   if (!interval) {

From ed9dd1346aa1ccd1bcff13ea72bf6cc1c20fbd1a Mon Sep 17 00:00:00 2001
From: flashback2k14 <yeahdev@gmail.com>
Date: Fri, 1 May 2020 18:48:49 +0200
Subject: [PATCH 38/38] remove onInit hook for custom page

---
 js/index.js | 60 +++++++++++++----------------------------------------
 1 file changed, 14 insertions(+), 46 deletions(-)

diff --git a/js/index.js b/js/index.js
index ced075e678..78071c75e8 100644
--- a/js/index.js
+++ b/js/index.js
@@ -74,56 +74,24 @@ function handleCustomApp(appTemplate) {
       iwin.addEventListener(
         'message',
         function (event) {
-          var msg = event.data;
-          if (!msg.type) {
-            msg.type = 'app';
-          }
-
-          if (msg.type == 'eval') {
-            Puck.eval(msg.data, function (result) {
-              iwin.postMessage({
-                type: 'evalrsp',
-                data: result,
-                id: msg.id,
-              });
-            });
-          } else if (msg.type == 'write') {
-            Puck.write(msg.data, function (result) {
-              iwin.postMessage({
-                type: 'writersp',
-                data: result,
-                id: msg.id,
-              });
-            });
-          } else if (msg.type == 'readstoragefile') {
-            Comms.readStorageFile(msg.data /*filename*/).then(function (result) {
-              iwin.postMessage({
-                type: 'readstoragefilersp',
-                data: result,
-                id: msg.id,
-              });
+          var appFiles = event.data;
+          var app = {};
+          Object.keys(appTemplate).forEach((k) => (app[k] = appTemplate[k]));
+          Object.keys(appFiles).forEach((k) => (app[k] = appFiles[k]));
+          console.log('Received custom app', app);
+          modal.remove();
+          Comms.uploadApp(app)
+            .then(() => {
+              Progress.hide({ sticky: true });
+              resolve();
+            })
+            .catch((e) => {
+              Progress.hide({ sticky: true });
+              reject(e);
             });
-          } else if (msg.type == 'app' || msg.type == 'widget' || msg.type == 'launch' || msg.type == 'bootloader') {
-            var appFiles = event.data;
-            var app = {};
-            Object.keys(appTemplate).forEach((k) => (app[k] = appTemplate[k]));
-            Object.keys(appFiles).forEach((k) => (app[k] = appFiles[k]));
-            console.log('Received custom app', app);
-            modal.remove();
-            Comms.uploadApp(app)
-              .then(() => {
-                Progress.hide({ sticky: true });
-                resolve();
-              })
-              .catch((e) => {
-                Progress.hide({ sticky: true });
-                reject(e);
-              });
-          }
         },
         false
       );
-      iwin.postMessage({ type: 'init' });
     };
     iframe.src = `apps/${appTemplate.id}/${appTemplate.custom}`;
   });