Merge branch 'master' into master

apps.json

@@ -538,7 +538,7 @@
     "icon": "clock-impword.png",
     "type": "clock",
     "tags": "clock",
-    "supports": ["BANGLEJS"],
+    "supports": ["BANGLEJS","BANGLEJS2"],
     "screenshots": [{"url":"bangle1-impercise-word-clock-screenshot.png"}],
     "allow_emulator": true,
     "storage": [
@@ -4829,9 +4829,10 @@
     "id": "ptlaunch",
     "name": "Pattern Launcher",
     "shortName": "Pattern Launcher",
-    "version": "0.02",
+    "version": "0.10",
     "description": "Directly launch apps from the clock screen with custom patterns.",
     "icon": "app.png",
+    "screenshots": [{"url":"main_menu_add.png"}, {"url":"add_pattern.png"}, {"url":"select_app.png"}, {"url":"main_menu_manage.png"}, {"url":"manage_patterns.png"}],
     "tags": "tools",
     "supports": ["BANGLEJS2"],
     "readme": "README.md",
@@ -4845,7 +4846,7 @@
   { "id": "clicompleteclk",
   "name": "CLI complete clock",
   "shortName":"CLI cmplt clock",
-  "version":"0.02",
+  "version":"0.03",
   "description": "Command line styled clock with lots of information",
   "icon": "app.png",
   "allow_emulator": true,
@@ -4854,9 +4855,10 @@
   "supports" : ["BANGLEJS", "BANGLEJS2"],
   "readme": "README.md",
   "storage": [
-    {"name":"clicompleteclk.app.js","url":"app.js"},
-    {"name":"clicompleteclk.img","url":"app-icon.js","evaluate":true}
-  ]
+    {"name":"clicompleteclk.img","url":"app-icon.js","evaluate":true},
+    {"name":"clicompleteclk.settings.js","url":"settings.js"}
+   ],
+   "data": [{"name":"clicompleteclk.json"}]
 },
   {
     "id":"awairmonitor",
@@ -4873,4 +4875,5 @@
       {"name":"awairmonitor.img","url":"app-icon.js","evaluate":true}
     ]
   }
+}
 ]

apps/clicompleteclk/README.md

@@ -3,12 +3,14 @@
 Command line styled clock with lots of information:
 
 It can show the following (depending on availability) information:
