Merge pull request #1939 from alessandrococco/nifty-clock-b-clockface

[Nifty-B Clock] ClockFace

apps/ffcniftyb/ChangeLog

@@ -3,3 +3,4 @@
 0.03: Call setUI before loading widgets
       Fix bug with black being unselectable
       Improve settings page
+0.04: Use ClockFace library

apps/ffcniftyb/app.js

@@ -1,20 +1,10 @@
-const is12Hour = Object.assign({ "12hour": false }, require("Storage").readJSON("setting.json", true))["12hour"];
-const color = Object.assign({ color: 63488 }, require("Storage").readJSON("ffcniftyb.json", true)).color; // Default to RED
+var scale;
+var screen;
+var center;
+var buf;
+var img;
 
-/* Clock *********************************************/
-const scale = g.getWidth() / 176;
-
-const screen = {
-  width: g.getWidth(),
-  height: g.getHeight() - 24,
-};
-
-const center = {
-  x: screen.width / 2,
-  y: screen.height / 2,
-};
-
-function d02(value) {
+function format(value) {
   return ("0" + value).substr(-2);
 }
 
@@ -22,91 +12,69 @@ function renderEllipse(g) {
   g.fillEllipse(center.x - 5 * scale, center.y - 70 * scale, center.x + 160 * scale, center.y + 90 * scale);
 }
 
-function renderText(g) {
-  const now = new Date();
+function renderText(g, date) {
+  const hour = date.getHours() - (this.is12Hour && date.getHours() > 12 ? 12 : 0);
+  const month = date.getMonth() + 1;
 
-  const hour = d02(now.getHours() - (is12Hour && now.getHours() > 12 ? 12 : 0));
-  const minutes = d02(now.getMinutes());
-  const day = d02(now.getDate());
-  const month = d02(now.getMonth() + 1);
-  const year = now.getFullYear();
-
-  const month2 = require("locale").month(now, 3);
-  const day2 = require("locale").dow(now, 3);
+  const monthName = require("date_utils").month(month, 1);
+  const dayName = require("date_utils").dow(date.getDay(), 1);
 
   g.setFontAlign(1, 0).setFont("Vector", 90 * scale);
-  g.drawString(hour, center.x + 32 * scale, center.y - 31 * scale);
-  g.drawString(minutes, center.x + 32 * scale, center.y + 46 * scale);
+  g.drawString(format(hour), center.x + 32 * scale, center.y - 31 * scale);
+  g.drawString(format(date.getMinutes()), center.x + 32 * scale, center.y + 46 * scale);
 
   g.setFontAlign(1, 0).setFont("Vector", 16 * scale);
-  g.drawString(year, center.x + 80 * scale, center.y - 42 * scale);
-  g.drawString(month, center.x + 80 * scale, center.y - 26 * scale);
-  g.drawString(day, center.x + 80 * scale, center.y - 10 * scale);
-  g.drawString(month2, center.x + 80 * scale, center.y + 44 * scale);
-  g.drawString(day2, center.x + 80 * scale, center.y + 60 * scale);
+  g.drawString(date.getFullYear(), center.x + 80 * scale, center.y - 42 * scale);
+  g.drawString(format(month), center.x + 80 * scale, center.y - 26 * scale);
+  g.drawString(format(date.getDate()), center.x + 80 * scale, center.y - 10 * scale);
+  g.drawString(monthName, center.x + 80 * scale, center.y + 44 * scale);
+  g.drawString(dayName, center.x + 80 * scale, center.y + 60 * scale);
 }
 
-const buf = Graphics.createArrayBuffer(screen.width, screen.height, 1, {
-  msb: true
+const ClockFace = require("ClockFace");
+const clock = new ClockFace({
+  init: function () {
+    const appRect = Bangle.appRect;
+
+    screen = {
+      width: appRect.w,
+      height: appRect.h
+    };
+
+    center = {
+      x: screen.width / 2,
+      y: screen.height / 2
+    };
+
+    buf = Graphics.createArrayBuffer(screen.width, screen.height, 1, { msb: true });
+
+    scale = g.getWidth() / screen.width;
+
+    img = {
+      width: screen.width,
+      height: screen.height,
+      transparent: 0,
+      bpp: 1,
+      buffer: buf.buffer
+    };
+
+    // default to RED (see settings.js)
+    // don't use || to default because 0 is a valid color
+    this.color = this.color === undefined ? 63488 : this.color;
+  },
+  draw: function (date) {
+    // render outside text with ellipse
+    buf.clear();
+    renderText(buf.setColor(1), date);
+    renderEllipse(buf.setColor(0));
+    g.setColor(this.color).drawImage(img, 0, 24);
+
+    // render ellipse with inside text
+    buf.clear();
+    renderEllipse(buf.setColor(1));
+    renderText(buf.setColor(0), date);
+    g.setColor(this.color).drawImage(img, 0, 24);
+  },
+  settingsFile: "ffcniftyb.json"
 });
-
-function draw() {
-
-  const img = {
-    width: screen.width,
-    height: screen.height,
-    transparent: 0,
-    bpp: 1,
-    buffer: buf.buffer
-  };
-
-  // cleat screen area
-  g.clearRect(0, 24, g.getWidth(), g.getHeight());
-
-  // render outside text with ellipse
-  buf.clear();
-  renderText(buf.setColor(1));
-  renderEllipse(buf.setColor(0));
-  g.setColor(color).drawImage(img, 0, 24);
-
-  // render ellipse with inside text
-  buf.clear();
-  renderEllipse(buf.setColor(1));
-  renderText(buf.setColor(0));
-  g.setColor(color).drawImage(img, 0, 24);
-}
-
-
-/* Minute Ticker *************************************/
-
-let ticker;
-
-function stopTick() {
-  if (ticker) {
-    clearTimeout(ticker);
-    ticker = undefined;
-  }
-}
-
-function startTick(run) {
-  stopTick();
-  run();
-  ticker = setTimeout(() => startTick(run), 60000 - (Date.now() % 60000));
-}
-
-/* Init **********************************************/
-
-g.clear();
-startTick(draw);
-
-Bangle.on("lcdPower", (on) => {
-  if (on) {
-    startTick(draw);
-  } else {
-    stopTick();
-  }
-});
-
-Bangle.setUI("clock");
-Bangle.loadWidgets();
-Bangle.drawWidgets();
+clock.start();

apps/ffcniftyb/metadata.json

@@ -1,7 +1,7 @@
 {
   "id": "ffcniftyb",
   "name": "Nifty-B Clock",
-  "version": "0.03",
+  "version": "0.04",
   "description": "A nifty clock (series B) with time, date and colour configuration",
   "icon": "app.png",
   "screenshots": [{"url":"screenshot.png"}],