Battery Widget with percentage: add settings (percentage/color/charger)

Depends on settings 0.08

apps.json

@@ -336,13 +336,16 @@
   },
   { "id": "widbatpc",
     "name": "Battery Level Widget (with percentage)",
+    "shortName": "Battery Widget",
     "icon": "widget.png",
-    "version":"0.06",
+    "version": "0.07",
     "description": "Show the current battery level and charging status in the top right of the clock, with charge percentage",
     "tags": "widget,battery",
     "type":"widget",
     "storage": [
-      {"name":"widbatpc.wid.js","url":"widget.js"}
+      {"name":"widbatpc.wid.js","url":"widget.js"},
+      {"name":"widbatpc.settings.js","url":"settings.js"},
+      {"name":"widbatpc.settings.json","content": "{}"}
     ]
   },
   { "id": "widbt",

apps/widbatpc/ChangeLog

@@ -3,3 +3,4 @@
 0.04: Ensure redrawing works with variable size widget system
 0.05: Change color depending on battery level, cloned from widbat
 0.06: Show battery percentage as text
+0.07: Add settings: percentage/color/charger icon

apps/widbatpc/settings.js

@@ -0,0 +1,58 @@
+// This file should contain exactly one function, which shows the app's settings
+/**
+ * @param {function} back Use back() to return to settings menu
+ */
+function settings(back) {
+  const SETTINGS_FILE = 'widbatpc.settings.json'
+  const COLORS = ['By Level', 'Green', 'Monochrome']
+
+  // initialize with default settings...
+  let s = {
+    'color': COLORS[0],
+    'percentage': true,
+    'charger': true,
+  }
+  // ...and overwrite them with any saved values
+  // This way saved values are preserved if a new version adds more settings
+  const storage = require('Storage')
+  const saved = storage.readJSON(SETTINGS_FILE, 1) || {}
+  for (const key in saved) {
+    s[key] = saved[key]
+  }
+
+  // creates a function to safe a specific setting, e.g.  save('color')(1)
+  function save(key) {
+    return function (value) {
+      s[key] = value
+      storage.write(SETTINGS_FILE, s)
+      WIDGETS["batpc"].reload()
+    }
+  }
+
+  const onOffFormat = b => (b ? 'on' : 'off')
+  const menu = {
+    '': { 'title': 'Battery Widget' },
+    '< Back': back,
+    'Percentage': {
+      value: s.percentage,
+      format: onOffFormat,
+      onchange: save('percentage'),
+    },
+    'Charging Icon': {
+      value: s.charger,
+      format: onOffFormat,
+      onchange: save('charger'),
+    },
+    'Color': {
+      format: () => s.color,
+      onchange: function () {
+        // cycles through options
+        const oldIndex = COLORS.indexOf(s.color)
+        const newIndex = (oldIndex + 1) % COLORS.length
+        s.color = COLORS[newIndex]
+        save('color')(s.color)
+      },
+    },
+  }
+  E.showMenu(menu)
+}

apps/widbatpc/widget.js

@@ -1,20 +1,62 @@
 (function(){
+const DEFAULTS = {
+  'color': 'By Level',
+  'percentage': true,
+  'charger': true,
+}
+const COLORS = {
+  'white': -1,
+  'charging': 0x07E0, // "Green"
+  'high':  0x05E0, // slightly darker green
+  'ok': 0xFD20, // "Orange"
+  'low':0xF800, // "Red"
+}
+const SETTINGS_FILE = 'widbatpc.settings.json'
+
+let settings
+function loadSettings() {
+  settings = require('Storage').readJSON(SETTINGS_FILE, 1) || {}
+}
+function setting(key) {
+  if (!settings) { loadSettings() }
+  return (key in settings) ? settings[key] : DEFAULTS[key]
+}
+
 const levelColor = (l) => {
-  if (Bangle.isCharging()) return 0x07E0; // "Green"
+  // "charging" is very bright -> percentage is hard to read, "high" is ok(ish)
-  if (l >= 50) return 0x05E0; // slightly darker green
+  const green = setting('percentage') ? COLORS.high : COLORS.charging
-  if (l >= 15) return 0xFD20; // "Orange"
+  switch (setting('color')) {
-  return 0xF800; // "Red"
+    case 'Monochrome': return COLORS.white; // no chance of reading the percentage here :-(
+    case 'Green': return green;
+    case 'By Level': // fall through
+    default:
+      if (setting('charger')) {
+        // charger icon -> always make percentage readable
+        if (Bangle.isCharging() || l >= 50) return green;
+      } else {
+        // no icon -> brightest green to indicate charging, even when showing percentage
+        if (Bangle.isCharging()) return COLORS.charging;
+        if (l >= 50) return COLORS.high;
+      }
+      if (l >= 15) return COLORS.ok;
+      return COLORS.low;
+  }
+}
+const chargerColor = () => {
+  return (setting('color') === 'Monochrome') ? COLORS.white : COLORS.charging
 }
 
 function setWidth() {
-  WIDGETS["bat"].width = 40 + (Bangle.isCharging()?16:0);
+  WIDGETS["batpc"].width = 40;
+  if (Bangle.isCharging() && setting('charger')) {
+    WIDGETS["batpc"].width += 16;
+  }
 }
 function draw() {
   var s = 39;
   var x = this.x, y = this.y;
-  const l = E.getBattery(), c = levelColor(l);
+  if (Bangle.isCharging() && setting('charger')) {
-  if (Bangle.isCharging()) {
+    g.setColor(chargerColor()).drawImage(atob(
-    g.setColor(c).drawImage(atob(
       "DhgBHOBzgc4HOP////////////////////3/4HgB4AeAHgB4AeAHgB4AeAHg"),x,y);
     x+=16;
   }
@@ -22,8 +64,13 @@ function draw() {
   g.fillRect(x,y+2,x+s-4,y+21);
   g.clearRect(x+2,y+4,x+s-6,y+19);
   g.fillRect(x+s-3,y+10,x+s,y+14);
+  const l = E.getBattery(),
+    c = levelColor(l);
   g.setColor(c).fillRect(x+4,y+6,x+4+l*(s-12)/100,y+17);
   g.setColor(-1);
+  if (!setting('percentage')) {
+    return;
+  }
   g.setFontAlign(-1,-1);
   if (l >= 100) {
     g.setFont('4x6', 2);
@@ -34,6 +81,16 @@ function draw() {
     g.drawString(l, x + 6, y + 4);
   }
 }
+// reload widget, e.g. when settings have changed
+function reload() {
+  loadSettings()
+  // need to redraw all widgets, because changing the "charger" setting
+  // can affect the width and mess with the whole widget layout
+  setWidth()
+  g.clear();
+  Bangle.drawWidgets();
+}
+
 Bangle.on('charging',function(charging) {
   if(charging) Bangle.buzz();
   setWidth();
@@ -43,7 +100,7 @@ Bangle.on('charging',function(charging) {
 var batteryInterval;
 Bangle.on('lcdPower', function(on) {
   if (on) {
-   WIDGETS["bat"].draw();
+   WIDGETS["batpc"].draw();
    // refresh once a minute if LCD on
    if (!batteryInterval)
      batteryInterval = setInterval(draw, 60000);
@@ -54,6 +111,6 @@ Bangle.on('lcdPower', function(on) {
    }
  }
 });
-WIDGETS["bat"]={area:"tr",width:40,draw:draw};
+WIDGETS["batpc"]={area:"tr",width:40,draw:draw,reload:reload};
 setWidth();
 })()