Introduce settings

apps/smclock/README.md

@@ -3,3 +3,21 @@
 Just a simple watch face for the Banglejs2.
 
 It shows battery level in the upper left corner, date information in the upper right, and time information in the bottom.
+
+![](screenshot.png)
+
+## Settings
+
+**Analog Clock:**
+
+**Human Readable Date:** When the setting is on, the date is shown in a more human-friendly format (e.g. "Oct 2"), otherwise the date is shown in a standard format (e.g. "02/10"). Default is off.
+
+**Show Week Info:** When the setting is on, the weekday and week number are shown in the upper right box. When the setting is off, the full year is shown instead. Default is off.
+
+**Vector Font:** When the setting is on, the app uses Espruino's vector font, otherwise it uses the default font. Default is off.
+
+## Using the app
+
+Monogram Watch Face can be selected as the default clock or it can be run manually from the launcher. Its settings can be accessed and changed via the relevant menu.
+
+Tapping on the "Alerts" area will replace the current time display with the time of the most immediate alert.

apps/smclock/app.js

@@ -1,13 +1,17 @@
+const SETTINGSFILE = "smclock.json";
 const background = {
-  width : 176, height : 176, bpp : 3,
-  transparent : 1,
+  width : 176, height : 176, bpp : 3, transparent : 1,
   buffer : require("heatshrink").decompress(atob("/4A/AH4ACUb8H9MkyVJAThB/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/INP/AH4A/AAX8Yz4Afn5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/IP5B/INI="))
 };
-
+const monthName = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
 const weekday = ["Sun","Mon","Tue","Wed","Thu","Fri","Sat"];
-var level = -1;
 
-function ISO8601_week_no(date) { //copied from: https://gist.github.com/IamSilviu/5899269#gistcomment-3035480
+// dynamic variables
+var batLevel = -1;
+var batColor = [0,0,0];
+
+// copied from: https://gist.github.com/IamSilviu/5899269#gistcomment-3035480
+function ISO8601_week_no(date) {
     var tdt = new Date(date.valueOf());
     var dayn = (date.getDay() + 6) % 7;
     tdt.setDate(tdt.getDate() - dayn + 3);
@@ -24,8 +28,8 @@ function d02(value) {
 }
 
 function pollBattery() {
-  level = E.getBattery();
-  return level;
+  batLevel = E.getBattery();
+  return batLevel;
 }
 
 function getBatteryColor(level) {
@@ -100,7 +104,7 @@ Bangle.on('lcdPower',on=>{
     drawInterval = setInterval(draw, 10000);
     
     pollBattery();
-    draw(); // draw immediately
+    draw();
   }
 });
 

apps/smclock/metadata.json

@@ -12,6 +12,7 @@
   "allow_emulator": true,
   "storage": [
     {"name":"smclock.app.js","url":"app.js"},
+    {"name":"smclock.settings.js","url":"settings.js"},
     {"name":"smclock.img","url":"app-icon.js","evaluate":true}
   ]
 }

apps/smclock/settings.js

@@ -0,0 +1,108 @@
+// Settings menu for Monogram Watch Face
+// Anton Clock settings were used as template
+
+(function(back) {
+  var FILE = "smclock.json";
+  // Load settings
+  var settings = Object.assign({
+    secondsOnUnlock: false,
+  }, require('Storage').readJSON(FILE, true) || {});
+
+  function writeSettings() {
+    require('Storage').writeJSON(FILE, settings);
+  }
+
+  // Helper method which uses int-based menu item for set of string values
+  function stringItems(startvalue, writer, values) {
+    return {
+      value: (startvalue === undefined ? 0 : values.indexOf(startvalue)),
+      format: v => values[v],
+      min: 0,
+      max: values.length - 1,
+      wrap: true,
+      step: 1,
+      onchange: v => {
+        writer(values[v]);
+        writeSettings();
+      }
+    };
+  }
+
+  // Helper method which breaks string set settings down to local settings object
+  function stringInSettings(name, values) {
+    return stringItems(settings[name], v => settings[name] = v, values);
+  }
+
+  var mainmenu = {
+    "": {
+      "title": "Monogram Clock"
+    },
+    "< Back": () => back(),
+    "Seconds...": () => E.showMenu(secmenu),
+    "Date": stringInSettings("dateOnMain", ["Long", "Short", "ISO8601"]),
+    "Show Weekday": {
+      value: (settings.weekDay !== undefined ? settings.weekDay : true),
+      format: v => v ? "On" : "Off",
+      onchange: v => {
+        settings.weekDay = v;
+        writeSettings();
+      }
+    },
+    "Show CalWeek": {
+      value: (settings.calWeek !== undefined ? settings.calWeek : false),
+      format: v => v ? "On" : "Off",
+      onchange: v => {
+        settings.calWeek = v;
+        writeSettings();
+      }
+    },
+    "Uppercase": {
+      value: (settings.upperCase !== undefined ? settings.upperCase : true),
+      format: v => v ? "On" : "Off",
+      onchange: v => {
+        settings.upperCase = v;
+        writeSettings();
+      }
+    },
+    "Vector font": {
+      value: (settings.vectorFont !== undefined ? settings.vectorFont : false),
+      format: v => v ? "On" : "Off",
+      onchange: v => {
+        settings.vectorFont = v;
+        writeSettings();
+      }
+    },
+  };
+
+  // Submenu
+  var secmenu = {
+    "": {
+      "title": "Show seconds..."
+    },
+    "< Back": () => E.showMenu(mainmenu),
+    "Show": stringInSettings("secondsMode", ["Never", "Unlocked", "Always"]),
+    "With \":\"": {
+      value: (settings.secondsWithColon !== undefined ? settings.secondsWithColon : true),
+      format: v => v ? "On" : "Off",
+      onchange: v => {
+        settings.secondsWithColon = v;
+        writeSettings();
+      }
+    },
+    "Color": {
+      value: (settings.secondsColoured !== undefined ? settings.secondsColoured : true),
+      format: v => v ? "On" : "Off",
+      onchange: v => {
+        settings.secondsColoured = v;
+        writeSettings();
+      }
+    },
+    "Date": stringInSettings("dateOnSecs", ["Year", "Weekday", "No"])
+  };
+
+  // Actually display the menu
+  E.showMenu(mainmenu);
+
+});
+
+// end of file