Add fast load capability

apps/circlesclock/ChangeLog

@@ -35,3 +35,4 @@
 0.19: Remove old code and fixing clkinfo handling (fix HRM and other items that change)
       Remove settings for what is displayed and instead allow circles to be changed by swiping
 0.20: Add much faster circle rendering (250ms -> 40ms)
+      Add fast load capability

apps/circlesclock/app.js

@@ -1,6 +1,3 @@
-let clock_info = require("clock_info");
-let locale = require("locale");
-let storage = require("Storage");
 Graphics.prototype.setFontRobotoRegular50NumericOnly = function(scale) {
   // Actual height 39 (40 - 2)
   this.setFontCustom(atob("AAAAAAAAAAAAAAAAAAAAAAAAAAAAAADAAAAAAAB8AAAAAAAfAAAAAAAPwAAAAAAB8AAAAAAAeAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAgAAAAAAA4AAAAAAB+AAAAAAD/gAAAAAD/4AAAAAH/4AAAAAP/wAAAAAP/gAAAAAf/gAAAAAf/AAAAAA/+AAAAAB/+AAAAAB/8AAAAAD/4AAAAAH/4AAAAAD/wAAAAAA/wAAAAAAPgAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA///wAAAB////gAAA////8AAA/////gAAP////8AAH8AAA/gAB8AAAD4AA+AAAAfAAPAAAADwADwAAAA8AA8AAAAPAAPAAAADwADwAAAA8AA8AAAAPAAPgAAAHwAB8AAAD4AAfwAAD+AAD/////AAA/////wAAH////4AAAf///4AAAB///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAeAAAAAAAPgAAAAAADwAAAAAAB8AAAAAAAfAAAAAAAHgAAAAAAD4AAAAAAA+AAAAAAAPAAAAAAAH/////wAB/////8AA//////AAP/////wAD/////8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAOAAAAAAAfgAADwAAP4AAB8AAH+AAA/AAD/gAAfwAB/AAAf8AAfAAAP/AAPgAAH7wAD4AAD88AA8AAB+PAAPAAA/DwADwAAfg8AA8AAPwPAAPAAH4DwADwAH8A8AA+AD+APAAPwB/ADwAB/D/gA8AAf//gAPAAD//wADwAAf/wAA8AAD/4AAPAAAHwAADwAAAAAAA8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADAADgAAAHwAA+AAAD8AAP4AAB/AAD/AAA/wAA/wAAf4AAD+AAHwAAAPgAD4APAB8AA+ADwAPAAPAA8ADwADwAPAA8AA8ADwAPAAPAA8ADwADwAfAA8AA8AH4APAAPgD+AHwAB8B/wD4AAf7/+B+AAD//v//AAA//x//wAAD/4P/4AAAf8B/4AAAAYAH4AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAPAAAAAAAHwAAAAAAH8AAAAAAD/AAAAAAD/wAAAAAD/8AAAAAB/vAAAAAB/jwAAAAA/g8AAAAA/wPAAAAAfwDwAAAAf4A8AAAAf4APAAAAP8ADwAAAP8AA8AAAH8AAPAAAD/////8AA//////AAP/////wAD/////8AA//////AAAAAAPAAAAAAADwAAAAAAA8AAAAAAAPAAAAAAADwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA8AAAAB/APwAAH//wD+AAD//8A/wAA///AH+AAP//wAPgAD/B4AB8AA8A+AAfAAPAPAADwADwDwAA8AA8A8AAPAAPAPAADwADwD4AA8AA8A+AAPAAPAPwAHwADwD8AD4AA8AfwD+AAPAH///AADwA///wAA8AH//4AAPAAf/4AAAAAB/4AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA//AAAAAD//+AAAAD///4AAAD////AAAB////4AAA/78D/AAAfw8AH4AAPweAA+AAD4PgAHwAB8DwAA8AAfA8AAPAAHgPAADwAD4DwAA8AA+A8AAPAAPAPgAHwADwD4AB8AA8AfgA+AAPAH+B/gAAAA///wAAAAH//4AAAAA//8AAAAAH/8AAAAAAP4AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADwAAAAAAA8AAAAAAAPAAAAAAADwAAAAAAA8AAAABAAPAAAABwADwAAAB8AA8AAAB/AAPAAAB/wADwAAD/8AA8AAD/8AAPAAD/4AADwAD/4AAA8AD/4AAAPAH/wAAADwH/wAAAA8H/wAAAAPH/wAAAAD3/gAAAAA//gAAAAAP/gAAAAAD/gAAAAAA/AAAAAAAPAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADwA/4AAAH/Af/AAAH/8P/4AAD//n//AAA//7//4AAfx/+A+AAHwD+AHwAD4AfgB8AA8AHwAPAAPAA8ADwADwAPAA8AA8ADwAPAAPAA8ADwADwAfAA8AA+AH4AfAAHwD+AHwAB/D/4D4AAP/+/n+AAD//n//AAAf/w//gAAB/wH/wAAAHwA/4AAAAAABgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAB+AAAAAAD/8AAAAAD//wAAAAB//+AAAAA///wAAAAf4H+APAAH4AfgDwAD8AB8A8AA+AAfAPAAPAADwDwADwAA8B8AA8AAPAfAAPAADwHgADwAA8D4AA+AAeB+AAHwAHg/AAB+ADwfgAAP8D4/4AAD////8AAAf///8AAAB///+AAAAP//+AAAAAP/4AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADgAAOAAAB8AAHwAAAfgAD8AAAH4AA/AAAB8AAHwAAAOAAA4AAAAAAAAAAAAAAAAAAAAAAAAAA"), 46, atob("DRUcHBwcHBwcHBwcDA=="), 50+(scale<<8)+(1<<16));
@@ -13,6 +10,11 @@ Graphics.prototype.setFontRobotoRegular21 = function(scale) {
   return this;
 };
 
+{
+let clock_info = require("clock_info");
+let locale = require("locale");
+let storage = require("Storage");
+
 let SETTINGS_FILE = "circlesclock.json";
 let settings = Object.assign(
   storage.readJSON("circlesclock.default.json", true) || {},
@@ -79,7 +81,7 @@ let circleFontBig = circleCount == 3 ? "Vector:16" : "Vector:12";
 let iconOffset = circleCount == 3 ? 6 : 8;
 
 
-function draw() {
+let draw = function() {
   let R = Bangle.appRect;
   g.reset().clearRect(R.x,R.y, R.x2, h3-(radiusBorder+1));
 
@@ -126,13 +128,13 @@ function draw() {
   queueDraw();
 }
 
-function getCircleColor(index) {
+let getCircleColor = function(index) {
   let color = settings["circle" + index + "color"];
   if (color && color != "") return color;
   return g.theme.fg;
 }
 
-function getGradientColor(color, percent) {
+let getGradientColor = function(color, percent) {
   if (isNaN(percent)) percent = 0;
   if (percent > 1) percent = 1;
   let colorList = [
@@ -152,7 +154,7 @@ function getGradientColor(color, percent) {
   return color;
 }
 
-function getCircleIconColor(index, color, percent) {
+let getCircleIconColor = function(index, color, percent) {
   let colorizeIcon = settings["circle" + index + "colorizeIcon"] == true;
   if (colorizeIcon) {
     return getGradientColor(color, percent);
@@ -161,7 +163,7 @@ function getCircleIconColor(index, color, percent) {
   }
 }
 
-function drawEmpty(img, w, color) {
+let drawEmpty = function(img, w, color) {
   drawGauge(w, h3, 0, color);
   drawInnerCircleAndTriangle(w);
   writeCircleText(w, "?");
@@ -170,7 +172,7 @@ function drawEmpty(img, w, color) {
       .drawImage(img, w - iconOffset, h3 + radiusOuter - iconOffset, {scale: 16/24});
 }
 
-function drawCircle(index, item, data) {
+let drawCircle = function(index, item, data) {
   var w = circlePosX[index-1];
   drawCircleBackground(w);
   const color = getCircleColor(index);
@@ -193,7 +195,7 @@ function drawCircle(index, item, data) {
  * Choose weather icon to display based on weather conditition code
  * https://openweathermap.org/weather-conditions#Weather-Condition-Codes-2
  */
-function getWeatherIconByCode(code, big) {
+let getWeatherIconByCode = function(code, big) {
   let codeGroup = Math.round(code / 100);
   if (big == undefined) big = false;
 
@@ -251,21 +253,10 @@ function getWeatherIconByCode(code, big) {
   }
 }
 
-function formatSeconds(s) {
-  if (s > 60 * 60) { // hours
-    return Math.round(s / (60 * 60)) + "h";
-  }
-  if (s > 60) { // minutes
-    return Math.round(s / 60) + "m";
-  }
-  return "<1m";
-}
-
-
 /*
  * Draws the background and the grey circle
  */
-function drawCircleBackground(w) {
+let drawCircleBackground = function(w) {
   // Draw rectangle background:
   g.setColor(colorBg);
   g.fillRect(w - radiusBorder, h3 - radiusBorder, w + radiusBorder, g.getHeight()-1);
@@ -274,7 +265,7 @@ function drawCircleBackground(w) {
   g.fillCircle(w, h3, radiusOuter);
 }
 
-function drawInnerCircleAndTriangle(w) {
+let drawInnerCircleAndTriangle = function(w) {
   // Draw inner circle
   g.setColor(colorBg);
   g.fillCircle(w, h3, radiusInner);
@@ -285,7 +276,7 @@ function drawInnerCircleAndTriangle(w) {
 /*
  * This draws the actual gauge consisting out of lots of little filled circles
  */
-function drawGauge(cx, cy, percent, color) {
+let drawGauge = function(cx, cy, percent, color) {
   let offset = 15;
   let end = 360 - offset;
   let radius = radiusOuter+1;
@@ -312,7 +303,7 @@ function drawGauge(cx, cy, percent, color) {
   g.fillPoly(poly);
 }
 
-function writeCircleText(w, content) {
+let writeCircleText = function(w, content) {
   if (content == undefined) return;
   let font = String(content).length > 4 ? circleFontSmall : String(content).length > 3 ? circleFont : circleFontBig;
   g.setFont(font);
@@ -322,7 +313,7 @@ function writeCircleText(w, content) {
   g.drawString(content, w, h3);
 }
 
-function getWeather() {
+let getWeather=function() {
   let jsonWeather = storage.readJSON('weather.json');
   return jsonWeather && jsonWeather.weather ? jsonWeather.weather : undefined;
 }
@@ -331,18 +322,14 @@ g.clear(1); // clear the whole screen
 
 Bangle.setUI({
   mode : "clock",
-  /*remove : function() {
+  remove : function() {
-    THIS CLOCK IS NOT YET ABLE TO UNLOAD ALL OF ITSELF.
+    // Called to unload all of the clock app (allowing for 'fast load')
-    DO NOT UNCOMMENT THIS WITOUT FIXING IT
-    OR THERE WILL BE HUGE MEMORY LEAKS
-    // Called to unload all of the clock app
     if (drawTimeout) clearTimeout(drawTimeout);
     drawTimeout = undefined;
-    for(var i=1;i<=circleCount; i++)
+    clockInfoMenu.forEach(c => c.remove());
-      clockInfoMenu[i].remove();
     delete Graphics.prototype.setFontRobotoRegular50NumericOnly;
     delete Graphics.prototype.setFontRobotoRegular21;
-  }*/
+  }
 });
 
 let clockInfoDraw = (itm, info, options) => {
@@ -366,7 +353,7 @@ if (!showWidgets) require("widget_utils").hide();
 else Bangle.drawWidgets();
 
 // schedule a draw for the next second or minute
-function queueDraw() {
+let queueDraw=function() {
   let queueMillis = settings.updateInterval * 1000;
   if (drawTimeout) clearTimeout(drawTimeout);
   drawTimeout = setTimeout(function() {
@@ -376,3 +363,4 @@ function queueDraw() {
 }
 
 draw();
+}