Add support for 'customConnect' so custom app loaders can tailor what they upload based on the device

README.md

@@ -237,6 +237,11 @@ and which gives information about the app for the Launcher.
                               // like this one with 'storage','name' and 'id' set up
                               // see below for more info
 
+  "customConnect": true,      // if supplied, ensure we are connected to a device
+                              // before the "custom.html" iframe is loaded. An
+                              // onInit function in "custom.html" is then called
+                              // with info on the currently connected device.                 
+
   "interface": "interface.html",   // if supplied, apps/interface.html is loaded in an
                               // iframe, and it may interact with the connected Bangle
                               // to retrieve information from it

apps.json

@@ -814,8 +814,8 @@
     "icon": "app.png",
     "version":"0.02",
     "description": "Use this to upload a customised QR code to Bangle.js",
-    "tags": "qrcode",
-    "custom": "custom.html",
+    "tags": "qrcode,b2",
+    "custom": "custom.html", "customConnect":true,
     "storage": [
       {"name":"qrcode.app.js"},
       {"name":"qrcode.img","url":"app-icon.js","evaluate":true}
@@ -1520,7 +1520,7 @@
     "version":"0.08",
     "description": "[BETA] Loads map tiles from OpenStreetMap onto your Bangle.js and displays a map of where you are",
     "tags": "outdoors,gps,b2",
-    "custom": "custom.html",
+    "custom": "custom.html", "customConnect":true,
     "storage": [
       {"name":"openstmap","url":"openstmap.js"},
       {"name":"openstmap.app.js","url":"app.js"},

apps/openstmap/custom.html

@@ -32,7 +32,7 @@
     <div id="map">
     </div>
     <div id="controls">
-      <div style="display:inline-block;text-align:center;vertical-align: top;"> <input type="checkbox" id="3bit"></input><br/><span>3 bit</span></div>
+      <div style="display:inline-block;text-align:center;vertical-align: top;" id="3bitdiv"> <input type="checkbox" id="3bit"></input><br/><span>3 bit</span></div>
       <button id="getmap" class="btn btn-primary">Get Map</button><br/>
       <canvas id="maptiles" style="display:none"></canvas>
       <div id="uploadbuttons" style="display:none"><button id="upload" class="btn btn-primary">Upload</button>
@@ -72,6 +72,16 @@ TODO:
       });
       // Could optionally overlay trails: https://wiki.openstreetmap.org/wiki/Tiles
 
+      function onInit(device) {
+        if (device && device.info && device.info.g) {
+          // On 3 bit devices, don't even offer the option. 3 bit is the only way
+          if (device.info.g.bpp==3) {
+            document.getElementById("3bit").checked = true;
+            document.getElementById("3bitdiv").style = "display:none";
+          }
+        }
+      }
+
       var mapFiles = [];
       tileLayer.addTo(map);
 

apps/qrcode/custom.html

@@ -34,6 +34,23 @@
     <script src="../../core/lib/imageconverter.js"></script>
 
     <script>
+      var targetWidth = 200;
+      var targetHeight = 200;
+
+      function onInit(device) {
+        if (device && device.info && device.info.g) {
+          targetWidth = device.info.g.width - 20;
+          targetHeight = device.info.g.height - 20;
+        }
+        qrcode = new QRCode("qrcode", {
+          text: document.getElementById("url").value,
+          width: targetWidth,
+          height: targetHeight,
+          colorDark : "#000000",
+          colorLight : "#ffffff",
+        });
+      }
+
       //https://github.com/evgeni/qifi/blob/gh-pages/index.html#L168
       function escapeString (string) {
         var to_escape = ['\\', ';', ',', ':', '"'];
@@ -70,13 +87,7 @@
             qrcode.makeCode(document.getElementById("url").value);
         }
       }
-      var qrcode = new QRCode("qrcode", {
-        text: document.getElementById("url").value,
-        width: 200,
-        height: 200,
-        colorDark : "#000000",
-        colorLight : "#ffffff",
-      });
+      var qrcode;
 
       document.getElementById("url").addEventListener("change", refreshQRCode);
       document.getElementById("ssid").addEventListener("change",refreshQRCode);
@@ -93,13 +104,11 @@
         var img = imageconverter.canvastoString(document.getElementsByTagName("canvas")[0],{mode:"1bit",output:"string",compression:true});
         var app = `var img = ${img};
 var content = ${JSON.stringify(content)};
-g.setColor(1,1,1);
-g.fillRect(0,0,239,239);
-g.drawImage(img,20,20);
-g.setFontAlign(0,0);
-g.setFont("6x8");
-g.setColor(0,0,0);
-g.drawString(content,120,230);
+g.clear(1).setColor(1,1,1).setBgColor(0,0,0);
+g.fillRect(0,0,g.getWidth()-1,g.getHeight()-1);
+g.drawImage(img,(g.getWidth()-img[0])/2,(g.getHeight()-img[1])/2);
+g.setFontAlign(0,0).setFont("6x8").setColor(0,0,0);
+g.drawString(content,g.getWidth()/2,g.getHeight()-(g.getHeight()-img[1])/4));
 g.setColor(1,1,1);
 `;
         sendCustomizedApp({

core

@@ -1 +1 @@
-Subproject commit 27f9a7125146a38c4357d679ec783f6e98a983c6
+Subproject commit 37224e0da48ab7682704469ce1442181a6e1eefe