Fix date alignment and change font to closer match Rolex

apps/rolex/ChangeLog

@@ -1,3 +1,4 @@
 0.01: Initial Release
 0.02: Minor tweaks for light theme
-0.03: Made images 2 bit and fixed theme honoring
+0.03: Made images 2 bit and fixed theme honoring
+0.04: Fixed date font alignment and changed date font to match a real Rolex

apps/rolex/README.md

@@ -1,11 +1,13 @@
 # Rolex
 
-![](screenshot.png)
+![](screenshot.png) ![](screenshot1.png)
 
 Created with the aid of the Espruino documentation and looking through many of the wonderful exising watchfaces that have been made.
 This has not been tested on a watch yet as I haven't aquired one but has been tested in the emulator.
 The hands don't rotate dead on center but they're as close as I could get them to.
 
+Colour switches based on watch theme so if you want a white on black change your watch theme to dark, and for black on white change it to light.
+
 Special thanks to: 
 * rozek (for his updated widget draw code for utilization with background images)
 * Gordon Williams (Bangle.js, watchapps for reference code and documentation)

apps/rolex/app.js

@@ -28,6 +28,14 @@ var imgSec = {
   buffer : E.toArrayBuffer(atob("v/q//r/+v/qv+q/qq+qr6qvqq+qr6qvqq+qr6qvqq+qr6qvqq+qr6qvqq+qr6qvqq+qr6qvqq+qv+v/6/D/wD8PDw8PwD/w///6v+qvqq+qr6qvqq+qr6qvqq+qr6qvqq+qr6qvqq+qr6qvqq+qr6qvqq+qr6qvqq+qr6qvqq+qr6qvqq+qr6qvqq+qr6qvqq+qr6qvqr+r//v///X/1X/Vf9V/1X/1///+//q/qq+qr6qvqq+qr6qvqq+qr6qvqq+qr6qvqq+qr6qvqq+qr6qvqq+qr6qvqq+qr6qvqq+qr6qvqq6qrqg=="))
 };
 
+/* use font closer to Rolex */
+
+Graphics.prototype.setFontRolexFont = function(scale) {
+  // Actual height 12 (12 - 1)
+  this.setFontCustom(atob("AAAABAACAAAAAYAHgA4AOABgAAAAA/gD/gMBgQBAwGA/4A/gAAAAAAIBAQCB/8D/4AAQAAAAAAAAAwEDAYEBQIEgYxA/CA4MAAAAAAAAgIBAhCBCEDOYHvgCOAAAAAAABgANAAyAHEAf/A/+AAgABAAAAAAADBAcCBsECYIEYgIeAAAAAAAHwAfwB5wGggZBAjGBH4CDgAAACAAYAAgABAMCDwE+APgAYAAAAAAABxwH3wJwgRhA3iB54AhgAAAAAAPhA/iBDMCCQGHgH+AHwAAAAAAAQIAgQAAAAAA="), 46, atob("BAUJCQkJCQkJCQkJBQ=="), 17+(scale<<8)+(1<<16));
+  return this;
+};
+
 /* Set variables to get screen width, height and center points */
 
 let W = g.getWidth();
@@ -36,10 +44,6 @@ let cx = W/2;
 let cy = H/2;
 let Timeout;
 
-/* set font */
-
-require("Font4x5Numeric").add(Graphics);
-
 Bangle.loadWidgets();
 
 /* Custom version of Bangle.drawWidgets (does not clear the widget areas) Thanks to rozek */
@@ -106,9 +110,10 @@ function drawHands() {
   g.drawImage(imgHour,cx-22*hourSin,cy+22*hourCos,{rotate:hourAngle});
   g.drawImage(imgMin,cx-34*minSin,cy+34*minCos,{rotate:minAngle});
   g.drawImage(imgSec,cx-25*secSin,cy+25*secCos,{rotate:secAngle});
-  g.setFont("4x5Numeric:3");
+  g.setFontRolexFont();
   g.setColor(g.theme.bg);
-  g.drawString(d.getDate(),157,81);
+  g.setFontAlign(0,0,0);
+  g.drawString(d.getDate(),165,89);
 }
 
 function drawBackground() {

apps/rolex/app.js:Zone.Identifier

@@ -0,0 +1,3 @@
+[ZoneTransfer]
+ZoneId=3
+HostUrl=about:internet

apps/rolex/screenshot1.png:Zone.Identifier

@@ -0,0 +1,3 @@
+[ZoneTransfer]
+ZoneId=3
+HostUrl=about:internet