Merge pull request #1264 from myxor/circlesclock_v0.05

Circlesclock: Show correct percentage values in circles & show humidity as weather circle progress

apps.json

@@ -5097,7 +5097,7 @@
   { "id": "circlesclock",
     "name": "Circles clock",
     "shortName":"Circles clock",
-    "version":"0.04",
+    "version":"0.05",
     "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/ChangeLog

@@ -5,3 +5,5 @@
       Add step distance and weather
       Allow switching visibility of widgets
       Make circles and text slightly bigger
+0.05: Show correct percentage values in circles
+      Show humidity as weather circle data

apps/circlesclock/README.md

@@ -10,6 +10,9 @@ It can show the following information (this can be configured):
   * Heart rate (automatically updates when screen is on and unlocked)
   * Battery (including charging status and battery low warning)
   * Weather (requires [weather app](https://banglejs.com/apps/#weather))
+       * Humidity as circle progress
+       * Temperature inside circle
+       * Condition as icon below circle
 
 ## Screenshots
 ![Screenshot dark theme](screenshot-dark.png)

apps/circlesclock/app.js

@@ -283,6 +283,7 @@ function drawWeather(w) {
   if (!w) w = getCirclePosition("weather");
   const weather = getWeather();
   const tempString = weather ? locale.temp(weather.temp - 273.15) : undefined;
+  const humidity = weather ? weather.hum : undefined;
   const code = weather ? weather.code : -1;
 
   // Draw rectangle background:
@@ -292,6 +293,10 @@ function drawWeather(w) {
   g.setColor(colorGrey);
   g.fillCircle(w, h3, radiusOuter);
 
+  if (humidity >= 0) {
+    drawGauge(w, h3, humidity / 100, colorYellow);
+  }
+
   g.setColor(colorBg);
   g.fillCircle(w, h3, radiusInner);
 
@@ -363,22 +368,21 @@ function radians(a) {
 }
 
 function drawGauge(cx, cy, percent, color) {
-  let offset = 30;
+  const offset = 15;
-  let end = 300;
+  const end = 345;
-  var i = 0;
+  const r = radiusInner + 3;
-  var r = radiusInner + 3;
 
   if (percent <= 0) return;
   if (percent > 1) percent = 1;
 
-  var startrot = -offset;
+  const startrot = -offset;
-  var endrot = startrot - ((end - offset) * percent) - 35;
+  const endrot = startrot - ((end - offset) * percent);
 
   g.setColor(color);
 
   const size = radiusOuter - radiusInner - 2;
   // draw gauge
-  for (i = startrot; i > endrot - size; i -= size) {
+  for (let 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, size);