compass: eliminate flickering

apps.json

@@ -269,7 +269,7 @@
   { "id": "compass",
     "name": "Compass",
     "icon": "compass.png",
-    "version":"0.02",
+    "version":"0.03",
     "description": "Simple compass that points North",
     "tags": "tool,outdoors",
     "storage": [

apps/compass/ChangeLog

@@ -1,2 +1,3 @@
 0.01: New App!
 0.02: Show text if uncalibrated
+0.03: Eliminate flickering

apps/compass/compass.js

@@ -1,43 +1,60 @@
-g.clear();
-g.setColor(0,0.5,1);
-g.fillCircle(120,130,80,80);
-g.setColor(0,0,0);
-g.fillCircle(120,130,70,70);
+var tg = Graphics.createArrayBuffer(120,20,1,{msb:true});
+var timg = {
+  width:tg.getWidth(),
+  height:tg.getHeight(),
+  bpp:1,
+  buffer:tg.buffer
+};
+
+var ag = Graphics.createArrayBuffer(160,160,2,{msb:true});
+var aimg = {
+  width:ag.getWidth(),
+  height:ag.getHeight(),
+  bpp:2,
+  buffer:ag.buffer,
+  palette:new Uint16Array([0,0x03FF,0xF800,0x001F])
+};
+ag.setColor(1);
+ag.fillCircle(80,80,79,79);
+ag.setColor(0);
+ag.fillCircle(80,80,69,69);
 
 function arrow(r,c) {
   r=r*Math.PI/180;
   var p = Math.PI/2;
-  g.setColor(c);
-  g.fillPoly([
-    120+60*Math.sin(r), 130-60*Math.cos(r),
-    120+10*Math.sin(r+p), 130-10*Math.cos(r+p),
-    120+10*Math.sin(r+-p), 130-10*Math.cos(r-p),
+  ag.setColor(c);
+  ag.fillPoly([
+    80+60*Math.sin(r), 80-60*Math.cos(r),
+    80+10*Math.sin(r+p), 80-10*Math.cos(r+p),
+    80+10*Math.sin(r-p), 80-10*Math.cos(r-p),
     ]);
 }
 
 var oldHeading = 0;
 Bangle.on('mag', function(m) {
   if (!Bangle.isLCDOn()) return;
-  g.setFont("6x8",3);
-  g.setColor(0);
-  g.fillRect(0,0,230,40);
-  g.setColor(0xffff);
+  tg.clear();
+  tg.setFont("6x8",1);
+  tg.setColor(1);
   if (isNaN(m.heading)) {
-    g.setFontAlign(-1,-1);
-    g.setFont("6x8",2);
-    g.drawString("Uncalibrated",50,12);
-    g.drawString("turn 360° around",25,26);
+    tg.setFontAlign(0,-1);
+    tg.setFont("6x8",1);
+    tg.drawString("Uncalibrated",60,4);
+    tg.drawString("turn 360° around",60,12);
   }
   else {
-    g.setFontAlign(0,0);
-    g.setFont("6x8",3);
-    g.drawString(Math.round(m.heading),120,12);
+    tg.setFontAlign(0,0);
+    tg.setFont("6x8",2);
+    tg.drawString(Math.round(m.heading),60,12);
   }
-  g.setColor(0,0,0);
+  g.drawImage(timg,0,0,{scale:2});
+
+  ag.setColor(0);
   arrow(oldHeading,0);
   arrow(oldHeading+180,0);
-  arrow(m.heading,0xF800);
-  arrow(m.heading+180,0x001F);
+  arrow(m.heading,2);
+  arrow(m.heading+180,3);
+  g.drawImage(aimg,40,50);
   oldHeading = m.heading;
 });
 Bangle.setCompassPower(1);