ptlaunch: try to improve the code slightly

apps/ptlaunch/app.js

@@ -1,9 +1,4 @@
 var DEBUG = false;
-var log = (message) => {
-  if (DEBUG) {
-    console.log(JSON.stringify(message));
-  }
-};
 
 var storage = require("Storage");
 
@@ -21,7 +16,7 @@ var showMainMenu = () => {
     },
     "Add Pattern": () => {
       log("creating pattern");
-      createPattern().then((pattern) => {
+      recognizeAndDrawPattern().then((pattern) => {
         log("got pattern");
         log(pattern);
         log(pattern.length);
@@ -119,10 +114,8 @@ var showMainMenu = () => {
   E.showMenu(mainmenu);
 };
 
-showMainMenu();
-
 var positions = [];
-var createPattern = () => {
+var recognizeAndDrawPattern = () => {
   return new Promise((resolve) => {
     E.showMenu();
     g.clear();
@@ -283,18 +276,7 @@ var createPattern = () => {
 
         log("redrawing");
         g.clear();
-        g.setColor(0, 0, 0);
+        drawCirclesWithPattern(pattern);
-        CIRCLES.forEach((circle) => drawCircle(circle));
-
-        g.setColor(1, 1, 1);
-        g.setFontAlign(0, 0);
-        g.setFont("6x8", 4);
-        pattern.forEach((circleIndex, patternIndex) => {
-          var circle = CIRCLES[circleIndex];
-          g.drawString(patternIndex + 1, circle.x, circle.y);
-        });
-        var t2 = Date.now();
-        log(t2 - t0);
       });
     };
 
@@ -381,13 +363,23 @@ var drawAppWithPattern = (i, r, storedPatterns) => {
 
   g.drawLine(r.x, r.y, 176, r.y);
 
-  drawCirclesWithPattern(pattern, 0.33, { x: 1, y: 3 + r.y });
+  drawCirclesWithPattern(pattern, {
+    enableCaching: true,
+    scale: 0.33,
+    offset: { x: 1, y: 3 + r.y },
+  });
 
   g.setColor(0, 0, 0);
-  var appName = g.wrapString(app.name, g.getWidth() - 64).join("\n");
+  if (!storedPattern.wrappedAppName) {
+    storedPattern.wrappedAppName = g
+      .wrapString(app.name, g.getWidth() - 64)
+      .join("\n");
+  }
+  log(g.getWidth());
+  log(storedPattern.wrappedAppName);
   g.setFont(scrollerFont)
     .setFontAlign(-1, 0)
-    .drawString(appName, 64, r.y + 32);
+    .drawString(storedPattern.wrappedAppName, 64, r.y + 32);
 };
 
 var showScrollerContainingAppsWithPatterns = () => {
@@ -422,6 +414,7 @@ var showScrollerContainingAppsWithPatterns = () => {
           pattern = storedPattern.pattern.join("");
           appName = storedPattern.app.name;
         }
+        clearCircleDrawingCache();
         resolve({ pattern: pattern, appName: appName });
       },
     });
@@ -501,10 +494,24 @@ var drawCircle = (circle, drawBuffer, scale) => {
 };
 
 var cachedCirclesDrawings = {};
-var drawCirclesWithPattern = (pattern, scale, offset) => {
+
+var clearCircleDrawingCache = () => {
+  cachedCirclesDrawings = {};
+};
+
+var drawCirclesWithPattern = (pattern, options) => {
   if (!pattern || pattern.length === 0) {
     pattern = [];
   }
+  if (!options) {
+    options = {};
+  }
+  var enableCaching = options.enableCaching;
+  var scale = options.scale;
+  var offset = options.offset;
+  if (!enableCaching) {
+    enableCaching = false;
+  }
   if (!scale) {
     scale = 1;
   }
@@ -520,6 +527,7 @@ var drawCirclesWithPattern = (pattern, scale, offset) => {
   // cache drawn patterns. especially useful for the manage pattern menu
   var image = cachedCirclesDrawings[pattern.join("")];
   if (!image) {
+    log("circle image not cached");
     var drawBuffer = Graphics.createArrayBuffer(
       g.getWidth() * scale,
       g.getHeight() * scale,
@@ -548,8 +556,13 @@ var drawCirclesWithPattern = (pattern, scale, offset) => {
       bpp: 1,
       buffer: drawBuffer.buffer,
     };
+
+    if (enableCaching) {
       cachedCirclesDrawings[pattern.join("")] = image;
     }
+  } else {
+    log("using cached circle image");
+  }
 
   g.drawImage(image, offset.x, offset.y);
 };
@@ -568,6 +581,12 @@ var cloneCirclesArray = () => {
 // misc lib functions
 //////
 
+var log = (message) => {
+  if (DEBUG) {
+    console.log(JSON.stringify(message));
+  }
+};
+
 var debounceTimeoutId;
 var debounce = (delay) => {
   if (debounceTimeoutId) {
@@ -581,3 +600,9 @@ var debounce = (delay) => {
     }, delay || 500);
   });
 };
+
+//////
+// run main function
+//////
+
+showMainMenu();

apps/ptlaunch/boot.js

@@ -5,10 +5,18 @@ var log = (message) => {
   }
 };
 
+var storedPatterns;
+var positions = [];
+var dragHandler = (position) => {
+  positions.push(position);
+
+  debounce().then(() => {
+    log(positions.length);
+
     var CIRCLE_RADIUS = 25;
     var CIRCLE_RADIUS_2 = CIRCLE_RADIUS * CIRCLE_RADIUS;
 
-var CIRCLES = [
+    var circles = [
       { x: 25, y: 25, i: 0 },
       { x: 87, y: 25, i: 1 },
       { x: 150, y: 25, i: 2 },
@@ -19,16 +27,6 @@ var CIRCLES = [
       { x: 87, y: 150, i: 7 },
       { x: 150, y: 150, i: 8 },
     ];
-
-var storedPatterns;
-var positions = [];
-var dragHandler = (position) => {
-  positions.push(position);
-
-  debounce().then(() => {
-    log(positions.length);
-
-    var circlesClone = cloneCirclesArray();
     var pattern = [];
 
     var step = Math.floor(positions.length / 100) + 1;
@@ -38,92 +36,92 @@ var dragHandler = (position) => {
     for (var i = 0; i < positions.length; i += step) {
       p = positions[i];
 
-      circle = circlesClone[0];
+      circle = circles[0];
       if (circle) {
         a = p.x - circle.x;
         b = p.y - circle.y;
         if (CIRCLE_RADIUS_2 - (a * a + b * b) >= 0) {
           pattern.push(circle.i);
-          circlesClone.splice(0, 1);
+          circles.splice(0, 1);
         }
       }
 
-      circle = circlesClone[1];
+      circle = circles[1];
       if (circle) {
         a = p.x - circle.x;
         b = p.y - circle.y;
         if (CIRCLE_RADIUS_2 - (a * a + b * b) >= 0) {
           pattern.push(circle.i);
-          circlesClone.splice(1, 1);
+          circles.splice(1, 1);
         }
       }
 
-      circle = circlesClone[2];
+      circle = circles[2];
       if (circle) {
         a = p.x - circle.x;
         b = p.y - circle.y;
         if (CIRCLE_RADIUS_2 - (a * a + b * b) >= 0) {
           pattern.push(circle.i);
-          circlesClone.splice(2, 1);
+          circles.splice(2, 1);
         }
       }
 
-      circle = circlesClone[3];
+      circle = circles[3];
       if (circle) {
         a = p.x - circle.x;
         b = p.y - circle.y;
         if (CIRCLE_RADIUS_2 - (a * a + b * b) >= 0) {
           pattern.push(circle.i);
-          circlesClone.splice(3, 1);
+          circles.splice(3, 1);
         }
       }
 
-      circle = circlesClone[4];
+      circle = circles[4];
       if (circle) {
         a = p.x - circle.x;
         b = p.y - circle.y;
         if (CIRCLE_RADIUS_2 - (a * a + b * b) >= 0) {
           pattern.push(circle.i);
-          circlesClone.splice(4, 1);
+          circles.splice(4, 1);
         }
       }
 
-      circle = circlesClone[5];
+      circle = circles[5];
       if (circle) {
         a = p.x - circle.x;
         b = p.y - circle.y;
         if (CIRCLE_RADIUS_2 - (a * a + b * b) >= 0) {
           pattern.push(circle.i);
-          circlesClone.splice(5, 1);
+          circles.splice(5, 1);
         }
       }
 
-      circle = circlesClone[6];
+      circle = circles[6];
       if (circle) {
         a = p.x - circle.x;
         b = p.y - circle.y;
         if (CIRCLE_RADIUS_2 - (a * a + b * b) >= 0) {
           pattern.push(circle.i);
-          circlesClone.splice(6, 1);
+          circles.splice(6, 1);
         }
       }
-      circle = circlesClone[7];
+      circle = circles[7];
       if (circle) {
         a = p.x - circle.x;
         b = p.y - circle.y;
         if (CIRCLE_RADIUS_2 - (a * a + b * b) >= 0) {
           pattern.push(circle.i);
-          circlesClone.splice(7, 1);
+          circles.splice(7, 1);
         }
       }
 
-      circle = circlesClone[8];
+      circle = circles[8];
       if (circle) {
         a = p.x - circle.x;
         b = p.y - circle.y;
         if (CIRCLE_RADIUS_2 - (a * a + b * b) >= 0) {
           pattern.push(circle.i);
-          circlesClone.splice(8, 1);
+          circles.splice(8, 1);
         }
       }
     }
@@ -163,16 +161,6 @@ var debounce = (delay) => {
   });
 };
 
-var cloneCirclesArray = () => {
-  var circlesClone = Array(CIRCLES.length);
-
-  for (var i = 0; i < CIRCLES.length; i++) {
-    circlesClone[i] = CIRCLES[i];
-  }
-
-  return circlesClone;
-};
-
 (function () {
   var sui = Bangle.setUI;
   Bangle.setUI = function (mode, cb) {