Add new screenshots and update README

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

@@ -45,9 +45,6 @@ let settings = storage.readJSON("circlesclock.json", 1) || {
     settings.stepGoal = d != undefined && d.settings != undefined ? d.settings.goal : 10000;
   }
 
-
-const circleCount = settings.circleCount || 3;
-
 /*
  * Read location from myLocation app
  */
@@ -57,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);
@@ -92,16 +90,16 @@ const h3 = Math.round(8 * h / 8 - hOffset - 3); // circle y position
 */
 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),
+  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:13";
-const circleFontBig = circleCount == 3 ? "Vector:16" : "Vector:14";
+const circleFont = circleCount == 3 ? "Vector:15" : "Vector:12";
+const circleFontBig = circleCount == 3 ? "Vector:16" : "Vector:13";
 const defaultCircleTypes = ["steps", "hr", "battery", "weather"];
 
 
@@ -190,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;