updated pebblepp with fix for bottom line and other improvements

apps/pebblepp/ChangeLog

@@ -8,3 +8,6 @@
 0.07: Fix automatic coloring of middle of clockinfo images if clockinfo image goes right to the top or left
 0.08: Use new clockinfo lib with function to render images wirh borders
 0.09: Add date on the bottom
+0.10: Fix size of bottom bar after 0.09
+      Make date toggleable with settings
+      Optional border around clockinfos (available from settings)

apps/pebblepp/app.js

@@ -20,7 +20,7 @@ Graphics.prototype.setFontLECO1976Regular14 = function() {
 
 {
 const SETTINGS_FILE = "pebblepp.json";
-let settings = require("Storage").readJSON(SETTINGS_FILE,1)|| {'theme':'System', 'showlock':false};
+let settings = Object.assign({'theme':'System', 'showdate':true, 'clkinfoborder': false}, require("Storage").readJSON(SETTINGS_FILE,1)||{});
 let background = require("clockbg");
 let theme;
 let drawTimeout;
@@ -28,8 +28,8 @@ let drawTimeout;
 const h = g.getHeight();
 const w = g.getWidth();
 //const ha = 2*h/5 - 4;
-const h2 = 3*h/5 - 10;
+const h2 = Math.round(3*h/5) - 10;
-const h3 = 7*h/8;
+const h3 = Math.round(7*h/8);
 
 let draw = function() {
   let locale = require("locale");
@@ -37,10 +37,12 @@ let draw = function() {
   let time = locale.time(date, 1);
 
   g.reset();
-  g.setBgColor(theme.bg).clearRect(0, h2, w, h3);
+  g.setBgColor(theme.bg).clearRect(0, h2, w, h3); // clear area where clock is
-  g.setColor(theme.fg).fillRect(w / 2 - 30, h3 + 5, w / 2 + 30, h); // refresh date background
+  if (settings.showdate) {
-  g.setFontLECO1976Regular22().setFontAlign(0, -1);
+    g.setColor(theme.fg).fillRect(w / 2 - 30, h3 + 5, w / 2 + 30, h); // refresh date background
-  g.setColor(theme.bg).drawString(date.getDate() + "." + (date.getMonth() + 1), w / 2, h3 + 5);
+    g.setFontLECO1976Regular22().setFontAlign(0, -1);
+    g.setColor(theme.bg).drawString(date.getDate() + "." + (date.getMonth() + 1), w / 2, h3 + 5);
+  }
   g.setFontLECO1976Regular42().setFontAlign(0, -1);
   g.setColor(theme.fg);
   g.drawString(time, w/2, h2 + 8);
@@ -89,7 +91,10 @@ let clockInfoDraw = (itm, info, options) => {
   if (info.img) { // draw the image
     // TODO: we could replace certain images with our own ones here...
     y = options.y+8;
-    require("clock_info").drawFilledImage(info.img,midx-24,y,{scale:2});
+    if (settings.clkinfoborder)
+      require("clock_info").drawBorderedImage(info.img,midx-24,y,{scale:2});
+    else
+      require("clock_info").drawFilledImage(info.img,midx-24,y,{scale:2});
   }
   g.setFontLECO1976Regular22().setFontAlign(0, 0);
   var txt = info.text.toString().toUpperCase();
@@ -100,6 +105,11 @@ let clockInfoDraw = (itm, info, options) => {
     txt = l.slice(0,2).join("\n") + (l.length>2)?"...":"";
   }
   y = options.y+options.h-12;
+  if (settings.clkinfoborder) {
+    g.setColor(theme.bg)
+    g.drawString(txt, midx-2, y).drawString(txt, midx+2, y).drawString(txt, midx, y-2).drawString(txt, midx, y+2);
+    g.setColor(theme.fg);
+  }
   g.drawString(txt, midx, y); // draw the text
 };
 
@@ -134,7 +144,7 @@ Bangle.loadWidgets();
 require("widget_utils").swipeOn(); // hide widgets, make them visible with a swipe
 background.fillRect(Bangle.appRect); // start off with completely clear background
 // background contrast bar
-g.setColor(theme.fg).fillRect(0, h2 - 6, w, h3 + 5);
+g.setColor(theme.fg).fillRect(0, h2 - 6, w, h3 + 6);
 
 draw();
 }

apps/pebblepp/metadata.json

@@ -2,10 +2,10 @@
   "id": "pebblepp",
   "name": "Pebble++ Clock",
   "shortName": "Pebble++",
-  "version": "0.09",
+  "version": "0.10",
-  "description": "A pebble style clock (based on the 'Pebble Clock' app) but with two configurable ClockInfo items at the top",
+  "description": "A Pebble style clock (based on the 'Pebble Clock' app) but with two configurable ClockInfo items at the top and custom backgrounds. Date/theme/borders be reconfigured using settings page.",
   "icon": "app.png",
-  "screenshots": [{"url":"screenshot.png"}],
+  "screenshots": [{"url":"screenshot.png"},{"url":"screenshot2.png"}],
   "type": "clock",
   "tags": "clock,clkinfo,clockbg",
   "supports": ["BANGLEJS2"],

apps/pebblepp/settings.js

@@ -2,19 +2,13 @@
   const SETTINGS_FILE = "pebblepp.json";
 
   // Initialize with default settings...
-  let s = {'theme':'System', 'showlock':false}
+  let settings = {'theme':'System', 'showdate':true, 'clkinfoborder':false}
-
   // ...and overwrite them with any saved values
   // This way saved values are preserved if a new version adds more settings
   const storage = require('Storage');
-  let settings = storage.readJSON(SETTINGS_FILE, 1) || s;
+  settings = Object.assign(settings, storage.readJSON(SETTINGS_FILE, 1)||{});
-  const saved = settings || {};
-  for (const key in saved) {
-    s[key] = saved[key]
-  }
 
   function save() {
-    settings = s;
     storage.write(SETTINGS_FILE, settings);
   }
 
@@ -24,13 +18,27 @@
     '': { 'title': 'Pebble++ Clock' },
     /*LANG*/'< Back': back,
     /*LANG*/'Theme': {
-      value: 0 | theme_options.indexOf(s.theme),
+      value: 0 | theme_options.indexOf(settings.theme),
       min: 0, max: theme_options.length - 1,
       format: v => theme_options[v],
       onchange: v => {
-        s.theme = theme_options[v];
+        settings.theme = theme_options[v];
+        save();
+      }
+    },
+    /*LANG*/'Show Date': {
+      value: !!settings.showdate,
+      onchange: v => {
+        settings.showdate = v;
+        save();
+      }
+    },
+    /*LANG*/'ClockInfo border': {
+      value: !!settings.clkinfoborder,
+      onchange: v => {
+        settings.clkinfoborder = v;
         save();
       }
     }
   });
-});
+})