Merge pull request #3555 from stweedo/boxclk_clockbg

Update boxclk

apps/boxclk/ChangeLog

@@ -3,4 +3,5 @@
 0.03: Allows showing the month in short or long format by setting `"shortMonth"` to true or false
 0.04: Improves touchscreen drag handling for background apps such as Pattern Launcher
 0.05: Fixes step count not resetting after a new day starts
-0.06  Added clockbackground app functionality
+0.06: Added clockbackground app functionality
+0.07: Allow custom backgrounds per boxclk config and from the clockbg module

apps/boxclk/app.js

@@ -10,6 +10,7 @@
   let locale = require("locale");
   let widgets = require("widget_utils");
   let date = new Date();
+  let bgImage;
   let configNumber = (storage.readJSON("boxclk.json", 1) || {}).selectedConfig || 0;
   let fileName = 'boxclk' + (configNumber > 0 ? `-${configNumber}` : '') + '.json';
   // Add a condition to check if the file exists, if it does not, default to 'boxclk.json'
@@ -71,6 +72,14 @@
   * ---------------------------------------------------------------
   */
 
+  for (let key in boxesConfig) {
+    if (key === 'bg' && boxesConfig[key].img) {
+      bgImage = storage.read(boxesConfig[key].img);
+    } else if (key !== 'selectedConfig') {
+      boxes[key] = Object.assign({}, boxesConfig[key]);
+    }
+  }
+
   let boxKeys = Object.keys(boxes);
 
   boxKeys.forEach((key) => {
@@ -211,14 +220,22 @@
   */
 
   let draw = (function() {
-    let updatePerMinute = true; // variable to track the state of time display
+    let updatePerMinute = true;
 
     return function(boxes) {
       date = new Date();
       g.clear();
-      background.fillRect(Bangle.appRect);
+
+      // Always draw backgrounds full screen
+
+      if (bgImage) { // Check for bg in boxclk config
+        g.drawImage(bgImage, 0, 0);
+      } else { // Otherwise use clockbg module
+        background.fillRect(0, 0, g.getWidth(), g.getHeight());
+      }
+      
       if (boxes.time) {
-        boxes.time.string = modString(boxes.time, locale.time(date, isBool(boxes.time.short, true) ? 1 : 0));
+        boxes.time.string = modString(boxes.time, locale.time(date, isBool(boxes.time.short, true) ? 1 : 0).trim());
         updatePerMinute = isBool(boxes.time.short, true);
       }
       if (boxes.meridian) {

apps/boxclk/boxclk-2.json

@@ -11,15 +11,15 @@
     "xOffset": 3,
     "yOffset": 0,
     "boxPos": {
-      "x": "0.5",
-      "y": "0.33"
+      "x": "0.494",
+      "y": "0.739"
     }
   },
   "dow": {
     "font": "6x8",
     "fontSize": 3,
     "outline": 1,
-    "color": "#5ccd73",
+    "color": "bgH",
     "outlineColor": "fg",
     "border": "#f0f",
     "xPadding": -1,
@@ -27,8 +27,8 @@
     "xOffset": 2,
     "yOffset": 0,
     "boxPos": {
-      "x": "0.5",
-      "y": "0.57"
+      "x": "0.421",
+      "y": "0.201"
     },
     "short": false
   },
@@ -36,7 +36,7 @@
     "font": "6x8",
     "fontSize": 2,
     "outline": 1,
-    "color": "#5ccd73",
+    "color": "bgH",
     "outlineColor": "fg",
     "border": "#f0f",
     "xPadding": -0.5,
@@ -44,8 +44,8 @@
     "xOffset": 1,
     "yOffset": 0,
     "boxPos": {
-      "x": "0.5",
-      "y": "0.75"
+      "x": "0.454",
+      "y": "0.074"
     },
     "shortMonth": false,
     "disableSuffix": true
@@ -62,8 +62,8 @@
     "xOffset": 2,
     "yOffset": 1,
     "boxPos": {
-      "x": "0.5",
-      "y": "0.92"
+      "x": "0.494",
+      "y": "0.926"
     },
     "prefix": "Steps: "
   },
@@ -79,8 +79,8 @@
     "xOffset": 2,
     "yOffset": 2,
     "boxPos": {
-      "x": "0.85",
-      "y": "0.08"
+      "x": "0.805",
+      "y": "0.427"
     },
     "suffix": "%"
   }

apps/boxclk/metadata.json

@@ -1,7 +1,7 @@
 {
   "id": "boxclk",
   "name": "Box Clock",
-  "version": "0.05",
+  "version": "0.07",
   "description": "A customizable clock with configurable text boxes that can be positioned to show your favorite background",
   "icon": "app.png",
   "dependencies" : { "clockbg":"module" },