Matrix Clock Update: Matrix clock currently only works with the black theme, we extend to other themes

- setting panel is added so the colour scheme can be selected

apps/matrixclock/ChangeLog

@@ -2,3 +2,4 @@
 0.02: Support for Bangle 2
 0.03: Keep the date from being overwritten, use correct colour from theme for clearing
 0.04: Removed "wake LCD on face-up"-feature: A watch-face should not set things like "wake LCD on face-up".
+0.05: Added support to other color themes (other then black)

apps/matrixclock/matrixclock.js

@@ -9,9 +9,67 @@
  **/
 const Locale = require('locale');
 
-const SHARD_COLOR =[0,1.0,0];
+const PREFERENCE_FILE = "matrixclock.settings.json";
+const settings = Object.assign({'color': 'theme'},
+    require('Storage').readJSON(PREFERENCE_FILE, true) || {});
+
+const colors = {
+  'green': [0,1.0,0],
+  'red' : [1.0,0.0,0.0],
+  'blue' : [0.0,0.0,1.0],
+  'black': [0.0,0.0,0.0],
+  'white': [1.0,1.0,1.0],
+  'yellow': [1.0,1.0,0.0],
+  'purple': [1.0,0.0,1.0]
+};
+
+const bg2fg_color = {
+  'green' : 'white',
+  'red' : 'white',
+  'blue': 'white',
+  'black' : 'green',
+  'white': 'black',
+  'yellow': 'black',
+  'purple': 'yellow'
+};
+
+function int2Color(color_int){
+  var blue_int = color_int & 31;
+  var blue =  (blue_int)/31.0;
+
+  var green_int = (color_int >> 5) & 31;
+  var green = (green_int)/31.0;
+
+  var red_int =   (color_int >> 11) & 31;
+  var red =   red_int/ 31.0;
+  return [red,green,blue];
+}
+
+var fg_color = colors.black;
+var bg_color = colors.white;
+
+// now lets deal with the settings
+if(settings.color == "theme"){
+  bg_color = int2Color(g.theme.bg);
+  if(g.theme.bg == 0) {
+    fg_color = colors.green;
+  } else {
+    fg_color = int2Color(g.theme.fg);
+  }
+} else {
+  bg_color = colors[settings.color];
+  fg_color = colors[bg2fg_color[settings.color]];
+  g.setBgColor(bg_color[0],bg_color[1],bg_color[2]);
+}
+if(fg_color == undefined)
+  fg_color = colors.black;
+
+if(bg_color == undefined)
+  bg_color = colors.white;
+
 const SHARD_FONT_SIZE = 12;
 const SHARD_Y_START = 30;