-* Time
-* Day of week
-* Date
-* Weather conditions and temperature (requires app [Weather](https://banglejs.com/apps/#weather))
-* Steps (requires app [Health Tracking](https://banglejs.com/apps/#health%20tracking) or a step widget)
-* Heart rate (when screen is on and unlocked)
+* Time data:
+  * Time
+  * Day of week
+  * Date
+* Additional information (can be toggled via settings):
+  * Weather conditions and temperature (requires app [Weather](https://banglejs.com/apps/#weather))
+  * Steps (requires app [Health Tracking](https://banglejs.com/apps/#health%20tracking) or a step widget)
+  * Heart rate (when screen is on and unlocked)
 
 ## TODO
 * Make time font bigger

apps/clicompleteclk/app.js

@@ -1,31 +1,60 @@
 const storage = require('Storage');
 const locale = require("locale");
 
-const font = "12x20";
-const fontsize = 1;
+const font12 = g.getFonts().includes("12x20");
+const font = font12 ? "12x20" : "6x8";
+const fontsize = font12 ? 1: 2;
 const fontheight = 19;
 
-const marginTop = 10;
+const marginTop = 5;
 const marginLeftTopic = 3; // margin of topics
-const marginLeftData = 68; // margin of data values
+const marginLeftData = font12 ? 64 : 75; // margin of data values
 
 const topicColor = g.theme.dark ? "#fff" : "#000";
 const textColor = g.theme.dark ? "#0f0" : "#080";
+const textColorRed = g.theme.dark ? "#FF0000" : "#FF0000";
 
 let hrtValue;
 let hrtValueIsOld = false;
+
 let localTempValue;
 let weatherTempString;
 let lastHeartRateRowIndex;
+let lastStepsRowIndex;
+let i = 2;
+
+let settings;
+
+function loadSettings() {
+  settings = storage.readJSON('clicompleteclk.json', 1) || {};
+}
+
+function setting(key) {
+  if (!settings) { loadSettings(); }
+  const DEFAULTS = {
+    'battery': true,
+    'batteryLvl': 30,
+    'weather': true,
+    'steps': true,
+    'heartrate': true
+  };
+  return (key in settings) ? settings[key] : DEFAULTS[key];
+}
+
+
+let showBattery = setting('battery');
+let batteryWarnLevel = setting('batteryLvl');
+let showWeather = setting('weather');
+let showSteps = setting('steps');
+let showHeartRate = setting('heartrate');
+
 
-// timeout used to update every minute
 var drawTimeout;
-// schedule a draw for the next minute
 function queueDraw() {
   if (drawTimeout) clearTimeout(drawTimeout);
   drawTimeout = setTimeout(function() {
     drawTimeout = undefined;
-    drawAll(false);
+    drawAll(true);
   }, 60000 - (Date.now() % 60000));
 }
 
@@ -42,15 +71,13 @@ function updateTime(now){
   if (!Bangle.isLCDOn()) return;
   writeLineTopic("TIME", 1);
   writeLine(locale.time(now,1),1);
-  if(now.getMinutes() == 0)
-    drawInfo(now);
 }
 
 function drawInfo(now) {
   if (now == undefined)
     now = new Date();
 
-  let i = 2;
+  i = 2;
 
   writeLineTopic("DOWK", i);
   writeLine(locale.dow(now),i);
@@ -60,14 +87,28 @@ function drawInfo(now) {
   writeLine(locale.date(now,1),i);
   i++;
 
-  /*
-  writeLineTopic("BAT", i);
+  if (showBattery) {
+    writeLineTopic("BATT", i);
     const b = E.getBattery();
-  writeLine(b + "%", i); // TODO make bars
+    writeLine(b + "%", i, b < batteryWarnLevel ? textColorRed : textColor);
     i++;
-  */
+  }
 
-  // weather
+  if (showWeather) {
+    drawWeather();
+  }
+
+  if (showSteps) {
+    drawSteps(i);
+    i++;
+  }
+
+  if (showHeartRate) {
+    drawHeartRate(i);
+  }
+}
+
+function drawWeather() {
   const weatherJson = getWeather();
   if(weatherJson && weatherJson.weather){
     const currentWeather = weatherJson.weather;
@@ -82,19 +123,22 @@ function drawInfo(now) {
     writeLine(weatherTempValue,i);
     i++;
   }
+}
 
-  // steps
+function drawSteps(i) {
+  if (!showSteps) return;
+  if (i == undefined)
+    i = lastStepsRowIndex;
   const steps = getSteps();
   if (steps != undefined) {
     writeLineTopic("STEP", i);
     writeLine(steps, i);
-    i++;
   }
-
-  drawHeartRate(i);
+  lastStepsRowIndex = i;
 }
 
 function drawHeartRate(i) {
+  if (!showHeartRate) return;
   if (i == undefined)
     i = lastHeartRateRowIndex;
   writeLineTopic("HRTM", i);
@@ -155,15 +199,21 @@ function getWeather() {
 // turn on HRM when the LCD is unlocked
 Bangle.on('lock', function(isLocked) {
   if (!isLocked) {
+    if (showHeartRate) {
       Bangle.setHRMPower(1,"clicompleteclk");
       if (hrtValue == undefined)
         hrtValue = "...";
       else
         hrtValueIsOld = true;
+    }
   } else {
+    if (showHeartRate) {
       hrtValueIsOld = true;
       Bangle.setHRMPower(0,"clicompleteclk");
     }
+  }
+  // Update steps and heart rate
+  drawSteps();
   drawHeartRate();
 });
 
@@ -171,13 +221,16 @@ Bangle.on('lcdPower',function(on) {
   if (on) {
     drawAll(true);
   } else {
+    if (showHeartRate) {
       hrtValueIsOld = true;
+    }
     if (drawTimeout) clearTimeout(drawTimeout);
     drawTimeout = undefined;
   }
 });
 
-Bangle.on('HRM', function(hrm) {
+if (showHeartRate) {
+  Bangle.on('HRM', function(hrm) {
     //if(hrm.confidence > 90){
       hrtValueIsOld = false;
       hrtValue = hrm.bpm;
@@ -186,10 +239,12 @@ Bangle.on('HRM', function(hrm) {
     //} else {
     //  hrtValue = undefined;
     //}
-});
+  });
+}
 
 g.clear();
 Bangle.setUI("clock");
 Bangle.loadWidgets();
 Bangle.drawWidgets();
+loadSettings();
 drawAll(true);

apps/clicompleteclk/settings.js

@@ -0,0 +1,54 @@
+(function(back) {
+  const storage = require('Storage');
+  let settings = storage.readJSON('clicompleteclk.json', 1) || {};
+  function save(key, value) {
+    settings[key] = value;
+    storage.write('clicompleteclk.json', settings);
+  }
+  E.showMenu({
+    '': { 'title': 'CLI complete clk' },
+    'Show battery': {
+      value: "battery" in settings ? settings.battery : false,
+      format: () => (settings.battery ? 'Yes' : 'No'),
+      onchange: () => {
+        settings.battery = !settings.battery;
+        save('battery', settings.battery);
+      },
+    },
+    'Battery warn': {
+      value: "batteryLvl" in settings ? settings.batteryLvl : 30,
+      min: 0,
+      max : 100,
+      step: 10,
+      format: x => {
+        return x + "%";
+      },
+      onchange: x => save('batteryLvl', x),
+    },
+    'Show weather': {
+      value: "weather" in settings ? settings.weather : false,
+      format: () => (settings.weather ? 'Yes' : 'No'),
+      onchange: () => {
+        settings.weather = !settings.weather;
+        save('weather', settings.weather);
+      },
+    },
+    'Show steps': {
+      value: "steps" in settings ? settings.steps : false,
+      format: () => (settings.steps ? 'Yes' : 'No'),
+      onchange: () => {
+        settings.steps = !settings.steps;
+        save('steps', settings.steps);
+      },
+    },
+    'Show heartrate': {
+      value: "heartrate" in settings ? settings.heartrate : false,
+      format: () => (settings.heartrate ? 'Yes' : 'No'),
+      onchange: () => {
+        settings.heartrate = !settings.heartrate;
+        save('heartrate', settings.heartrate);
+      },
+    },
+    '< Back': back,
+  });
+});

apps/fwupdate/custom.html

@@ -85,7 +85,7 @@ function checkForFileOnServer() {
   	});
   }
 
-  var regex = new RegExp("_banglejs2");
+  var regex = new RegExp("_banglejs2.*zip$");
 
 	var domFirmwareList = document.getElementById("latest-firmware-list");
   var domFirmware = document.getElementById("latest-firmware");
@@ -107,7 +107,7 @@ function checkForFileOnServer() {
 			});
       console.log("Finished check for firmware files...");
       var fwlinks = document.querySelectorAll(".fw-link");
-      for (var i=0;i<fwlinks.length;fwlinks++)
+      for (var i=0;i<fwlinks.length;i++)
         fwlinks[i].addEventListener("click", e => {
           e.preventDefault();
           var url = e.target.href;

apps/impwclock/ChangeLog

@@ -1,3 +1,4 @@
 0.01: New App!
 0.02: Stopped watchface from flashing every interval
 0.03: Move to Bangle.setUI to launcher support
+0.04: Tweaks for compatibility with BangleJS2

apps/impwclock/README.md

@@ -1,4 +1,4 @@
 # Imprecise Word Clock
 
-This clock tells time in very rough approximation, as in "Late morning" or "Early afternoon." Good for vacations and weekends. Press button 1 to see the time in accurate, digital form. But do you really need to know the exact time?
+This clock tells time in very rough approximation, as in "Late morning" or "Early afternoon." Good for vacations and weekends. Touch the screen to see the time in accurate, digital form. But do you really need to know the exact time?
 

apps/impwclock/clock-impword.js

@@ -2,7 +2,7 @@
 A remix of word clock
 by Gordon Williams https://github.com/gfwilliams
 - Changes the representation of time to be more general
-- Shows accurate digital time when button 1 is pressed
+- Toggles showing of accurate digital time when screen touched. 
 */
 /* jshint esversion: 6 */
 
@@ -34,14 +34,16 @@ const timeOfDay = {
 };
 
 
+var big = g.getWidth()>200;
 // offsets and increments
-const xs = 35;
-const ys = 31;
-const dy = 22;
-const dx = 25;
+const xs = big ? 35 : 20;
+const ys = big ? 31 : 28;
+const dx = big ? 25 : 20;
+const dy = big ? 22 : 16;
+
 
 // font size and color
-const fontSize = 3;  // "6x8"
+const fontSize = big ? 3 : 2;  // "6x8"
 const passivColor = 0x3186 /*grey*/ ;
 const activeColorNight = 0xF800 /*red*/ ;
 const activeColorDay = 0xFFFF /* white */;
@@ -115,6 +117,8 @@ function drawWordClock() {
 
   // check whether we need to redraw the watchface
   if (hidx !== hidxPrev) {
+    // Turn off showDigitalTime
+    showDigitalTime = false;
     // draw allWords
     var c;
     var y = ys;
@@ -138,15 +142,14 @@ function drawWordClock() {
     hidxPrev = hidx;
   }
 
-  // Display digital time while button 1 is pressed
-  g.clearRect(0, 215, 240, 240);
+  // Display digital time when button is pressed or screen touched
+  g.clearRect(0, big ? 215 : 160, big ? 240 : 176, big ? 240 : 176);
   if (showDigitalTime){
     g.setColor(activeColor);
-    g.drawString(time, 120, 215);
+    g.drawString(time, big ? 120 : 90, big ? 215 : 160);
   }
 }
 
-
 Bangle.on('lcdPower', function(on) {
   if (on) drawWordClock();
 });
@@ -157,17 +160,14 @@ Bangle.drawWidgets();
 setInterval(drawWordClock, 1E4);
 drawWordClock();
 
-// Show digital time while top button is pressed (if we have physical buttons)
-if (global.BTN3) setWatch(function() {
-  showDigitalTime = BTN1.read();
-  drawWordClock();
-}, BTN1, {repeat:true,edge:"both"});
 
-// If LCD pressed (on Bangle.js 2) draw digital time
-Bangle.on('drag',e=>{
-  var pressed = e.b!=0;
-  if (pressed!=showDigitalTime) {
-    showDigitalTime = pressed;
+// If LCD pressed, toggle drawing digital time
+Bangle.on('touch',e=>{
+  if (showDigitalTime){
+    showDigitalTime = false;
+    drawWordClock();
+  } else {
+    showDigitalTime = true;
     drawWordClock();
   }
 });

apps/ptlaunch/ChangeLog

@@ -1,2 +1,4 @@
 0.01: Initial creation of the pattern launch app
 0.02: Turn on lcd when launching an app if the lock screen was disabled in the settings
+0.03: Make tap to confirm new pattern more reliable. Also allow for easier creation of single circle patterns.
+0.10: Improve the management of existing patterns: Draw the linked pattern on the left hand side of the app name within a scroller, similar to the default launcher. Slighlty clean up the code to make it less horrible.

apps/ptlaunch/README.md

@@ -8,25 +8,32 @@ Create patterns and link them to apps in the Pattern Launcher app.
 
 Then launch the linked apps directly from the clock screen by simply drawing the desired pattern.
 
-## Screenshots and detailed steps
+## Add Pattern Screenshots
 
-![](main_menu.png)
+![](main_menu_add.png)
 ![](add_pattern.png)
 ![](select_app.png)
 
+## Manage Pattern Screenshots
+
+![](main_menu_manage.png)
+![](manage_patterns.png)
+
+## Detailed Steps
+
 From the main menu you can:
 - Add a new pattern and link it to an app (first entry)
     - To create a new pattern first select "Add Pattern"
     - Now draw any pattern you like, this will later launch the linked app from the clock screen
+    - You can also draw a single-circle pattern (meaning a single tap on one circle) instead of drawing a 'complex' pattern
     - If you don't like the pattern, simply re-draw it. The previous pattern will be discarded.
     - If you are happy with the pattern tap on screen or press the button to continue
     - Now select the app you want to launch with the pattern.
     - Note, you can bind multiple patterns to the same app.
-- Remove linked patterns (second entry)
-    - To remove a pattern first select "Remove Pattern"
-    - You will now see a list of apps that have patterns linked to them
-    - Simply select the app that you want to unlink. This will remove the saved pattern, but not the app itself!
-    - Note, that you can not actually preview the patterns. This makes removing patterns that are linked to the same app annoying. sorry!
+- Manage created patterns (second entry)
+    - To manage your patterns first select "Manage Patterns"
+    - You will now see a scrollabe list of patterns + linked apps
+    - If you want to deletion a pattern (and unlink the app) simply tap on it, and confirm the deletion
 - Disable the lock screen on the clock screen from the settings (third entry)
     - To launch the app from the pattern on the clock screen the watch must be unlocked.
     - If this annoys you, you can disable the lock on the clock screen from the setting here

apps/ptlaunch/app.js

@@ -1,26 +1,6 @@
-var storage = require("Storage");
-
 var DEBUG = false;
-var log = (message) => {
-  if (DEBUG) {
-    console.log(JSON.stringify(message));
-  }
-};
 
-var CIRCLE_RADIUS = 25;
-var CIRCLE_RADIUS_2 = CIRCLE_RADIUS * CIRCLE_RADIUS;
-
-var CIRCLES = [
-  { x: 25, y: 25, i: 0 },
-  { x: 87, y: 25, i: 1 },
-  { x: 150, y: 25, i: 2 },
-  { x: 25, y: 87, i: 3 },
-  { x: 87, y: 87, i: 4 },
-  { x: 150, y: 87, i: 5 },
-  { x: 25, y: 150, i: 6 },
-  { x: 87, y: 150, i: 7 },
-  { x: 150, y: 150, i: 8 },
-];
+var storage = require("Storage");
 
 var showMainMenu = () => {
   log("loading patterns");
@@ -36,7 +16,7 @@ var showMainMenu = () => {
     },
     "Add Pattern": () => {
       log("creating pattern");
-      createPattern().then((pattern) => {
+      recognizeAndDrawPattern().then((pattern) => {
         log("got pattern");
         log(pattern);
         log(pattern.length);
@@ -73,17 +53,32 @@ var showMainMenu = () => {
         });
       });
     },
-    "Remove Pattern": () => {
+    "Manage Patterns": () => {
       log("selecting pattern through app");
-      getStoredPatternViaApp(storedPatterns).then((pattern) => {
+      showScrollerContainingAppsWithPatterns().then((selected) => {
+        var pattern = selected.pattern;
+        var appName = selected.appName;
+        if (pattern === "back") {
+          showMainMenu();
+        } else {
+          E.showPrompt(appName + "\n\npattern:\n" + pattern, {
+            title: "Delete?",
+            buttons: { Yes: true, No: false },
+          }).then((confirm) => {
+            if (confirm) {
               E.showMessage("Deleting...");
               delete storedPatterns[pattern];
               storage.writeJSON("ptlaunch.patterns.json", storedPatterns);
               showMainMenu();
+            } else {
+              showMainMenu();
+            }
+          });
+        }
       });
     },
     Settings: () => {
-      var settings = storedPatterns["settings"] || {};
+      var settings = storedPatterns.settings || {};
 
       var settingsmenu = {
         "": {
@@ -98,7 +93,7 @@ var showMainMenu = () => {
       if (settings.lockDisabled) {
         settingsmenu["Enable lock"] = () => {
           settings.lockDisabled = false;
-          storedPatterns["settings"] = settings;
+          storedPatterns.settings = settings;
           Bangle.setOptions({ lockTimeout: 1000 * 30 });
           storage.writeJSON("ptlaunch.patterns.json", storedPatterns);
           showMainMenu();
@@ -106,7 +101,7 @@ var showMainMenu = () => {
       } else {
         settingsmenu["Disable lock"] = () => {
           settings.lockDisabled = true;
-          storedPatterns["settings"] = settings;
+          storedPatterns.settings = settings;
           storage.writeJSON("ptlaunch.patterns.json", storedPatterns);
           Bangle.setOptions({ lockTimeout: 1000 * 60 * 60 * 24 * 365 });
           showMainMenu();
@@ -119,12 +114,8 @@ var showMainMenu = () => {
   E.showMenu(mainmenu);
 };
 
-var drawCircle = (circle) => {
-  g.fillCircle(circle.x, circle.y, CIRCLE_RADIUS);
-};
-
 var positions = [];
-var createPattern = () => {
+var recognizeAndDrawPattern = () => {
   return new Promise((resolve) => {
     E.showMenu();
     g.clear();
@@ -147,13 +138,29 @@ var createPattern = () => {
     setWatch(() => finishHandler(), BTN);
     setTimeout(() => Bangle.on("tap", finishHandler), 250);
 
+    positions = [];
     var dragHandler = (position) => {
+      log(position);
       positions.push(position);
 
       debounce().then(() => {
         if (isFinished) {
           return;
         }
+
+        // This might actually be a 'tap' event.
+        // Use this check in addition to the actual tap handler to make it more reliable
+        if (pattern.length > 0 && positions.length === 2) {
+          if (
+            positions[0].x === positions[1].x &&
+            positions[0].y === positions[1].y
+          ) {
+            finishHandler();
+            positions = [];
+            return;
+          }
+        }
+
         E.showMessage("Calculating...");
         var t0 = Date.now();
 
@@ -269,18 +276,7 @@ var createPattern = () => {
 
         log("redrawing");
         g.clear();
-        g.setColor(0, 0, 0);
-        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);
+        drawCirclesWithPattern(pattern);
       });
     };
 
@@ -341,56 +337,256 @@ var getSelectedApp = () => {
   });
 };
 
-var getStoredPatternViaApp = (storedPatterns) => {
-  E.showMessage("Loading patterns...");
-  log("getStoredPatternViaApp");
-  return new Promise((resolve) => {
-    var selectPatternMenu = {
-      "": {
-        title: "Select App",
-      },
-      "< Cancel": () => {
-        log("cancel");
-        showMainMenu();
-      },
-    };
+//////
+// manage pattern related variables and functions
+// - draws all saved patterns and their linked app names
+// - uses the scroller to allow the user to browse through them
+//////
 
-    log(storedPatterns);
-    var patterns = Object.keys(storedPatterns);
-    log(patterns);
+var scrollerFont = g.getFonts().includes("12x20") ? "12x20" : "6x8:2";
 
-    patterns.forEach((pattern) => {
-      if (pattern) {
-        if (storedPatterns[pattern]) {
-          var app = storedPatterns[pattern].app;
-          if (!!app && !!app.name) {
-            var appName = app.name;
-            var i = 0;
-            while (appName in selectPatternMenu[app.name]) {
-              appName = app.name + i;
-              i++;
-            }
-            selectPatternMenu[appName] = () => {
-              log("pattern via app selected");
-              log(pattern);
-              log(app);
-              resolve(pattern);
-            };
-          }
-        }
-      }
+var drawBackButton = (r) => {
+  g.clearRect(r.x, r.y, r.x + r.w - 1, r.y + r.h - 1);
+  g.setFont(scrollerFont)
+    .setFontAlign(-1, 0)
+    .drawString("< Back", 64, r.y + 32);
+};
+
+var drawAppWithPattern = (i, r, storedPatterns) => {
+  log("draw app with pattern");
+  log({ i: i, r: r, storedPatterns: storedPatterns });
+  var storedPattern = storedPatterns[i];
+  var pattern = storedPattern.pattern;
+  var app = storedPattern.app;
+
+  g.clearRect(r.x, r.y, r.x + r.w - 1, r.y + r.h - 1);
+
+  g.drawLine(r.x, r.y, 176, r.y);
+
+  drawCirclesWithPattern(pattern, {
+    enableCaching: true,
+    scale: 0.33,
+    offset: { x: 1, y: 3 + r.y },
   });
 
-    E.showMenu(selectPatternMenu);
+  g.setColor(0, 0, 0);
+  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(storedPattern.wrappedAppName, 64, r.y + 32);
+};
+
+var showScrollerContainingAppsWithPatterns = () => {
+  var storedPatternsArray = getStoredPatternsArray();
+  log("drawing scroller for stored patterns");
+  log(storedPatternsArray);
+  log(storedPatternsArray.length);
+
+  g.clear();
+
+  var c = Math.max(storedPatternsArray.length + 1, 3);
+
+  return new Promise((resolve) => {
+    E.showScroller({
+      h: 64,
+      c: c,
+      draw: (i, r) => {
+        log("draw");
+        log({ i: i, r: r });
+        if (i <= 0) {
+          drawBackButton(r);
+        } else if (i <= storedPatternsArray.length) {
+          drawAppWithPattern(i - 1, r, storedPatternsArray);
+        }
+      },
+      select: (i) => {
+        log("selected: " + i);
+        var pattern = "back";
+        var appName = "";
+        if (i > 0) {
+          var storedPattern = storedPatternsArray[i - 1];
+          pattern = storedPattern.pattern.join("");
+          appName = storedPattern.app.name;
+        }
+        clearCircleDrawingCache();
+        resolve({ pattern: pattern, appName: appName });
+      },
+    });
   });
 };
 
-showMainMenu();
+//////
+// storage related functions:
+// - stored patterns
+// - stored settings
+//////
+
+var getStoredPatternsMap = () => {
+  log("loading stored patterns map");
+  var storedPatternsMap = storage.readJSON("ptlaunch.patterns.json", 1) || {};
+  delete storedPatternsMap.settings;
+  log(storedPatternsMap);
+  return storedPatternsMap;
+};
+
+var getStoredPatternsArray = () => {
+  var storedPatternsMap = getStoredPatternsMap();
+  log("converting stored patterns map to array");
+  var patterns = Object.keys(storedPatternsMap);
+  var storedPatternsArray = [];
+  for (var i = 0; i < patterns.length; i++) {
+    var pattern = "" + patterns[i];
+    storedPatternsArray.push({
+      pattern: pattern
+        .split("")
+        .map((circleIndex) => parseInt(circleIndex, 10)),
+      app: storedPatternsMap[pattern].app,
+    });
+  }
+  log(storedPatternsArray);
+  return storedPatternsArray;
+};
 
 //////
-// lib functions
+// circle related variables and functions:
+// - the circle array itself
+// - the radius and the squared radius of the circles
+// - circle draw function
 //////
 
+var CIRCLE_RADIUS = 25;
+var CIRCLE_RADIUS_2 = CIRCLE_RADIUS * CIRCLE_RADIUS;
+
+var CIRCLES = [
+  { x: 25, y: 25, i: 0 },
+  { x: 87, y: 25, i: 1 },
+  { x: 150, y: 25, i: 2 },
+  { x: 25, y: 87, i: 3 },
+  { x: 87, y: 87, i: 4 },
+  { x: 150, y: 87, i: 5 },
+  { x: 25, y: 150, i: 6 },
+  { x: 87, y: 150, i: 7 },
+  { x: 150, y: 150, i: 8 },
+];
+
+var drawCircle = (circle, drawBuffer, scale) => {
+  if (!drawBuffer) {
+    drawBuffer = g;
+  }
+  if (!scale) {
+    scale = 1;
+  }
+
+  var x = circle.x * scale;
+  var y = circle.y * scale;
+  var r = CIRCLE_RADIUS * scale;
+
+  log("drawing circle");
+  log({ x: x, y: y, r: r });
+
+  drawBuffer.fillCircle(x, y, r);
+};
+
+var cachedCirclesDrawings = {};
+
+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;
+  }
+  if (!offset) {
+    offset = { x: 0, y: 0 };
+  }
+
+  log("drawing circles with pattern, scale and offset");
+  log(pattern);
+  log(scale);
+  log(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,
+      1,
+      { msb: true }
+    );
+
+    drawBuffer.setColor(1);
+    CIRCLES.forEach((circle) => drawCircle(circle, drawBuffer, scale));
+
+    drawBuffer.setColor(0);
+    drawBuffer.setFontAlign(0, 0);
+    drawBuffer.setFont("6x8", 4 * scale);
+    pattern.forEach((circleIndex, patternIndex) => {
+      var circle = CIRCLES[circleIndex];
+      drawBuffer.drawString(
+        patternIndex + 1,
+        circle.x * scale,
+        circle.y * scale
+      );
+    });
+
+    image = {
+      width: drawBuffer.getWidth(),
+      height: drawBuffer.getHeight(),
+      bpp: 1,
+      buffer: drawBuffer.buffer,
+    };
+
+    if (enableCaching) {
+      cachedCirclesDrawings[pattern.join("")] = image;
+    }
+  } else {
+    log("using cached circle image");
+  }
+
+  g.drawImage(image, offset.x, offset.y);
+};
+
+var cloneCirclesArray = () => {
+  var circlesClone = Array(CIRCLES.length);
+
+  for (var i = 0; i < CIRCLES.length; i++) {
+    circlesClone[i] = CIRCLES[i];
+  }
+
+  return circlesClone;
+};
+
+//////
+// misc lib functions
+//////
+
+var log = (message) => {
+  if (DEBUG) {
+    console.log(JSON.stringify(message));
+  }
+};
+
 var debounceTimeoutId;
 var debounce = (delay) => {
   if (debounceTimeoutId) {
@@ -405,12 +601,8 @@ var debounce = (delay) => {
   });
 };
 
-var cloneCirclesArray = () => {
-  var circlesClone = Array(CIRCLES.length);
+//////
+// run main function
+//////
 
-  for (var i = 0; i < CIRCLES.length; i++) {
-    circlesClone[i] = CIRCLES[i];
-  }
-
-  return circlesClone;
-};
+showMainMenu();

apps/ptlaunch/boot.js

@@ -5,21 +5,6 @@ var log = (message) => {
   }
 };
 
-var CIRCLE_RADIUS = 25;
-var CIRCLE_RADIUS_2 = CIRCLE_RADIUS * CIRCLE_RADIUS;
-
-var CIRCLES = [
-  { x: 25, y: 25, i: 0 },
-  { x: 87, y: 25, i: 1 },
-  { x: 150, y: 25, i: 2 },
-  { x: 25, y: 87, i: 3 },
-  { x: 87, y: 87, i: 4 },
-  { x: 150, y: 87, i: 5 },
-  { x: 25, y: 150, i: 6 },
-  { x: 87, y: 150, i: 7 },
-  { x: 150, y: 150, i: 8 },
-];
-
 var storedPatterns;
 var positions = [];
 var dragHandler = (position) => {
@@ -28,7 +13,20 @@ var dragHandler = (position) => {
   debounce().then(() => {
     log(positions.length);
 
-    var circlesClone = cloneCirclesArray();
+    var CIRCLE_RADIUS = 25;
+    var CIRCLE_RADIUS_2 = CIRCLE_RADIUS * CIRCLE_RADIUS;
+
+    var circles = [
+      { x: 25, y: 25, i: 0 },
+      { x: 87, y: 25, i: 1 },
+      { x: 150, y: 25, i: 2 },
+      { x: 25, y: 87, i: 3 },
+      { x: 87, y: 87, i: 4 },
+      { x: 150, y: 87, i: 5 },
+      { x: 25, y: 150, i: 6 },
+      { x: 87, y: 150, i: 7 },
+      { x: 150, y: 150, i: 8 },
+    ];
     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) {