Merge pull request #1589 from smekras/master

smclock: update to v0.06

apps/smclock/ChangeLog

@@ -1,4 +1,6 @@
 0.01: Initial version
 0.02: Add battery level
-0.03: Fix battery display when full
+0.03: Fix battery display when full (incorporating code by Ronin0000)
 0.04: Add support for settings
+0.05: Add ability to change background (3bit or 4bit)
+0.06: Replace battery text with image

apps/smclock/README.md

@@ -4,13 +4,16 @@ Just a simple watch face for the Banglejs2.
 
 It shows battery level in the upper left corner, date information in the upper right, and time information in the bottom.
 
-![](screenshot.png)
+![](screenshot0.png)
+![](screenshot1.png)
 
 ## Settings
 
-**Analog Clock:**
+**Analog Clock:** *Not yet implemented.*
 
-**Human Readable Date:** When the setting is on, the date is shown in a more human-friendly format (e.g. "Oct 2"), otherwise the date is shown in a standard format (e.g. "02/10"). Default is off.
+**Background:** When the setting is set as "3bit", a background with more accurate colors is chosen for the watchface. Otherwise, it uses a background following the 16-bit Mac Color Palette.
+
+**Date Format:** When the setting is set as "Long", the date is shown in a more human-friendly format (e.g. "Oct 2"), otherwise the date is shown in a standard format (e.g. "02/10"). Default is off.
 
 **Show Week Info:** When the setting is on, the weekday and week number are shown in the upper right box. When the setting is off, the full year is shown instead. Default is off.
 
@@ -20,4 +23,4 @@ It shows battery level in the upper left corner, date information in the upper r
 
 Monogram Watch Face can be selected as the default clock or it can be run manually from the launcher. Its settings can be accessed and changed via the relevant menu.
 
-Tapping on the "Alerts" area will replace the current time display with the time of the most immediate alert.
+*Tapping on the "Alerts" area will replace the current time display with the time of the most immediate alert.* - *Feature not implemented yet.*

apps/smclock/app.js

@@ -1,23 +1,23 @@
 const SETTINGSFILE = "smclock.json";
