diff --git a/apps.json b/apps.json index 57934dff3..b5929a56c 100644 --- a/apps.json +++ b/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"}], diff --git a/apps/circlesclock/ChangeLog b/apps/circlesclock/ChangeLog index ca1da6e21..5464a8103 100644 --- a/apps/circlesclock/ChangeLog +++ b/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 diff --git a/apps/circlesclock/README.md b/apps/circlesclock/README.md index 9aaa4bc8e..c3704e3d7 100644 --- a/apps/circlesclock/README.md +++ b/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) diff --git a/apps/circlesclock/app.js b/apps/circlesclock/app.js index 91d4937c4..822802afa 100644 --- a/apps/circlesclock/app.js +++ b/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; - let end = 300; - var i = 0; - var r = radiusInner + 3; + const offset = 15; + const end = 345; + const r = radiusInner + 3; if (percent <= 0) return; if (percent > 1) percent = 1; - var startrot = -offset; - var endrot = startrot - ((end - offset) * percent) - 35; + const startrot = -offset; + 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);