From ffbd2b5d605778dedf94bb508abee69572842169 Mon Sep 17 00:00:00 2001
From: Gordon Williams <gw@pur3.co.uk>
Date: Thu, 2 Sep 2021 11:51:17 +0100
Subject: [PATCH] Add support for 'customConnect' so custom app loaders can
 tailor what they upload based on the device

---
 README.md                  |  5 +++++
 apps.json                  |  6 +++---
 apps/openstmap/custom.html | 12 +++++++++++-
 apps/qrcode/custom.html    | 37 +++++++++++++++++++++++--------------
 core                       |  2 +-
 5 files changed, 43 insertions(+), 19 deletions(-)

diff --git a/README.md b/README.md
index e71d7eee0..9797e2243 100644
--- a/README.md
+++ b/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
diff --git a/apps.json b/apps.json
index d8b05de24..289889d65 100644
--- a/apps.json
+++ b/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"},
diff --git a/apps/openstmap/custom.html b/apps/openstmap/custom.html
index ac046d41d..88d94ed37 100644
--- a/apps/openstmap/custom.html
+++ b/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);
 
diff --git a/apps/qrcode/custom.html b/apps/qrcode/custom.html
index 9bcb79163..618840da9 100644
--- a/apps/qrcode/custom.html
+++ b/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({
diff --git a/core b/core
index 27f9a7125..37224e0da 160000
--- a/core
+++ b/core
@@ -1 +1 @@
-Subproject commit 27f9a7125146a38c4357d679ec783f6e98a983c6
+Subproject commit 37224e0da48ab7682704469ce1442181a6e1eefe