Change color if step goals is reached. Change icon if charging.

apps/notanalog/README.md

@@ -8,6 +8,9 @@ black one the battery level (100% = 0°, 75% = 270°, 50% = 180°, ...).
 The selected theme is also respected. Note that this watch face is in fullscreen
 mode - widgets are still loaded in background...
 
+## Other features
+- If you have done more than 10k steps, the red hand and icon will turn green.
+- If the battery is charged, the icons will change.
 
 ## Screenshots
 ![](screenshot_1.png)

apps/notanalog/notanalog.app.js

@@ -14,13 +14,20 @@ var stepsImg =  {
     width : 32, height : 32, bpp : 1,
     transparent : 0,
     buffer : require("heatshrink").decompress(atob("gPAAYMD+ADBg4DD/ADG/gDBh4DCA4YDBg/AAYMP8ADBj4DIgf8n4DB/ADBgIDDwADBgE8AYQTCgH+AYV+n5RBAYkfAYM8g+AIIMwMoU+AYV/AY1+AY08AYU4gAA="))
-  }
+};
 
 var batImg = {
     width : 32, height : 32, bpp : 1,
     transparent : 0,
     buffer : require("heatshrink").decompress(atob("ADf/AAPwAYfABQMwAYfHnPAAYc/AY0zAZwXHFYgDDH45jbA="))
-  }
+};
+
+var chargeImg = {
+    width : 32, height : 32, bpp : 1,
+    transparent : 0,
+    buffer : require("heatshrink").decompress(atob("AAMMAYUeAYUzAYVjAYXGAQMPxwDBj8cAYM73ADBuPwEAPg8E+gHAuFzgOAnHjAYMd40BwOPxkBwfHjEBw1j2ADBsPgBYPAAYIYBsEDFoPgg+AgPAg/AgeAhgJBgEYuf+AYM//BhBnAYBh1wKQXAAYM5wADBBQQoBAYQOCgA="))
+};
+
 
 /*
  * Based on the great multi clock from https://github.com/jeffmer/BangleApps/
@@ -88,21 +95,29 @@ function drawLines() {
 
 
 function drawHands() {
+    g.setFontAlign(0,0,0);
+
     // Set hand functions
     var drawBatteryHand = g.drawRotRect.bind(g,6,12,R-38);
     var drawStepsHand = g.drawRotRect.bind(g,5,12,R-24);
 
-    // Draw hands
+    // Draw bat hand and icon
     var bat = E.getBattery();
     var maxBat = 100;
+    var img = Bangle.isCharging() ? chargeImg : batImg;
     g.setColor(g.theme.fg);
+    g.drawImage(img, cx/2 - img.width/2, cy + cy/2 - img.height/2);
     drawBatteryHand(parseInt(bat*360/maxBat));
 
+    // Draw step hand and icon
     var steps = getSteps();
     var maxSteps = 10000;
-    g.setColor(1.0,0.0,0.0);
+    var stepsColor = steps > 10000 ? "#00ff00" : "#ff0000";
+    g.setColor(stepsColor);
+    g.drawImage(stepsImg, cx + cx/2 - stepsImg.width/2, cy/2 - stepsImg.height/2);
     drawStepsHand(parseInt(steps*360/maxSteps));
 
+    // Draw circle
     g.setColor(g.theme.fg);
     g.fillCircle(cx, cy, 7);
     g.setColor(g.theme.bg);
@@ -147,15 +162,6 @@ function drawDate(){
     g.drawString(currentDate.getDate(), cx+cx/2, cy+cy/2);
 }
 
-function drawIcons(){
-    g.setFontAlign(0,0,0);
-    g.setColor(1,0,0);
-    g.drawImage(stepsImg, cx + cx/2 - stepsImg.width/2, cy/2 - stepsImg.height/2);
-
-    g.setColor(g.theme.fg);
-    g.drawImage(batImg, cx/2 - batImg.width/2, cy + cy/2 - batImg.height/2);
-}
-
 function draw(){
   // Clear watch face
   g.reset();
@@ -165,7 +171,6 @@ function draw(){
   g.setColor(1,1,1);
 
   drawLines();
-  drawIcons();
   drawHands();
   drawTime();
   drawDate();
@@ -197,6 +202,12 @@ function queueDraw() {
 }
 
 
+Bangle.on('charging',function(charging) {
+    draw();
+});
+
+
+
 /*
  * Lets start widgets, listen for btn etc.
  */