Circles clock v0.03

apps.json

@@ -5029,9 +5029,10 @@
   { "id": "circlesclock",
     "name": "Circles clock",
     "shortName":"Circles clock",
-    "version":"0.02",
+    "version":"0.03",
     "description": "A clock with circles for different data at the bottom in a probably familiar style",
     "icon": "app.png",
+    "screenshots": [{"url":"screenshot.png"}],
     "dependencies": {"widpedom":"app"},
     "type": "clock",
     "tags": "clock",

apps/circlesclock/ChangeLog

@@ -1,2 +1,3 @@
 0.01: New clock
 0.02: Fix icon & add battery warn functionality
+0.03: Theming support & minor fixes

apps/circlesclock/app.js

@@ -18,8 +18,8 @@ function loadSettings() {
   };
 }
 
-const colorFg = '#fff';
-const colorBg = '#000';
+const colorFg = g.theme.dark ? '#fff' : '#000';
+const colorBg = g.theme.dark ? '#000' : '#fff';
 const colorGrey = '#808080';
 const colorRed = '#ff0000';
 const colorGreen = '#00ff00';
@@ -73,7 +73,7 @@ function drawSteps() {
   g.setColor(colorGrey);
   g.fillCircle(w1, h3, radiusOuter);
 
-  const stepGoal = settings.stepGoal;
+  const stepGoal = settings.stepGoal || 10000;
   if (stepGoal > 0) {
     let percent = steps / stepGoal;
     if (stepGoal < steps) percent = 1;
@@ -97,7 +97,7 @@ function drawHeartRate() {
   g.setColor(colorGrey);
   g.fillCircle(w2, h3, radiusOuter);
 
-  if (hrtValue != undefined) {
+  if (hrtValue != undefined && hrtValue > 0) {
     const percent = hrtValue / settings.maxHR;
     drawGauge(w2, h3, percent, colorRed);
   }
@@ -156,7 +156,6 @@ function radians(a) {
   return a * Math.PI / 180;
 }
 
-
 function drawGauge(cx, cy, percent, color) {
   let offset = 30;
   let end = 300;
@@ -166,15 +165,16 @@ function drawGauge(cx, cy, percent, color) {
   if (percent > 1) percent = 1;
 
   var startrot = -offset;
-  var endrot = startrot - ((end - offset) * percent);
+  var endrot = startrot - ((end - offset) * percent) - 15;
 
   g.setColor(color);
 
+  const size = 4;
   // draw gauge
-  for (i = startrot; i > endrot; i -= 4) {
+  for (i = startrot; i > endrot - size; i -= size) {
     x = cx + r * Math.sin(radians(i));
     y = cy + r * Math.cos(radians(i));
-    g.fillCircle(x, y, 4);
+    g.fillCircle(x, y, size);
   }
 }
 
@@ -201,6 +201,10 @@ function getSteps() {
 Bangle.on('lock', function(isLocked) {
   if (!isLocked) {
     Bangle.setHRMPower(1, "watch");
+    if (hrtValue == undefined) {
+      hrtValue = '...';
+      drawHeartRate();
+    }
   } else {
     Bangle.setHRMPower(0, "watch");
   }
@@ -225,9 +229,11 @@ Bangle.loadWidgets();
  * so we will blank out the draw() functions of each widget and change the
  * area to the top bar doesn't get cleared.
  */
-for (let wd of WIDGETS) {
-  wd.draw = () => {};
-  wd.area = "";
+if (typeof WIDGETS === "object") {
+  for (let wd of WIDGETS) {
+    wd.draw = () => {};
+    wd.area = "";
+  }
 }
 loadSettings();
 setInterval(draw, 60000);