From bddd130c3f82d5c78637d5adf61efba2e0148443 Mon Sep 17 00:00:00 2001 From: Francisco Pina Martins Date: Thu, 13 Jan 2022 15:48:05 +0000 Subject: [PATCH 01/84] Allows colour customization. Adds settings --- apps/vectorclock/app.js | 19 +++++++++------ apps/vectorclock/settings.js | 45 ++++++++++++++++++++++++++++++++++++ 2 files changed, 57 insertions(+), 7 deletions(-) create mode 100644 apps/vectorclock/settings.js diff --git a/apps/vectorclock/app.js b/apps/vectorclock/app.js index 78c17b3d4..fe1f6e64c 100644 --- a/apps/vectorclock/app.js +++ b/apps/vectorclock/app.js @@ -1,5 +1,10 @@ const is12Hour = (require("Storage").readJSON("setting.json",1)||{})["12hour"]; const locale = require("locale"); +var settings = require('Storage').readJSON("vectorclock.json", true) || {}; +var dowcol = settings.dowcol || 0xFFE0; +var timecol = settings.timecol || 0xFFFF; +var datecol = settings.datecol || 0xFFFF; + function padNum(n, l) { return ("0".repeat(l)+n).substr(-l); @@ -26,8 +31,8 @@ function executeCommands() { commands = []; } -function drawVectorText(text, size, x, y, alignX, alignY) { - g.setFont("Vector", size).setFontAlign(alignX, alignY).drawString(text, x, y); +function drawVectorText(text, size, x, y, alignX, alignY, color) { + g.setFont("Vector", size).setColor(color).setFontAlign(alignX, alignY).drawString(text, x, y); var m = g.stringMetrics(text); return { x1: x - m.width * (alignX / 2 + 0.5), @@ -64,15 +69,15 @@ function draw() { let x = 2; let y = 24 + spacer; - pushCommand(drawVectorText, timeText, timeFontSize, x, y, -1, -1); - pushCommand(drawVectorText, meridian, timeFontSize*9/20, x + width, y, 1, -1); - if (showSeconds) pushCommand(drawVectorText, secondsText, timeFontSize*9/20, x + width, y + timeHeight, 1, 1); + pushCommand(drawVectorText, timeText, timeFontSize, x, y, -1, -1, timecol); + pushCommand(drawVectorText, meridian, timeFontSize*9/20, x + width, y, 1, -1, timecol); + if (showSeconds) pushCommand(drawVectorText, secondsText, timeFontSize*9/20, x + width, y + timeHeight, 1, 1, timecol); y += timeHeight + spacer; - pushCommand(drawVectorText, dowText, dowFontSize, x + width/2, y, 0, -1); + pushCommand(drawVectorText, dowText, dowFontSize, x + width/2, y, 0, -1, dowcol); y += dowHeight + spacer; - pushCommand(drawVectorText, dateText, dateFontSize, x + width/2, y, 0, -1); + pushCommand(drawVectorText, dateText, dateFontSize, x + width/2, y, 0, -1, datecol); executeCommands(); } diff --git a/apps/vectorclock/settings.js b/apps/vectorclock/settings.js new file mode 100644 index 000000000..3331b4c16 --- /dev/null +++ b/apps/vectorclock/settings.js @@ -0,0 +1,45 @@ +(function(back) { + var FILE = "vectorclock.json"; + // Load settings + var settings = Object.assign({ + }, require('Storage').readJSON(FILE, true) || {}); + + function writeSettings() { + require('Storage').writeJSON(FILE, settings); + } + + var colnames = ["white", "yellow", "green", "cyan", "red", "orange"]; + var colvalues = [0xFFFF, 0xFFE0, 0x07E0, 0x07FF, 0xF800, 0xFD20]; + // Show the menu + E.showMenu({ + "" : { "title" : "VectorClock colours" }, + "< Back" : () => back(), + 'Time': { + value: Math.max(0 | colvalues.indexOf(settings.timecol),0), + min: 0, max: colvalues.length-1, + format: v => colnames[v], + onchange: v => { + settings.timecol = v; + writeSettings(); + } + }, + 'Weekday': { + value: Math.max(0 | colvalues.indexOf(settings.dowcol),0), + min: 0, max: colvalues.length-1, + format: v => colnames[v], + onchange: v => { + settings.dowcol = v; + writeSettings(); + } + }, + 'Date': { + value: Math.max(0 | colvalues.indexOf(settings.datecol),0), + min: 0, max: colvalues.length-1, + format: v => colnames[v], + onchange: v => { + settings.datecol = v; + writeSettings(); + } + }, + }); +}) From d84ceccf6d1d6d63a99873a5c9963f6e6843824f Mon Sep 17 00:00:00 2001 From: Francisco Pina Martins Date: Thu, 13 Jan 2022 15:48:40 +0000 Subject: [PATCH 02/84] Adds settings files for vector clock --- apps.json | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/apps.json b/apps.json index 167e1b87a..08ee80653 100644 --- a/apps.json +++ b/apps.json @@ -4200,7 +4200,7 @@ { "id": "vectorclock", "name": "Vector Clock", - "version": "0.03", + "version": "0.04", "description": "A digital clock that uses the built-in vector font.", "icon": "app.png", "type": "clock", @@ -4213,8 +4213,10 @@ ], "storage": [ {"name":"vectorclock.app.js","url":"app.js"}, - {"name":"vectorclock.img","url":"app-icon.js","evaluate":true} - ] + {"name":"vectorclock.img","url":"app-icon.js","evaluate":true}, + {"name":"vectorclock.settings.js","url":"settings.js"} + ], + "data": [{"name":"vectorclock.json"}] }, { "id": "fd6fdetect", From 2e3a94c8df5d2eff407a7f7055053c9c78d077c5 Mon Sep 17 00:00:00 2001 From: Francisco Pina Martins Date: Thu, 13 Jan 2022 15:49:39 +0000 Subject: [PATCH 03/84] Adds version information --- apps/vectorclock/ChangeLog | 1 + 1 file changed, 1 insertion(+) diff --git a/apps/vectorclock/ChangeLog b/apps/vectorclock/ChangeLog index 8addc7170..6ba096f88 100644 --- a/apps/vectorclock/ChangeLog +++ b/apps/vectorclock/ChangeLog @@ -1,3 +1,4 @@ 0.01: New watch face 0.02: Use Bangle.setUI for button/launcher handling 0.03: Bangle.js 2 support +0.04: Adds costumizable colours and the respective settings menu From fa151780f30a43df736dc6dc93f042b7fab52972 Mon Sep 17 00:00:00 2001 From: Francisco Pina Martins Date: Thu, 13 Jan 2022 16:54:40 +0000 Subject: [PATCH 04/84] Changes a default value from it's debug state --- apps/vectorclock/app.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/vectorclock/app.js b/apps/vectorclock/app.js index fe1f6e64c..894400f07 100644 --- a/apps/vectorclock/app.js +++ b/apps/vectorclock/app.js @@ -1,7 +1,7 @@ const is12Hour = (require("Storage").readJSON("setting.json",1)||{})["12hour"]; const locale = require("locale"); var settings = require('Storage').readJSON("vectorclock.json", true) || {}; -var dowcol = settings.dowcol || 0xFFE0; +var dowcol = settings.dowcol || 0xFFFF; var timecol = settings.timecol || 0xFFFF; var datecol = settings.datecol || 0xFFFF; From 298c709a6aa18fe8aaaededdd536bdeafa67fa8f Mon Sep 17 00:00:00 2001 From: Francisco Pina Martins Date: Thu, 13 Jan 2022 16:55:21 +0000 Subject: [PATCH 05/84] Fixes the settings reading values --- apps/vectorclock/settings.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/apps/vectorclock/settings.js b/apps/vectorclock/settings.js index 3331b4c16..ea6ece9e9 100644 --- a/apps/vectorclock/settings.js +++ b/apps/vectorclock/settings.js @@ -19,7 +19,7 @@ min: 0, max: colvalues.length-1, format: v => colnames[v], onchange: v => { - settings.timecol = v; + settings.timecol = colvalues[v]; writeSettings(); } }, @@ -28,7 +28,7 @@ min: 0, max: colvalues.length-1, format: v => colnames[v], onchange: v => { - settings.dowcol = v; + settings.dowcol = colvalues[v]; writeSettings(); } }, @@ -37,7 +37,7 @@ min: 0, max: colvalues.length-1, format: v => colnames[v], onchange: v => { - settings.datecol = v; + settings.datecol = colvalues[v]; writeSettings(); } }, From 3e6fb2755caa82b85b9f765806435043b8560c7b Mon Sep 17 00:00:00 2001 From: Marco Heiming Date: Fri, 14 Jan 2022 14:46:59 +0100 Subject: [PATCH 06/84] Allow setting empty circles --- apps/circlesclock/ChangeLog | 1 + apps/circlesclock/app.js | 5 ++++- apps/circlesclock/settings.js | 11 ++++++----- 3 files changed, 11 insertions(+), 6 deletions(-) diff --git a/apps/circlesclock/ChangeLog b/apps/circlesclock/ChangeLog index 5464a8103..d22ef7737 100644 --- a/apps/circlesclock/ChangeLog +++ b/apps/circlesclock/ChangeLog @@ -7,3 +7,4 @@ Make circles and text slightly bigger 0.05: Show correct percentage values in circles Show humidity as weather circle data +0.06: Allow settings empty circles diff --git a/apps/circlesclock/app.js b/apps/circlesclock/app.js index 88a04d4b9..581e167d1 100644 --- a/apps/circlesclock/app.js +++ b/apps/circlesclock/app.js @@ -127,6 +127,9 @@ function drawCircle(index) { case "weather": drawWeather(w); break; + case "empty": + // we do nothing here + return; } } @@ -221,7 +224,7 @@ function drawHeartRate(w) { g.setColor(colorGrey); g.fillCircle(w, h3, radiusOuter); - if (hrtValue != undefined && hrtValue > 0) { + if (hrtValue != undefined) { const minHR = settings.minHR || 40; const percent = (hrtValue - minHR) / (settings.maxHR - minHR); drawGauge(w, h3, percent, colorRed); diff --git a/apps/circlesclock/settings.js b/apps/circlesclock/settings.js index ac4215a8a..8dab5fccf 100644 --- a/apps/circlesclock/settings.js +++ b/apps/circlesclock/settings.js @@ -6,8 +6,9 @@ settings[key] = value; storage.write(SETTINGS_FILE, settings); } - var valuesCircleTypes = ["steps", "stepsDist", "hr", "battery", "weather"]; - var namesCircleTypes = ["steps", "distance", "heart", "battery", "weather"]; + + var valuesCircleTypes = ["steps", "stepsDist", "hr", "battery", "weather", "empty"]; + var namesCircleTypes = ["steps", "distance", "heart", "battery", "weather", "empty"]; E.showMenu({ '': { 'title': 'circlesclock' }, '< Back': back, @@ -78,19 +79,19 @@ }, 'left': { value: settings.circle1 ? valuesCircleTypes.indexOf(settings.circle1) : 0, - min: 0, max: 4, + min: 0, max: 5, format: v => namesCircleTypes[v], onchange: x => save('circle1', valuesCircleTypes[x]), }, 'middle': { value: settings.circle2 ? valuesCircleTypes.indexOf(settings.circle2) : 2, - min: 0, max: 4, + min: 0, max: 5, format: v => namesCircleTypes[v], onchange: x => save('circle2', valuesCircleTypes[x]), }, 'right': { value: settings.circle3 ? valuesCircleTypes.indexOf(settings.circle3) : 3, - min: 0, max: 4, + min: 0, max: 5, format: v => namesCircleTypes[v], onchange: x => save('circle3', valuesCircleTypes[x]), } From a5fd98756beb9781f4d5b8bbadfbc855d0aba4fd Mon Sep 17 00:00:00 2001 From: Marco Heiming Date: Fri, 14 Jan 2022 15:19:00 +0100 Subject: [PATCH 07/84] Quicker lookup of circle positions --- apps/circlesclock/app.js | 27 ++++++++++++++++++++++----- 1 file changed, 22 insertions(+), 5 deletions(-) diff --git a/apps/circlesclock/app.js b/apps/circlesclock/app.js index 581e167d1..9a217541f 100644 --- a/apps/circlesclock/app.js +++ b/apps/circlesclock/app.js @@ -133,16 +133,33 @@ function drawCircle(index) { } } +// serves as cache for quicker lookup of circle positions +let circlePositionsCache = []; +/* + * Looks in the following order if a circle with the given type is somewhere visible/configured + * 1. circlePositionsCache + * 2. settings + * 3. defaultCircleTypes + * + * In case 2 and 3 the circlePositionsCache will be updated + */ function getCirclePosition(type) { + if (circlePositionsCache[type] >= 0) { + return circlePosX[circlePositionsCache[type]]; + } for (let i = 1; i <= 3; i++) { const setting = settings['circle' + i]; - if (setting == type) return circlePosX[i - 1]; + if (setting == type) { + circlePositionsCache[type] = i - 1; + return circlePosX[i - 1]; + } } for (let i = 0; i < defaultCircleTypes.length; i++) { - if (type == defaultCircleTypes[i] && (!settings || settings['circle' + (i + 1)] == undefined)) { - return circlePosX[i]; - } - } + if (type == defaultCircleTypes[i] && (!settings || settings['circle' + (i + 1)] == undefined)) { + circlePositionsCache[type] = i; + return circlePosX[i]; + } + } return undefined; } From 107c299b184b2685059b0732402fe31134aaa0b8 Mon Sep 17 00:00:00 2001 From: Marco Heiming Date: Fri, 14 Jan 2022 15:43:17 +0100 Subject: [PATCH 08/84] Support to choose between humidity and wind speed for weather circle progress --- apps/circlesclock/ChangeLog | 1 + apps/circlesclock/README.md | 2 +- apps/circlesclock/app.js | 21 ++++++++++++++++++--- apps/circlesclock/settings.js | 13 +++++++++++-- 4 files changed, 31 insertions(+), 6 deletions(-) diff --git a/apps/circlesclock/ChangeLog b/apps/circlesclock/ChangeLog index d22ef7737..d34e59db3 100644 --- a/apps/circlesclock/ChangeLog +++ b/apps/circlesclock/ChangeLog @@ -8,3 +8,4 @@ 0.05: Show correct percentage values in circles Show humidity as weather circle data 0.06: Allow settings empty circles + Support to choose between humidity and wind speed for weather circle progress diff --git a/apps/circlesclock/README.md b/apps/circlesclock/README.md index c3704e3d7..b5a15bab0 100644 --- a/apps/circlesclock/README.md +++ b/apps/circlesclock/README.md @@ -10,7 +10,7 @@ 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 + * Humidity or wind speed as circle progress * Temperature inside circle * Condition as icon below circle diff --git a/apps/circlesclock/app.js b/apps/circlesclock/app.js index 9a217541f..11e8ccfd6 100644 --- a/apps/circlesclock/app.js +++ b/apps/circlesclock/app.js @@ -29,6 +29,7 @@ function loadSettings() { 'stepLength': 0.8, 'batteryWarn': 30, 'showWidgets': false, + 'weatherCircleData': 'humidity', 'circle1': 'hr', 'circle2': 'steps', 'circle3': 'battery' @@ -305,7 +306,6 @@ 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: @@ -315,8 +315,23 @@ function drawWeather(w) { g.setColor(colorGrey); g.fillCircle(w, h3, radiusOuter); - if (humidity >= 0) { - drawGauge(w, h3, humidity / 100, colorYellow); + const data = settings.weatherCircleData || "humidity"; + switch (data) { + case "humidity": + const humidity = weather ? weather.hum : undefined; + if (humidity >= 0) { + drawGauge(w, h3, humidity / 100, colorYellow); + } + break; + case "wind": + const wind = weather ? weather.wind : undefined; + if (wind >= 0) { + // wind goes from 0 to 12 (see https://en.wikipedia.org/wiki/Beaufort_scale) + drawGauge(w, h3, wind / 12, colorYellow); + } + break; + case "empty": + break; } g.setColor(colorBg); diff --git a/apps/circlesclock/settings.js b/apps/circlesclock/settings.js index 8dab5fccf..c03f02847 100644 --- a/apps/circlesclock/settings.js +++ b/apps/circlesclock/settings.js @@ -7,8 +7,11 @@ storage.write(SETTINGS_FILE, settings); } - var valuesCircleTypes = ["steps", "stepsDist", "hr", "battery", "weather", "empty"]; - var namesCircleTypes = ["steps", "distance", "heart", "battery", "weather", "empty"]; + const valuesCircleTypes = ["steps", "stepsDist", "hr", "battery", "weather", "empty"]; + const namesCircleTypes = ["steps", "distance", "heart", "battery", "weather", "empty"]; + + const weatherData = ["humidity", "wind", "empty"]; + E.showMenu({ '': { 'title': 'circlesclock' }, '< Back': back, @@ -77,6 +80,12 @@ format: () => (settings.showWidgets ? 'Yes' : 'No'), onchange: x => save('showWidgets', x), }, + 'weather circle': { + value: settings.weatherCircleData ? weatherData.indexOf(settings.weatherCircleData) : 0, + min: 0, max: 2, + format: v => weatherData[v], + onchange: x => save('weatherCircleData', weatherData[x]), + }, 'left': { value: settings.circle1 ? valuesCircleTypes.indexOf(settings.circle1) : 0, min: 0, max: 5, From a96aba5f728a896ef8226af862fd781dbe017d6d Mon Sep 17 00:00:00 2001 From: Marco Heiming Date: Fri, 14 Jan 2022 15:44:56 +0100 Subject: [PATCH 09/84] Increase version --- apps.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps.json b/apps.json index 14e12c164..bef9f9bb1 100644 --- a/apps.json +++ b/apps.json @@ -5151,7 +5151,7 @@ { "id": "circlesclock", "name": "Circles clock", "shortName":"Circles clock", - "version":"0.05", + "version":"0.06", "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"}], From e633bf00a0e7c9e60746affffb6b8ac6c9c91d05 Mon Sep 17 00:00:00 2001 From: Marco Heiming Date: Fri, 14 Jan 2022 16:14:42 +0100 Subject: [PATCH 10/84] Code cleanup & moved common code to functions --- apps/circlesclock/app.js | 136 ++++++++++++++++----------------------- 1 file changed, 55 insertions(+), 81 deletions(-) diff --git a/apps/circlesclock/app.js b/apps/circlesclock/app.js index 11e8ccfd6..40cf16ad6 100644 --- a/apps/circlesclock/app.js +++ b/apps/circlesclock/app.js @@ -65,7 +65,6 @@ const radiusOuter = 25; const radiusInner = 20; const circleFont = "Vector:15"; const circleFontBig = "Vector:16"; -const circleFontSmall = "Vector:13"; function draw() { g.clear(true); @@ -168,16 +167,12 @@ function isCircleEnabled(type) { return getCirclePosition(type) != undefined; } + function drawSteps(w) { if (!w) w = getCirclePosition("steps"); const steps = getSteps(); - // Draw rectangle background: - g.setColor(colorBg); - g.fillRect(w - radiusOuter - 3, h3 - radiusOuter - 3, w + radiusOuter + 3, h3 + radiusOuter + 3); - - g.setColor(colorGrey); - g.fillCircle(w, h3, radiusOuter); + drawCircleBackground(w); const stepGoal = settings.stepGoal || 10000; if (stepGoal > 0) { @@ -186,15 +181,9 @@ function drawSteps(w) { drawGauge(w, h3, percent, colorBlue); } - g.setColor(colorBg); - g.fillCircle(w, h3, radiusInner); + drawInnerCircleAndTriangle(w); - g.fillPoly([w, h3, w - 15, h3 + radiusOuter + 5, w + 15, h3 + radiusOuter + 5]); - - g.setFont(circleFont); - g.setFontAlign(0, 0); - g.setColor(colorFg); - g.drawString(shortValue(steps), w + 2, h3); + writeCircleText(w, shortValue(steps)); g.drawImage(shoesIcon, w - 6, h3 + radiusOuter - 6); } @@ -205,12 +194,7 @@ function drawStepsDistance(w) { const stepDistance = settings.stepLength || 0.8; const stepsDistance = Math.round(steps * stepDistance); - // Draw rectangle background: - g.setColor(colorBg); - g.fillRect(w - radiusOuter - 3, h3 - radiusOuter - 3, w + radiusOuter + 3, h3 + radiusOuter + 3); - - g.setColor(colorGrey); - g.fillCircle(w, h3, radiusOuter); + drawCircleBackground(w); const stepDistanceGoal = settings.stepDistanceGoal || 8000; if (stepDistanceGoal > 0) { @@ -219,15 +203,9 @@ function drawStepsDistance(w) { drawGauge(w, h3, percent, colorGreen); } - g.setColor(colorBg); - g.fillCircle(w, h3, radiusInner); + drawInnerCircleAndTriangle(w); - g.fillPoly([w, h3, w - 15, h3 + radiusOuter + 5, w + 15, h3 + radiusOuter + 5]); - - g.setFont(circleFont); - g.setFontAlign(0, 0); - g.setColor(colorFg); - g.drawString(shortValue(stepsDistance), w + 2, h3); + writeCircleText(w, shortValue(stepsDistance)); g.drawImage(shoesIconGreen, w - 6, h3 + radiusOuter - 6); } @@ -235,12 +213,7 @@ function drawStepsDistance(w) { function drawHeartRate(w) { if (!w) w = getCirclePosition("hr"); - // Draw rectangle background: - g.setColor(colorBg); - g.fillRect(w - radiusOuter - 3, h3 - radiusOuter - 3, w + radiusOuter + 3, h3 + radiusOuter + 3); - - g.setColor(colorGrey); - g.fillCircle(w, h3, radiusOuter); + drawCircleBackground(w); if (hrtValue != undefined) { const minHR = settings.minHR || 40; @@ -248,15 +221,9 @@ function drawHeartRate(w) { drawGauge(w, h3, percent, colorRed); } - g.setColor(colorBg); - g.fillCircle(w, h3, radiusInner); + drawInnerCircleAndTriangle(w); - g.fillPoly([w, h3, w - 15, h3 + radiusOuter + 5, w + 15, h3 + radiusOuter + 5]); - - g.setFont(circleFontBig); - g.setFontAlign(0, 0); - g.setColor(colorFg); - g.drawString(hrtValue != undefined ? hrtValue : "-", w, h3); + writeCircleText(w, hrtValue != undefined ? hrtValue : "-"); g.drawImage(heartIcon, w - 6, h3 + radiusOuter - 6); } @@ -265,25 +232,14 @@ function drawBattery(w) { if (!w) w = getCirclePosition("battery"); const battery = E.getBattery(); - // Draw rectangle background: - g.setColor(colorBg); - g.fillRect(w - radiusOuter - 3, h3 - radiusOuter - 3, w + radiusOuter + 3, h3 + radiusOuter + 3); - - g.setColor(colorGrey); - g.fillCircle(w, h3, radiusOuter); + drawCircleBackground(w); if (battery > 0) { const percent = battery / 100; drawGauge(w, h3, percent, colorYellow); } - g.setColor(colorBg); - g.fillCircle(w, h3, radiusInner); - - g.fillPoly([w, h3, w - 15, h3 + radiusOuter + 5, w + 15, h3 + radiusOuter + 5]); - - g.setFont(circleFont); - g.setFontAlign(0, 0); + drawInnerCircleAndTriangle(w); let icon = powerIcon; let color = colorFg; @@ -296,8 +252,7 @@ function drawBattery(w) { icon = powerIconRed; } } - g.setColor(color); - g.drawString(battery + '%', w, h3); + writeCircleText(w, battery + '%'); g.drawImage(icon, w - 6, h3 + radiusOuter - 6); } @@ -308,12 +263,7 @@ function drawWeather(w) { const tempString = weather ? locale.temp(weather.temp - 273.15) : undefined; const code = weather ? weather.code : -1; - // Draw rectangle background: - g.setColor(colorBg); - g.fillRect(w - radiusOuter - 3, h3 - radiusOuter - 3, w + radiusOuter + 3, h3 + radiusOuter + 3); - - g.setColor(colorGrey); - g.fillCircle(w, h3, radiusOuter); + drawCircleBackground(w); const data = settings.weatherCircleData || "humidity"; switch (data) { @@ -334,16 +284,9 @@ function drawWeather(w) { break; } - g.setColor(colorBg); - g.fillCircle(w, h3, radiusInner); + drawInnerCircleAndTriangle(w); - g.fillPoly([w, h3, w - 25, h3 + radiusOuter + 5, w + 25, h3 + radiusOuter + 5]); - - const content = tempString ? tempString : "?"; - g.setFont(content.length < 4 ? circleFont : circleFontSmall); - g.setFontAlign(0, 0); - g.setColor(colorFg); - g.drawString(content, w, h3); + writeCircleText(w, tempString ? tempString : "?"); if (code > 0) { const icon = getWeatherIconByCode(code); @@ -400,32 +343,63 @@ function getWeatherIconByCode(code) { return undefined; } +/* + * Draws the background and the grey circle + */ +function drawCircleBackground(w) { + // Draw rectangle background: + g.setColor(colorBg); + g.fillRect(w - radiusOuter - 3, h3 - radiusOuter - 3, w + radiusOuter + 3, h3 + radiusOuter + 3); + // Draw grey background circle: + g.setColor(colorGrey); + g.fillCircle(w, h3, radiusOuter); +} + +function drawInnerCircleAndTriangle(w) { + // Draw inner circle + g.setColor(colorBg); + g.fillCircle(w, h3, radiusInner); + // Draw triangle which covers the bottom of the circle + g.fillPoly([w, h3, w - 15, h3 + radiusOuter + 5, w + 15, h3 + radiusOuter + 5]); +} + function radians(a) { return a * Math.PI / 180; } +/* + * This draws the actual gauge consisting out of lots of little filled circles + */ function drawGauge(cx, cy, percent, color) { const offset = 15; const end = 345; - const r = radiusInner + 3; + const radius = radiusInner + 3; + const size = radiusOuter - radiusInner - 2; if (percent <= 0) return; if (percent > 1) percent = 1; - const startrot = -offset; - const endrot = startrot - ((end - offset) * percent); + const startRotation = -offset; + const endRotation = startRotation - ((end - offset) * percent); g.setColor(color); - const size = radiusOuter - radiusInner - 2; - // draw gauge - for (let i = startrot; i > endrot - size; i -= size) { - x = cx + r * Math.sin(radians(i)); - y = cy + r * Math.cos(radians(i)); + for (let i = startRotation; i > endRotation - size; i -= size) { + x = cx + radius * Math.sin(radians(i)); + y = cy + radius * Math.cos(radians(i)); g.fillCircle(x, y, size); } } +function writeCircleText(w, content) { + if (content == undefined) return; + g.setFont(content.length < 4 ? circleFontBig : circleFont); + + g.setFontAlign(0, 0); + g.setColor(colorFg); + g.drawString(content, w, h3); +} + function shortValue(v) { if (isNaN(v)) return '-'; if (v <= 999) return v; From cd9520272b29c5cedff9a0bf2347c9d045216cc0 Mon Sep 17 00:00:00 2001 From: Hilmar Strauch <56518493+HilmarSt@users.noreply.github.com> Date: Fri, 14 Jan 2022 16:31:05 +0100 Subject: [PATCH 11/84] Don't start drawing with white colour on white canvas --- apps/tinydraw/app.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/tinydraw/app.js b/apps/tinydraw/app.js index e4c612219..4c8cdc5a6 100644 --- a/apps/tinydraw/app.js +++ b/apps/tinydraw/app.js @@ -1,7 +1,7 @@ (function () { var pen = 'circle'; var discard = null; - var kule = [255, 255, 255]; + var kule = [0, 255, 255]; // cyan, magenta, yellow var oldLock = false; setInterval(() => { From 746b7c28711b728230f1e5e68fd83f25a739c68a Mon Sep 17 00:00:00 2001 From: Hilmar Strauch <56518493+HilmarSt@users.noreply.github.com> Date: Fri, 14 Jan 2022 16:42:25 +0100 Subject: [PATCH 12/84] Update ChangeLog --- apps/tinydraw/ChangeLog | 1 + 1 file changed, 1 insertion(+) diff --git a/apps/tinydraw/ChangeLog b/apps/tinydraw/ChangeLog index af7f83942..2ee16e6b5 100644 --- a/apps/tinydraw/ChangeLog +++ b/apps/tinydraw/ChangeLog @@ -1 +1,2 @@ 0.01: Initial release +0.02: Don't start drawing with white colour on white canvas From 1029d76614d7b70ea491c45b7f40ede4e96002e1 Mon Sep 17 00:00:00 2001 From: Hilmar Strauch <56518493+HilmarSt@users.noreply.github.com> Date: Fri, 14 Jan 2022 16:43:27 +0100 Subject: [PATCH 13/84] Update apps.json --- apps.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps.json b/apps.json index 14e12c164..6e9852253 100644 --- a/apps.json +++ b/apps.json @@ -4923,7 +4923,7 @@ { "id": "tinydraw", "name": "TinyDraw", "shortName":"TinyDraw", - "version":"0.01", + "version":"0.02", "type": "app", "description": "Draw stuff in your wrist", "icon": "app.png", From f4fd7e1d41af928373df5a0d11fc32974935c9ba Mon Sep 17 00:00:00 2001 From: Andreas Rozek Date: Fri, 14 Jan 2022 17:22:49 +0100 Subject: [PATCH 14/84] Update Customizer.html --- apps/ac_ac/Customizer.html | 34 +++++++++++++++++----------------- 1 file changed, 17 insertions(+), 17 deletions(-) diff --git a/apps/ac_ac/Customizer.html b/apps/ac_ac/Customizer.html index cc8e21d1f..f675db265 100644 --- a/apps/ac_ac/Customizer.html +++ b/apps/ac_ac/Customizer.html @@ -101,8 +101,8 @@