Merge pull request espruino#3515 from prefectAtEarth/master

feat(measuretime): visual improvements

apps/measuretime/ChangeLog

@@ -1 +1,2 @@
-0.1: Initial release
+0.1: Initial release
+0.2: Draw line for 3d effect, fix number alignment

apps/measuretime/README.md

@@ -1,7 +1,9 @@
 # Measure Time
 
 Measure time in a fancy way. Inspired by a Watchface I had on my first Pebble Watch.
+Icon from [Flaticon created by Smartline]("https://www.flaticon.com/free-icons/scale")
 
-Written by [prefectAtEarth](https://www.github.com/prefectAtEarth/)
+Watchface written by [prefectAtEarth](https://www.github.com/prefectAtEarth/)
 
-![](measuretime.png)
+![](screenshot_light.png)
+![](screenshot_dark.png)

apps/measuretime/measuretime.app.js

@@ -1,7 +1,5 @@
 {
   require("Font7x11Numeric7Seg").add(Graphics);
-  g.setFont("7x11Numeric7Seg");
-  g.setFontAlign(0, 0);
 
   const centerY = g.getHeight() / 2; //88
   const lineStart = 25;
@@ -27,10 +25,10 @@
     var steps = [0, 1, 0, 0, 1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1];
     var stepsReversed = steps.slice();
     stepsReversed.reverse();
-    var polyLeftTop = [];
-    var polyLeftBottom = [];
-    var polyRightTop = [];
-    var polyRightBottom = [];
+    var polyLeftTop = [0, 0];
+    var polyLeftBottom = [0, g.getHeight()];
+    var polyRightTop = [g.getWidth() - 1, 0];
+    var polyRightBottom = [g.getWidth() - 1, g.getHeight()];
     let xL = 0;
     let xR = g.getWidth() - 1;
     let yT = centerY - 13;
@@ -70,6 +68,16 @@
     g.fillPolyAA(polyRightBottom, true);
   };
 
+  let hourStringXOffset = function (hour) {
+    if (hour == 1) {
+      return lineEndFull - 5;
+    }
+    if (hour < 10 || hour >= 20) {
+      return lineEndFull + 5;
+    }
+    return lineEndFull - 5;
+  };
+
   let drawTime = function () {
     g.clear();
     var d = new Date();
@@ -86,19 +94,19 @@
 
     var lineEnd = lineEndDefault;
     g.setFont("7x11Numeric7Seg", 2);
-    g.setFontAlign(0, 0);
+    g.setFontAlign(-1, 0);
 
     // gone
     do {
       switch (yTopLines - 88 + mins) {
         case -60:
           lineEnd = lineEndFull;
-          g.drawString(d.getHours() - 1, lineEnd + 10, yTopLines, true);
+          g.drawString(d.getHours()-1, hourStringXOffset(d.getHours()-1), yTopLines, true);
           break;
         case 0:
         case 60:
           lineEnd = lineEndFull;
-          g.drawString(d.getHours(), lineEnd + 10, yTopLines, true);
+          g.drawString(d.getHours(), hourStringXOffset(d.getHours()), yTopLines, true);
           break;
         case 45:
         case -45:
@@ -128,11 +136,11 @@
         case 0:
         case 60:
           lineEnd = lineEndFull;
-          g.drawString(d.getHours() + 1, lineEnd + 10, yBottomLines, true);
+          g.drawString(d.getHours() + 1,  hourStringXOffset(d.getHours()+1), yBottomLines, true);
           break;
         case 120:
           lineEnd = lineEndFull;
-          g.drawString(d.getHours() + 2, lineEnd + 10, yBottomLines, true);
+          g.drawString(d.getHours() + 2,  hourStringXOffset(d.getHours()+2), yBottomLines, true);
           break;
         case 15:
         case 75:

apps/measuretime/metadata.json

@@ -1,10 +1,13 @@
 {
   "id": "measuretime",
   "name": "Measure Time",
-  "version": "0.1",
+  "version": "0.2",
   "description": "Measure Time in a fancy way.",
-  "icon": "small_measuretime.png",
-  "screenshots": [{ "url": "measuretime.png" }],
+  "icon": "measuretime_icon.png",
+  "screenshots": [
+      { "url": "screenshot_light.png" },
+      { "url": "screenshot_dark.png" }
+  ],
   "type": "clock",
   "tags": "clock",
   "supports": ["BANGLEJS2"],