+
 const w = g.getWidth();
 
 /**
@@ -50,14 +108,16 @@ class TextShard {
   show(){
     g.setFontAlign(-1,-1,0);
     for(var i=0; i<Math.min(this.txt.length, this.length + 1) ; i++){
-      idx = this.txt.length - i - 1;
+      var idx = this.txt.length - i - 1;
       var color_strength=1 - i/this.length;
       if(i > this.length - 2){
         color_strength = 0;
       }
-      g.setColor(color_strength*SHARD_COLOR[0],
-                 color_strength*SHARD_COLOR[1],
-                 color_strength*SHARD_COLOR[2]);
+      var bg_color_strength = 1 - color_strength;
+      g.setColor(Math.abs(color_strength*fg_color[0] - bg_color_strength*bg_color[0]),
+          Math.abs(color_strength*fg_color[1] - bg_color_strength*bg_color[1]),
+          Math.abs(color_strength*fg_color[2] - bg_color_strength*bg_color[2])
+      );
       g.setFont("Vector",SHARD_FONT_SIZE);
       g.drawString(this.txt[idx], this.x, this.y + idx*SHARD_FONT_SIZE);
     }
@@ -112,7 +172,6 @@ var timeStr = "";
 var dateStr = "";
 var last_draw_time = null;
 
-const TIME_X_COORD = 20;
 const TIME_Y_COORD = g.getHeight() / 2;
 const DATE_X_COORD = 170;
 const DATE_Y_COORD = 30;
@@ -147,22 +206,22 @@ function draw_clock(){
   g.setFont("Vector", g.getWidth() / 5);
   g.setFontAlign(0,-1);
   if(last_draw_time == null || now.getMinutes() != last_draw_time.getMinutes()){
-    g.setColor(g.theme.bg);
+    g.setColor(bg_color[0],bg_color[1],bg_color[2]);
     g.drawString(timeStr, w/2, TIME_Y_COORD);
     timeStr = format_time(now);
   }
-  g.setColor(SHARD_COLOR[0], SHARD_COLOR[1], SHARD_COLOR[2]);
+  g.setColor(fg_color[0], fg_color[1], fg_color[2]);
   g.drawString(timeStr, w/2, TIME_Y_COORD);
   //
   // draw date when it changes
   g.setFont("Vector",15);
   g.setFontAlign(0,-1,0);
   if(last_draw_time == null || now.getDate() != last_draw_time.getDate()){
-    g.setColor(g.theme.bg);
+    g.setColor(bg_color[0],bg_color[1],bg_color[2]);
     g.drawString(dateStr, w/2, DATE_Y_COORD);
     dateStr = format_date(now);
   }
-  g.setColor(SHARD_COLOR[0], SHARD_COLOR[1], SHARD_COLOR[2]);
+  g.setColor(fg_color[0], fg_color[1], fg_color[2]);
   g.drawString(dateStr, w/2, DATE_Y_COORD);
   last_draw_time = now;
 }

apps/matrixclock/matrixclock.settings.js

@@ -0,0 +1,40 @@
+(function(back) {
+    const PREFERENCE_FILE = "matrixclock.settings.json";
+    var settings = Object.assign({color_scheme : "theme"},
+        require('Storage').readJSON(PREFERENCE_FILE, true) || {});
+
+    console.log("loaded:" + JSON.stringify(settings));
+
+    function writeSettings() {
+        console.log("saving:" + JSON.stringify(settings));
+        require('Storage').writeJSON(PREFERENCE_FILE, settings);
+    }
+
+    // Helper method which uses int-based menu item for set of string values
+    function stringItems(startvalue, writer, values) {
+        return {
+            value: (startvalue === undefined ? 0 : values.indexOf(startvalue)),
+            format: v => values[v],
+            min: 0,
+            max: values.length - 1,
+            wrap: true,
+            step: 1,
+            onchange: v => {
+                writer(values[v]);
+                writeSettings();
+            }
+        };
+    }
+
+    // Helper method which breaks string set settings down to local settings object
+    function stringInSettings(name, values) {
+        return stringItems(settings[name], v => settings[name] = v, values);
+    }
+
+    // Show the menu
+    E.showMenu({
+        "" : { "title" : "Matrix Clock" },
+        "< Back" : () => back(),
+        "Colour": stringInSettings("color_scheme", ["theme", "black", "purple", "red", "white"])
+    });
+})

apps/matrixclock/metadata.json

@@ -1,7 +1,7 @@
 {
   "id": "matrixclock",
   "name": "Matrix Clock",
-  "version": "0.04",
+  "version": "0.05",
   "description": "inspired by The Matrix, a clock of the same style",
   "icon": "matrixclock.png",
   "screenshots": [{"url":"screenshot_matrix.png"}],
@@ -12,6 +12,8 @@
   "allow_emulator": true,
   "storage": [
     {"name":"matrixclock.app.js","url":"matrixclock.js"},
+    { "name":"matrixclock.settings.js","url":"matrixclock.settings.js"},
     {"name":"matrixclock.img","url":"matrixclock-icon.js","evaluate":true}
-  ]
+  ],
+  "data": [{"name": "matrixclock.settings.json"}]
 }