support V1 and V2

recognize the device we are running on, load related background image and set fitting values

apps/TheBinWatch/app.js

@@ -26,22 +26,73 @@ var MX = 10, MY = 40 + TIME_Y_OFFSET;
 var SX = 10, SY = 80 + TIME_Y_OFFSET;
 var BT_X = 30, BT_Y = 10;
 var DX = 160, DY = 148;
+var screen_size_x = 176;
+var screen_size_y = 176;
 */
+
+const V2_X_STEP = 26;
+const V2_Y_STEP = 34;
+
+const V2_TIME_Y_OFFSET = 30;
+const V2_HX = 35;
+const V2_HY = 0 + V2_TIME_Y_OFFSET;
+const V2_MX = 10;
+const V2_MY = 40 + V2_TIME_Y_OFFSET;
+const V2_SX = 10;
+const V2_SY = 80 + V2_TIME_Y_OFFSET;
+const V2_BT_X = 30;
+const V2_BT_Y = 10;
+const V2_DX = 160;
+const V2_DY = 148;
+
+const V2_BAT_POS_X = 150;
+const V2_BAT_POS_Y = 16;
+const V2_BAT_SIZE_X = 2;
+const V2_BAT_SIZE_Y = 4;
+const V2_SCREEN_SIZE_X = 176;
+const V2_SCREEN_SIZE_Y = 176;
+const V2_BACKGROUND_IMAGE = "Background176_center.png";
+
 /* Bangle 1: 240 x 240 */
 
-var x_step = 35;
+const V1_X_STEP = 35;
-var y_step = 46;
+const V1_Y_STEP = 46;
 
-var TIME_Y_OFFSET = 41;
+const V1_TIME_Y_OFFSET = 41;
-var HX = 48, HY = 0 + TIME_Y_OFFSET;
+const V1_HX = 48;
-var MX = 14, MY = 55 + TIME_Y_OFFSET;
+const V1_HY = 0 + V1_TIME_Y_OFFSET;
-var SX = 14, SY = 110 + TIME_Y_OFFSET;
+const V1_MX = 14;
-var BT_X = 41, BT_Y = 14;
+const V1_MY = 55 + V1_TIME_Y_OFFSET;
+const V1_SX = 14;
+const V1_SY = 110 + V1_TIME_Y_OFFSET;
+const V1_BT_X = 41;
+const V1_BT_Y = 14;
 //var BT_X = 20, BT_Y = 14;
-var DX = 160, DY = 205;
+const V1_DX = 160;
+const V1_DY = 205;
 
-var BAT_POS_X = 175, BAT_POS_Y = 21;
+const V1_BAT_POS_X = 175;
-var BAT_SIZE_X = 3, BAT_SIZE_Y = 5;
+const V1_BAT_POS_Y = 21;
+const V1_BAT_SIZE_X = 3;
+const V1_BAT_SIZE_Y = 5;
+const V1_SCREEN_SIZE_X = 240;
+const V1_SCREEN_SIZE_Y = 240;
+const V1_BACKGROUND_IMAGE = "Background240_center.png";
+/* runtime settings */
+var x_step = 0;
+var y_step = 0;
+
+var time_y_offset = 0;
+var hx = 0, hy = 0;
+var mx = 0, my = 0;
+var sx = 0, sy = 0;
+var bt_x = 0, bt_y = 0;
+var dx = 0, dy = 0;
+
+var bat_pos_x, bat_pos_y, bat_size_x, bat_size_y;
+var backgroundImage = "";
+var screen_size_x = 0;
+var screen_size_y = 0;
 
 /* global variables */
 
@@ -49,14 +100,10 @@ var BAT_SIZE_X = 3, BAT_SIZE_Y = 5;
 //var screen_size_x = 176;
 //var screen_size_y = 176;
 
-var screen_size_x = 240;
-var screen_size_y = 240;
 
 var showDateTime = 2;    /* show noting, time or date */
-var cg = Graphics.createArrayBuffer(
+var cg;
-  screen_size_x,screen_size_y, 1, {msb:true});
+var cgimg;
-var cgimg = {width:screen_size_x, height:screen_size_y, bpp:1,
-             transparent:0, buffer:cg.buffer};
 
 /* local functions */
 
@@ -103,9 +150,9 @@ function drawBinary(gfx, hour, minute, second) {
   if(hour > 12) {
     hour -= 12;          /* we use for bit for hours so we only display 12 hours*/
   }
-  drawSquare(gfx, HX, HY, hour, 4);    /* set hour */
+  drawSquare(gfx, hx, hy, hour, 4);    /* set hour */
-  drawSquare(gfx, MX, MY, minute, 6);  /* set minute */
+  drawSquare(gfx, mx, my, minute, 6);  /* set minute */
-  drawSquare(gfx, SX, SY, second, 6);  /* set second */
+  drawSquare(gfx, sx, sy, second, 6);  /* set second */
 }
 
 /**
@@ -145,7 +192,7 @@ function drawDate(gfx, d) {
 
   gfx.setFontAlign(0,-1); // align right bottom
   gfx.setFont("5x9Numeric7Seg",2); /* draw the current time font */
