Merge pull request #3 from deirdreobyrne/widmp-custom-colour

Custom colours for the moon!

apps/widmp/ChangeLog

@@ -3,4 +3,4 @@
 0.03: Better memory usage, theme support
 0.04: Replace the 8 phases by a more exact drawing, see forum.espruino.com/conversations/371985
 0.05: Fixed the algorithm for calculating the moon's phase
-0.06: Darkmode, and fix a bug with acting on my location changes
+0.06: Darkmode, custom colours, and fix a bug with acting on mylocation changes

apps/widmp/metadata.json

@@ -1,6 +1,6 @@
 {
   "id": "widmp",
-  "name": "Moon Phase Widget",
+  "name": "Moon Phase",
   "version": "0.06",
   "description": "Display the current moon phase in blueish (in light mode) or white (in dark mode) for both hemispheres. In the southern hemisphere the 'My Location' app is needed.",
   "icon": "widget.png",
@@ -8,6 +8,8 @@
   "tags": "widget,tools",
   "supports": ["BANGLEJS","BANGLEJS2"],
   "storage": [
-    {"name":"widmp.wid.js","url":"widget.js"}
-  ]
+    {"name":"widmp.wid.js","url":"widget.js"},
+    {"name":"widmp.settings.js","url":"settings.js"}
+  ],
+  "data": [{"name":"widmp.json"}]
 }

apps/widmp/settings.js

@@ -0,0 +1,73 @@
+(function(back) {
+
+  var settings = Object.assign({
+    default_colour: true,
+    red: 0,
+    green: 0,
+    blue: 0,
+  }, require('Storage').readJSON("widmp.json", true) || {});
+
+  function writeSettings() {
+    require('Storage').writeJSON("widmp.json", settings);
+	if (WIDGETS["widmp"]) WIDGETS["widmp"].draw();
+  }
+  
+  function writeSettingsCustom() {
+    settings.default_colour = false;
+    mainmenu["Default"].value = false;
+    writeSettings();
+  }
+  
+  var mainmenu = {
+    "": {
+      "title": "Moon colour"
+    },
+    "< Back": () => back(),
+    "Default": {
+      value: (settings.default_colour !== undefined ? settings.default_colour : true),
+      format: v => v ? "Yes" : "No",
+      onchange: v => {
+        settings.default_colour = v;
+        writeSettings();
+      }
+    },
+    "Custom...": () => E.showMenu(custommenu)
+  };
+  
+  var custommenu = {
+    "": {
+      "title": "Custom colour..."
+    },
+    "< Back": () => E.showMenu(mainmenu),
+    "red": {
+      value: 0|settings.red,
+      min: 0,
+      max: 4,
+      onchange: v => {
+        settings.red = v;
+        writeSettingsCustom();
+      }
+    },
+    "green": {
+      value: 0|settings.green,
+      min: 0,
+      max: 4,
+      onchange: v => {
+        settings.green = v;
+        writeSettingsCustom();
+      }
+    },
+    "blue": {
+      value: 0|settings.blue,
+      min: 0,
+      max: 4,
+      onchange: v => {
+        settings.blue = v;
+        writeSettingsCustom();
+      }
+    }
+  };
+
+  E.showMenu(mainmenu);
+
+});

apps/widmp/widget.js

@@ -40,6 +40,27 @@
       g.drawLine(CenterX-leftFactor*y,CenterY+x, CenterX+rightFactor*y,CenterY+x);
     }
   }
+  
+  function setMoonColour(g) {
+    var settings = Object.assign({
+      default_colour: true,
+      red: 0,
+      green: 0,
+      blue: 0,
+    }, require('Storage').readJSON("widmp.json", true) || {});
+    if (settings.default_colour) {
+      if (g.theme.dark) {
+        g.setColor(0xffff); // white
+      } else {
+        // rrrrrggggggbbbbb
+        // 0000010000011111
+        g.setColor(0x41f); // blue-ish
+      }
+    } else {
+      g.setColor(settings.red/4, settings.green/4, settings.blue/4);
+    }
+  }
+
 
   function draw() {
     const CenterX = this.x + 12, CenterY = this.y + 12, Radius = 11;
@@ -47,11 +68,6 @@
     loadLocation();
     g.reset().setColor(g.theme.bg);
     g.fillRect(CenterX - Radius, CenterY - Radius, CenterX + Radius, CenterY + Radius);
-    if (g.theme.dark) {
-      g.setColor(0xffff); // white
-    } else {
-      g.setColor(0x41f); // blue-ish
-    }
 
     millis = (new Date()).getTime();
     if ((millis - lastCalculated) >= 7000000) { // if it's more than 7,000 sec since last calculation, re-calculate!
@@ -70,10 +86,11 @@
       var tmp=leftFactor; leftFactor=rightFactor; rightFactor=tmp;
     }
 
+    setMoonColour(g);
     drawMoonPhase(CenterX,CenterY, Radius, leftFactor,rightFactor);
   }
 
-  WIDGETS["widmoon"] = {
+  WIDGETS["widmp"] = {
     area: "tr",
     width: 24,
     draw: draw