-const background = {
-  width: 176,
-  height: 176,
-  bpp: 3,
+const image3bit = {
+  width : 176, height : 176, bpp : 3,
   transparent : 1,
-  buffer: require("heatshrink").decompress(
-    atob(
-      "/4A/AH4ACUb8H9MkyVJAThB/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/INP/AH4A/AAX8Yz4Afn5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/INI="
-    )
-  ),
+  buffer : require("heatshrink").decompress(atob("/4A/AH4AC23btoCct/pkmSpICcIP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5Bp/4A/AH4AC/kAAH0/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5BpA="))
+};
+const image4bit = {
+  width : 176, height : 176, bpp : 4,
+  transparent : 1,
+  buffer : require("heatshrink").decompress(atob("/4A/AH4Au1QAp1/2swApK/5X/K/5X/K/5X/K/5X/K/5X/K/5X/K/5X/K/5X/K/5X/K/5X/K/5X/K/5X/K/5X/K/5X/K/5X/K/5X/K/5X/K/5X/K/5X/K/5X/K/5X/K/5X/K/5X/K/5X/K/5X/K/5X/K/5X/K/5X/K/5X/K/5X/K/5X/K/5X/K/5X/K/5X/K/5X/K/5X/K/5X/K/5X/K/5X/K/5X/K/5X/K/5X/K/5X/K/5X/K/5X/K/5X/K/5X/K/5X/K/5X/K/5X/K/5X/K/5X/K/5X/K/5X/K/5X/K/5X/K/5X/K/5X/K+//AH4A/AF8AAH4AUK/5X/K/4A/K/5X/K/4A/K/5X/AH5X/K/5X/AH5X/K/5X/AH5X/K/4A/K/5X/K/4A/K/5X/K/4A/K/5X/AH5X/K/5X/AH5X/K/5X/AH5X/K/4A/K/5X/K/4A/K/5X/K/4A/K/5X/AH5X/K/5X/AH5X/K/5X/AH5X/K/4A/K/5X/K/4A/K/5X/K/4A/K/5X/AH5X/K/5X/AH5X/K/5X/AH5X/K/4A/K/5X/K/4A/K/5X/K/4A/K/5X/AH5X/K/5X/AH5X/K/5X/AH5X/K/4A/K/5X/K/4A/K/5X/K/AA=="))
 };
 const monthName = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
 const weekday = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
 
 // dynamic variables
 var batLevel = -1;
-var batColor = [0, 0, 0];
+var batColor = "";
 
 // settings variables
+var backgroundImage;
 var dateFormat;
 var drawInterval;
 var pollInterval;
@@ -31,6 +31,7 @@ function loadSettings() {
   function def(value, def) {return value !== undefined ? value : def;}
   var settings = require("Storage").readJSON(SETTINGSFILE, true) || {};
 
+  backgroundImage = def(settings.backgroundImage, "3bit");
   dateFormat = def(settings.dateFormat, "Short");
   drawInterval = def(settings.drawInterval, 10);
   pollInterval = def(settings.pollInterval, 60);
@@ -67,23 +68,29 @@ function getBatteryColor(level) {
     level = batLevel;
   }
   if (level > 80) {
-    color = [0, 0, 1];
+    color = "#00f";
   } else if (level > 60) {
-    color = [0, 1, 1];
+    color = "#0ff";
   } else if (level > 40) {
-    color = [0, 1, 0];
+    color = "#0f0";
   } else if (level > 20) {
-    color = [1, 1, 0];
+    color = "#f40";
   } else {
-    color = [1, 0, 0];
+    color = "f00";
   }
   return color;
 }
 
 function draw() {
+  var background;
+  if (backgroundImage == "3bit") {
+    background = image3bit;
+  } else {
+    background = image4bit;
+  }
   g.drawImage(background);
 
-  const color = getBatteryColor(batLevel);
+  batColor = getBatteryColor(batLevel);
   var bat = "";
   const d = new Date();
   const day = d.getDate();
@@ -95,32 +102,38 @@ function draw() {
   const m = d.getMinutes();
   const time = d02(h) + ":" + d02(m);
 
-  if (E.getBattery() < 100) {
-    bat = d02(E.getBattery()) + "%";
-  } else {
-    bat = E.getBattery() + "%";
-  }
-
   g.reset();
 
   // draw battery info
-  g.setColor(1, 1, 1);
+  var x = 12;
+  var y = 16;
+  if (Bangle.isCharging()) {
+    g.setColor("#ff0").drawImage(atob("DhgBHOBzgc4HOP////////////////////3/4HgB4AeAHgB4AeAHgB4AeAHg"),x,y);
+  } else {
+    g.clearRect(x,y,x+14,y+24);
+    g.setColor("#000").fillRect(x+2,y+2,x+12,y+22).clearRect(x+4,y+4,x+10,y+20).fillRect(x+5,y+1,x+9,y+2);
+    g.setColor(batColor).fillRect(x+4,y+20-(batLevel*16/100),x+10,y+20);
+  }
+  if (Bangle.isCharging()) {
+    g.setColor("#ff0");
+  } else {
+    g.setColor(batColor);
+  }
   if (useVectorFont == true) {
     g.setFont("Vector", 16);
-    g.drawString("Bat:", 12, 22, false);
   } else {
-    g.setFont("4x6", 2);
-    g.drawString("Bat:", 10, 22, false);
+    g.setFont("4x6", 3);
   }
-  g.setColor(color[0], color[1], color[2]);
   if (batLevel < 100) {
-    g.drawString(bat, 52, 22, false);
+    bat = d02(batLevel) + "%";
+    g.drawString(bat, 50, 22, false);
   } else {
-    g.drawString(bat, 46, 22, false);
+    bat = "100%";
+    g.drawString(bat, 40, 22, false);
   }
 
   // draw date info
-  g.setColor(0, 0, 0);
+  g.setColor("#000");
   if (useVectorFont == true) {
     g.setFont("Vector", 20);
   } else {
@@ -136,7 +149,7 @@ function draw() {
 
   // draw week info
   if (showWeekInfo == true) {
-    date2 = weekday[d.getDay()] + " " + d02(week)
+    date2 = weekday[d.getDay()] + " " + d02(week);
     if (useVectorFont == true) {
       g.setFont("Vector", 18);
     } else {
@@ -155,7 +168,7 @@ function draw() {
   }
 
   // draw time
-  g.setColor(1, 1, 1);
+  g.setColor("#fff");
   if (useVectorFont == true) {
     g.setFont("Vector", 60);
     g.drawString(time, 10, 108, false);

apps/smclock/metadata.json

@@ -3,13 +3,13 @@
   "name": "Monogram Watch Face",
   "shortName": "MonoClock",
   "icon": "app.png",
-  "screenshots": [{ "url": "screenshot.png" }],
+  "screenshots": [{ "url": "screenshot0.png" }, {"url": "screenshot1.png" }],
   "version": "0.04",
   "description": "A simple watchface based on my stylised monogram.",
   "type": "clock",
   "tags": "clock",
   "readme": "README.md",
-  "supports": ["BANGLEJS", "BANGLEJS2"],
+  "supports": ["BANGLEJS2"],
   "allow_emulator": true,
   "storage": [
     { "name": "smclock.app.js", "url": "app.js" },

apps/smclock/settings.js

@@ -52,6 +52,7 @@
         writeSettings();
       },
     },
+    "Background": stringInSettings("backgroundImage", ["3bit", "4bit"]),
     Date: stringInSettings("dateFormat", ["Long", "Short"]),
     "Draw Interval": {
       value: settings.drawInterval,