imageclock - Initial implementation of remove UI

apps/imageclock/app.js

@@ -1,49 +1,53 @@
-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) || {};
+let unlockedDrawInterval = [];
+let lockedDrawInterval = [];
 
-let 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) || {};
 
-let startPerfLog = () => {};
-let endPerfLog = () => {};
-let printPerfLog = () => print("Deactivated");
-let resetPerfLog = () => {performanceLog = {};};
+  let performanceLog = {};
 
-let colormap={
-"#000":0,
-"#00f":1,
-"#0f0":2,
-"#0ff":3,
-"#f00":4,
-"#f0f":5,
-"#ff0":6,
-"#fff":7
-};
+  let startPerfLog = () => {};
+  let endPerfLog = () => {};
+  let printPerfLog = () => print("Deactivated");
+  let resetPerfLog = () => {performanceLog = {};};
 
-let palette = new Uint16Array([
-0x0000, //black #000
-0x001f, //blue #00f
-0x07e0, //green #0f0
-0x07ff, //cyan #0ff
-0xf800, //red #f00
-0xf81f, //magenta #f0f
-0xffe0, //yellow #ff0
-0xffff, //white #fff
-0xffff, //white
-0xffff, //white
-0xffff, //white
-0xffff, //white
-0xffff, //white
-0xffff, //white
-0xffff, //white
-0xffff, //white
-])
+  let colormap={
+  "#000":0,
+  "#00f":1,
+  "#0f0":2,
+  "#0ff":3,
+  "#f00":4,
+  "#f0f":5,
+  "#ff0":6,
+  "#fff":7
+  };
 
-let p0 = g;
-let p1;
+  let palette = new Uint16Array([
+  0x0000, //black #000
+  0x001f, //blue #00f
+  0x07e0, //green #0f0
+  0x07ff, //cyan #0ff
+  0xf800, //red #f00
+  0xf81f, //magenta #f0f
+  0xffe0, //yellow #ff0
+  0xffff, //white #fff
+  0xffff, //white
+  0xffff, //white
+  0xffff, //white
+  0xffff, //white
+  0xffff, //white
+  0xffff, //white
+  0xffff, //white
+  0xffff, //white
+  ]);
 
-if (settings.perflog){
+  let p0 = g;
+  let p1;
+
+  if (settings.perflog){
     startPerfLog = function(name){
       let time = getTime();
       if (!performanceLog.start) performanceLog.start={};
@@ -73,15 +77,24 @@ if (settings.perflog){
         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));
       }
     };
-}
+  }
   
-function delay(t) {
+  let delayTimeouts = [];
+
+  function delay(t) {
       return new Promise(function (resolve) {
-        setTimeout(resolve, t);
+          delayTimeouts.push(setTimeout(resolve, t));
       });
-}
+  }
 
-function prepareImg(resource){
+  function cleanupDelays(){
+    for (let t of delayTimeouts){
+      clearTimeout(t);
+    }
+    delayTimeouts = [];
+  }
+  
+  function prepareImg(resource){
     startPerfLog("prepareImg");
     //print("prepareImg: ", resource);
 
@@ -96,9 +109,9 @@ function prepareImg(resource){
     }
     endPerfLog("prepareImg");
     return resource;
-}
+  }
 
-function getByPath(object, path, lastElem){
+  function getByPath(object, path, lastElem){
     startPerfLog("getByPath");
     //print("getByPath", path,lastElem);
     let current = object;
@@ -119,21 +132,21 @@ function getByPath(object, path, lastElem){
       return undefined;
     }
     return current;
-}
+  }
 
-function splitNumberToDigits(num){
+  function splitNumberToDigits(num){
     return String(num).split('').map(item => Number(item));
-}
+  }
 
-function isChangedNumber(element){
+  function isChangedNumber(element){
     return element.lastDrawnValue != getValue(element.Value);
-}
+  }
 
-function isChangedMultistate(element){
+  function isChangedMultistate(element){
     return element.lastDrawnValue != getMultistate(element.Value);
-}
+  }
 
