Allow configuration of up to 4 circles in a row

apps/circlesclock/ChangeLog

@@ -12,3 +12,4 @@
       Support to show time and progress until next sunrise or sunset
       Load daily steps from Bangle health if available
 0.07: Allow configuration of minimal heart rate confidence
+0.08: Allow configuration of up to 4 circles in a row

apps/circlesclock/app.js

@@ -23,10 +23,7 @@ const weatherStormy = heatshrink.decompress(atob("iEQwYLIg/gAgUB///wAFBh/AgfwgED
 const sunSetDown = heatshrink.decompress(atob("iEQwIHEgOAAocT5EGtEEkF//wLDg1ggfACoo"));
 const sunSetUp = heatshrink.decompress(atob("iEQwIHEgOAAocT5EGtEEkF//wRFgfAg1gBIY"));
 
-let settings;
-
-function loadSettings() {
-  settings = storage.readJSON("circlesclock.json", 1) || {
+let settings = storage.readJSON("circlesclock.json", 1) || {
     'minHR': 40,
     'maxHR': 200,
     'confidence': 0,
@@ -36,19 +33,21 @@ function loadSettings() {
     'batteryWarn': 30,
     'showWidgets': false,
     'weatherCircleData': 'humidity',
+    'circleCount': 3,
     'circle1': 'hr',
     'circle2': 'steps',
-    'circle3': 'battery'
+    'circle3': 'battery',
+    'circle4': 'weather'
   };
   // Load step goal from pedometer widget as fallback
   if (settings.stepGoal == undefined) {
     const d = require('Storage').readJSON("wpedom.json", 1) || {};
     settings.stepGoal = d != undefined && d.settings != undefined ? d.settings.goal : 10000;
   }
-}
-loadSettings();
 
 
+const circleCount = settings.circleCount || 3;
+
 /*
  * Read location from myLocation app
  */
@@ -78,11 +77,33 @@ const hOffset = 30 - widgetOffset;
 const h1 = Math.round(1 * h / 5 - hOffset);
 const h2 = Math.round(3 * h / 5 - hOffset);
 const h3 = Math.round(8 * h / 8 - hOffset - 3); // circle y position
-const circlePosX = [Math.round(w / 6), Math.round(3 * w / 6), Math.round(5 * w / 6)]; // cirle x positions
-const radiusOuter = 25;
-const radiusInner = 20;
-const circleFont = "Vector:15";
-const circleFontBig = "Vector:16";
+
+/*
+* circle x positions
+* depending on circleCount
+*
+* | 1 2 3 4 5 6 |
+* | (1) (2) (3) |
+* => circles start at 1,3,5 / 6
+*
+* | 1 2 3 4 5 6 7 8 |
+* | (1) (2) (3) (4) |
+* => circles start at 1,3,5,7 / 8
+*/
+const parts = circleCount * 2;
+const circlePosX = [
+  Math.round(1 * w / parts),
+  Math.round(3 * w / parts),
+  Math.round(5 * w / parts),
+  Math.round(7 * w / parts),
+];
+
+const radiusOuter = circleCount == 3 ? 25 : 20;
+const radiusInner = circleCount == 3 ? 20 : 15;
+const circleFont = circleCount == 3 ? "Vector:15" : "Vector:13";
+const circleFontBig = circleCount == 3 ? "Vector:16" : "Vector:14";
+const defaultCircleTypes = ["steps", "hr", "battery", "weather"];
+
 
 function draw() {
   g.clear(true);
@@ -122,10 +143,9 @@ function draw() {
   drawCircle(1);
   drawCircle(2);
   drawCircle(3);
+  if (circleCount >= 4) drawCircle(4);
 }
 
-const defaultCircleTypes = ["steps", "hr", "battery"];
-
 function drawCircle(index) {
   let type = settings['circle' + index];
   if (!type) type = defaultCircleTypes[index - 1];
@@ -147,6 +167,7 @@ function drawCircle(index) {
       drawWeather(w);
       break;
     case "sunprogress":
+    case "sunProgress":
       drawSunProgress(w);
       break;
     case "empty":
@@ -319,6 +340,8 @@ function drawWeather(w) {
   if (code > 0) {
     const icon = getWeatherIconByCode(code);
     if (icon) g.drawImage(icon, w - 6, h3 + radiusOuter - 10);
+  } else {
+    g.drawString("?", w, h3 + radiusOuter);
   }
 }
 

apps/circlesclock/metadata.json

@@ -1,7 +1,7 @@
 { "id": "circlesclock",
   "name": "Circles clock",
   "shortName":"Circles clock",
-  "version":"0.07",
+  "version":"0.08",
   "description": "A clock with circles for different data at the bottom in a probably familiar style",
   "icon": "app.png",
   "screenshots": [{"url":"screenshot-dark.png"}, {"url":"screenshot-light.png"}],

apps/circlesclock/settings.js

@@ -96,23 +96,36 @@
       format: v => weatherData[v],
       onchange: x => save('weatherCircleData', weatherData[x]),
     },
-    'left': {
+    'circle count': {
+      value: "circleCount" in settings ? settings.circleCount : 3,
+      min: 3,
+      max : 4,
+      step: 1,
+      onchange: x => save('circleCount', x),
+    },
+    'circle1': {
       value: settings.circle1 ? valuesCircleTypes.indexOf(settings.circle1) : 0,
       min: 0, max: 6,
       format: v => namesCircleTypes[v],
       onchange: x => save('circle1', valuesCircleTypes[x]),
     },
-    'middle': {
+    'circle2': {
       value: settings.circle2 ? valuesCircleTypes.indexOf(settings.circle2) : 2,
       min: 0, max: 6,
       format: v => namesCircleTypes[v],
       onchange: x => save('circle2', valuesCircleTypes[x]),
     },
-    'right': {
+    'circle3': {
       value: settings.circle3 ? valuesCircleTypes.indexOf(settings.circle3) : 3,
       min: 0, max: 6,
       format: v => namesCircleTypes[v],
       onchange: x => save('circle3', valuesCircleTypes[x]),
+    },
+    'circle4': {
+      value: settings.circle4 ? valuesCircleTypes.indexOf(settings.circle4) : 4,
+      min: 0, max: 6,
+      format: v => namesCircleTypes[v],
+      onchange: x => save('circle4', valuesCircleTypes[x]),
     }
   });
 });