Add configuration

apps/slopeclockpp/ChangeLog

@@ -1 +1,2 @@
-0.01: New App!
+0.01: Clone of original SlopeClock
+0.02: Added configuration

apps/slopeclockpp/app.js

@@ -11,6 +11,12 @@ Graphics.prototype.setFontPaytoneOne = 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(
+  require("Storage").readJSON("slopeclockpp.default.json", true) || {},
+  require("Storage").readJSON("slopeclockpp.json", true) || {}
+);
+
 let drawTimeout;
 
 let g2 = Graphics.createArrayBuffer(g.getWidth(),90,1,{msb:true});
@@ -24,7 +30,16 @@ const fontBorder = 4; // offset from left/right
 const slopeBorder = 10, slopeBorderUpper = 4; // fudge-factor to move minutes down from slope
 let R,x,y; // middle of the clock face
 let dateStr = "";
-let bgColors = g.theme.dark ? ["#ff0","#0ff","#f0f"] : ["#f00","#0f0","#00f"];
+let bgColors = [];
+if (g.theme.dark) {
+   if (settings.colorYellow) bgColors.push("#ff0");
+   if (settings.colorCyan) bgColors.push("#0ff");
+   if (settings.colorMagenta) bgColors.push("#f0f");
+} else {
+   if (settings.colorRed) bgColors.push("#f00");
+   if (settings.colorGreen) bgColors.push("#0f0");
+   if (settings.colorBlue) bgColors.push("#00f");
+}
 let bgColor = bgColors[(Math.random()*bgColors.length)|0];
 
 
@@ -95,11 +110,14 @@ let animate = function(isIn, callback) {
         // draw the date
         g.setColor(g.theme.bg).setFontAlign(0, 0).setFont("6x15").drawString(dateStr, R.x + R.w/2, R.y+R.h-9);
 
+        if (settings.showSteps || true) {
         // draw steps to bottom left
         const steps = getSteps();
         if (steps > 0)
            g.setFontAlign(-1, 0).drawString(shortValue(steps), 3, R.y+R.h-30);
+        }
 
+        if (settings.showWeather || true) {
           // draw weather to top right
           const weather = getWeather();
           const tempString = weather ? require("locale").temp(weather.temp - 273.15) : undefined;
@@ -110,6 +128,7 @@ let animate = function(isIn, callback) {
             if (icon) g.drawImage(icon, R.w - 3 - 15, y-slope-slopeBorderUpper - 15 - 15);
           }
         }
+      }
       if (callback) callback();
     }
   }, 20);

apps/slopeclockpp/default.json

@@ -0,0 +1,10 @@
+{
+  "showSteps": true,
+  "showWeather": true,
+  "colorRed": true,
+  "colorGreen": true,
+  "colorBlue": true,
+  "colorYellow": true,
+  "colorMagenta": true,
+  "colorCyan": true
+}

apps/slopeclockpp/metadata.json

@@ -1,7 +1,7 @@
 { "id": "slopeclockpp",
   "name": "Slope Clock ++",
-  "version":"0.01",
+  "version":"0.02",
-  "description": "A clock where hours and minutes are divided by a sloping line. When the minute changes, the numbers slide off the screen. This is a clone of the original Slope Clock which shows weather and steps.",
+  "description": "A clock where hours and minutes are divided by a sloping line. When the minute changes, the numbers slide off the screen. This is a clone of the original Slope Clock which can show the weather and steps.",
   "icon": "app.png",
   "screenshots": [{"url":"screenshot.png"}],
   "type": "clock",
@@ -9,6 +9,11 @@
   "supports" : ["BANGLEJS2"],  
   "storage": [
     {"name":"slopeclockpp.app.js","url":"app.js"},
-    {"name":"slopeclockpp.img","url":"app-icon.js","evaluate":true}
+    {"name":"slopeclockpp.img","url":"app-icon.js","evaluate":true},
+    {"name":"slopeclockpp.settings.js","url":"settings.js"},
+    {"name":"slopeclockpp.default.json","url":"default.json"}
+   ],
+   "data": [
+     {"name":"slopeclockpp.json"}
    ]
 }

apps/slopeclockpp/settings.js

@@ -0,0 +1,64 @@
+(function(back) {
+  const SETTINGS_FILE = "slopclockpp.json";
+  const storage = require('Storage');
+  let settings = Object.assign(
+    storage.readJSON("slopclockpp.default.json", true) || {},
+    storage.readJSON(SETTINGS_FILE, true) || {}
+  );
+
+  function save(key, value) {
+    settings[key] = value;
+    storage.write(SETTINGS_FILE, settings);
+  }
+
+  function showMainMenu() {
+    let menu ={
+      '': { 'title': 'Slope Clock ++' },
+      /*LANG*/'< Back': back,
+      /*LANG*/'show steps': {
+        value: !!settings.showSteps,
+        format: () => (settings.showSteps ? 'Yes' : 'No'),
+        onchange: x => save('showSteps', x),
+      },
+      /*LANG*/'show weather': {
+        value: !!settings.showWeather,
+        format: () => (settings.showWeather ? 'Yes' : 'No'),
+        onchange: x => save('showWeather', x),
+      },
+      /*LANG*/'red': {
+        value: !!settings.colorRed,
+        format: () => (settings.colorRed ? 'Yes' : 'No'),
+        onchange: x => save('colorRed', x),
+      },
+      /*LANG*/'green': {
+        value: !!settings.colorGreen,
+        format: () => (settings.colorGreen ? 'Yes' : 'No'),
+        onchange: x => save('colorGreen', x),
+      },
+      /*LANG*/'blue': {
+        value: !!settings.colorBlue,
+        format: () => (settings.colorBlue ? 'Yes' : 'No'),
+        onchange: x => save('colorBlue', x),
+      },
+      /*LANG*/'magenta': {
+        value: !!settings.colorMagenta,
+        format: () => (settings.colorMagenta ? 'Yes' : 'No'),
+        onchange: x => save('colorMagenta', x),
+      },
+      /*LANG*/'cyan': {
+        value: !!settings.colorCyan,
+        format: () => (settings.colorCyan ? 'Yes' : 'No'),
+        onchange: x => save('colorCyan', x),
+      },
+      /*LANG*/'yellow': {
+        value: !!settings.colorYellow,
+        format: () => (settings.colorYellow ? 'Yes' : 'No'),
+        onchange: x => save('colorYellow', x),
+      }
+    };
+    E.showMenu(menu);
+  }
+
+
+  showMainMenu();
+});