barclock: add font setting

apps/barclock/ChangeLog

@@ -10,3 +10,4 @@
 0.10: Use ClockFace library
 0.11: Use ClockFace.is12Hour
 0.12: Add settings to hide date,widgets
+0.13: Add font setting

apps/barclock/README.md

@@ -6,4 +6,5 @@ A simple digital clock showing seconds as a horizontal bar.
 | ![24-hour bar clock](screenshot.png) | ![12-hour bar clock with meridian](screenshot_pm.png) |
 
 ## Settings
-* `Show date`: display date at the bottom of screen
+* `Show date`: display date at the bottom of screen
+* `Font`: choose between bitmap or vector fonts

apps/barclock/clock-bar.js

@@ -58,7 +58,7 @@ const ClockFace = require("ClockFace"),
         type: "v", c: [
           {
             type: "h", c: [
-              {id: "time", label: "88:88", type: "txt", font: "6x8:5", col:g.theme.fg, bgCol: g.theme.bg}, // size updated below
+              {id: "time", label: "88:88", type: "txt", font: "6x8:5", col:g.theme.fg, bgCol: g.theme.bg}, // updated below
               {id: "ampm", label: "  ", type: "txt", font: "6x8:2", col:g.theme.fg, bgCol: g.theme.bg},
             ],
           },
@@ -69,7 +69,7 @@ const ClockFace = require("ClockFace"),
       }, {lazy: true});
       // adjustments based on screen size and whether we display am/pm
       let thickness; // bar thickness, same as time font "pixel block" size
-      if (this.is12Hour) {
+      if (this.is12Hour && locale.hasMeridian) {
         // Maximum font size = (<screen width> - <ampm: 2chars * (2*6)px>) / (5chars * 6px)
         thickness = Math.floor((Bangle.appRect.w-24)/(5*6));
       } else {
@@ -77,7 +77,16 @@ const ClockFace = require("ClockFace"),
         thickness = Math.floor(Bangle.appRect.w/(5*6));
       }
       this.layout.bar.height = thickness+1;
-      this.layout.time.font = "6x8:"+thickness;
+      if (this.font===1) { // vector
+        if (this.is12Hour && locale.hasMeridian) {
+          this.layout.time.font = "Vector:60";
+          this.layout.ampm.font = "Vector:40";
+        } else {
+          this.layout.time.font = "Vector:80";
+        }
+      } else {
+        this.layout.time.font = "6x8:"+thickness;
+      }
       this.layout.update();
     },
     update: function(date, c) {

apps/barclock/metadata.json

@@ -1,7 +1,7 @@
 {
   "id": "barclock",
   "name": "Bar Clock",
-  "version": "0.12",
+  "version": "0.13",
   "description": "A simple digital clock showing seconds as a bar",
   "icon": "clock-bar.png",
   "screenshots": [{"url":"screenshot.png"},{"url":"screenshot_pm.png"}],

apps/barclock/settings.js

@@ -8,12 +8,19 @@
     }
   }
 
+  const fonts = [/*LANG*/"Bitmap",/*LANG*/"Vector"];
   const menu = {
     "": {"title": /*LANG*/"Bar Clock"},
     /*LANG*/"< Back": back,
     /*LANG*/"Show date": require("ClockFace_menu").showDate(s.showDate, saver('showDate')),
     /*LANG*/"Load widgets": require("ClockFace_menu").loadWidgets(s.loadWidgets, saver('loadWidgets')),
-  }
+    /*LANG*/"Font": {
+      value: s.font|0,
+      min:0,max:1,wrap:true,
+      format:v=>fonts[v],
+      onchange:saver('font'),
+    },
+  };
 
   E.showMenu(menu);
 });