several updates on main app:

- changed positions of battery, BT, mask
- removed all setColor calls
- updated background image 176
- changed bt icon
- added month names as gfx

apps/TheBinWatch/app.js

@@ -9,33 +9,56 @@
 ****************************************************/
 
 /* reuqirements */
-var locale = require("locale");
+require("Font7x11Numeric7Seg").add(Graphics);
-require("Font5x9Numeric7Seg").add(Graphics);
+require("Font5x7Numeric7Seg").add(Graphics);
 
 
 /* constants and definitions */
 
 /* Bangle 2: 176 x 176 */
 
+/* month images */
+
+var month = [
+  /* JAN */ {width : 53, height : 24, bpp : 1, buffer : require("heatshrink").decompress(atob("AAMf/0D8AFBkM/9EvwMAgcM/3B30YgE4uEOh354EB4eAuFz90Ah0cgeDx9wgFw8Ecjk7wEDw8A8AIBgEcnEHg4IBgFh4EYnEDHYMF/8AwBID/BODgN/4EgAoI0BgODwExGgkDzg0FAII0D88A8PAnAIBAIMOgPBBAPAiBpCgPAQIOAmFwg0P/B5BwcAiE/JYYAHA"))},
+  /* FEB */ {width : 51, height : 24, bpp : 1, buffer : require("heatshrink").decompress(atob("v/8n/+g/+if/hP/wM/8c/4Of8Ez/FwgE4gEHgFOAYUA8Ed4ADBgEcge4AYMAgeAu4DCgFwhwQBEIMOgPcAYMAgPAjN/4G/8EX/kf/EP/kB/+F/8C/+Ar/xGQkBGTE7wADBMIMHMotMgEGv+A7/hEYOf/EH/hvBh6FBIIKYFA"))},
+  /* MAR */ {width : 52, height : 23, bpp : 1, buffer : require("heatshrink").decompress(atob("v/4j/+gf/hP/gV/6FP/HP8kz/cGv8OgHDwFwuEE8McnEHg8A905BgcO8ecBiM4BgMwuEGoeEi/8gX/wE4gH/4Ef/AMFx0QDIcA8BADnEOgIzCufABgk+Bglx+AMEh+OBgdwvnghk4gcGgfsgFDgEQoEeSgvg"))},
+  /* APR */ {width : 52, height : 23, bpp : 1, buffer : require("heatshrink").decompress(atob("v/4j/4gf/hP/oV/4FP/HP9kz/EGv8OgPDwEguEE8EcnEHg8A9wMCuFwhwMTgAMBmFwg1f+EX/kC/+D/8A//AJIIMFxwZCgFwgAmCgEHnBNDgFz4AMEnwMEuPwBgkPxwMDuF88EMBgMGgfsgFDRgNAjyUF8A="))},
+  /* MAY */ {width : 52, height : 24, bpp : 1, buffer : require("heatshrink").decompress(atob("v/4j/+AoMJ/8Cv/QAwPP8kz/cEgEugHDwFwsEG8McnEHg8A905BgVwh3jzgMRnAMBmAMBoeEi/8BgNgnEA//Ah/4BgcB/+OiAZCBgPgIARTB90BGYUAhwMahk4gYMBpkAocAiEP+CSDIAOAAwYMB"))},
+  /* JUN */ {width : 53, height : 24, bpp : 1, buffer : require("heatshrink").decompress(atob("AAcD8ADBkMAhEvwIJBhkA4O+jEAnFwh0O/PAgPDwFwufugEOjkDwePuEAuHgjkcneAgeHgHgBAMAjk4g8HBAMAsPAjE4gY7BggCBwBPLkACBGgMBweAmI0EgecGgoBBGgfngHh4E4BAIBBh0B4IIB4EQmEEBAPA/0An5qBg0P/ED/xNBiAKBh6PCAAw="))},
+  /* JUL */ {width : 53, height : 24, bpp : 1, buffer : require("heatshrink").decompress(atob("AA8hgEImAFBgcMgHB4AGBnFwh0OAoMB4eAuFwAwMOjkDweAAwNw8EcjggCw8A8HgAwMcnEHg40CsPAjE4AwUEAQIgCABMgGgcBGgMBGgo/BGggKBGgYBB8PAnA0BBQMOgJpC4EQmEENIX+gE/wFn/EP/ED/0Cv/gBQMP8EP/5QGA"))},
+  /* AUG */ {width : 52, height : 24, bpp : 1, buffer : require("heatshrink").decompress(atob("n/8AocE/+gAgMP/1n+0QgGA//HgHhwEYl/wuEOjkDw8Ag4MB4E4uEABilhBgcv/EcgOCgEB/+AwBBB/AMBAgMCj/ngFgAwNw/wmCgImBBgIzDhwzFBikGhkBgUAs0AkEf4EH+A3Bgf+gBLBAwIMD"))},
+  /* SEP */ {width : 51, height : 23, bpp : 1, buffer : require("heatshrink").decompress(atob("h/4j//g/+gf/wn/4M/8ABB5/wmf4mEAjkAg8Ap0AgeAgHgjvAgFwBwMD3EAhwOCu8AgIOCh3ggE4BwMB7gjCBwMYv/Ar/wi/8j/8IYMB/+BIYIODDwIyCLIMHGQYGB8JBDB4IyCAoMDw5BDB4JBDgEEMoZ6Cn/A8A6B8FP/kYgEf/EH/4eCA"))},
+  /* OCT */ {width : 50, height : 23, bpp : 1, buffer : require("heatshrink").decompress(atob("h/gg/+j//w/8gf/h//+H+gF/wP//OAkHADAXgjlwAoU4g8cAgMYh0B44pCgeAuIYBgfADAnwnEDDAUcghCDgRMIsACBkAYFGKZKDngYFgJjBwAYCPgX4DAMHPgQYBgB8C8EGgAA="))},
+  /* NOV */ {width : 51, height : 24, bpp : 1, buffer : require("heatshrink").decompress(atob("vkAgf4AoMX4GA/+ABIN8mEP8EggP350MgMGgF+vvDwFw8Ef4+4uEOjgiBu8OgIOBv8A8PAnFwEQMcnEHBwP8gOHgFh4EdHYNAgEQgJLFggFEhPAjFwg0cg4jDGQPnGQk8GQkPI4IyB8PDKwYOB+BWBMoMHnkOgHAn+A98BwEIh/4jnAHgX+gaGBAAcggAA=="))},
+  /* DEC */ {width : 49, height : 23, bpp : 1, buffer : require("heatshrink").decompress(atob("v/gj//gP/5/4iYFC2f4hn/CAOcgMHgEBwEOgPDwEB4AJB8PAgHggeAuHggFwBoM4uEAnANBjgDBjgNBgwDBh0AiEAgowBAAQ6BwEAggFBv/BwAwBsIwWhwwDnEHAYIiBjhhDgEN/0Dn/Aj/hO4M/+Ef/JABv/8g/+A=="))},
+  /* MAI */ {width : 44, height : 23, bpp : 1, buffer : require("heatshrink").decompress(atob("v/4j/+gEJ/8Cv/QgnP8kz/cA50A4eAuEc8McnEHgPOnIKD8ecBR04BQMwhlDwkX/kAoE4gH/4EABQlOiAVD8A2EgIrDBS0MnEDgHMGQMAiEEPwo="))},
+  /* OKT */ {width : 51, height : 24, bpp : 1, buffer : require("heatshrink").decompress(atob("g/wAQMP//B/8DgPh//8j/AuF8n//jECh0fDAUA8PH4AGB8EcnIhBsEcgeHvkAj0DwFw98AgYjBh0dDAN4h0A4eAEgQDBl/4gFAE4MD/5OE3/ggIyBhk4gcAuAyCBIIyDIIIyDAgOAGQMBGQNwh8B4E4BwMB8BlCBIM8gF/AgMYg+Aj/wmA3B+EB/hBChiYGA"))},
+  /* DEZ */ {width : 51, height : 23, bpp : 1, buffer : require("heatshrink").decompress(atob("n/wh//w//xP/gV/8F//Of4Fn/EH/04gUODAUHgHh4AFBnHgjk4BYUcgeHAoMB8eAuHgAwN4uEOjgFBh4jB4eAgED4ADBl/4gFwB4MD/4DBgQCB3/gC4PghgyBgPAGQl4gYyDjwgBGQQrBh0BGQVwDQM4F4MMLIJlEg3/gOfPAPgn/gk/+j/+h/8IoPh//gA="))}
+];
+
+var imgSquid = {width : 88, height : 26, bpp : 1, buffer : require("heatshrink").decompress(atob("gE/AYUYgEH////0B//gBQM8BQgDB/AKHh/A/gKBvwKBAgMOj8AnwKHBAIMBgH/BQgmCAoPnBQl4AoOAgPnwAKDuEAgYKB4YKIgfD4AKDMAMB4EDwIKIg+B8AKIgAKIh8A+AKHh0AuAKHj0AvBMG4EcgE4K458Bnh4HnEAjiOHBwMeBQpKBEgMOXQ/wBwIKDaAZQBg4KDcwT0BAAOHfgoKHgE/wDaBAAL8DA="))};
+
 const V2_X_STEP = 26;
 const V2_Y_STEP = 34;
 
