Merge pull request #3527 from Septolum/lato

lato: add optional date display

apps/lato/ChangeLog

@@ -1,3 +1,4 @@
 0.01: first release
 0.02: Use clock_info module as an app
-0.03: clock_info now uses app name to maintain settings specifically for this clock face
+0.03: clock_info now uses app name to maintain settings specifically for this clock face
+0.04: add optional date display, and a settings page to configure it

apps/lato/README.md

@@ -5,6 +5,7 @@ A simple clock with the Lato font, with fast load and clock_info
 ![](screenshot1.png)
 ![](screenshot2.png)
 ![](screenshot3.png)
+![](screenshot4.png)
 
 This clock is a Lato version of Simplest++. Simplest++ provided the
 smallest example of a clock that supports 'fast load' and 'clock
@@ -25,6 +26,8 @@ Pastel Clock.
 
 * Settings are saved automatically and reloaded along with the clock.
 
+* Date display can be enabled and disabled, along with format choice in the app settings
+
 ## About Clock Info's
 
 * The clock info modules enable all clocks to add the display of information to the clock face.
@@ -52,3 +55,5 @@ Pastel Clock.
 Written by: [Hugh Barney](https://github.com/hughbarney) For support
 and discussion please post in the [Bangle JS
 Forum](http://forum.espruino.com/microcosms/1424/)
+
+Date functionality added by [Septolum](https://github.com/Septolum)

apps/lato/app.js

@@ -38,6 +38,11 @@ Graphics.prototype.setFontLatoSmall = function(scale) {
   // must be inside our own scope here so that when we are unloaded everything disappears
   // we also define functions using 'let fn = function() {..}' for the same reason. function decls are global
 
+  let settings = Object.assign({
+    dateDisplay: false,
+    dateFormat: 0,
+  }, require("Storage").readJSON("lato.json", true) || {});
+
   let draw = function() {
     var date = new Date();
     var timeStr = require("locale").time(date,1);
@@ -53,6 +58,25 @@ Graphics.prototype.setFontLatoSmall = function(scale) {
     g.setFontAlign(0, 0);
     g.setColor(g.theme.fg);
     g.drawString(timeStr, w/2, h/2);
+
+    if (settings.dateDisplay) {
+      switch (settings.dateFormat) {
+        case 1:
+          var dateStr = require("locale").date(date,1);
+          break;
+        
+        case 2:
+          var dateStr = require("locale").date(date);
+          break;
+      
+        default:
+          var dateStr = require("locale").dow(date,1) + ', ' + date.getDate() + ' ' + require("locale").month(date,1);
+          break;
+    }
+      g.setFontVector(16);
+      g.drawString(dateStr, w/2, h/4 -4);
+    }
+
     clockInfoMenu.redraw();   // clock_info_support
 
     // schedule a draw for the next minute

apps/lato/metadata.json

@@ -1,7 +1,7 @@
 {
   "id": "lato",
   "name": "Lato",
-  "version": "0.03",
+  "version": "0.04",
   "description": "A Lato Font clock with fast load and clock_info",
   "readme": "README.md",
   "icon": "app.png",
@@ -12,6 +12,10 @@
   "dependencies" : { "clock_info":"module" },
   "storage": [
     {"name":"lato.app.js","url":"app.js"},
-    {"name":"lato.img","url":"icon.js","evaluate":true}
+    {"name":"lato.img","url":"icon.js","evaluate":true},
+    {"name":"lato.settings.js","url":"settings.js"}
+  ],
+  "data": [
+    {"name":"lato.json"}
   ]
 }

apps/lato/settings.js

@@ -0,0 +1,24 @@
+(function(back) {
+    let settings = require('Storage').readJSON('lato.json',1)||{};
+    if (typeof settings.dateDisplay !== "boolean") settings.dateDisplay = false; // default value
+    if (typeof settings.dateFormat !== "number") settings.dateFormat = 0; // default value
+    function save(key, value) {
+      settings[key] = value;
+      require('Storage').write('lato.json', settings);
+    }
+    const appMenu = {
+      '': {'title': 'Lato'},
+      '< Back': back,
+      'Display Date?': {
+        value: settings.dateDisplay,
+        onchange: (v) => {save('dateDisplay', v)}
+      },
+      "Date Format": {
+        value: settings.dateFormat,
+        min: 0, max: 2,
+        format: v => ["DoW, dd MMM","Locale Short","Locale Long"][v],
+        onchange: (v) => {save('dateFormat', v)}
+      }
+    };
+    E.showMenu(appMenu)
+  })