-function drawNumber(graphics, resources, element){
+  function drawNumber(graphics, resources, element){
     startPerfLog("drawNumber");
     let number = getValue(element.Value);
     let spacing = element.Spacing ? element.Spacing : 0;
@@ -244,9 +257,9 @@ function drawNumber(graphics, resources, element){
     element.lastDrawnValue = number;
 
     endPerfLog("drawNumber");
-}
+  }
 
-function drawElement(graphics, resources, pos, element, lastElem){
+  function drawElement(graphics, resources, pos, element, lastElem){
     startPerfLog("drawElement");
     let cacheKey = "_"+(lastElem?lastElem:"nole");
     if (!element.cachedImage) element.cachedImage={};
@@ -290,26 +303,26 @@ function drawElement(graphics, resources, pos, element, lastElem){
       endPerfLog("drawElement_g.drawImage");
     }
     endPerfLog("drawElement");
-}
+  }
 
-function getValue(value, defaultValue){
+  function getValue(value, defaultValue){
     if (typeof value == "string"){
       return numbers[value]();
     }
     if (value == undefined) return defaultValue;
     return value;
-}
+  }
 
-function getMultistate(name, defaultValue){
+  function getMultistate(name, defaultValue){
     if (typeof name == "string"){
       return multistates[name]();
     } else {
       if (name == undefined) return defaultValue;
     }
     return undefined;
-}
+  }
 
-function drawScale(graphics, resources, scale){
+  function drawScale(graphics, resources, scale){
     startPerfLog("drawScale");
     //print("drawScale", scale);
     let segments = scale.Segments;
@@ -327,9 +340,9 @@ function drawScale(graphics, resources, scale){
     scale.lastDrawnValue = segmentsToDraw;
 
     endPerfLog("drawScale");
-}
+  }
 
-function drawImage(graphics, resources, image, name){
+  function drawImage(graphics, resources, image, name){
     startPerfLog("drawImage");
     //print("drawImage", image.X, image.Y, name);
     if (image.Value && image.Steps){
@@ -343,9 +356,9 @@ function drawImage(graphics, resources, image, name){
     }
 
     endPerfLog("drawImage");
-}
+  }
 
-function drawCodedImage(graphics, resources, image){
+  function drawCodedImage(graphics, resources, image){
     startPerfLog("drawCodedImage");
     let code = getValue(image.Value);
     //print("drawCodedImage", image, code);
@@ -372,9 +385,9 @@ function drawCodedImage(graphics, resources, image){
     image.lastDrawnValue = code;
 
     startPerfLog("drawCodedImage");
-}
+  }
 
-function getWeatherCode(){
+  function getWeatherCode(){
     let jsonWeather = require("Storage").readJSON('weather.json');
     let weather = (jsonWeather && jsonWeather.weather) ? jsonWeather.weather : undefined;
 
@@ -382,9 +395,9 @@ function getWeatherCode(){
       return weather.code;
     }
     return undefined;
-}
+  }
 
-function getWeatherTemperature(){
+  function getWeatherTemperature(){
     let jsonWeather = require("Storage").readJSON('weather.json');
     let weather = (jsonWeather && jsonWeather.weather) ? jsonWeather.weather : undefined;
 
@@ -401,25 +414,25 @@ function getWeatherTemperature(){
       }
     }
     return result;
-}
+  }
 
-function scaledown(value, min, max){
+  function scaledown(value, min, max){
     //print("scaledown", value, min, max);
     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){
+  function radians(rotation){
     let value = scaledown(rotation.RotationValue, rotation.MinRotationValue, rotation.MaxRotationValue);
     value -= rotation.RotationOffset ? rotation.RotationOffset : 0;
     value *= 360;
     value *= Math.PI / 180;
     return value;
-}
+  }
 
-function drawPoly(graphics, resources, element){
+  function drawPoly(graphics, resources, element){
       startPerfLog("drawPoly");
       let vertices = [];
 
@@ -449,9 +462,9 @@ function drawPoly(graphics, resources, element){
       }
 
       endPerfLog("drawPoly");
-}
+  }
 
-function drawRect(graphics, resources, element){
+  function drawRect(graphics, resources, element){
       startPerfLog("drawRect");
       let vertices = [];
 
@@ -465,9 +478,9 @@ function drawRect(graphics, resources, element){
         endPerfLog("drawRect_g.fillRect");
       }
       endPerfLog("drawRect");
-}
+  }
 
-function drawCircle(graphics, resources, element){
+  function drawCircle(graphics, resources, element){
       startPerfLog("drawCircle");
 
       if (element.Filled){
@@ -480,60 +493,60 @@ function drawCircle(graphics, resources, element){
         endPerfLog("drawCircle_g.drawCircle");
       }
       endPerfLog("drawCircle");
-}
+  }
 
-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 = () => { 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 = () => { 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 = () => { 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 = () => {  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); };
-numbers.Month = () => { return new Date().getMonth() + 1; };
-numbers.MonthTens = () => { return Math.floor((new Date().getMonth() + 1)/10); };
-numbers.MonthOnes = () => { return Math.floor((new Date().getMonth() + 1)%10); };
-numbers.Pulse = () => { return pulse; };
-numbers.Steps = () => { return Bangle.getHealthStatus ? Bangle.getHealthStatus("day").steps : undefined; };
-numbers.StepsGoal = () => { return settings.stepsgoal || 10000; };
-numbers.Temperature = () => { return temp; };
-numbers.Pressure = () => { return press; };
-numbers.Altitude = () => { return alt; };
-numbers.BatteryPercentage = E.getBattery;
-numbers.BatteryVoltage = NRF.getBattery;
-numbers.WeatherCode = getWeatherCode;
-numbers.WeatherTemperature = () => { return getWeatherTemperature().value; };
+  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 = () => { 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 = () => { 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 = () => { 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 = () => {  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); };
+  numbers.Month = () => { return new Date().getMonth() + 1; };
+  numbers.MonthTens = () => { return Math.floor((new Date().getMonth() + 1)/10); };
+  numbers.MonthOnes = () => { return Math.floor((new Date().getMonth() + 1)%10); };
+  numbers.Pulse = () => { return pulse; };
+  numbers.Steps = () => { return Bangle.getHealthStatus ? Bangle.getHealthStatus("day").steps : undefined; };
+  numbers.StepsGoal = () => { return settings.stepsgoal || 10000; };
+  numbers.Temperature = () => { return temp; };
+  numbers.Pressure = () => { return press; };
+  numbers.Altitude = () => { return alt; };
+  numbers.BatteryPercentage = E.getBattery;
+  numbers.BatteryVoltage = NRF.getBattery;
+  numbers.WeatherCode = getWeatherCode;
+  numbers.WeatherTemperature = () => { return getWeatherTemperature().value; };
 
-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"; };
-multistates.Alarm = () => { return (require('Storage').readJSON('alarm.json',1)||[]).some(alarm=>alarm.on) ? "on" : "off"; };
-multistates.Bluetooth = () => { return NRF.getSecurityStatus().connected ? "on" : "off"; };
-//TODO: Implement peripheral connection status
-multistates.BluetoothPeripheral = () => { return NRF.getSecurityStatus().connected ? "on" : "off"; };
-multistates.HRM = () => { return Bangle.isHRMOn ? "on" : "off"; };
-multistates.Barometer = () => { return Bangle.isBarometerOn() ? "on" : "off"; };
-multistates.Compass = () => { return Bangle.isCompassOn() ? "on" : "off"; };
-multistates.GPS = () => { return Bangle.isGPSOn() ? "on" : "off"; };
-multistates.WeatherTemperatureNegative = () => { return getWeatherTemperature().value ? getWeatherTemperature().value : 0 < 0; };
-multistates.WeatherTemperatureUnit = () => { return getWeatherTemperature().unit; };
-multistates.StepsGoal = () => { return (numbers.Steps() >= (settings.stepsgoal || 10000)) ? "on": "off"; };
+  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"; };
+  multistates.Alarm = () => { return (require('Storage').readJSON('alarm.json',1)||[]).some(alarm=>alarm.on) ? "on" : "off"; };
+  multistates.Bluetooth = () => { return NRF.getSecurityStatus().connected ? "on" : "off"; };
+  //TODO: Implement peripheral connection status
+  multistates.BluetoothPeripheral = () => { return NRF.getSecurityStatus().connected ? "on" : "off"; };
+  multistates.HRM = () => { return Bangle.isHRMOn ? "on" : "off"; };
+  multistates.Barometer = () => { return Bangle.isBarometerOn() ? "on" : "off"; };
+  multistates.Compass = () => { return Bangle.isCompassOn() ? "on" : "off"; };
+  multistates.GPS = () => { return Bangle.isGPSOn() ? "on" : "off"; };
+  multistates.WeatherTemperatureNegative = () => { return getWeatherTemperature().value ? getWeatherTemperature().value : 0 < 0; };
+  multistates.WeatherTemperatureUnit = () => { return getWeatherTemperature().unit; };
+  multistates.StepsGoal = () => { return (numbers.Steps() >= (settings.stepsgoal || 10000)) ? "on": "off"; };
 
-function drawMultiState(graphics, resources, element){
+  function drawMultiState(graphics, resources, element){
     startPerfLog("drawMultiState");
     //print("drawMultiState", element);
     let value = multistates[element.Value]();
@@ -541,22 +554,25 @@ function drawMultiState(graphics, resources, element){
     drawImage(graphics, resources, element, value);
     element.lastDrawnValue = value;
     endPerfLog("drawMultiState");
-}
+  }
 
-let pulse,alt,temp,press;
+  let pulse,alt,temp,press;
 
 
-let requestedDraws = 0;
-let isDrawing = false;
+  let requestedDraws = 0;
+  let isDrawing = false;
 
-let drawingTime;
+  let drawingTime;
 
-let start;
+  let start;
   
-function initialDraw(resources, face){
+  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();
@@ -570,7 +586,7 @@ function initialDraw(resources, face){
 
       promise.then(()=>{
         let currentDrawingTime = Date.now();
-      if (showWidgets){
+        if (showWidgets && global.WIDGETS){
           //print("Draw widgets");
           Bangle.drawWidgets();
           g.setColor(g.theme.fg);
@@ -590,24 +606,24 @@ 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");
     //}
-}
+  }
 
-function handleHrm(e){
+  function handleHrm(e){
     if (e.confidence > 70){
       pulse = e.bpm;
       if (!redrawEvents || redrawEvents.includes("HRM") && !Bangle.isLocked()){
-      //print("Redrawing on HRM");
+        print("Redrawing on HRM");
         initialDraw(watchfaceResources, watchface);
       }
     }
-}
+  }
 
-function handlePressure(e){
+  function handlePressure(e){
     alt = e.altitude;
     temp = e.temperature;
     press = e.pressure;
@@ -615,64 +631,73 @@ function handlePressure(e){
       //print("Redrawing on pressure");
       initialDraw(watchfaceResources, watchface);
     }
-}
+  }
 
-function handleCharging(e){
+  function handleCharging(e){
     if (!redrawEvents || redrawEvents.includes("charging") && !Bangle.isLocked()){
       //print("Redrawing on charging");
       initialDraw(watchfaceResources, watchface);
     }
-}
+  }
 
 
-function getMatchedWaitingTime(time){
+  function getMatchedWaitingTime(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);
+  function setMatchedInterval(callable, time, intervalHandler, delay){
+    //print("Setting matched interval for", time, intervalHandler);
     let matchedTime = getMatchedWaitingTime(time + delay);
-  setTimeout(()=>{
+    return setTimeout(()=>{
       let interval = setInterval(callable, time);
       if (intervalHandler) intervalHandler(interval);
       callable();
     }, matchedTime);
-}
+  }
 
-let unlockedDrawInterval;
-let lockedDrawInterval;
 
-let lastDrawTime = 0;
-let firstDraw = true;
+  let lastDrawTime = 0;
+  let firstDraw = true;
 
-let lockedRedraw = getByPath(watchface, ["Properties","Redraw","Locked"]) || 60000;
-let unlockedRedraw = getByPath(watchface, ["Properties","Redraw","Unlocked"]) || 1000;
-let defaultRedraw = getByPath(watchface, ["Properties","Redraw","Default"]) || "Always";
-let redrawEvents = getByPath(watchface, ["Properties","Redraw","Events"]);
-let clearOnRedraw = getByPath(watchface, ["Properties","Redraw","Clear"]);
-let events = getByPath(watchface, ["Properties","Events"]);
+  let lockedRedraw = getByPath(watchface, ["Properties","Redraw","Locked"]) || 60000;
+  let unlockedRedraw = getByPath(watchface, ["Properties","Redraw","Unlocked"]) || 1000;
+  let defaultRedraw = getByPath(watchface, ["Properties","Redraw","Default"]) || "Always";
+  let redrawEvents = getByPath(watchface, ["Properties","Redraw","Events"]);
+  let clearOnRedraw = getByPath(watchface, ["Properties","Redraw","Clear"]);
+  let events = getByPath(watchface, ["Properties","Events"]);
 
-//print("events", events);
-//print("redrawEvents", redrawEvents);
+  //print("events", events);
+  //print("redrawEvents", redrawEvents);
 
-function handleLock(isLocked, forceRedraw){
+  let initialDrawTimeoutUnlocked;
+  let initialDrawTimeoutLocked;
+  
+  function handleLock(isLocked, forceRedraw){
     //print("isLocked", Bangle.isLocked());
-  if (lockedDrawInterval) clearInterval(lockedDrawInterval);
-  if (unlockedDrawInterval) clearInterval(unlockedDrawInterval);
+    for (let i of 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,37 +706,42 @@ 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');
     }
-}
+  }
 
 
-let showWidgets = false;
-let showWidgetsChanged = false;
-let currentDragDistance = 0;
+  let showWidgets = false;
+  let showWidgetsChanged = false;
+  let currentDragDistance = 0;
 
-Bangle.setUI("clock");
-Bangle.on('drag', (e)=>{
+  function restoreWidgetDraw(){
+    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") {
-        for (let w in WIDGETS) {
-          let wd = WIDGETS[w];
-          wd.draw = originalWidgetDraw[w];
-          wd.area = originalWidgetArea[w];
-        }
-      }
+      restoreWidgetDraw();
       showWidgetsChanged = true;
     }
     if (showWidgets && !dragDown){
@@ -727,48 +757,82 @@ Bangle.on('drag', (e)=>{
       initialDraw();
     }
   }
-);
 
-if (!events || events.includes("pressure")){
+  Bangle.on('drag', handleDrag);
+
+  if (!events || events.includes("pressure")){
     Bangle.on('pressure', handlePressure);
     try{
       Bangle.setBarometerPower(1, 'imageclock');
     } catch (e){
       print("Error during barometer power up", e);
     }
-}
-if (!events || events.includes("HRM")) {
+  }
+  if (!events || events.includes("HRM")) {
     Bangle.on('HRM', handleHrm);
     Bangle.setHRMPower(1, "imageclock");
-}
-if (!events || events.includes("lock")) {
+  }
+  if (!events || events.includes("lock")) {
     Bangle.on('lock', handleLock);
-}
-if (!events || events.includes("charging")) {
+  }
+  if (!events || events.includes("charging")) {
     Bangle.on('charging', handleCharging);
-}
+  }
 
-let originalWidgetDraw = {};
-let originalWidgetArea = {};
+  let originalWidgetDraw = {};
+  let originalWidgetArea = {};
 
-function clearWidgetsDraw(){
+  function clearWidgetsDraw(){
     //print("Clear widget draw calls");
-  if (WIDGETS && typeof WIDGETS === "object") {
+    if (global.WIDGETS) {
       originalWidgetDraw = {};
       originalWidgetArea = {};
-    for (let w in WIDGETS) {
-      let wd = WIDGETS[w];
+      for (let w in global.WIDGETS) {
+        let wd = global.WIDGETS[w];
         originalWidgetDraw[w] = wd.draw;
         originalWidgetArea[w] = wd.area;
         wd.draw = () => {};
         wd.area = "";
       }
     }
+  }
+  
+  if (!global.WIDGETS) Bangle.loadWidgets();
+  if (!showWidgets) clearWidgetsDraw();
+
+  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;
+
+      cleanupDelays();
+      restoreWidgetDraw();
+    }
+  });
 }
-
-setTimeout(()=>{
-  Bangle.loadWidgets();
-  clearWidgetsDraw();
-}, 0);
-
-handleLock(Bangle.isLocked());