-const V2_TIME_Y_OFFSET = 30;
+const V2_TIME_Y_OFFSET = 8;
-const V2_HX = 35;
+const V2_HX = 36;
 const V2_HY = 0 + V2_TIME_Y_OFFSET;
 const V2_MX = 10;
-const V2_MY = 40 + V2_TIME_Y_OFFSET;
+const V2_MY = 51 + V2_TIME_Y_OFFSET;
 const V2_SX = 10;
-const V2_SY = 80 + V2_TIME_Y_OFFSET;
+const V2_SY = 95 + V2_TIME_Y_OFFSET;
-const V2_BT_X = 30;
+const V2_BT_X = 135;
-const V2_BT_Y = 10;
+const V2_BT_Y = 20;
-const V2_DX = 160;
+const V2_DX = 100;
-const V2_DY = 148;
+const V2_DY = 141;
+
+const V2_BAT_POS_X = 21;
+const V2_BAT_POS_Y = 40;
+const V2_BAT_SIZE_X = 13;
+const V2_BAT_SIZE_Y = 2;
 
-const V2_BAT_POS_X = 127;
-const V2_BAT_POS_Y = 15;
-const V2_BAT_SIZE_X = 2;
-const V2_BAT_SIZE_Y = 3;
 const V2_SCREEN_SIZE_X = 176;
 const V2_SCREEN_SIZE_Y = 176;
 const V2_BACKGROUND_IMAGE = "Background176_center.png";
