reduced flicker in walkersclock

apps/walkersclock/app.js

@@ -46,6 +46,10 @@ let gpsPowerState = false;
 let infoMode = INFO_NONE;
 let functionMode = FN_MODE_OFF;
 let gpsDisplay = GDISP_OS;
+let prevInfoStr = "clear";
+let prevActivityStr = "clear";
+let prevSteps = "clear";
+let clearActivityArea = true;
 
 let last_steps = undefined;
 let firstPress = 0;
@@ -66,7 +70,8 @@ function drawTime() {
   var time = da[4].substr(0,5);
 
   g.reset();
-  g.clearRect(0,24,239,239);
+  g.clearRect(0,Y_TIME, 239, Y_ACTIVITY - 1);
+  
   g.setColor(1,1,1);  // white
   g.setFontAlign(0, -1);
 
@@ -81,15 +86,22 @@ function drawTime() {
   g.drawString(time, g.getWidth()/2, Y_TIME);
 }
 
-function drawSteps() { 
+function drawActivity() {
+  var steps = getSteps();
+  if (!gpsPowerState && steps != prevSteps)
+    clearActivityArea = true;
+
+  prevSteps = steps;
+  
+  if (clearActivityArea) {
+    g.clearRect(0, Y_ACTIVITY, 239, Y_MODELINE - 1);
+    clearActivityArea = false;
+  }
+  
+  if (!gpsPowerState) {
     g.setColor(0,255,0);  // green
     g.setFont("Vector", 60);
     g.drawString(getSteps(), g.getWidth()/2, Y_ACTIVITY);
-}
-
-function drawActivity() {
-  if (!gpsPowerState) {
-    drawSteps();
     return;
   }
   
@@ -116,6 +128,7 @@ function drawActivity() {
     let os = OsGridRef.latLongToOsGrid(last_fix);
     let ref = to_map_ref(6, os.easting, os.northing);
     let speed;
+    let activityStr = "";
     
     if (age < 0) age = 0;
     g.setFontVector(40);
@@ -123,18 +136,20 @@ function drawActivity() {
 
     switch(gpsDisplay) {
     case GDISP_OS:
-      g.drawString(ref, 120, Y_ACTIVITY, true);
+      activityStr = ref;
       break;
     case GDISP_SPEED:
       speed = last_fix.speed;
       speed = speed.toFixed(1);
-      g.drawString(speed + "kph", 120, Y_ACTIVITY, true);
+      activityStr = speed + "kph" 
       break;
     case GDISP_ALT:
-      g.drawString(last_fix.alt + "m" , 120, Y_ACTIVITY, true);
+      activityStr = last_fix.alt + "m";
       break;
     }
 
+    g.clearRect(0, Y_ACTIVITY, 239, Y_MODELINE - 1);
+    g.drawString(activityStr, 120, Y_ACTIVITY);
     g.setFont("6x8",2);
     g.setColor(1,1,1); 
     g.drawString(age, 120, Y_ACTIVITY + 46);
@@ -174,8 +189,6 @@ function drawInfo() {
   let str = "";
   let col = 0x07E0; // green
 
-  //console.log("drawInfo(), infoMode=" + infoMode + " funcMode=" + functionMode);
-
   switch(functionMode) {
   case FN_MODE_OFF:
     break;
@@ -217,7 +230,13 @@ function drawInfo() {
   drawModeLine(str,col);
 }
 
-function drawModeLine(str, col) {
+function drawModeLine(str,col) {
+  // check if we need to draw, avoid flicker
+  if (str == prevInfoStr)
+    return;
+
+  prevInfoStr = str;
+  drawModeLine(str,col);
   g.setFont("6x8", 3);
   g.setColor(col);
   g.fillRect(0, Y_MODELINE - 3, 239, Y_MODELINE + 25);
@@ -249,7 +268,7 @@ function changeInfoMode() {
     }
     functionMode = FN_MODE_OFF;
     infoMode = INFO_NONE;
-    //drawInfo();
+    clearActivityArea = true;
     return;
     
   case FN_MODE_GDISP:
@@ -281,7 +300,8 @@ function changeInfoMode() {
   default:
     infoMode = INFO_NONE;
   }
-  //drawInfo();
+  
+  clearActivityArea = true;
 }
 
 function changeFunctionMode() {
@@ -331,11 +351,16 @@ function resetLastFix() {
 function processFix(fix) {
   last_fix.time = fix.time;
 
-  if (gpsState == GPS_TIME)
+  if (gpsState == GPS_TIME) {
     gpsState = GPS_SATS;
+    clearActivityArea = true;
+  }
   
   if (fix.fix) {
-    if (!last_fix.fix) Bangle.buzz(); // buzz on first position
+    if (!last_fix.fix) {
+      Bangle.buzz(); // buzz on first position
+      clearActivityArea = true;
+    }
     gpsState = GPS_RUNNING;
     last_fix = fix;
   }
@@ -508,7 +533,13 @@ drawAll();
 Bangle.on('lcdPower',function(on) {
   functionMode = FN_MODE_OFF;
   infoMode = INFO_NONE;
-  if (on) drawAll();
+  if (on) {
+    prevInfoStr = "on"; // forces are redraw
+    drawAll();
+  } else {
+    prevInfoStr = "off"; // forces are redraw
+    drawInfo();
+  }
 });
 
 var click = setInterval(onTick, 5000);