shift face down for widgets

localize date
maximize face

apps.json

@@ -160,7 +160,7 @@
   { "id": "aclock",
     "name": "Analog Clock",
     "icon": "clock-analog.png",
-    "version":"0.10",
+    "version": "0.11",
     "description": "An Analog Clock",
     "tags": "clock",
     "type":"clock",

apps/aclock/ChangeLog

@@ -5,3 +5,4 @@
 0.08: make dots bigger and date more readable
 0.09: center date, remove box around it, internal refactor to remove redundant code.
 0.10: remove debug, refactor seconds to show elapsed secs each time app is displayed
+0.11: shift face down for widget area, maximize face size, 0 pad single digit date, use locale for date

apps/aclock/clock-analog.js

@@ -1,3 +1,4 @@
+// eliminate ide undefined errors
 let g;
 let Bangle;
 
@@ -5,15 +6,18 @@ let Bangle;
 const locale = require('locale');
 const p = Math.PI / 2;
 const pRad = Math.PI / 180;
-const faceWidth = 100; // watch face radius
+const faceWidth = 100; // watch face radius (240/2 - 24px for widget area)
+const widgetHeight=24+1;
 let timer = null;
 let currentDate = new Date();
-const centerPx = g.getWidth() / 2;
+const centerX = g.getWidth() / 2;
+const centerY = (g.getWidth() / 2) + widgetHeight/2;
+
 
 const seconds = (angle) => {
   const a = angle * pRad;
-  const x = centerPx + Math.sin(a) * faceWidth;
+  const x = centerX + Math.sin(a) * faceWidth;
-  const y = centerPx - Math.cos(a) * faceWidth;
+  const y = centerY - Math.cos(a) * faceWidth;
 
   // if 15 degrees, make hour marker larger
   const radius = (angle % 15) ? 2 : 4;
@@ -25,14 +29,14 @@ const hand = (angle, r1, r2) => {
   const r3 = 3;
 
   g.fillPoly([
-    Math.round(centerPx + Math.sin(a) * r1),
+    Math.round(centerX + Math.sin(a) * r1),
-    Math.round(centerPx - Math.cos(a) * r1),
+    Math.round(centerY - Math.cos(a) * r1),
-    Math.round(centerPx + Math.sin(a + p) * r3),
+    Math.round(centerX + Math.sin(a + p) * r3),
-    Math.round(centerPx - Math.cos(a + p) * r3),
+    Math.round(centerY - Math.cos(a + p) * r3),
-    Math.round(centerPx + Math.sin(a) * r2),
+    Math.round(centerX + Math.sin(a) * r2),
-    Math.round(centerPx - Math.cos(a) * r2),
+    Math.round(centerY - Math.cos(a) * r2),
-    Math.round(centerPx + Math.sin(a - p) * r3),
+    Math.round(centerX + Math.sin(a - p) * r3),
-    Math.round(centerPx - Math.cos(a - p) * r3)
+    Math.round(centerY - Math.cos(a - p) * r3)
   ]);
 };
 
@@ -54,6 +58,7 @@ const drawAll = () => {
     seconds((360 * i) / 60);
   }
   onSecond();
+
 };
 
 const resetSeconds = () => {
@@ -88,8 +93,8 @@ const drawDate = () => {
   // console.log(`${dayString}|${dateString}`);
   // center date
   const l = (g.getWidth() - g.stringWidth(dateDisplay)) / 2;
-  const t = centerPx + 37;
+  const t = centerY + 37;
-  g.drawString(dateDisplay, l, t);
+  g.drawString(dateDisplay, l, t, true);
   // console.log(l, t);
 };
 const onMinute = () => {