barclock: Use ClockFace library

jqln-0 · May 15, 2022 · 8f342e2 · 8f342e2
1 parent 12f8435
commit 8f342e2
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 60 deletions.
diff --git a/apps/barclock/ChangeLog b/apps/barclock/ChangeLog
@@ -7,3 +7,4 @@
 0.07: Update to use Bangle.setUI instead of setWatch
 0.08: Use theme colors, Layout library
 0.09: Fix time/date disappearing after fullscreen notification
+0.10: Use ClockFace library
diff --git a/apps/barclock/clock-bar.js b/apps/barclock/clock-bar.js
@@ -11,13 +11,9 @@ let locale = require("locale");
  date.setMonth(1, 3); // februari: months are zero-indexed
  const localized = locale.date(date, true);
  locale.dayFirst = /3.*2/.test(localized);
-
- locale.hasMeridian = false;
- if (typeof locale.meridian==="function") { // function does not exist if languages app is not installed
- locale.hasMeridian = (locale.meridian(date)!=="");
- }
+ locale.hasMeridian = (locale.meridian(date)!=="");
 }
-Bangle.loadWidgets();
+
 function renderBar(l) {
  if (!this.fraction) {
  // zero-size fillRect stills draws one line of pixels, we don't want that
@@ -27,32 +23,6 @@ function renderBar(l) {
  g.fillRect(l.x, l.y, l.x+width-1, l.y+l.height-1);
 }
 
-const Layout = require("Layout");
-const layout = new Layout({
- type: "v", c: [
- {
- type: "h", c: [
- {id: "time", label: "88:88", type: "txt", font: "6x8:5", bgCol: g.theme.bg}, // size updated below
- {id: "ampm", label: " ", type: "txt", font: "6x8:2", bgCol: g.theme.bg},
- ],
- },
- {id: "bar", type: "custom", fraction: 0, fillx: 1, height: 6, col: g.theme.fg2, render: renderBar},
- {height: 40},
- {id: "date", type: "txt", font: "10%", valign: 1},
- ],
-}, {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 (is12Hour) {
- // Maximum font size = (<screen width> - <ampm: 2chars * (2*6)px>) / (5chars * 6px)
- thickness = Math.floor((g.getWidth()-24)/(5*6));
-} else {
- layout.ampm.label = "";
- thickness = Math.floor(g.getWidth()/(5*6));
-}
-layout.bar.height = thickness+1;
-layout.time.font = "6x8:"+thickness;
-layout.update();
 
 function timeText(date) {
  if (!is12Hour) {
@@ -78,31 +48,48 @@ function dateText(date) {
  return `${dayName} ${dayMonth}`;
 }
 
-draw = function draw(force) {
- if (!Bangle.isLCDOn()) {return;} // no drawing, also no new update scheduled
- const date = new Date();
- layout.time.label = timeText(date);
- layout.ampm.label = ampmText(date);
- layout.date.label = dateText(date);
- const SECONDS_PER_MINUTE = 60;
- layout.bar.fraction = date.getSeconds()/SECONDS_PER_MINUTE;
- if (force) {
- Bangle.drawWidgets();
- layout.forgetLazyState();
- }
- layout.render();
- // schedule update at start of next second
- const millis = date.getMilliseconds();
- setTimeout(draw, 1000-millis);
-};
 
-// Show launcher when button pressed
-Bangle.setUI("clock");
-Bangle.on("lcdPower", function(on) {
- if (on) {
- draw(true);
- }
-});
-g.reset().clear();
-Bangle.drawWidgets();
-draw();
+const ClockFace = require("ClockFace"),
+ clock = new ClockFace({
+ precision:1,
+ init: function() {
+ const Layout = require("Layout");
+ this.layout = new Layout({
+ 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: "ampm", label: " ", type: "txt", font: "6x8:2", col:g.theme.fg, bgCol: g.theme.bg},
+ ],
+ },
+ {id: "bar", type: "custom", fraction: 0, fillx: 1, height: 6, col: g.theme.fg2, render: renderBar},
+ {height: 40},
+ {id: "date", type: "txt", font: "10%", valign: 1},
+ ],
+ }, {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 (is12Hour) {
+ // Maximum font size = (<screen width> - <ampm: 2chars * (2*6)px>) / (5chars * 6px)
+ thickness = Math.floor((Bangle.appRect.w-24)/(5*6));
+ } else {
+ this.layout.ampm.label = "";
+ thickness = Math.floor(Bangle.appRect.w/(5*6));
+ }
+ this.layout.bar.height = thickness+1;
+ this.layout.time.font = "6x8:"+thickness;
+ this.layout.update();
+ },
+ update: function(date, c) {
+ if (c.m) this.layout.time.label = timeText(date);
+ if (c.h) this.layout.ampm.label = ampmText(date);
+ if (c.d) this.layout.date.label = dateText(date);
+ const SECONDS_PER_MINUTE = 60;
+ if (c.s) this.layout.bar.fraction = date.getSeconds()/SECONDS_PER_MINUTE;
+ this.layout.render();
+ },
+ resume: function() {
+ this.layout.forgetLazyState();
+ },
+ });
+clock.start();
diff --git a/apps/barclock/metadata.json b/apps/barclock/metadata.json
@@ -1,7 +1,7 @@
 {
  "id": "barclock",
  "name": "Bar Clock",
- "version": "0.09",
+ "version": "0.10",
  "description": "A simple digital clock showing seconds as a bar",
  "icon": "clock-bar.png",
  "screenshots": [{"url":"screenshot.png"},{"url":"screenshot_pm.png"}],