From 7ea42766945e74972e034d4bb38dfd4f8c89a53e Mon Sep 17 00:00:00 2001 From: Gabriele Monaco Date: Sun, 18 Dec 2022 15:53:59 +0300 Subject: [PATCH] circlesclock: setting circles colours per clkinfo --- apps/circlesclock/ChangeLog | 1 + apps/circlesclock/app.js | 39 +++++++------- apps/circlesclock/default.json | 26 +++++---- apps/circlesclock/metadata.json | 2 +- apps/circlesclock/settings.js | 95 +++++++++++++++------------------ 5 files changed, 78 insertions(+), 85 deletions(-) diff --git a/apps/circlesclock/ChangeLog b/apps/circlesclock/ChangeLog index 83abde6df..830bc28e8 100644 --- a/apps/circlesclock/ChangeLog +++ b/apps/circlesclock/ChangeLog @@ -39,3 +39,4 @@ 0.21: Remade all icons without a palette for dark theme Now re-adds widgets if they were hidden when fast-loading 0.22: Fixed crash if item has no image and cutting long overflowing text +0.23: Setting circles colours per clkinfo and not position diff --git a/apps/circlesclock/app.js b/apps/circlesclock/app.js index 30d6a48f4..e1fc8d846 100644 --- a/apps/circlesclock/app.js +++ b/apps/circlesclock/app.js @@ -20,24 +20,12 @@ let settings = Object.assign( storage.readJSON("circlesclock.default.json", true) || {}, storage.readJSON(SETTINGS_FILE, true) || {} ); - //TODO deprecate this (and perhaps use in the clkinfo module) -// Load step goal from health app and pedometer widget as fallback -if (settings.stepGoal == undefined) { - let d = storage.readJSON("health.json", true) || {}; - settings.stepGoal = d != undefined && d.settings != undefined ? d.settings.stepGoal : undefined; - - if (settings.stepGoal == undefined) { - d = storage.readJSON("wpedom.json", true) || {}; - settings.stepGoal = d != undefined && d.settings != undefined ? d.settings.goal : 10000; - } -} let drawTimeout; const showWidgets = settings.showWidgets || false; const circleCount = settings.circleCount || 3; const showBigWeather = settings.showBigWeather || false; -let hrtValue; //TODO deprecate this let now = Math.round(new Date().getTime() / 1000); // layout values: @@ -128,8 +116,11 @@ let draw = function() { queueDraw(); } -let getCircleColor = function(index) { - let color = settings["circle" + index + "color"]; +let getCircleColor = function(item, clkmenu) { + let colorKey = clkmenu.name; + if(!clkmenu.dynamic) colorKey += "/"+item.name; + colorKey += "_color"; + let color = settings[colorKey]; if (color && color != "") return color; return g.theme.fg; } @@ -138,7 +129,7 @@ let getGradientColor = function(color, percent) { if (isNaN(percent)) percent = 0; if (percent > 1) percent = 1; let colorList = [ - '#00FF00', '#80FF00', '#FFFF00', '#FF8000', '#FF0000' + '#00ff00', '#80ff00', '#ffff00', '#ff8000', '#ff0000' ]; if (color == "fg") { color = colorFg; @@ -151,6 +142,17 @@ let getGradientColor = function(color, percent) { let colorIndex = colorList.length - Math.round(colorList.length * percent); return colorList[Math.min(colorIndex, colorList.length)] || "#ff0000"; } + colorList = [ + '#0000ff', '#8800ff', '#ff00ff', '#ff0088', '#ff0000' + ]; + if (color == "blue-red") { + let colorIndex = Math.round(colorList.length * percent); + return colorList[Math.min(colorIndex, colorList.length) - 1] || "#0000ff"; + } + if (color == "red-blue") { + let colorIndex = colorList.length - Math.round(colorList.length * percent); + return colorList[Math.min(colorIndex, colorList.length)] || "#ff0000"; + } return color; } @@ -172,10 +174,10 @@ let drawEmpty = function(img, w, color) { .drawImage(img, w - iconOffset, h3 + radiusOuter - iconOffset, {scale: 16/24}); } -let drawCircle = function(index, item, data) { +let drawCircle = function(index, item, data, clkmenu) { var w = circlePosX[index-1]; drawCircleBackground(w); - const color = getCircleColor(index); + const color = getCircleColor(item, clkmenu); //drawEmpty(info? info.img : null, w, color); var img = data.img; var percent = 1; //fill up if no range @@ -338,7 +340,8 @@ Bangle.setUI({ let clockInfoDraw = (itm, info, options) => { //print("Draw",itm.name,options); - drawCircle(options.circlePosition, itm, info); + let clkmenu = clockInfoItems[options.menuA]; + drawCircle(options.circlePosition, itm, info, clkmenu); if (options.focus) g.reset().drawRect(options.x, options.y, options.x+options.w-2, options.y+options.h-1) }; let clockInfoItems = require("clock_info").load(); diff --git a/apps/circlesclock/default.json b/apps/circlesclock/default.json index ad409b992..9d5b3e242 100644 --- a/apps/circlesclock/default.json +++ b/apps/circlesclock/default.json @@ -3,23 +3,21 @@ "showWidgets": false, "weatherCircleData": "humidity", "circleCount": 3, - "circle1color": "green-red", - "circle2color": "#0000ff", - "circle3color": "red-green", - "circle4color": "#ffff00", + "Bangle/Battery_color":"red-green", + "Bangle/Steps_color":"#0000ff", + "Bangle/HRM_color":"green-red", + "Bangle/Altitude_color":"#00ff00", + "Weather/conditionWithTemperature_color":"#ffff00", + "Weather/condition_color":"#00ffff", + "Weather/humidity_color":"#00ffff", + "Weather/wind_color":"fg", + "Weather/temperature_color":"blue-red", + "Alarms_color":"#00ff00", + "Agenda_color":"#ff0000", "circle1colorizeIcon": true, "circle2colorizeIcon": true, "circle3colorizeIcon": true, "circle4colorizeIcon": false, "updateInterval": 60, - "showBigWeather": false, - - "minHR": 40, - "maxHR": 200, - "confidence": 0, - "stepGoal": 10000, - "stepDistanceGoal": 8000, - "stepLength": 0.8, - "hrmValidity": 60 - + "showBigWeather": false } diff --git a/apps/circlesclock/metadata.json b/apps/circlesclock/metadata.json index 1b94c00b3..45b869521 100644 --- a/apps/circlesclock/metadata.json +++ b/apps/circlesclock/metadata.json @@ -1,7 +1,7 @@ { "id": "circlesclock", "name": "Circles clock", "shortName":"Circles clock", - "version":"0.22", + "version":"0.23", "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"}, {"url":"screenshot-dark-4.png"}, {"url":"screenshot-light-4.png"}], diff --git a/apps/circlesclock/settings.js b/apps/circlesclock/settings.js index 5c5ea4f27..63a2b0f93 100644 --- a/apps/circlesclock/settings.js +++ b/apps/circlesclock/settings.js @@ -12,12 +12,10 @@ storage.write(SETTINGS_FILE, settings); } - const valuesColors = ["", "#ff0000", "#00ff00", "#0000ff", "#ffff00", "#ff00ff", - "#00ffff", "#fff", "#000", "green-red", "red-green", "fg"]; - const namesColors = ["default", "red", "green", "blue", "yellow", "magenta", - "cyan", "white", "black", "green->red", "red->green", "foreground"]; - - const weatherData = ["empty", "humidity", "wind"]; + const valuesColors = ["", "#ff0000", "#00ff00", "#0000ff", "#ffff00", "#ff00ff", + "#00ffff", "#fff", "#000", "green-red", "red-green", "blue-red", "red-blue", "fg"]; + const namesColors = ["default", "red", "green", "blue", "yellow", "magenta", + "cyan", "white", "black", "green->red", "red->green", "blue->red", "red->blue", "foreground"]; function showMainMenu() { let menu ={ @@ -30,31 +28,11 @@ step: 1, onchange: x => save('circleCount', x), }, - /*LANG*/'circle 1': ()=>showCircleMenu(1), - /*LANG*/'circle 2': ()=>showCircleMenu(2), - /*LANG*/'circle 3': ()=>showCircleMenu(3), - /*LANG*/'circle 4': ()=>showCircleMenu(4), - /*LANG*/'battery warn': { - value: settings.batteryWarn, - min: 10, - max : 100, - step: 10, - format: x => { - return x + '%'; - }, - onchange: x => save('batteryWarn', x), - }, /*LANG*/'show widgets': { value: !!settings.showWidgets, format: () => (settings.showWidgets ? 'Yes' : 'No'), onchange: x => save('showWidgets', x), }, - /*LANG*/'weather data': { - value: weatherData.indexOf(settings.weatherCircleData), - min: 0, max: 2, - format: v => weatherData[v], - onchange: x => save('weatherCircleData', weatherData[x]), - }, /*LANG*/'update interval': { value: settings.updateInterval, min: 0, @@ -65,41 +43,54 @@ }, onchange: x => save('updateInterval', x), }, - //TODO deprecated local icons, may disappear in future - /*LANG*/'legacy weather icons': { - value: !!settings.legacyWeatherIcons, - format: () => (settings.legacyWeatherIcons ? 'Yes' : 'No'), - onchange: x => save('legacyWeatherIcons', x), - }, /*LANG*/'show big weather': { value: !!settings.showBigWeather, format: () => (settings.showBigWeather ? 'Yes' : 'No'), onchange: x => save('showBigWeather', x), - } + }, + /*LANG*/'colorize icons': ()=>showCircleMenus() }; + clock_info.load().forEach(e=>{ + if(e.dynamic) { + const colorKey = e.name + "_color"; + menu[e.name+/*LANG*/' color'] = { + value: valuesColors.indexOf(settings[colorKey]) || 0, + min: 0, max: valuesColors.length - 1, + format: v => namesColors[v], + onchange: x => save(colorKey, valuesColors[x]), + }; + } else { + let values = e.items.map(i=>e.name+"/"+i.name); + let names = e.name=="Bangle" ? e.items.map(i=>i.name) : values; + values.forEach((v,i)=>{ + const colorKey = v + "_color"; + menu[names[i]+/*LANG*/' color'] = { + value: valuesColors.indexOf(settings[colorKey]) || 0, + min: 0, max: valuesColors.length - 1, + format: v => namesColors[v], + onchange: x => save(colorKey, valuesColors[x]), + }; + }); + } + }) E.showMenu(menu); } - function showCircleMenu(circleId) { - const circleName = "circle" + circleId; - const colorKey = circleName + "color"; - const colorizeIconKey = circleName + "colorizeIcon"; - - const menu = { - '': { 'title': /*LANG*/'Circle ' + circleId }, - /*LANG*/'< Back': ()=>showMainMenu(), - /*LANG*/'color': { - value: valuesColors.indexOf(settings[colorKey]) || 0, - min: 0, max: valuesColors.length - 1, - format: v => namesColors[v], - onchange: x => save(colorKey, valuesColors[x]), - }, - /*LANG*/'colorize icon': { + function showCircleMenus() { + const menu = { + '': { 'title': /*LANG*/'Colorize icons'}, + /*LANG*/'< Back': ()=>showMainMenu(), + }; + for(var circleId=1; circleId<=4; ++circleId) { + const circleName = "circle" + circleId; + const colorKey = circleName + "color"; + const colorizeIconKey = circleName + "colorizeIcon"; + menu[/*LANG*/'circle ' + circleId] = { value: settings[colorizeIconKey] || false, - format: () => (settings[colorizeIconKey] ? 'Yes' : 'No'), - onchange: x => save(colorizeIconKey, x), - }, - }; + format: () => (settings[colorizeIconKey]? /*LANG*/'Yes': /*LANG*/'No'), + onchange: x => save(colorizeIconKey, x), + }; + } E.showMenu(menu); }