@@ -132,10 +155,7 @@ function drawSquare(gfx, x, y, data, numOfBits) {
  * @param s: seconds
 */
 function drawBinary(gfx, hour, minute, second) {
-  gfx.clear(1);
+  gfx.clear(0);
-  gfx.setColor(bg_color);
-  gfx.fillRect(0, 0, screen_size_x, screen_size_y);
-  gfx.setColor(fg_color);
 
   if(hour > 12) {
     hour -= 12;          /* we use for bit for hours so we only display 12 hours*/
@@ -159,10 +179,8 @@ function drawTime(gfx, h, m, s) {
   var time = (" "+h).substr(-2) + ":" + ("0"+m).substr(-2)+ ":" + ("0"+s).substr(-2);
 
   gfx.setFontAlign(0,-1); // align right bottom
-  gfx.setFont("5x9Numeric7Seg", 2);
+  gfx.setFont("7x11Numeric7Seg", 2);
-  gfx.setColor(fg_color);
+  gfx.drawString(time, gfx.getWidth() / 2, dy + 1, false /*clear background*/);
-
-  gfx.drawString(time, gfx.getWidth() / 2, dy, false /*clear background*/);
 }
 
 /**
@@ -173,18 +191,20 @@ function drawTime(gfx, h, m, s) {
  * @param gfx: graphic object to use
  * @param d: date object
 */
-
+var vMonth = 0;
 function drawDate(gfx, d) {
   var dateString = ""
-    + ("0" + d.getDate()).substr(-2) + " " 
+    + ("0" + d.getDate()).substr(-2) 
-    + ("0" + d.getMonth()).substr(-2) + " "
+//    + " " 
-    + ("0" + d.getFullYear()).substr(-4);
+//    + ("0" + d.getMonth()).substr(-2) 
+//    + " "
+//    + ("0" + d.getFullYear()).substr(-2)
+  ;
 
-  gfx.setFontAlign(0,-1); // align right bottom
+  gfx.setFontAlign(-1,-1); // align right bottom
-  gfx.setFont("5x9Numeric7Seg",2); /* draw the current time font */
+  gfx.setFont("7x11Numeric7Seg",2); /* draw the current time font */
-  gfx.setColor(fg_color);
+  gfx.drawString(dateString, dx, dy + 1, false /* don't clear background*/);
-
+  gfx.drawImage(month[d.getMonth()], 40, dy);
-  gfx.drawString(dateString, gfx.getWidth() / 2, dy, false /* don't clear background*/);
 }
 
 function toggleDateTime() {
@@ -192,10 +212,13 @@ function toggleDateTime() {
   if(showDateTime > 2){
     showDateTime = 0;
   }
-  draw();
 }
 
 function updateVTime() {
+  vMonth++;
+  if(vMonth >= 12 + 3) {
+    vMonth = 0;
+  }
   second++;
   if(second > 59) {
     second = 0;
@@ -219,23 +242,13 @@ function updateVTime() {
  * @param level: current battery level
 */
 function drawBattery(gfx, level) {
-  var pos_x = bat_pos_x + 5 * (bat_size_x + 2);
+  var pos_y = bat_pos_y - 1;
   var stepLevel = Math.round((level + 10) / 20);
-/*  
-  if(stepLevel < 2) {
-    gfx.setColor(2);
-  } else if(stepLevel < 4) {
-    gfx.setColor(3);
-  } else {
-    gfx.setColor(4);
-  }
-*/ 
-  gfx.setColor(fg_color);
 
   for(i = 0; i < stepLevel; i++) {
-    pos_x -= bat_size_x + 2;
+    pos_y -= bat_size_y + 2;
-    gfx.fillRect(pos_x, bat_pos_y, 
+    gfx.fillRect(bat_pos_x, pos_y, 
-                 pos_x + bat_size_x, bat_pos_y + bat_size_y);
+                 bat_pos_x + bat_size_x, pos_y + bat_size_y);
   }
 }
 
@@ -247,7 +260,10 @@ function drawBattery(gfx, level) {
  * @param gfx: graphic object
  * @param level: current battery level
 */
-function drawBT(status) {
+function drawBT(gfx, status) {
+  if(!status) {
+    gfx.drawImage(require("Storage").read("bt-icon.png"), bt_x, bt_y);
+  }
 }
 function setRuntimeValues(resolution) {
   if(240 == resolution) {
@@ -269,14 +285,14 @@ function setRuntimeValues(resolution) {
     screen_size_x = V1_SCREEN_SIZE_X;
     screen_size_y = V1_SCREEN_SIZE_Y;
     backgroundImage = V1_BACKGROUND_IMAGE;
-    bg_color = V1_BG_COLOR;
-    fg_color = V1_FG_COLOR;
 
     bat_pos_x = V1_BAT_POS_X;
     bat_pos_y = V1_BAT_POS_Y;
     bat_size_x = V1_BAT_SIZE_X;
     bat_size_y = V1_BAT_SIZE_Y;
 
+	setWatch(toggleDateTime, BTN1, { repeat : true, edge: "falling"});
+
   } else {
     x_step = V2_X_STEP;
     y_step = V2_Y_STEP;
@@ -299,13 +315,13 @@ function setRuntimeValues(resolution) {
     screen_size_x = V2_SCREEN_SIZE_X;
     screen_size_y = V2_SCREEN_SIZE_Y;
     backgroundImage = V2_BACKGROUND_IMAGE;
-    bg_color = V2_BG_COLOR;
-    fg_color = V2_FG_COLOR;
 
     bat_pos_x = V2_BAT_POS_X;
     bat_pos_y = V2_BAT_POS_Y;
     bat_size_x = V2_BAT_SIZE_X;
     bat_size_y = V2_BAT_SIZE_Y;
+
+    Bangle.on('swipe', function(direction) { toggleDateTime(direction);});
 }
   cg = Graphics.createArrayBuffer(
     screen_size_x,screen_size_y, 1, {msb:true});
@@ -319,12 +335,11 @@ var batVLevel = 20;
 
 
 function draw() {
-  if (!Bangle.isLCDOn()) {return;} // no drawing, also no new update scheduled 
   var d = new Date();
   var h = d.getHours(), m = d.getMinutes(), s = d.getSeconds();
+  g.reset();
 
   drawBinary(cg, h, m, s);
-  cg.setColor(fg_color);
 
   switch(showDateTime) {
     case 1:
@@ -334,11 +349,9 @@ function draw() {
       drawDate(cg, d);
       break;
     default:
-      /* do nothing */
+      cg.drawImage(imgSquid, cg.getWidth() / 2 - 44, dy);
   }
-  cg.setColor(fg_color);
+  drawBattery(cg, /*batVLevel*/  E.getBattery());
-  drawBattery(cg, batVLevel /*E.getBattery()*/);
-  drawBT(1);
 
   batVLevel += 2;
   if(batVLevel > 100) {
@@ -348,24 +361,19 @@ function draw() {
   g.clear();
   g.drawImages([{image:cgimg},
             {image:require("Storage").read(backgroundImage)},
-             { x:bt_x, y:bt_y, rotate: 0, image:require("Storage").read("bt-icon.png")},
+//             { x:bt_x, y:bt_y, rotate: 0, image:require("Storage").read("bt-icon.png")},
             ]);
+  drawBT(g, NRF.getSecurityStatus().connected);
+//  Bangle.drawWidgets();
   const millis = d.getMilliseconds();
   setTimeout(draw, 1000-millis);
+ // Bangle.loadWidgets();
 }
 
 // Show launcher when button pressed
 Bangle.setUI("clock");
 setRuntimeValues(g.getWidth());
-Bangle.on("lcdPower", function(on) {
-  if (on) {
-    draw();
-  }
-});
 g.reset().clear();
 Bangle.loadWidgets();
 Bangle.drawWidgets();
-//setInterval(draw, 1000);
-//var x_size = g.getWidth();
-setWatch(toggleDateTime, BTN1, { repeat : true, edge: "falling"});
 draw();