Merge pull request #2418 from glemco/master

Setting circles colours per clkinfo in circlesclock and improved agenda

apps/agenda/ChangeLog

@@ -9,3 +9,4 @@
       Fix clkinfo icon
 0.09: Ensure Agenda supplies an image for clkinfo items
 0.10: Update clock_info to avoid a redraw
+0.11: Added dynamic, short and range fields to clkinfo

apps/agenda/agenda.clkinfo.js

@@ -1,7 +1,14 @@
 (function() {
+  function getPassedSec(date) {
+    var now = new Date();
+    var passed = (now-date)/1000;
+    if(passed<0) return 0;
+    return passed;
+  }
   var agendaItems = {
       name: "Agenda",
       img: atob("GBiBAAAAAAAAAADGMA///w///wf//wAAAA///w///w///w///x///h///h///j///D///X//+f//8wAABwAADw///w///wf//gAAAA=="),
+      dynamic: true,
       items: []
     };
   var locale = require("locale");
@@ -15,11 +22,15 @@
     var title = entry.title.slice(0,12);
     var date = new Date(entry.timestamp*1000);
     var dateStr = locale.date(date).replace(/\d\d\d\d/,"");
+    var shortStr = ((date-now) > 86400000 || entry.allDay) ? dateStr : locale.time(date,1);
     dateStr += entry.durationInSeconds < 86400 ? "/ " + locale.time(date,1) : "";
 
     agendaItems.items.push({
       name: "Agenda "+i,
-      get: () => ({ text: title + "\n" + dateStr, img: agendaItems.img }),
+      hasRange: true,
+      get: () => ({ text: title + "\n" + dateStr,
+        img: agendaItems.img, short: shortStr.trim(),
+        v: getPassedSec(date), min: 0, max: entry.durationInSeconds}),
       show: function() {},
       hide: function () {}
     });

apps/agenda/metadata.json

@@ -1,7 +1,7 @@
 {
   "id": "agenda",
   "name": "Agenda",
-  "version": "0.10",
+  "version": "0.11",
   "description": "Simple agenda",
   "icon": "agenda.png",
   "screenshots": [{"url":"screenshot_agenda_overview.png"}, {"url":"screenshot_agenda_event1.png"}, {"url":"screenshot_agenda_event2.png"}],

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

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 getCircleColor = function(item, clkmenu) {
-  let color = settings["circle" + index + "color"];
+  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();

apps/circlesclock/default.json

@@ -3,23 +3,21 @@
   "showWidgets": false,
   "weatherCircleData": "humidity",
   "circleCount": 3,
-  "circle1color": "green-red",
+  "Bangle/Battery_color":"red-green",
-  "circle2color": "#0000ff",
+  "Bangle/Steps_color":"#0000ff",
-  "circle3color": "red-green",
+  "Bangle/HRM_color":"green-red",
-  "circle4color": "#ffff00",
+  "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,
+  "showBigWeather": false
-
-  "minHR": 40,
-  "maxHR": 200,
-  "confidence": 0,
-  "stepGoal": 10000,
-  "stepDistanceGoal": 8000,
-  "stepLength": 0.8,
-  "hrmValidity": 60
-
 }

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

apps/circlesclock/settings.js

@@ -12,12 +12,10 @@
     storage.write(SETTINGS_FILE, settings);
   }
 
-  const valuesColors = ["",        "#ff0000", "#00ff00", "#0000ff", "#ffff00", "#ff00ff",
+  const valuesColors = ["", "#ff0000", "#00ff00", "#0000ff", "#ffff00", "#ff00ff",
-  "#00ffff", "#fff",  "#000", "green-red",   "red-green", "fg"];
+  "#00ffff", "#fff", "#000", "green-red", "red-green", "blue-red", "red-blue", "fg"];
-  const namesColors =  ["default", "red",     "green",   "blue",    "yellow",  "magenta",
+  const namesColors =  ["default", "red", "green", "blue", "yellow", "magenta",
-  "cyan",    "white", "black", "green->red", "red->green", "foreground"];
+  "cyan", "white", "black", "green->red", "red->green",  "blue->red", "red->blue", "foreground"];
-
-  const weatherData = ["empty", "humidity", "wind"];
 
   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) {
+  function showCircleMenus() {
-    const circleName = "circle" + circleId;
+      const menu = {
-    const colorKey = circleName + "color";
+        '': { 'title': /*LANG*/'Colorize icons'},
-    const colorizeIconKey = circleName + "colorizeIcon";
+        /*LANG*/'< Back': ()=>showMainMenu(),
-
+      };
-    const menu = {
+    for(var circleId=1; circleId<=4; ++circleId) {
-      '': { 'title': /*LANG*/'Circle ' + circleId },
+      const circleName = "circle" + circleId;
-      /*LANG*/'< Back': ()=>showMainMenu(),
+      const colorKey = circleName + "color";
-      /*LANG*/'color': {
+      const colorizeIconKey = circleName + "colorizeIcon";
-        value: valuesColors.indexOf(settings[colorKey]) || 0,
+      menu[/*LANG*/'circle ' + circleId] = {
-        min: 0, max: valuesColors.length - 1,
-        format: v => namesColors[v],
-        onchange: x => save(colorKey, valuesColors[x]),
-      },
-      /*LANG*/'colorize icon': {
         value: settings[colorizeIconKey] || false,
-        format: () => (settings[colorizeIconKey] ? 'Yes' : 'No'),
+          format: () => (settings[colorizeIconKey]? /*LANG*/'Yes': /*LANG*/'No'),
-        onchange: x => save(colorizeIconKey, x),
+          onchange: x => save(colorizeIconKey, x),
-      },
+      };
-    };
+    }
     E.showMenu(menu);
   }