Bram
/
BangleApps
forked from FOSS/BangleApps
1
0
Fork 0
Code Pull Requests Activity

circlesclock: setting circles colours per clkinfo

master
Gabriele Monaco 2022-12-18 15:53:59 +03:00
parent 1f1b8a20d5
commit 7ea4276694
5 changed files with 78 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
apps/circlesclock/ChangeLog
View File

@ -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

39
apps/circlesclock/app.js
View File

@ -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();

26
apps/circlesclock/default.json
View File

@ -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
}

2
apps/circlesclock/metadata.json
View File

@ -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"}],

95
apps/circlesclock/settings.js
View File

@ -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);
}