Fix compass and compass widget

apps.json

@@ -537,11 +537,11 @@
   {
     "id": "compass",
     "name": "Compass",
-    "version": "0.03",
+    "version": "0.04",
     "description": "Simple compass that points North",
     "icon": "compass.png",
     "tags": "tool,outdoors",
-    "supports": ["BANGLEJS"],
+    "supports": ["BANGLEJS","BANGLEJS2"],
     "storage": [
       {"name":"compass.app.js","url":"compass.js"},
       {"name":"compass.img","url":"compass-icon.js","evaluate":true}
@@ -3382,7 +3382,7 @@
     "icon": "widget.png",
     "type": "widget",
     "tags": "widget,compass",
-    "supports": ["BANGLEJS"],
+    "supports": ["BANGLEJS","BANGLEJS2"],
     "readme": "README.md",
     "storage": [
       {"name":"widcom.wid.js","url":"widget.js"}

apps/compass/ChangeLog

@@ -1,3 +1,4 @@
 0.01: New App!
 0.02: Show text if uncalibrated
 0.03: Eliminate flickering
+0.04: Fix for Bangle.js 2 and themes

apps/compass/compass.js

@@ -1,60 +1,72 @@
-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 W = g.getWidth();
+var M = W/2; // middle of screen
+// Angle buffer
+var AGS = W > 200 ? 160 : 120; // buffer size
+var AGM = AGS/2; // midpoint/radius
+var AGH = AGM-10; // hand size
+var ag = Graphics.createArrayBuffer(AGS,AGS,2,{msb:true});
 var aimg = {
   width:ag.getWidth(),
   height:ag.getHeight(),
   bpp:2,
   buffer:ag.buffer,
-  palette:new Uint16Array([0,0x03FF,0xF800,0x001F])
+  palette:new Uint16Array([
+    g.theme.bg,
+    g.toColor("#07f"),
+    g.toColor("#f00"),
+    g.toColor("#00f")])
 };
-ag.setColor(1);
-ag.fillCircle(80,80,79,79);
-ag.setColor(0);
-ag.fillCircle(80,80,69,69);
+ag.setColor(1).fillCircle(AGM,AGM,AGM-1,AGM-1);
+ag.setColor(0).fillCircle(AGM,AGM,AGM-11,AGM-11);
 
 function arrow(r,c) {
   r=r*Math.PI/180;
   var p = Math.PI/2;
-  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),
+  ag.setColor(c).fillPoly([
+    AGM+AGH*Math.sin(r), AGM-AGH*Math.cos(r),
+    AGM+10*Math.sin(r+p), AGM-10*Math.cos(r+p),
+    AGM+10*Math.sin(r-p), AGM-10*Math.cos(r-p),
   ]);
 }
 
+var wasUncalibrated = false;
 var oldHeading = 0;
 Bangle.on('mag', function(m) {
   if (!Bangle.isLCDOn()) return;
-  tg.clear();
-  tg.setFont("6x8",1);
-  tg.setColor(1);
+  g.reset();
   if (isNaN(m.heading)) {
-    tg.setFontAlign(0,-1);
-    tg.setFont("6x8",1);
-    tg.drawString("Uncalibrated",60,4);
-    tg.drawString("turn 360° around",60,12);
+    if (!wasUncalibrated) {
+      g.clearRect(0,24,W,48);
+      g.setFontAlign(0,-1).setFont("6x8");
+      g.drawString("Uncalibrated\nturn 360° around",M,24+4);
+      wasUncalibrated = true;
     }
-  else {
-    tg.setFontAlign(0,0);
-    tg.setFont("6x8",2);
-    tg.drawString(Math.round(m.heading),60,12);
+  } else {
+    if (wasUncalibrated) {
+      g.clearRect(0,24,W,48);
+      wasUncalibrated = false;
     }
-  g.drawImage(timg,0,0,{scale:2});
+    g.setFontAlign(0,0).setFont("6x8",3);
+    var y = 36;
+    g.clearRect(M-40,y,M+40,y+24);
+    g.drawString(Math.round(m.heading),M,y,true);
+  }
+
 
   ag.setColor(0);
   arrow(oldHeading,0);
   arrow(oldHeading+180,0);
   arrow(m.heading,2);
   arrow(m.heading+180,3);
-  g.drawImage(aimg,40,50);
+  g.drawImage(aimg,
+              (W-ag.getWidth())/2,
+              g.getHeight()-(ag.getHeight()+4));
   oldHeading = m.heading;
 });
+
+g.clear();
+Bangle.loadWidgets();
+Bangle.drawWidgets();
 Bangle.setCompassPower(1);
+Bangle.setLCDPower(1);
+Bangle.setLCDTimeout(0);

apps/widcom/ChangeLog

@@ -0,0 +1,3 @@
+0.02: Works with light theme
+      Doesn't drain battery by updating every 2 secs
+      Fix alignment

apps/widcom/widget.js

@@ -1,30 +1,17 @@
 (function(){
-  //var img = E.toArrayBuffer(atob("FBSBAAAAAAAAA/wAf+AP/wH/2D/zw/w8PwfD9nw+b8Pg/Dw/w8/8G/+A//AH/gA/wAAAAAAA"));
-  //var img = E.toArrayBuffer(atob("GBiBAAB+AAP/wAeB4A4AcBgAGDAADHAADmABhmAHhsAfA8A/A8BmA8BmA8D8A8D4A2HgBmGABnAADjAADBgAGA4AcAeB4AP/wAB+AA=="));
-  var img = E.toArrayBuffer(atob("FBSBAAH4AH/gHAODgBwwAMYABkAMLAPDwPg8CYPBkDwfA8PANDACYABjAAw4AcHAOAf+AB+A"));        
+  var cp = Bangle.setCompassPower;
+  Bangle.setCompassPower = () => {
+    cp.apply(Bangle, arguments);
+    WIDGETS.compass.draw();
+  };
 
-  function draw() {
+  WIDGETS.compass={area:"tr",width:24,draw:function() {
     g.reset();
     if (Bangle.isCompassOn()) {
-      g.setColor(1,0.8,0);     // on = amber
+      g.setColor(g.theme.dark ? "#FC0" : "#F00");
     } else {
-      g.setColor(0.3,0.3,0.3); // off = grey
+      g.setColor(g.theme.dark ? "#333" : "#CCC");
     }
-    g.drawImage(img, 10+this.x, 2+this.var);
-  }
-
-  var timerInterval;
-  Bangle.on('lcdPower', function(on) {
-    if (on) {
-      WIDGETS.compass.draw();
-      if (!timerInterval) timerInterval = setInterval(()=>WIDGETS.compass.draw(), 2000);
-    } else {
-      if (timerInterval) {
-        clearInterval(timerInterval);
-        timerInterval = undefined;
-      }
-    }
-  });
-
-  WIDGETS.compass={area:"tr",width:24,draw:draw};
+    g.drawImage(atob("FBSBAAH4AH/gHAODgBwwAMYABkAMLAPDwPg8CYPBkDwfA8PANDACYABjAAw4AcHAOAf+AB+A"), 2+this.x, 2+this.var);
+  }};
 })();