From aaa0401bb832090ae9d831d22810fdd5058f03cc Mon Sep 17 00:00:00 2001
From: Ephraim Amiel Yusi <52617123+eaydev@users.noreply.github.com>
Date: Wed, 27 May 2020 17:05:14 +1000
Subject: [PATCH] Added new capabilities and template for "widgets"

---
 apps/verticalface/app.js | 56 ++++++++++++++++++++++++++--------------
 1 file changed, 36 insertions(+), 20 deletions(-)

diff --git a/apps/verticalface/app.js b/apps/verticalface/app.js
index 25328e1dc..f06f07f16 100644
--- a/apps/verticalface/app.js
+++ b/apps/verticalface/app.js
@@ -1,22 +1,5 @@
-// NOTE: 240 x 240
-// Load fonts
-require("Font8x12").add(Graphics);
-
-
-function drawTimeDate() {
-  // work out how to display the current time
-  var d = new Date();
-  var h = d.getHours(), m = d.getMinutes(), day = d.getDate(), month = d.getMonth(), weekDay = d.getDay();
-
-  var daysOfWeek = ["MON", "TUE","WED","THU","FRI","SAT","SUN"];
-
-  var hours = h;
-  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('#27ae60');
   // draw the current time (4x size 7 segment)
   g.setFont("8x12",9);
   g.setFontAlign(-1,0); // align right bottom
@@ -29,11 +12,44 @@ function drawTimeDate() {
   g.drawString(date, 20, 215, true /*clear background*/);
 }
 
+
+//We will create custom "Widgets" for our face.
+
+function drawSteps() {
+  //Reset to defaults.
+  g.reset();
+  // draw the date (2x size 7 segment)
+  g.setColor('#7f8c8d');
+  g.setFont("8x12",2);
+  g.setFontAlign(-1,0); // align right bottom
+  g.drawString("STEPS", 145, 40, true /*clear background*/);
+  g.setColor('#bdc3c7');
+  g.drawString("1234", 145, 70, true /*clear background*/);
+}
+
+function drawBPM() {
+  //Reset to defaults.
+  g.reset();
+  // draw the date (2x size 7 segment)
+  g.setColor('#7f8c8d');
+  g.setFont("8x12",2);
+  g.setFontAlign(-1,0); // align right bottom
+  g.drawString("BPM", 145, 120, true /*clear background*/);
+  g.setColor('#bdc3c7');
+  g.drawString("1234", 145, 150, true /*clear background*/);
+}
+
+
 // Clear the screen once, at startup
 g.clear();
 // draw immediately at first
 drawTimeDate();
-var secondInterval = setInterval(drawTimeDate, 5000);
+drawSteps();
+drawBPM();
+
+var secondInterval = setInterval(()=>{
+  drawTimeDate();
+}, 5000);
 
 // Stop updates when LCD is off, restart when on
 Bangle.on('lcdPower',on=>{