Merge pull request #887 from alainsaas/master

A Battery Widget v1.0

apps.json

@@ -4263,6 +4263,21 @@
       {"name":"cliclockJS2Enhanced.img","url":"app.icon.js","evaluate":true}
     ]
   },
+  {
+    "id": "a_battery_widget",
+    "name": "A Battery Widget (with percentage)",
+    "shortName":"A Battery Widget",
+    "icon": "widget.png",
+    "version":"1.0",
+    "type": "widget",
+    "supports": ["BANGLEJS2"],
+    "readme": "README.md",
+    "description": "Simple and slim battery widget with charge status and percentage",
+    "tags": "widget,battery",
+    "storage": [
+      {"name":"a_battery_widget.wid.js","url":"widget.js"}
+    ]
+  },
   { 
     "id": "lcars",
     "name": "LCARS Clock",

apps/a_battery_widget/ChangeLog

@@ -0,0 +1 @@
+2021/11/18 | 1.0: Release for Bangle 2

apps/a_battery_widget/README.md

@@ -0,0 +1,14 @@
+# A Battery Widget (with percentage)
+
+Show the current battery level and charging status in the top right of the clock, with charge percentage
+
+* Works with Bangle 2
+* Simple design, no settings
+  *  Red when the batterly level is below 30%
+  *  Blue when charging
+*  40 pixels wide
+
+![](a_battery_widget-pic.jpg)
+
+## Creator
+[@alainsaas](https://github.com/alainsaas)

apps/a_battery_widget/widget.js

@@ -0,0 +1,45 @@
+(function(){
+  let COLORS = {
+    'white':    "#fff",
+    'black':    "#000",
+    'charging': "#08f",
+    'high':     "#000",
+    'low':      "#f00",
+  };
+
+  const levelColor = (l) => {
+    if (Bangle.isCharging()) return COLORS.charging;
+    if (l >= 30) return COLORS.high;
+    return COLORS.low;
+  };
+
+  function draw() {
+    var s = 29;
+    var x = this.x, y = this.y;
+
+    const l = E.getBattery();
+
+    let xl = x+4+l*(s-12)/100;
+
+    g.setColor(COLORS.white);
+    g.fillRect(x+2,y+5,x+s-6,y+18);
+
+    g.setColor(levelColor(l));
+    g.fillRect(x+1,y+3,x+s-5,y+4);
+    g.fillRect(x+1,y+19,x+s-5,y+20);
+    g.fillRect(x,y+4,x+1,y+19);
+    g.fillRect(x+s-5,y+4,x+s-4,y+19);
+    g.fillRect(x+s-3,y+8,x+s-2,y+16); // tip of the battery
+    g.fillRect(x+4,y+15,xl,y+16); // charging bar
+
+    g.setColor(COLORS.black);
+    g.setFontAlign(0,0);
+    g.setFont('6x8');
+    g.drawString(l, x + 14, y + 10);
+  }
+
+  Bangle.on('charging',function(charging) { draw(); });
+  setInterval(()=>WIDGETS["a_battery_widget"].draw(), 60000);
+
+  WIDGETS["a_battery_widget"]={area:"tr",width:30,draw:draw};
+})();