Daisy - added settings menu

apps/daisy/ChangeLog

@@ -1 +1,2 @@
 0.01: first release
+0.02: added settings menu to change color

apps/daisy/README.md

@@ -16,7 +16,6 @@ Forum](http://forum.espruino.com/microcosms/1424/)
 * Uses the [BloggerSansLight](https://www.1001fonts.com/rounded-fonts.html?page=3) font, which if free for commercial use
 
 ## Future Development
-* Add settings menu to change primary clock color
 * Add a heart rate option in the information line that turns on when selected
 * Use mini icons in the information line rather that text
 * Add weather icons as per Pastel clock

apps/daisy/app.js

@@ -1,7 +1,7 @@
 var SunCalc = require("https://raw.githubusercontent.com/mourner/suncalc/master/suncalc.js");
 const storage = require('Storage');
 const locale = require("locale");
-const SETTINGS_FILE = "pastel.json";    // XXX
+const SETTINGS_FILE = "daisy.json";
 const LOCATION_FILE = "mylocation.json";
 const h = g.getHeight();
 const w = g.getWidth();
@@ -14,13 +14,10 @@ let warned = 0;
 let idle = false;
 let IDLE_MINUTES = 26;
 
-// palette for 0-40%
-const pal1 = new Uint16Array([g.theme.bg, g.toColor("#020"), g.toColor("#0f0"), g.toColor("#00f")]);
-// palette for 50-100%
-const pal2 = new Uint16Array([g.theme.bg, g.toColor("#0f0"), g.toColor("#020"), g.toColor("#00f")]);
+var pal1; // palette for 0-40%
+var pal2; // palette for 50-100%
 const infoWidth = 50;
 const infoHeight = 14;
-
 var drawingSteps = false;
 
 function log_debug(o) {
@@ -40,6 +37,13 @@ Graphics.prototype.setFontRoboto20 = function(scale) {
   return this;
 }
 
+function assignPalettes() {
+  // palette for 0-40%
+  pal1 = new Uint16Array([g.theme.bg, g.toColor(settings.gy), g.toColor(settings.color), g.toColor("#00f")]);
+  // palette for 50-100%
+  pal2 = new Uint16Array([g.theme.bg, g.toColor(settings.color), g.toColor(settings.gy), g.toColor("#00f")]);
+}
+
 function setSmallFont20() {
   g.setFontRoboto20();
 }
@@ -67,9 +71,11 @@ function getSteps() {
 
 function loadSettings() {
   settings = require("Storage").readJSON(SETTINGS_FILE,1)||{};
-  settings.grid = settings.grid||false;
-  settings.font = settings.font||"Lato";
+  settings.color = settings.color||'Green';
+  settings.gy = settings.gy||'gy';
+  settings.bg = settings.bg||'#0f0';
   settings.idle_check = settings.idle_check||true;
+  assignPalettes();
 }
 
 // requires the myLocation app
@@ -266,7 +272,7 @@ function drawClock() {
   g.drawImage(getGaugeImage(p_steps), 0, 0);
   setLargeFont();
 
-  g.setColor('#0f0');
+  g.setColor(settings.color);
   g.setFontAlign(1,0);  // right aligned
   g.drawString(hh, (w/2) - 1, h/2);
 

apps/daisy/metadata.json

@@ -1,6 +1,6 @@
 { "id": "daisy",
   "name": "Daisy",
-  "version":"0.01",
+  "version":"0.02",
   "dependencies": {"mylocation":"app"},
   "description": "A clock based on the Pastel clock with large ring guage for steps",
   "icon": "app.png",
@@ -10,6 +10,8 @@
   "readme": "README.md",
   "storage": [
     {"name":"daisy.app.js","url":"app.js"},
-    {"name":"daisy.img","url":"app-icon.js","evaluate":true}
-  ]
+    {"name":"daisy.img","url":"app-icon.js","evaluate":true},
+    {"name":"daisy.settings.js","url":"daisy.settings.js"}
+  ],
+  "data": [{"name":"daisy.json"}]
 }

apps/daisy/settings.js

@@ -0,0 +1,51 @@
+(function(back) {
+  const SETTINGS_FILE = "daisy.json";
+
+  // initialize with default settings...
+  let s = {'gy' : '#020',
+           'bg' : '#0f0',
+           'color': 'Green',
+           'check_idle' : true};
+
+  // ...and overwrite them with any saved values
+  // This way saved values are preserved if a new version adds more settings
+  const storage = require('Storage')
+  let settings = storage.readJSON(SETTINGS_FILE, 1) || s;
+  const saved = settings || {}
+  for (const key in saved) {
+    s[key] = saved[key]
+  }
+
+  function save() {
+    settings = s
+    storage.write(SETTINGS_FILE, settings)
+  }
+
+  var color_options = ['Green','Orange','Cyan','Purple','Red','Blue'];
+  var bg_code = ['#0f0','#ff0','#0ff','#f0f','#f00','#00f'];
+  var gy_code = ['#020','#220','#022','#202','#200','#002'];
+  
+  E.showMenu({
+    '': { 'title': 'Daisy Clock' },
+    '< Back': back,
+    'Colour': {
+      value: 0 | color_options.indexOf(s.color),
+      min: 0, max: 5,
+      format: v => color_options[v],
+      onchange: v => {
+        s.color = color_options[v];
+        s.bg = bg_code[v];
+        s.gy = gy_code[v];
+        save();
+      },
+    },
+    'Idle Warning': {
+      value: !!s.idle_check,
+      format: v => v ? /*LANG*/"Yes":/*LANG*/"No",
+      onchange: v => {
+        s.idle_check = v;
+        save();
+      },
+    }
+  });
+})