Merge pull request #1347 from myxor/circlesclock_v0.08

Circlesclock v0.08

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/README.md

@@ -1,6 +1,6 @@
 # Circles clock
 
-A clock with circles for different data at the bottom in a probably familiar style
+A clock with three or four circles for different data at the bottom in a probably familiar style
 
 By default the time, date and day of week is shown.
 
@@ -18,6 +18,8 @@ It can show the following information (this can be configured):
 ## Screenshots
 ![Screenshot dark theme](screenshot-dark.png)
 ![Screenshot light theme](screenshot-light.png)
+![Screenshot dark theme with four circles](screenshot-dark-4.png)
+![Screenshot light theme with four circles](screenshot-light-4.png)
 
 ## Creator
 Marco ([myxor](https://github.com/myxor))

apps/circlesclock/app.js

@@ -23,31 +23,27 @@ 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) || {
-    'minHR': 40,
-    'maxHR': 200,
-    'confidence': 0,
-    'stepGoal': 10000,
-    'stepDistanceGoal': 8000,
-    'stepLength': 0.8,
-    'batteryWarn': 30,
-    'showWidgets': false,
-    'weatherCircleData': 'humidity',
-    'circle1': 'hr',
-    'circle2': 'steps',
-    'circle3': 'battery'
-  };
-  // 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;
-  }
+let settings = storage.readJSON("circlesclock.json", 1) || {
+  'minHR': 40,
+  'maxHR': 200,
+  'confidence': 0,
+  'stepGoal': 10000,
+  'stepDistanceGoal': 8000,
+  'stepLength': 0.8,
+  'batteryWarn': 30,
+  'showWidgets': false,
+  'weatherCircleData': 'humidity',
+  'circleCount': 3,
+  'circle1': 'hr',
+  'circle2': 'steps',
+  '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();
-
 
 /*
  * Read location from myLocation app
@@ -58,6 +54,7 @@ function getLocation() {
 let location = getLocation();
 
 const showWidgets = settings.showWidgets || false;
+const circleCount = settings.circleCount || 3;
 
 let hrtValue;
 let now = Math.round(new Date().getTime() / 1000);
@@ -78,11 +75,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), // circle1
+  Math.round(3 * w / parts), // circle2
+  Math.round(5 * w / parts), // circle3
+  Math.round(7 * w / parts), // circle4
+];
+
+const radiusOuter = circleCount == 3 ? 25 : 20;
+const radiusInner = circleCount == 3 ? 20 : 15;
+const circleFont = circleCount == 3 ? "Vector:15" : "Vector:12";
+const circleFontBig = circleCount == 3 ? "Vector:16" : "Vector:13";
+const defaultCircleTypes = ["steps", "hr", "battery", "weather"];
+
 
 function draw() {
   g.clear(true);
@@ -122,10 +141,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 +165,7 @@ function drawCircle(index) {
       drawWeather(w);
       break;
     case "sunprogress":
+    case "sunProgress":
       drawSunProgress(w);
       break;
     case "empty":
@@ -169,7 +188,7 @@ function getCirclePosition(type) {
   if (circlePositionsCache[type] >= 0) {
     return circlePosX[circlePositionsCache[type]];
   }
-  for (let i = 1; i <= 3; i++) {
+  for (let i = 1; i <= circleCount; i++) {
     const setting = settings['circle' + i];
     if (setting == type) {
       circlePositionsCache[type] = i - 1;
@@ -319,6 +338,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,10 +1,10 @@
 { "id": "circlesclock",
   "name": "Circles clock",
   "shortName":"Circles clock",
-  "version":"0.07",
-  "description": "A clock with circles for different data at the bottom in a probably familiar style",
+  "version":"0.08",
+  "description": "A clock with three or four circles for different data at the bottom in a probably familiar style",
   "icon": "app.png",
-  "screenshots": [{"url":"screenshot-dark.png"}, {"url":"screenshot-light.png"}],
+  "screenshots": [{"url":"screenshot-dark.png"}, {"url":"screenshot-light.png"}, {"url":"screenshot-dark-4.png"}, {"url":"screenshot-light-4.png"}],
   "type": "clock",
   "tags": "clock",
   "supports" : ["BANGLEJS2"],

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]),
     }
   });
 });