-  gfx.drawString(dateString, gfx.getWidth() / 2, DY, false /*clear background*/);
+  gfx.drawString(dateString, gfx.getWidth() / 2, dy, false /*clear background*/);
 
 //  gfx.setFont("6x8",2);
 //   var date = locale.date(d, false);
@@ -187,7 +234,7 @@ function updateVTime() {
  * @param level: current battery level
 */
 function drawBattery(gfx, level) {
-  var pos_x = BAT_POS_X + 5 * (BAT_SIZE_X + 2);
+  var pos_x = bat_pos_x + 5 * (bat_size_x + 2);
   var stepLevel = Math.round((level + 10) / 20);
 /*  
   if(stepLevel < 2) {
@@ -198,11 +245,10 @@ function drawBattery(gfx, level) {
     gfx.setColor(4);
   }
 */ 
-  console.log("stepLevel: " + stepLevel);
   for(i = 0; i < stepLevel; i++) {
-    pos_x -= BAT_SIZE_X + 2;
+    pos_x -= bat_size_x + 2;
-    gfx.fillRect(pos_x, BAT_POS_Y, 
+    gfx.fillRect(pos_x, bat_pos_y, 
-                 pos_x + BAT_SIZE_X, BAT_POS_Y + BAT_SIZE_Y);
+                 pos_x + bat_size_x, bat_pos_y + bat_size_y);
   }
 }
 
@@ -215,11 +261,66 @@ function drawBattery(gfx, level) {
  * @param level: current battery level
 */
 function drawBT(status) {
+}
+function setRuntimeValues(resolution) {
+  if(240 == resolution) {
+    x_step = V1_X_STEP;
+    y_step = V1_Y_STEP;
+
+    time_y_offset = V1_TIME_Y_OFFSET;
+    hx = V1_HX;
+    hy = V1_HY;
+    mx = V1_MX;
+    my = V1_MY;
+    sx = V1_SX;
+    sy = V1_SY;
+    bt_x = V1_BT_X;
+    bt_y = V1_BT_Y;
+    dx = V1_DX;
+    dy = V1_DY;
+
+    screen_size_x = V1_SCREEN_SIZE_X;
+    screen_size_y = V1_SCREEN_SIZE_Y;
+    backgroundImage = V1_BACKGROUND_IMAGE;
+
+    // TODO: set battery stuff
+  } else {
+    x_step = V2_X_STEP;
+    y_step = V2_Y_STEP;
+
+    time_y_offset = V2_TIME_Y_OFFSET;
+
+    hx = V2_HX;
+    hy = V2_HY;
+    mx = V2_MX;
+    my = V2_MY;
+    sx = V2_SX;
+    sy = V2_SY;
+
+    bt_x = V2_BT_X;
+    bt_y = V2_BT_Y;
+
+    dx = V2_DX;
+    dy = V2_DY;
+
+    screen_size_x = V2_SCREEN_SIZE_X;
+    screen_size_y = V2_SCREEN_SIZE_Y;
+    backgroundImage = V2_BACKGROUND_IMAGE;
+    // TODO: set battery stuff
+  }
+  cg = Graphics.createArrayBuffer(
+    screen_size_x,screen_size_y, 1, {msb:true});
+  
+  cgimg = {width:screen_size_x, height:screen_size_y, bpp:1,
+             transparent:0, buffer:cg.buffer};
+
 }
 var hour = 0, minute = 1, second = 50;
 var batVLevel = 0;
-function draw() {
 
+
+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();
 //  gfx2(hour, minute, second);
@@ -237,7 +338,6 @@ function draw() {
     default:
       /* do nothing */
   }
-  console.log("BatLevel: " + batVLevel);
   drawBattery(cg, batVLevel /*E.getBattery()*/);
   drawBT(1);
   
@@ -248,17 +348,25 @@ function draw() {
   updateVTime();
   g.clear();
   g.drawImages([{image:cgimg},
-//             {image:require("Storage").read("Background176_center.png")},
+             {image:require("Storage").read(backgroundImage)},
-             {image:require("Storage").read("Background240_center.png")},
+             { 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")},
             ]);
+  const millis = d.getMilliseconds();
+  setTimeout(draw, 1000-millis);
 }
 
-g.clear();
+// Show launcher when button pressed
-setInterval(draw, 1000);
+Bangle.setUI("clock");
-var x_size = g.getWidth();
+setRuntimeValues(g.getWidth());
-console.log("Startup: X-W = " + x_size);
+Bangle.on("lcdPower", function(on) {
-console.log("BatLevel: " + E.getBattery());
+  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();