diff --git a/apps/circlesclock/ChangeLog b/apps/circlesclock/ChangeLog index 8c7192c46..4a23c944f 100644 --- a/apps/circlesclock/ChangeLog +++ b/apps/circlesclock/ChangeLog @@ -12,3 +12,4 @@ Support to show time and progress until next sunrise or sunset Load daily steps from Bangle health if available 0.07: Allow configuration of minimal heart rate confidence +0.08: Allow configuration of up to 4 circles in a row diff --git a/apps/circlesclock/README.md b/apps/circlesclock/README.md index 628979555..242adcf4b 100644 --- a/apps/circlesclock/README.md +++ b/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)) diff --git a/apps/circlesclock/app.js b/apps/circlesclock/app.js index 54c1b2b44..5b7569d63 100644 --- a/apps/circlesclock/app.js +++ b/apps/circlesclock/app.js @@ -23,31 +23,27 @@ const weatherStormy = heatshrink.decompress(atob("iEQwYLIg/gAgUB///wAFBh/AgfwgED const sunSetDown = heatshrink.decompress(atob("iEQwIHEgOAAocT5EGtEEkF//wLDg1ggfACoo")); const sunSetUp = heatshrink.decompress(atob("iEQwIHEgOAAocT5EGtEEkF//wRFgfAg1gBIY")); -let settings; - -function loadSettings() { - settings = storage.readJSON("circlesclock.json", 1) || { - 'minHR': 40, - 'maxHR': 200, - 'confidence': 0, - 'stepGoal': 10000, - 'stepDistanceGoal': 8000, - 'stepLength': 0.8, - 'batteryWarn': 30, - 'showWidgets': false, - 'weatherCircleData': 'humidity', - 'circle1': 'hr', - 'circle2': 'steps', - 'circle3': 'battery' - }; - // Load step goal from pedometer widget as fallback - if (settings.stepGoal == undefined) { - const d = require('Storage').readJSON("wpedom.json", 1) || {}; - settings.stepGoal = d != undefined && d.settings != undefined ? d.settings.goal : 10000; - } +let settings = storage.readJSON("circlesclock.json", 1) || { + 'minHR': 40, + 'maxHR': 200, + 'confidence': 0, + 'stepGoal': 10000, + 'stepDistanceGoal': 8000, + 'stepLength': 0.8, + 'batteryWarn': 30, + 'showWidgets': false, + 'weatherCircleData': 'humidity', + 'circleCount': 3, + 'circle1': 'hr', + 'circle2': 'steps', + 'circle3': 'battery', + 'circle4': 'weather' +}; +// Load step goal from pedometer widget as fallback +if (settings.stepGoal == undefined) { + const d = require('Storage').readJSON("wpedom.json", 1) || {}; + settings.stepGoal = d != undefined && d.settings != undefined ? d.settings.goal : 10000; } -loadSettings(); - /* * Read location from myLocation app @@ -58,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); @@ -78,11 +75,33 @@ const hOffset = 30 - widgetOffset; const h1 = Math.round(1 * h / 5 - hOffset); const h2 = Math.round(3 * h / 5 - hOffset); const h3 = Math.round(8 * h / 8 - hOffset - 3); // circle y position -const circlePosX = [Math.round(w / 6), Math.round(3 * w / 6), Math.round(5 * w / 6)]; // cirle x positions -const radiusOuter = 25; -const radiusInner = 20; -const circleFont = "Vector:15"; -const circleFontBig = "Vector:16"; + +/* + * circle x positions + * depending on circleCount + * + * | 1 2 3 4 5 6 | + * | (1) (2) (3) | + * => circles start at 1,3,5 / 6 + * + * | 1 2 3 4 5 6 7 8 | + * | (1) (2) (3) (4) | + * => circles start at 1,3,5,7 / 8 + */ +const parts = circleCount * 2; +const circlePosX = [ + 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:12"; +const circleFontBig = circleCount == 3 ? "Vector:16" : "Vector:13"; +const defaultCircleTypes = ["steps", "hr", "battery", "weather"]; + function draw() { g.clear(true); @@ -122,10 +141,9 @@ function draw() { drawCircle(1); drawCircle(2); drawCircle(3); + if (circleCount >= 4) drawCircle(4); } -const defaultCircleTypes = ["steps", "hr", "battery"]; - function drawCircle(index) { let type = settings['circle' + index]; if (!type) type = defaultCircleTypes[index - 1]; @@ -147,6 +165,7 @@ function drawCircle(index) { drawWeather(w); break; case "sunprogress": + case "sunProgress": drawSunProgress(w); break; case "empty": @@ -169,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; @@ -319,6 +338,8 @@ function drawWeather(w) { if (code > 0) { const icon = getWeatherIconByCode(code); if (icon) g.drawImage(icon, w - 6, h3 + radiusOuter - 10); + } else { + g.drawString("?", w, h3 + radiusOuter); } } diff --git a/apps/circlesclock/metadata.json b/apps/circlesclock/metadata.json index 899d6e34d..bd2ce751b 100644 --- a/apps/circlesclock/metadata.json +++ b/apps/circlesclock/metadata.json @@ -1,10 +1,10 @@ { "id": "circlesclock", "name": "Circles clock", "shortName":"Circles clock", - "version":"0.07", - "description": "A clock with circles for different data at the bottom in a probably familiar style", + "version":"0.08", + "description": "A clock with three or four circles for different data at the bottom in a probably familiar style", "icon": "app.png", - "screenshots": [{"url":"screenshot-dark.png"}, {"url":"screenshot-light.png"}], + "screenshots": [{"url":"screenshot-dark.png"}, {"url":"screenshot-light.png"}, {"url":"screenshot-dark-4.png"}, {"url":"screenshot-light-4.png"}], "type": "clock", "tags": "clock", "supports" : ["BANGLEJS2"], diff --git a/apps/circlesclock/screenshot-dark-4.png b/apps/circlesclock/screenshot-dark-4.png new file mode 100644 index 000000000..4f1a1b457 Binary files /dev/null and b/apps/circlesclock/screenshot-dark-4.png differ diff --git a/apps/circlesclock/screenshot-dark.png b/apps/circlesclock/screenshot-dark.png index 00c0e3399..4bf8cae9f 100644 Binary files a/apps/circlesclock/screenshot-dark.png and b/apps/circlesclock/screenshot-dark.png differ diff --git a/apps/circlesclock/screenshot-light-4.png b/apps/circlesclock/screenshot-light-4.png new file mode 100644 index 000000000..74d9e2740 Binary files /dev/null and b/apps/circlesclock/screenshot-light-4.png differ diff --git a/apps/circlesclock/screenshot-light.png b/apps/circlesclock/screenshot-light.png index af47b30a4..1a746d5bf 100644 Binary files a/apps/circlesclock/screenshot-light.png and b/apps/circlesclock/screenshot-light.png differ diff --git a/apps/circlesclock/settings.js b/apps/circlesclock/settings.js index fd1ca52be..1c072fc90 100644 --- a/apps/circlesclock/settings.js +++ b/apps/circlesclock/settings.js @@ -96,23 +96,36 @@ format: v => weatherData[v], onchange: x => save('weatherCircleData', weatherData[x]), }, - 'left': { + 'circle count': { + value: "circleCount" in settings ? settings.circleCount : 3, + min: 3, + max : 4, + step: 1, + onchange: x => save('circleCount', x), + }, + 'circle1': { value: settings.circle1 ? valuesCircleTypes.indexOf(settings.circle1) : 0, min: 0, max: 6, format: v => namesCircleTypes[v], onchange: x => save('circle1', valuesCircleTypes[x]), }, - 'middle': { + 'circle2': { value: settings.circle2 ? valuesCircleTypes.indexOf(settings.circle2) : 2, min: 0, max: 6, format: v => namesCircleTypes[v], onchange: x => save('circle2', valuesCircleTypes[x]), }, - 'right': { + 'circle3': { value: settings.circle3 ? valuesCircleTypes.indexOf(settings.circle3) : 3, min: 0, max: 6, format: v => namesCircleTypes[v], onchange: x => save('circle3', valuesCircleTypes[x]), + }, + 'circle4': { + value: settings.circle4 ? valuesCircleTypes.indexOf(settings.circle4) : 4, + min: 0, max: 6, + format: v => namesCircleTypes[v], + onchange: x => save('circle4', valuesCircleTypes[x]), } }); });