Merge pull request #2156 from halemmerich/unload

Fast switch for imageclock and iconlaunch

apps/iconlaunch/ChangeLog

@@ -1,3 +1,4 @@
 0.01: Initial release
 0.02: implemented "direct launch" and "one click exit" settings
 0.03: Use default Bangle formatter for booleans
+0.04: Support new fast app switching

apps/iconlaunch/app.js

@@ -1,11 +1,17 @@
+{
   const s = require("Storage");
   const settings = s.readJSON("launch.json", true) || { showClocks: true, fullscreen: false,direct:false,oneClickExit:false };
 
+  function returnToClock() {
+    Bangle.setUI();
+    setTimeout(eval,0,s.read(".bootcde"));
+  }
+
   if( settings.oneClickExit)
-  setWatch(_=> load(), BTN1);
+    setWatch(returnToClock, BTN1);
 
   if (!settings.fullscreen) {
-  Bangle.loadWidgets();
+    if (!global.WIDGETS) Bangle.loadWidgets();
     Bangle.drawWidgets();
   }
 
@@ -155,9 +161,7 @@ g.flip();
 
   const itemsN = Math.ceil(apps.length / appsN);
 
-Bangle.setUI({
+  function onDrag(e){
-  mode: "custom",
-  drag: (e) => {
     g.setColor(g.theme.fg);
     g.setBgColor(g.theme.bg);
     let dy = e.dy;
@@ -202,10 +206,15 @@ Bangle.setUI({
       }
     }
     g.setClipRect(0, 0, g.getWidth() - 1, g.getHeight() - 1);
-  },
+  }
+
+  Bangle.setUI({
+    mode: "custom",
+    drag: onDrag,
     touch: (_, e) => {
       if (e.y < R.y - 4) return;
       var i = YtoIdx(e.y);
       selectItem(i, e);
     },
   });
+}

apps/iconlaunch/metadata.json

@@ -2,7 +2,7 @@
 	"id": "iconlaunch",
 	"name": "Icon Launcher",
 	"shortName" : "Icon launcher",
-	"version": "0.03",
+	"version": "0.04",
 	"icon": "app.png",
 	"description": "A launcher inspired by smartphones, with an icon-only scrollable menu.",
 	"tags": "tool,system,launcher",

apps/imageclock/ChangeLog

@@ -8,3 +8,4 @@
 0.07: Allow wrapping drawing in timeouts to get faster reactions
       Show/Hide widgets with swipe up or down
 0.08: Use default Bangle formatter for booleans
+0.09: Support new fast app switching

apps/imageclock/app.js

@@ -1,16 +1,21 @@
-var watchface = require("Storage").readJSON("imageclock.face.json");
+let unlockedDrawInterval = [];
-var watchfaceResources = require("Storage").readJSON("imageclock.resources.json");
+let lockedDrawInterval = [];
-var precompiledJs = eval(require("Storage").read("imageclock.draw.js"));
+let showWidgets = false;
-var settings = require('Storage').readJSON("imageclock.json", true) || {};
 
-var performanceLog = {};
+{
+  let watchface = require("Storage").readJSON("imageclock.face.json");
+  let watchfaceResources = require("Storage").readJSON("imageclock.resources.json");
+  let precompiledJs = eval(require("Storage").read("imageclock.draw.js"));
+  let settings = require('Storage').readJSON("imageclock.json", true) || {};
 
-var startPerfLog = () => {};
+  let performanceLog = {};
-var endPerfLog = () => {};
-var printPerfLog = () => print("Deactivated");
-var resetPerfLog = () => {performanceLog = {};};
 
-var colormap={
+  let startPerfLog = () => {};
+  let endPerfLog = () => {};
+  let printPerfLog = () => print("Deactivated");
+  let resetPerfLog = () => {performanceLog = {};};
+
+  let colormap={
   "#000":0,
   "#00f":1,
   "#0f0":2,
@@ -21,7 +26,7 @@ var colormap={
   "#fff":7
   };
 
-var palette = new Uint16Array([
+  let palette = new Uint16Array([
   0x0000, //black #000
   0x001f, //blue #00f
   0x07e0, //green #0f0
@@ -38,21 +43,21 @@ var palette = new Uint16Array([
   0xffff, //white
   0xffff, //white
   0xffff, //white
-])
+  ]);
 
-var p0 = g;
+  let p0 = g;
-var p1;
+  let p1;
 
   if (settings.perflog){
     startPerfLog = function(name){
-    var time = getTime();
+      let time = getTime();
       if (!performanceLog.start) performanceLog.start={};
       performanceLog.start[name] = time;
     };
     endPerfLog = function (name){
-    var time = getTime();
+      let time = getTime();
       if (!performanceLog.last) performanceLog.last={};
-    var duration = time - performanceLog.start[name];
+      let duration = time - performanceLog.start[name];
       performanceLog.last[name] = duration;
       if (!performanceLog.cum) performanceLog.cum={};
       if (!performanceLog.cum[name]) performanceLog.cum[name] = 0;
@@ -63,24 +68,33 @@ if (settings.perflog){
     };
 
     printPerfLog = function(){
-    var result = "";
+      let result = "";
-    var keys = [];
+      let keys = [];
-    for (var c in performanceLog.cum){
+      for (let c in performanceLog.cum){
         keys.push(c);
       }
       keys.sort();
-    for (var k of keys){
+      for (let k of keys){
         print(k, "last:", (performanceLog.last[k] * 1000).toFixed(0), "average:", (performanceLog.cum[k]/performanceLog.count[k]*1000).toFixed(0), "count:", performanceLog.count[k], "total:", (performanceLog.cum[k] * 1000).toFixed(0));
       }
     };
   }
   
+  let delayTimeouts = [];
+
   function delay(t) {
       return new Promise(function (resolve) {
-        setTimeout(resolve, t);
+          delayTimeouts.push(setTimeout(resolve, t));
       });
   }
 
+  function cleanupDelays(){
+    for (let t of delayTimeouts){
+      clearTimeout(t);
+    }
+    delayTimeouts = [];
+  }
+  
   function prepareImg(resource){
     startPerfLog("prepareImg");
     //print("prepareImg: ", resource);
@@ -101,9 +115,9 @@ function prepareImg(resource){
   function getByPath(object, path, lastElem){
     startPerfLog("getByPath");
     //print("getByPath", path,lastElem);
-  var current = object;
+    let current = object;
     if (path.length) {
-    for (var c of path){
+      for (let c of path){
         if (!current[c]) return undefined;
         current = current[c];
       }
@@ -135,20 +149,20 @@ function isChangedMultistate(element){
 
   function drawNumber(graphics, resources, element){
     startPerfLog("drawNumber");
-  var number = getValue(element.Value);
+    let number = getValue(element.Value);
-  var spacing = element.Spacing ? element.Spacing : 0;
+    let spacing = element.Spacing ? element.Spacing : 0;
-  var unit = element.Unit;
+    let unit = element.Unit;
 
-  var imageIndexMinus = element.ImageIndexMinus;
+    let imageIndexMinus = element.ImageIndexMinus;
-  var imageIndexUnit = element.ImageIndexUnit;
+    let imageIndexUnit = element.ImageIndexUnit;
-  var numberOfDigits = element.Digits;
+    let numberOfDigits = element.Digits;
 
 
     //print("drawNumber: ", number, element);
     if (number) number = number.toFixed(0);
 
-  var isNegative;
+    let isNegative;
-  var digits;
+    let digits;
     if (number == undefined){
       isNegative = true;
       digits = [];
@@ -161,25 +175,25 @@ function drawNumber(graphics, resources, element){
 
     //print("digits: ", digits);
     if (!numberOfDigits) numberOfDigits = digits.length;
-  var firstDigitX = element.X;
+    let firstDigitX = element.X;
-  var firstDigitY = element.Y;
+    let firstDigitY = element.Y;
-  var imageIndex = element.ImageIndex ? element.ImageIndex : 0;
+    let imageIndex = element.ImageIndex ? element.ImageIndex : 0;
 
-  var firstImage;
+    let firstImage;
     if (imageIndex){
       firstImage = getByPath(resources, [], "" + (0 + imageIndex));
     } else {
       firstImage = getByPath(resources, element.ImagePath, 0);
     }
 
-  var minusImage;
+    let minusImage;
     if (imageIndexMinus){
       minusImage = getByPath(resources, [], "" + (0 + imageIndexMinus));
     } else {
       minusImage = getByPath(resources, element.ImagePath, "minus");
     }
 
-  var unitImage;
+    let unitImage;
     //print("Get image for unit", imageIndexUnit);
     if (imageIndexUnit !== undefined){
       unitImage = getByPath(resources, [], "" + (0 + imageIndexUnit));
@@ -188,7 +202,7 @@ function drawNumber(graphics, resources, element){
       unitImage = getByPath(resources, element.ImagePath, getMultistate(element.Unit, "unknown"));
     }
 
-  var numberWidth = (numberOfDigits * firstImage.width) + (Math.max((numberOfDigits - 1),0) * spacing);
+    let numberWidth = (numberOfDigits * firstImage.width) + (Math.max((numberOfDigits - 1),0) * spacing);
     if (isNegative && minusImage){
       //print("Adding to width", minusImage);
       numberWidth += minusImage.width + spacing;
@@ -213,7 +227,7 @@ function drawNumber(graphics, resources, element){
       firstDigitY = element.Y - firstImage.height + 1;
     }
 
-  var currentX = firstDigitX;
+    let currentX = firstDigitX;
     if (isNegative && minusImage){
       //print("Draw minus at", currentX);
       if (imageIndexMinus){
@@ -223,9 +237,9 @@ function drawNumber(graphics, resources, element){
       }
       currentX += minusImage.width + spacing;
     }
-  for (var d = 0; d < numberOfDigits; d++){
+    for (let d = 0; d < numberOfDigits; d++){
-    var currentDigit;
+      let currentDigit;
-    var difference = numberOfDigits - digits.length;
+      let difference = numberOfDigits - digits.length;
       if (d >= difference){
         currentDigit = digits[d-difference];
       } else {
@@ -248,10 +262,10 @@ function drawNumber(graphics, resources, element){
 
   function drawElement(graphics, resources, pos, element, lastElem){
     startPerfLog("drawElement");
-  var cacheKey = "_"+(lastElem?lastElem:"nole");
+    let cacheKey = "_"+(lastElem?lastElem:"nole");
     if (!element.cachedImage) element.cachedImage={};
     if (!element.cachedImage[cacheKey]){
-    var resource = getByPath(resources, element.ImagePath, lastElem);
+      let resource = getByPath(resources, element.ImagePath, lastElem);
       if (resource){
         prepareImg(resource);
         //print("lastElem", typeof resource)
@@ -273,7 +287,7 @@ function drawElement(graphics, resources, pos, element, lastElem){
       //print("drawElement ",pos, path, lastElem);
       //print("resource ", resource,pos, path, lastElem);
       //print("drawImage from drawElement", image, pos);
-    var options={};
+      let options={};
       if (element.RotationValue){
         options.rotate = radians(element);
       }
@@ -312,16 +326,16 @@ function getMultistate(name, defaultValue){
   function drawScale(graphics, resources, scale){
     startPerfLog("drawScale");
     //print("drawScale", scale);
-  var segments = scale.Segments;
+    let segments = scale.Segments;
-  var imageIndex = scale.ImageIndex !== undefined ? scale.ImageIndex : 0;
+    let imageIndex = scale.ImageIndex !== undefined ? scale.ImageIndex : 0;
 
-  var value = scaledown(scale.Value, scale.MinValue, scale.MaxValue);
+    let value = scaledown(scale.Value, scale.MinValue, scale.MaxValue);
 
     //print("Value is ", value, "(", maxValue, ",", minValue, ")");
 
-  var segmentsToDraw = Math.ceil(value * segments.length);
+    let segmentsToDraw = Math.ceil(value * segments.length);
 
-  for (var i = 0; i < segmentsToDraw; i++){
+    for (let i = 0; i < segmentsToDraw; i++){
       drawElement(graphics, resources, segments[i], scale, imageIndex + i);
     }
     scale.lastDrawnValue = segmentsToDraw;
@@ -333,7 +347,7 @@ function drawImage(graphics, resources, image, name){
     startPerfLog("drawImage");
     //print("drawImage", image.X, image.Y, name);
     if (image.Value && image.Steps){
-    var steps = Math.floor(scaledown(image.Value, image.MinValue, image.MaxValue) * (image.Steps - 1));
+      let steps = Math.floor(scaledown(image.Value, image.MinValue, image.MaxValue) * (image.Steps - 1));
       //print("Step", steps, "of", image.Steps);
       drawElement(graphics, resources, image, image, "" + steps);
     } else if (image.ImageIndex !== undefined) {
@@ -347,12 +361,12 @@ function drawImage(graphics, resources, image, name){
 
   function drawCodedImage(graphics, resources, image){
     startPerfLog("drawCodedImage");
-  var code = getValue(image.Value);
+    let code = getValue(image.Value);
     //print("drawCodedImage", image, code);
 
     if (image.ImagePath) {
-    var factor = 1;
+      let factor = 1;
-    var currentCode = code;
+      let currentCode = code;
       while (code / factor > 1){
         currentCode = Math.floor(currentCode/factor)*factor;
         //print("currentCode", currentCode);
@@ -375,8 +389,8 @@ function drawCodedImage(graphics, resources, image){
   }
 
   function getWeatherCode(){
-  var jsonWeather = require("Storage").readJSON('weather.json');
+    let jsonWeather = require("Storage").readJSON('weather.json');
-  var weather = (jsonWeather && jsonWeather.weather) ? jsonWeather.weather : undefined;
+    let weather = (jsonWeather && jsonWeather.weather) ? jsonWeather.weather : undefined;
 
     if (weather && weather.code){
       return weather.code;
@@ -385,15 +399,15 @@ function getWeatherCode(){
   }
 
   function getWeatherTemperature(){
-  var jsonWeather = require("Storage").readJSON('weather.json');
+    let jsonWeather = require("Storage").readJSON('weather.json');
-  var weather = (jsonWeather && jsonWeather.weather) ? jsonWeather.weather : undefined;
+    let weather = (jsonWeather && jsonWeather.weather) ? jsonWeather.weather : undefined;
 
-  var result = { unit: "unknown"};
+    let result = { unit: "unknown"};
     if (weather && weather.temp){
       //print("Weather is", weather);
-    var temp = require('locale').temp(weather.temp-273.15);
+      let temp = require('locale').temp(weather.temp-273.15);
       result.value = Number(temp.match(/[\d\-]*/)[0]);
-    var unit;
+      let unit;
       if (temp.includes("C")){
         result.unit = "celsius";
       } else if (temp.includes("F")){
@@ -405,14 +419,14 @@ function getWeatherTemperature(){
 
   function scaledown(value, min, max){
     //print("scaledown", value, min, max);
-  var scaled = E.clip(getValue(value),getValue(min,0),getValue(max,1));
+    let scaled = E.clip(getValue(value),getValue(min,0),getValue(max,1));
     scaled -= getValue(min,0);
     scaled /= getValue(max,1);
     return scaled;
   }
 
   function radians(rotation){
-  var value = scaledown(rotation.RotationValue, rotation.MinRotationValue, rotation.MaxRotationValue);
+    let value = scaledown(rotation.RotationValue, rotation.MinRotationValue, rotation.MaxRotationValue);
     value -= rotation.RotationOffset ? rotation.RotationOffset : 0;
     value *= 360;
     value *= Math.PI / 180;
@@ -421,14 +435,14 @@ function radians(rotation){
 
   function drawPoly(graphics, resources, element){
       startPerfLog("drawPoly");
-    var vertices = [];
+      let vertices = [];
 
       startPerfLog("drawPoly_transform");
-    for (var c of element.Vertices){
+      for (let c of element.Vertices){
         vertices.push(c.X);
         vertices.push(c.Y);
       }
-    var transform = { x: element.X ? element.X : 0,
+      let transform = { x: element.X ? element.X : 0,
         y: element.Y ? element.Y : 0
       };
       if (element.RotationValue){
@@ -453,7 +467,7 @@ function drawPoly(graphics, resources, element){
 
   function drawRect(graphics, resources, element){
       startPerfLog("drawRect");
-    var vertices = [];
+      let vertices = [];
 
       if (element.Filled){
         startPerfLog("drawRect_g.fillRect");
@@ -482,24 +496,24 @@ function drawCircle(graphics, resources, element){
       endPerfLog("drawCircle");
   }
 
-var numbers = {};
+  let numbers = {};
   numbers.Hour = () => { return new Date().getHours(); };
   numbers.HourTens = () => { return Math.floor(new Date().getHours()/10); };
   numbers.HourOnes = () => { return Math.floor(new Date().getHours()%10); };
   numbers.Hour12 = () => { return new Date().getHours()%12; };
-numbers.Hour12Analog = () => { var date = new Date(); return date.getHours()%12 + (date.getMinutes()/59); };
+  numbers.Hour12Analog = () => { let date = new Date(); return date.getHours()%12 + (date.getMinutes()/59); };
   numbers.Hour12Tens = () => { return Math.floor((new Date().getHours()%12)/10); };
   numbers.Hour12Ones = () => { return Math.floor((new Date().getHours()%12)%10); };
   numbers.Minute = () => { return new Date().getMinutes(); };
-numbers.MinuteAnalog = () => { var date = new Date(); return date.getMinutes() + (date.getSeconds()/59); };
+  numbers.MinuteAnalog = () => { let date = new Date(); return date.getMinutes() + (date.getSeconds()/59); };
   numbers.MinuteTens = () => { return Math.floor(new Date().getMinutes()/10); };
   numbers.MinuteOnes = () => { return Math.floor(new Date().getMinutes()%10); };
   numbers.Second = () => { return new Date().getSeconds(); };
-numbers.SecondAnalog = () => { var date = new Date(); return date.getSeconds() + (date.getMilliseconds()/999); };
+  numbers.SecondAnalog = () => { let date = new Date(); return date.getSeconds() + (date.getMilliseconds()/999); };
   numbers.SecondTens = () => { return Math.floor(new Date().getSeconds()/10); };
   numbers.SecondOnes = () => { return Math.floor(new Date().getSeconds()%10); };
   numbers.WeekDay = () => { return new Date().getDay(); };
-numbers.WeekDayMondayFirst = () => {  var day = (new Date().getDay() - 1); if (day < 0) day = 7 + day; return day; };
+  numbers.WeekDayMondayFirst = () => {  let day = (new Date().getDay() - 1); if (day < 0) day = 7 + day; return day; };
   numbers.Day = () => { return new Date().getDate(); };
   numbers.DayTens = () => { return Math.floor(new Date().getDate()/10); };
   numbers.DayOnes = () => { return Math.floor(new Date().getDate()%10); };
@@ -517,7 +531,7 @@ numbers.BatteryVoltage = NRF.getBattery;
   numbers.WeatherCode = getWeatherCode;
   numbers.WeatherTemperature = () => { return getWeatherTemperature().value; };
 
-var multistates = {};
+  let multistates = {};
   multistates.Lock = () => { return Bangle.isLocked() ? "on" : "off"; };
   multistates.Charge = () => { return Bangle.isCharging() ? "on" : "off"; };
   multistates.Notifications = () => { return ((require("Storage").readJSON("setting.json", 1) || {}).quiet|0) ? "off" : "vibrate"; };
@@ -536,27 +550,30 @@ multistates.StepsGoal = () => { return (numbers.Steps() >= (settings.stepsgoal |
   function drawMultiState(graphics, resources, element){
     startPerfLog("drawMultiState");
     //print("drawMultiState", element);
-  var value = multistates[element.Value]();
+    let value = multistates[element.Value]();
     //print("drawImage from drawMultiState", element, value);
     drawImage(graphics, resources, element, value);
     element.lastDrawnValue = value;
     endPerfLog("drawMultiState");
   }
 
-var pulse,alt,temp,press;
+  let pulse,alt,temp,press;
 
 
-var requestedDraws = 0;
+  let requestedDraws = 0;
-var isDrawing = false;
+  let isDrawing = false;
 
-var drawingTime;
+  let drawingTime;
 
-var start;
+  let start;
+  
+  let deferredTimout;
 
   function initialDraw(resources, face){
     //print("Free memory", process.memory(false).free);
     requestedDraws++;
     if (!isDrawing){
+      cleanupDelays();
       //print(new Date().toISOString(), "Can draw,", requestedDraws, "draws requested so far");
       isDrawing = true;
       resetPerfLog();
@@ -566,12 +583,13 @@ function initialDraw(resources, face){
       //start = Date.now();
       drawingTime = 0;
       //print("Precompiled");
-    var promise = precompiledJs(watchfaceResources, watchface);
+      let promise = precompiledJs(watchfaceResources, watchface);
 
       promise.then(()=>{
-      var currentDrawingTime = Date.now();
+        let currentDrawingTime = Date.now();
-      if (showWidgets){
+        if (showWidgets && global.WIDGETS){
           //print("Draw widgets");
+          restoreWidgetDraw();
           Bangle.drawWidgets();
           g.setColor(g.theme.fg);
           g.drawLine(0,24,g.getWidth(),24);
@@ -590,7 +608,7 @@ function initialDraw(resources, face){
       if (requestedDraws > 0){
         //print(new Date().toISOString(), "Had deferred drawing left, drawing again");
         requestedDraws = 0;
-      setTimeout(()=>{initialDraw(resources, face);}, 10);
+        deferredTimout = setTimeout(()=>{initialDraw(resources, face);}, 10);
       }
     } //else {
       //print("queued draw");
@@ -626,53 +644,62 @@ function handleCharging(e){
 
 
   function getMatchedWaitingTime(time){
-  var result = time - (Date.now() % time);
+    let result = time - (Date.now() % time);
     //print("Matched timeout", time, result);
     return result;
   }
 
-
-
   function setMatchedInterval(callable, time, intervalHandler, delay){
-  //print("Setting matched interval for", time);
+    //print("Setting matched interval for", time, intervalHandler);
-  var matchedTime = getMatchedWaitingTime(time + delay);
+    let matchedTime = getMatchedWaitingTime(time + delay);
-  setTimeout(()=>{
+    return setTimeout(()=>{
-    var interval = setInterval(callable, time);
+      let interval = setInterval(callable, time);
       if (intervalHandler) intervalHandler(interval);
       callable();
     }, matchedTime);
   }
 
-var unlockedDrawInterval;
-var lockedDrawInterval;
 
-var lastDrawTime = 0;
+  let lastDrawTime = 0;
-var firstDraw = true;
+  let firstDraw = true;
 
-var lockedRedraw = getByPath(watchface, ["Properties","Redraw","Locked"]) || 60000;
+  let lockedRedraw = getByPath(watchface, ["Properties","Redraw","Locked"]) || 60000;
-var unlockedRedraw = getByPath(watchface, ["Properties","Redraw","Unlocked"]) || 1000;
+  let unlockedRedraw = getByPath(watchface, ["Properties","Redraw","Unlocked"]) || 1000;
-var defaultRedraw = getByPath(watchface, ["Properties","Redraw","Default"]) || "Always";
+  let defaultRedraw = getByPath(watchface, ["Properties","Redraw","Default"]) || "Always";
-var redrawEvents = getByPath(watchface, ["Properties","Redraw","Events"]);
+  let redrawEvents = getByPath(watchface, ["Properties","Redraw","Events"]);
-var clearOnRedraw = getByPath(watchface, ["Properties","Redraw","Clear"]);
+  let clearOnRedraw = getByPath(watchface, ["Properties","Redraw","Clear"]);
-var events = getByPath(watchface, ["Properties","Events"]);
+  let events = getByPath(watchface, ["Properties","Events"]);
 
   //print("events", events);
   //print("redrawEvents", redrawEvents);
 
+  let initialDrawTimeoutUnlocked;
+  let initialDrawTimeoutLocked;
+  
   function handleLock(isLocked, forceRedraw){
     //print("isLocked", Bangle.isLocked());
-  if (lockedDrawInterval) clearInterval(lockedDrawInterval);
+    for (let i of unlockedDrawInterval){
-  if (unlockedDrawInterval) clearInterval(unlockedDrawInterval);
+      //print("Clearing unlocked", i);
+      clearInterval(i);
+    }
+    for (let i of lockedDrawInterval){
+      //print("Clearing locked", i);
+      clearInterval(i);
+    }
+    unlockedDrawInterval = [];
+    lockedDrawInterval = [];
+
     if (!isLocked){
       if (forceRedraw || !redrawEvents || (redrawEvents.includes("unlock"))){
         //print("Redrawing on unlock", isLocked);
         initialDraw(watchfaceResources, watchface);
       }
-    setMatchedInterval(()=>{
+      initialDrawTimeoutUnlocked = setMatchedInterval(()=>{
         //print("Redrawing on unlocked interval");
         initialDraw(watchfaceResources, watchface);
       },unlockedRedraw, (v)=>{
-      unlockedDrawInterval = v;
+        //print("New matched unlocked interval", v);
+        unlockedDrawInterval.push(v);
       }, lastDrawTime);
       if (!events || events.includes("HRM")) Bangle.setHRMPower(1, "imageclock");
       if (!events || events.includes("pressure")) Bangle.setBarometerPower(1, 'imageclock');
@@ -681,11 +708,12 @@ function handleLock(isLocked, forceRedraw){
         //print("Redrawing on lock", isLocked);
         initialDraw(watchfaceResources, watchface);
       }
-    setMatchedInterval(()=>{
+      initialDrawTimeoutLocked = setMatchedInterval(()=>{
         //print("Redrawing on locked interval");
         initialDraw(watchfaceResources, watchface);
       },lockedRedraw, (v)=>{
-      lockedDrawInterval = v;
+        //print("New matched locked interval", v);
+        lockedDrawInterval.push(v);
       }, lastDrawTime);
       Bangle.setHRMPower(0, "imageclock");
       Bangle.setBarometerPower(0, 'imageclock');
@@ -693,25 +721,28 @@ function handleLock(isLocked, forceRedraw){
   }
 
 
-var showWidgets = false;
+  let showWidgetsChanged = false;
-var showWidgetsChanged = false;
+  let currentDragDistance = 0;
-var currentDragDistance = 0;
 
-Bangle.setUI("clock");
+  function restoreWidgetDraw(){
-Bangle.on('drag', (e)=>{
+    if (global.WIDGETS) {
+      for (let w in global.WIDGETS) {
+        let wd = global.WIDGETS[w];
+        wd.draw = originalWidgetDraw[w];
+        wd.area = originalWidgetArea[w];
+      }
+    }
+  }
+  
+  function handleDrag(e){
+    //print("handleDrag");
     currentDragDistance += e.dy;
     if (Math.abs(currentDragDistance) < 10) return;
     dragDown = currentDragDistance > 0;
     currentDragDistance = 0;
     if (!showWidgets && dragDown){
       //print("Enable widgets");
-      if (WIDGETS && typeof WIDGETS === "object") {
+      restoreWidgetDraw();
-        for (let w in WIDGETS) {
-          var wd = WIDGETS[w];
-          wd.draw = originalWidgetDraw[w];
-          wd.area = originalWidgetArea[w];
-        }
-      }
       showWidgetsChanged = true;
     }
     if (showWidgets && !dragDown){
@@ -727,7 +758,8 @@ Bangle.on('drag', (e)=>{
       initialDraw();
     }
   }
-);
+
+  Bangle.on('drag', handleDrag);
 
   if (!events || events.includes("pressure")){
     Bangle.on('pressure', handlePressure);
@@ -748,16 +780,16 @@ if (!events || events.includes("charging")) {
     Bangle.on('charging', handleCharging);
   }
 
-var originalWidgetDraw = {};
+  let originalWidgetDraw = {};
-var originalWidgetArea = {};
+  let originalWidgetArea = {};
 
   function clearWidgetsDraw(){
     //print("Clear widget draw calls");
-  if (WIDGETS && typeof WIDGETS === "object") {
+    if (global.WIDGETS) {
       originalWidgetDraw = {};
       originalWidgetArea = {};
-    for (let w in WIDGETS) {
+      for (let w in global.WIDGETS) {
-      var wd = WIDGETS[w];
+        let wd = global.WIDGETS[w];
         originalWidgetDraw[w] = wd.draw;
         originalWidgetArea[w] = wd.area;
         wd.draw = () => {};
@@ -766,9 +798,43 @@ function clearWidgetsDraw(){
     }
   }
   
-setTimeout(()=>{
+  if (!global.WIDGETS) Bangle.loadWidgets();
-  Bangle.loadWidgets();
   clearWidgetsDraw();
-}, 0);
 
   handleLock(Bangle.isLocked());
+
+  Bangle.setUI({ 
+    mode : "clock",
+    remove : function() {
+      //print("remove calls");
+      // Called to unload all of the clock app
+      Bangle.setHRMPower(0, "imageclock");
+      Bangle.setBarometerPower(0, 'imageclock');
+
+      Bangle.removeListener('drag', handleDrag);
+      Bangle.removeListener('lock', handleLock);
+      Bangle.removeListener('charging', handleCharging);
+      Bangle.removeListener('HRM', handleHrm);
+      Bangle.removeListener('pressure', handlePressure);
+
+      if (deferredTimout) clearTimeout(deferredTimout);
+      if (initialDrawTimeoutUnlocked) clearTimeout(initialDrawTimeoutUnlocked);
+      if (initialDrawTimeoutLocked) clearTimeout(initialDrawTimeoutLocked);
+
+      for (let i of unlockedDrawInterval){
+        //print("Clearing unlocked", i);
+        clearInterval(i);
+      }
+      delete unlockedDrawInterval;
+      for (let i of lockedDrawInterval){
+        //print("Clearing locked", i);
+        clearInterval(i);
+      }
+      delete lockedDrawInterval;
+      delete showWidgets;
+
+      cleanupDelays();
+      restoreWidgetDraw();
+    }
+  });
+}

apps/imageclock/metadata.json

@@ -2,7 +2,7 @@
   "id": "imageclock",
   "name": "Imageclock",
   "shortName": "Imageclock",
-  "version": "0.08",
+  "version": "0.09",
   "type": "clock",
   "description": "BETA!!! File formats still subject to change --- This app is a highly customizable watchface. To use it, you need to select a watchface. You can build the watchfaces yourself without programming anything. All you need to do is write some json and create image files.",
   "icon": "app.png",