Merge pull request #1931 from rigrig/clockface-menu-improvements

Clockface menu improvements

apps/barclock/ChangeLog

@@ -11,3 +11,4 @@
 0.11: Use ClockFace.is12Hour
 0.12: Add settings to hide date,widgets
 0.13: Add font setting
+0.14: Use ClockFace_menu.addItems

apps/barclock/metadata.json

@@ -1,7 +1,7 @@
 {
   "id": "barclock",
   "name": "Bar Clock",
-  "version": "0.13",
+  "version": "0.14",
   "description": "A simple digital clock showing seconds as a bar",
   "icon": "clock-bar.png",
   "screenshots": [{"url":"screenshot.png"},{"url":"screenshot_pm.png"}],

apps/barclock/settings.js

@@ -1,26 +1,26 @@
 (function(back) {
-  let s = require('Storage').readJSON("barclock.settings.json", true) || {};
+  let s = require("Storage").readJSON("barclock.settings.json", true) || {};
 
-  function saver(key) {
-    return value => {
-      s[key] = value;
-      require('Storage').writeJSON("barclock.settings.json", s);
-    }
+  function save(key, value) {
+    s[key] = value;
+    require("Storage").writeJSON("barclock.settings.json", s);
   }
 
   const fonts = [/*LANG*/"Bitmap",/*LANG*/"Vector"];
-  const menu = {
+  let menu = {
     "": {"title": /*LANG*/"Bar Clock"},
     /*LANG*/"< Back": back,
-    /*LANG*/"Show date": require("ClockFace_menu").showDate(s.showDate, saver('showDate')),
-    /*LANG*/"Load widgets": require("ClockFace_menu").loadWidgets(s.loadWidgets, saver('loadWidgets')),
     /*LANG*/"Font": {
       value: s.font|0,
-      min:0,max:1,wrap:true,
-      format:v=>fonts[v],
-      onchange:saver('font'),
+      min: 0, max: 1, wrap: true,
+      format: v => fonts[v],
+      onchange: v => save("font", v),
     },
   };
+  require("ClockFace_menu").addItems(menu, save, {
+    showDate: s.showDate,
+    loadWidgets: s.loadWidgets,
+  });
 
   E.showMenu(menu);
 });

apps/cogclock/ChangeLog

@@ -1,2 +1,3 @@
 0.01: New clock
 0.02: Use ClockFace library, add settings
+0.03: Use ClockFace_menu.addSettingsFile

apps/cogclock/metadata.json

@@ -1,7 +1,7 @@
 {
   "id": "cogclock",
   "name": "Cog Clock",
-  "version": "0.02",
+  "version": "0.03",
   "description": "A cross-shaped clock inside a cog",
   "icon": "icon.png",
   "screenshots": [{"url":"screenshot.png"}],

apps/cogclock/settings.js

@@ -1,19 +1,10 @@
 (function(back) {
-  let s = require('Storage').readJSON("cogclock.settings.json", true) || {};
-
-  function saver(key) {
-    return value => {
-      s[key] = value;
-      require('Storage').writeJSON("cogclock.settings.json", s);
-    }
-  }
-
-  const menu = {
+  let menu = {
     "": {"title": /*LANG*/"Cog Clock"},
     /*LANG*/"< Back": back,
-    /*LANG*/"Show date": require("ClockFace_menu").showDate(s.showDate, saver('showDate')),
-    /*LANG*/"Load widgets": require("ClockFace_menu").loadWidgets(s.loadWidgets, saver('loadWidgets')),
   };
-
+  require("ClockFace_menu").addSettingsFile(menu, "cogclock.settings.json", [
+    "showDate", "loadWidgets"
+  ]);
   E.showMenu(menu);
 });

modules/ClockFace.md

@@ -174,4 +174,42 @@ Bangle.on('step', function(steps) {
   if (clock.paused === false) // draw step count
 });
 
+```
+
+
+ClockFace_menu
+==============
+If your clock comes with a settings menu, you can use this library to easily add
+some common options:
+
+```js
+
+let settings = require("Storage").readJSON("<appid>.settings.json", true)||{};
+function save(key, value) {
+  settings[key] = value;
+  require("Storage").writeJSON("<appid>.settings.json", settings);
+}
+
+let menu = {
+  "": {"title": /*LANG*/"<clock name> Settings"},
+};
+require("ClockFace_menu").addItems(menu, save, { 
+  showDate: settings.showDate, 
+  loadWidgets: settings.loadWidgets,
+});
+E.showMenu(menu);
+
+```
+
+Or even simpler, if you just want to use a basic settings file:
+```js
+let menu = {
+  "": {"title": /*LANG*/"<clock name> Settings"},
+  /*LANG*/"< Back": back,  
+};
+require("ClockFace_menu").addSettingsFile(menu, "<appid>.settings.json", [ 
+  "showDate", "loadWidgets"
+]);
+E.showMenu(menu);
+
 ```

modules/ClockFace_menu.js

@@ -1,10 +1,48 @@
-// boolean options, which default to true
-exports.showDate =
-exports.loadWidgets =
-  function(value, callback) {
-    if (value === undefined) value = true;
-    return {
-      value: !!value,
-      onchange: v=>callback(v),
-    };
-  };
+/**
+ * Add setting items to a menu
+ *
+ * @param {object} menu Menu to add items to
+ * @param {function} callback Callback when value changes
+ * @param {object} items Menu items to add, with their current value
+ */
+exports.addItems = function(menu, callback, items) {
+  Object.keys(items).forEach(key => {
+    let value = items[key];
+    const label = {
+      showDate:/*LANG*/"Show date",
+      loadWidgets:/*LANG*/"Load widgets",
+    }[key];
+    switch(key) {
+      case "showDate":
+      case "loadWidgets":
+        // boolean options, which default to true
+        if (value===undefined) value = true;
+        menu[label] = {
+          value: !!value,
+          onchange: v => callback(key, v),
+        };
+    }
+  });
+};
+
+/**
+ * Create a basic settings menu for app, reading/writing to settings file
+ *
+ * @param {object} menu Menu to add settings to
+ * @param {string} settingsFile File to read/write settings to/from
+ * @param {string[]} items List of settings to add
+ */
+exports.addSettingsFile = function(menu, settingsFile, items) {
+  let s = require("Storage").readJSON(settingsFile, true) || {};
+
+  function save(key, value) {
+    s[key] = value;
+    require("Storage").writeJSON(settingsFile, s);
+  }
+
+  let toAdd = {};
+  items.forEach(function(key) {
+    toAdd[key] = s[key];
+  });
+  exports.addItems(menu, save, toAdd);
+};