Rewrite Bowser clock to use ClockFace

apps/bowserWF/app.js

@@ -37,19 +37,84 @@ digitPositions = [ // relative to the box
   {x:74, y:6}, {x:93, y:6},
 ];
 
-var drawTimeout;
 const animation_duration = 1; // seconds
 const animation_steps = 20;
 const jump_height = 45; // top coordinate of the jump
 const seconds_per_minute = 60;
 
-function draw() {
+const ClockFace = require("ClockFace");
-  const now = new Date();
+const clock = new ClockFace({
+	precision: 60, // just once a minute
+
+	init: function() {
+		// Clear the screen once, at startup
+		g.setTheme({ bg: "#00f", fg: "#fff", dark: true }).clear();
+
+		this.drawing = true;
+
+		this.simpleDraw = function(now) {
+			var boxTL_x = 27;
+			var boxTL_y = 29;
+			var sprite_TL_x = 72;
+			var sprite_TL_y = 161 - sprite.height;
+			const seconds =
+				(now.getSeconds() % seconds_per_minute) + now.getMilliseconds() / 1000;
+			const hours =
+				this.is12Hour && now.getHours() > 12
+					? now.getHours() - 12
+					: now.getHours();
+
+			const minutes = now.getMinutes();
+
+			g.drawImage(boxes, boxTL_x, boxTL_y);
+			g.drawImage(
+				numbers[(hours / 10) >> 0],
+				boxTL_x + digitPositions[0].x,
+				boxTL_y + digitPositions[0].y
+			);
+			g.drawImage(
+				numbers[hours % 10 >> 0],
+				boxTL_x + digitPositions[1].x,
+				boxTL_y + digitPositions[1].y
+			);
+			g.drawImage(
+				numbers[(minutes / 10) >> 0],
+				boxTL_x + digitPositions[2].x,
+				boxTL_y + digitPositions[2].y
+			);
+			g.drawImage(
+				numbers[minutes % 10 >> 0],
+				boxTL_x + digitPositions[3].x,
+				boxTL_y + digitPositions[3].y
+			);
+		};
+	},
+
+	pause: function() {
+		this.drawing = false;
+	},
+
+	resume: function() {
+		this.drawing = true;
+	},
+
+	draw: function(now) {
+		if (!this.drawing) {
+			this.simpleDraw(now);
+			return;
+		}
 		g.drawImage(background, 0, 0);
-  var boxTL_x = 27; var boxTL_y = 29;
+		var boxTL_x = 27;
-  var sprite_TL_x = 72; var sprite_TL_y = 161 - sprite.height;
+		var boxTL_y = 29;
-  const seconds = now.getSeconds()%seconds_per_minute + now.getMilliseconds()/1000;
+		var sprite_TL_x = 72;
-  const hours = now.getHours();
+		var sprite_TL_y = 161 - sprite.height;
+		const seconds =
+			(now.getSeconds() % seconds_per_minute) + now.getMilliseconds() / 1000;
+		const hours =
+			this.is12Hour && now.getHours() > 12
+				? now.getHours() - 12
+				: now.getHours();
+
 		const minutes = now.getMinutes();
 
 		var time_advance = seconds / animation_duration;
@@ -57,46 +122,53 @@ function draw() {
 		if (time_advance < 0.5) {
 			sprite_TL_y += (jump_height - sprite_TL_y) * time_advance * 2;
 		} else if (time_advance < 1) {
-    sprite_TL_y = jump_height + (sprite_TL_y-jump_height) * (time_advance-0.5) * 2;
+			sprite_TL_y =
+				jump_height + (sprite_TL_y - jump_height) * (time_advance - 0.5) * 2;
 		}
 		const box_penetration = boxTL_y + boxes.height - sprite_TL_y;
 		if (box_penetration > 0) {
 			boxTL_y -= box_penetration;
 		}
 		g.drawImage(boxes, boxTL_x, boxTL_y);
-  g.drawImage(numbers[(hours / 10) >> 0], boxTL_x+digitPositions[0].x, boxTL_y+digitPositions[0].y);
+		g.drawImage(
-  g.drawImage(numbers[(hours % 10) >> 0], boxTL_x+digitPositions[1].x, boxTL_y+digitPositions[1].y);
+			numbers[(hours / 10) >> 0],
-  g.drawImage(numbers[(minutes / 10) >> 0], boxTL_x+digitPositions[2].x, boxTL_y+digitPositions[2].y);
+			boxTL_x + digitPositions[0].x,
-  g.drawImage(numbers[(minutes % 10) >> 0], boxTL_x+digitPositions[3].x, boxTL_y+digitPositions[3].y);
+			boxTL_y + digitPositions[0].y
+		);
+		g.drawImage(
+			numbers[hours % 10 >> 0],
+			boxTL_x + digitPositions[1].x,
+			boxTL_y + digitPositions[1].y
+		);
+		g.drawImage(
+			numbers[(minutes / 10) >> 0],
+			boxTL_x + digitPositions[2].x,
+			boxTL_y + digitPositions[2].y
+		);
+		g.drawImage(
+			numbers[minutes % 10 >> 0],
+			boxTL_x + digitPositions[3].x,
+			boxTL_y + digitPositions[3].y
+		);
 		g.drawImage(sprite, sprite_TL_x, sprite_TL_y);
-  Bangle.drawWidgets();
+		// Bangle.drawWidgets();
 
-  const timeout = time_advance <= 1?
+		if (this.drawing) {
-    animation_duration / animation_steps
+			const timeout =
-    : (seconds_per_minute - seconds);
+				time_advance <= 1 ? animation_duration / animation_steps : -999;
-  setTimeout( _=>{
+			if (timeout > 0) {
-    drawTimeout = undefined;
+				setTimeout((_) => {
-    draw();
+					this.draw(new Date());
 				}, timeout * 1000);
 			}
-
-// Clear the screen once, at startup
-g.setTheme({bg:"#00f",fg:"#fff",dark:true}).clear();
-
-Bangle.on('lcdPower',on=>{
-  if (on) {
-    draw(); // draw immediately, queue redraw
-  } else { // stop draw timer
-    if (drawTimeout) {
-      clearTimeout(drawTimeout);
 		}
-    drawTimeout = undefined;
+	},
+
+	update: function(date, changed) {
+		if (this.drawing && changed.m) {
+			this.draw(date);
 		}
+	},
 });
 
-// Show launcher when middle button pressed
+clock.start();
-Bangle.setUI("clock");
-// Load widgets
-Bangle.loadWidgets();
-
-draw();