Merge pull request #1926 from deirdreobyrne/widmp-darkmode

Moon phase widget - dark mode, custom colours, and small bugfix

apps/widmp/ChangeLog

@@ -3,3 +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, custom colours, and fix a bug with acting on mylocation changes

apps/widmp/metadata.json

@@ -1,13 +1,15 @@
 {
   "id": "widmp",
-  "name": "Moon Phase Widget",
-  "version": "0.05",
-  "description": "Display the current moon phase in blueish for both hemispheres. In the southern hemisphere the 'My Location' app is needed.",
+  "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",
   "type": "widget",
   "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

@@ -1,11 +1,8 @@
-WIDGETS["widmoon"] = { area: "tr", width: 24, draw: function() {
-  const CenterX = this.x + 12, CenterY = this.y + 12, Radius = 11;
-  var southernHemisphere = false; // when in southern hemisphere, use the "My Location" App
+(() => {
+
   var lastCalculated = 0; // When we last calculated the phase
   var phase = 0; // The last phase we calculated
-
-  const simulate = false; // simulate one month in one minute
-  const updateR = 1000; // update every x ms in simulation
+  var southernHemisphere = false; // when in southern hemisphere -- use the "My Location" App
 
   // https://deirdreobyrne.github.io/calculating_moon_phases/
   function moonPhase(millis) {
@@ -24,7 +21,7 @@ WIDGETS["widmoon"] = { area: "tr", width: 24, draw: function() {
   function loadLocation() {
     // "mylocation.json" is created by the "My Location" app
     location = require("Storage").readJSON("mylocation.json",1)||{"lat":50.1236,"lon":8.6553,"location":"Frankfurt"};
-    if (location.lat < 0) southernHemisphere = true;
+    southernHemisphere = (location.lat < 0);
   }
 
   // code source: github.com/rozek/banglejs-2-activities/blob/main/README.md#drawmoonphase
@@ -43,14 +40,37 @@ WIDGETS["widmoon"] = { area: "tr", width: 24, draw: function() {
       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 updateWidget() {
+
+  function draw() {
+    const CenterX = this.x + 12, CenterY = this.y + 12, Radius = 11;
+
+    loadLocation();
     g.reset().setColor(g.theme.bg);
     g.fillRect(CenterX - Radius, CenterY - Radius, CenterX + Radius, CenterY + Radius);
-    g.setColor(0x41f);
 
     millis = (new Date()).getTime();
-    if ((millis - lastCalculated) >= 7200000) {
+    if ((millis - lastCalculated) >= 7000000) { // if it's more than 7,000 sec since last calculation, re-calculate!
       phase = moonPhase(millis);
       lastCalculated = millis;
     }
@@ -66,11 +86,14 @@ WIDGETS["widmoon"] = { area: "tr", width: 24, draw: function() {
       var tmp=leftFactor; leftFactor=rightFactor; rightFactor=tmp;
     }
 
+    setMoonColour(g);
     drawMoonPhase(CenterX,CenterY, Radius, leftFactor,rightFactor);
-
-    if (simulate) setTimeout(updateWidget, updateR);
   }
 
-  loadLocation();
-  updateWidget();
-} };
+  WIDGETS["widmp"] = {
+    area: "tr",
+    width: 24,
+    draw: draw
+  };
+
+})();