verticalface: Tweak sizing to allow widgets at top, and add widgets (fix #567)

apps.json

@@ -1940,7 +1940,7 @@
     "name": "Vertical watch face",
     "shortName":"Vertical Face",
     "icon": "app.png",
-    "version":"0.05",
+    "version":"0.06",
     "description": "A simple vertical watch face with the date.",
     "tags": "clock",
     "type":"clock",

apps/verticalface/ChangeLog

@@ -1,2 +1,3 @@
 0.04: Fixed day being displayed
 0.05: Stop hours being displayed wrong if moving from 2 digits to 1 (fix #516)
+0.06: Tweak sizing to allow widgets at top, and add widgets (fix #567)

apps/verticalface/app.js

@@ -12,16 +12,15 @@ function drawTimeDate() {
   var mins= ("0"+m).substr(-2);
   var date = `${daysOfWeek[weekDay]}|${day}|${("0"+(month+1)).substr(-2)}`;
 
-
   // Reset the state of the graphics library
   g.reset();
   // Set color
   g.setColor('#2ecc71');
   // draw the current time (4x size 7 segment)
-  g.setFont("8x12",9);
+  g.setFont("8x12",8);
   g.setFontAlign(-1,0); // align right bottom
-  g.drawString(hours, 25, 65, true /*clear background*/);
-  g.drawString(mins, 25, 155, true /*clear background*/);
+  g.drawString(hours, 25, 75, true /*clear background*/);
+  g.drawString(mins, 25, 165, true /*clear background*/);
 
   // draw the date (2x size 7 segment)
   g.setFont("6x8",2);
@@ -84,6 +83,10 @@ function drawBattery() {
 // Clear the screen once, at startup
 g.clear();
 
+// Load and draw widgets
+Bangle.loadWidgets();
+Bangle.drawWidgets();
+
 // draw immediately at first
 drawTimeDate();
 drawSteps();