From 1226b20e1939598870427744656c257834ebe8e7 Mon Sep 17 00:00:00 2001
From: Rob Pilling <robpilling@gmail.com>
Date: Mon, 28 Apr 2025 21:49:08 +0100
Subject: [PATCH 1/6] qrcode: whitespace

---
 apps/qrcode/custom.html | 480 ++++++++++++++++++++--------------------
 1 file changed, 239 insertions(+), 241 deletions(-)

diff --git a/apps/qrcode/custom.html b/apps/qrcode/custom.html
index a3362f101..2149dcde7 100644
--- a/apps/qrcode/custom.html
+++ b/apps/qrcode/custom.html
@@ -17,61 +17,61 @@
     <hr>
 
     <div id="srcText">
-        <p>Text/URL: <input type="text" id="text" class="form-input" value="http://www.espruino.com"></p>
+      <p>Text/URL: <input type="text" id="text" class="form-input" value="http://www.espruino.com"></p>
     </div>
 
     <div id="srcScanCam">
-        <div>
-            <video id="qrVideo" align="center" width="50%"></video>
-        </div>
-        <div>
-            <select id="camList">
-            </select>
-        </div>
-        <div>
-            <button id="flashToggle">Flash: <span id="flashState">off</span></button>
-        </div>
-        <br>
-        Detected QR code:
-        <span id="camQrResult">None</span>
-        <br>
-        <button id="startButton" class="btn btn-primary">Start</button>
-        <button id="stopButton" class="btn btn-primary">Stop</button>
+      <div>
+        <video id="qrVideo" align="center" width="50%"></video>
+      </div>
+      <div>
+        <select id="camList">
+        </select>
+      </div>
+      <div>
+        <button id="flashToggle">Flash: <span id="flashState">off</span></button>
+      </div>
+      <br>
+      Detected QR code:
+      <span id="camQrResult">None</span>
+      <br>
+      <button id="startButton" class="btn btn-primary">Start</button>
+      <button id="stopButton" class="btn btn-primary">Stop</button>
     </div>
 
     <div id="srcScanFile">
-        <input type="file" id="fileSelector">
-        <br>
-        Detected QR code:
-        <span id="fileQrResult">None</span>
+      <input type="file" id="fileSelector">
+      <br>
+      Detected QR code:
+      <span id="fileQrResult">None</span>
     </div>
 
     <div id="srcWifi">
-        <p>Wifi name: <input type="text" id="ssid" class="form-input" value=""></p>
-        <p>Wifi password: <input type="password" id="password" class="form-input" value=""></p>
-        <div class="form-group">
-                <label for="encryption" class="control-label">Encryption</label>
-                <div class="input-group">
-                    <select name="encryption" id="encryption" class="form-control">
-                        <option value="WPA">WPA/WPA2</option>
-                        <option value="WEP">WEP</option>
-                        <option value="nopass">None</option>
-                    </select>
-                </div>
+      <p>Wifi name: <input type="text" id="ssid" class="form-input" value=""></p>
+      <p>Wifi password: <input type="password" id="password" class="form-input" value=""></p>
+      <div class="form-group">
+        <label for="encryption" class="control-label">Encryption</label>
+        <div class="input-group">
+          <select name="encryption" id="encryption" class="form-control">
+            <option value="WPA">WPA/WPA2</option>
+            <option value="WEP">WEP</option>
+            <option value="nopass">None</option>
+          </select>
+        </div>
 
-        </div>
-        <div>
-          <input type="checkbox" id="hidden" name="hidden"/>
-          <label for="hidden">Wifi is hidden</label>
-        </div>
+      </div>
+      <div>
+        <input type="checkbox" id="hidden" name="hidden"/>
+        <label for="hidden">Wifi is hidden</label>
+      </div>
     </div>
 
     <div id="srcMeCard">
-        <p>First Name: <input type="text" id="meNameFirst" class="form-input" value=""></p>
-        <p>Last Name: <input type="text" id="meNameLast" class="form-input" value=""></p>
-        <p>Phone Number: <input type="text" id="mePhoneNumber" class="form-input" value=""></p>
-        <p>Email: <input type="text" id="meEmail" class="form-input" value=""></p>
-        <p>Website: <input type="text" id="meWebsite" class="form-input" value=""></p>
+      <p>First Name: <input type="text" id="meNameFirst" class="form-input" value=""></p>
+      <p>Last Name: <input type="text" id="meNameLast" class="form-input" value=""></p>
+      <p>Phone Number: <input type="text" id="mePhoneNumber" class="form-input" value=""></p>
+      <p>Email: <input type="text" id="meEmail" class="form-input" value=""></p>
+      <p>Website: <input type="text" id="meWebsite" class="form-input" value=""></p>
     </div>
 
     <hr>
@@ -82,228 +82,225 @@
     <p>Additional options:</p>
     <input type="checkbox" id="preventIntegerScaling" name="preventIntegerScaling"/>
     <label for="preventIntegerScaling">Prevent integer scaling</label></br>
-    <input type="checkbox" id="preventBrightnessChangeOnTouch" name="preventBrightnessChangeOnTouch"/>
-    <label for="preventBrightnessChangeOnTouch">Prevent brightness change on touch</label></br>
-    <input type="checkbox" id="boostBacklight" name="boostBacklight"/>
-    <label for="boostBacklight">Set initial backlight to max. while QR is shown</label></br>
-    <input type="checkbox" id="stayOn" name="stayOn"/>
-    <label for="stayOn">Do not lock or dim while showing QR</label></br>
-    <input type="checkbox" id="hideDescription" name="hideDescription"/>
-    <label for="hideDescription">Hide Description</label></br>
-    <label for="description">Replace default description:</label>
-    <input type="text" id="description" class="form-input" value="">
-    <label for="correction">Error correction level:</label>
-    <div class="input-group">
+      <input type="checkbox" id="preventBrightnessChangeOnTouch" name="preventBrightnessChangeOnTouch"/>
+      <label for="preventBrightnessChangeOnTouch">Prevent brightness change on touch</label></br>
+      <input type="checkbox" id="boostBacklight" name="boostBacklight"/>
+      <label for="boostBacklight">Set initial backlight to max. while QR is shown</label></br>
+      <input type="checkbox" id="stayOn" name="stayOn"/>
+      <label for="stayOn">Do not lock or dim while showing QR</label></br>
+      <input type="checkbox" id="hideDescription" name="hideDescription"/>
+      <label for="hideDescription">Hide Description</label></br>
+      <label for="description">Replace default description:</label>
+      <input type="text" id="description" class="form-input" value="">
+      <label for="correction">Error correction level:</label>
+      <div class="input-group">
         <select name="correction" id="correction" class="form-control">
-            <option value="1">L - Low - 7%</option>
-            <option value="0">M - Medium - 15%</option>
-            <option value="3">Q - Quartile - 25%</option>
-            <option value="2">H - High - 30%</option>
+          <option value="1">L - Low - 7%</option>
+          <option value="0">M - Medium - 15%</option>
+          <option value="3">Q - Quartile - 25%</option>
+          <option value="2">H - High - 30%</option>
         </select>
-    </div>
-    <p>Click <button id="upload" class="btn btn-primary">Upload</button></p>
+      </div>
+      <p>Click <button id="upload" class="btn btn-primary">Upload</button></p>
 
-
-    <script src="../../core/lib/customize.js"></script>
-    <script src="../../core/lib/qrcode.min.js"></script><!-- https://davidshimjs.github.io/qrcodejs/ -->
-    <script src="../../webtools/heatshrink.js"></script>
-    <script src="../../webtools/imageconverter.js"></script>
-    <script src="./qr-scanner.umd.min.js"></script><!-- https://github.com/nimiq/qr-scanner -->
-    <script>
+      <script src="../../core/lib/customize.js"></script>
+      <script src="../../core/lib/qrcode.min.js"></script><!-- https://davidshimjs.github.io/qrcodejs/ -->
+      <script src="../../webtools/heatshrink.js"></script>
+      <script src="../../webtools/imageconverter.js"></script>
+      <script src="./qr-scanner.umd.min.js"></script><!-- https://github.com/nimiq/qr-scanner -->
+      <script>
         var targetSize = 200;
         var deviceWidth = targetSize;
         var deviceHeight = targetSize;
         var border = 4;
-        
+
         var scanner = null;
         var qrcode = null;
-        
-        
+
+
         function onInit(device) {
-            console.info("onInit" + device);
-            if (device && device.info && device.info.g) {
-                deviceWidth = device.info.g.width;
-                deviceHeight = device.info.g.height;
-            }
-            refreshQRCode();
+          console.info("onInit" + device);
+          if (device && device.info && device.info.g) {
+            deviceWidth = device.info.g.width;
+            deviceHeight = device.info.g.height;
+          }
+          refreshQRCode();
         }
 
         const updateFlashAvailability = () => {
-            scanner.hasFlash().then(hasFlash => {
-                document.getElementById('flashToggle').style.display = hasFlash ? 'inline-block' : 'none';
-            });
+          scanner.hasFlash().then(hasFlash => {
+            document.getElementById('flashToggle').style.display = hasFlash ? 'inline-block' : 'none';
+          });
         };
 
         function setResult(label, result) {
-            console.info("setResult " + result);
-            label.textContent = result;
-            scanner.stop();
-            refreshQRCode();
+          console.info("setResult " + result);
+          label.textContent = result;
+          scanner.stop();
+          refreshQRCode();
         }
 
         function initQrScanner() {
-            console.info("initQrScanner");
-            QrScanner.WORKER_PATH = './qr-scanner-worker.min.js';
-            if (scanner == null) {
-                scanner = new QrScanner(document.getElementById('qrVideo'), result => setResult(document.getElementById('camQrResult'), result), error => {
-                    document.getElementById('camQrResult').textContent = error;
-                    document.getElementById('camQrResult').style.color = 'inherit';
-                });
-            }
+          console.info("initQrScanner");
+          QrScanner.WORKER_PATH = './qr-scanner-worker.min.js';
+          if (scanner == null) {
+            scanner = new QrScanner(document.getElementById('qrVideo'), result => setResult(document.getElementById('camQrResult'), result), error => {
+              document.getElementById('camQrResult').textContent = error;
+              document.getElementById('camQrResult').style.color = 'inherit';
+            });
+          }
         }
 
         function initQrCam(){
-            scanner.start().then(() => {
+          scanner.start().then(() => {
             updateFlashAvailability();
             QrScanner.listCameras(true).then(cameras => cameras.forEach(camera => {
-                const option = document.createElement('option');
-                option.value = camera.id;
-                option.text = camera.label;
-                document.getElementById('camList').add(option);
-                }));
-            });
+              const option = document.createElement('option');
+              option.value = camera.id;
+              option.text = camera.label;
+              document.getElementById('camList').add(option);
+            }));
+          });
         }
 
         function toggleVis(id){
-            console.info("Got id", id);
-            ["srcScanFile", "srcText", "srcWifi", "srcScanCam", "srcMeCard"].forEach(function (item){
-              document.getElementById(item).style.display = "none";
-            });
-            if (id != undefined && id != null) document.getElementById(id).style.display = "block";
-            refreshQRCode();
+          console.info("Got id", id);
+          ["srcScanFile", "srcText", "srcWifi", "srcScanCam", "srcMeCard"].forEach(function (item){
+            document.getElementById(item).style.display = "none";
+          });
+          if (id != undefined && id != null) document.getElementById(id).style.display = "block";
+          refreshQRCode();
         }
 
         toggleVis("srcText");
 
         //https://github.com/evgeni/qifi/blob/gh-pages/index.html#L168
         function escapeString (string) {
-        var to_escape = ['\\', ';', ',', ':', '"'];
-        var hex_only = /^[0-9a-f]+$/i;
-        var output = "";
-        for (var i=0; i<string.length; i++) {
+          var to_escape = ['\\', ';', ',', ':', '"'];
+          var hex_only = /^[0-9a-f]+$/i;
+          var output = "";
+          for (var i=0; i<string.length; i++) {
             if(string[i].includes(to_escape)) {
-                output += '\\'+string[i];
+              output += '\\'+string[i];
             }
             else {
-                output += string[i];
+              output += string[i];
             }
-        }
-        return output;
+          }
+          return output;
         }
         function generateWifiString(ssid, password, hidden,encryption){
-            //https://github.com/evgeni/qifi/blob/gh-pages/index.html#L198
-            var qrstring = 'WIFI:S:'+escapeString(ssid)+';T:'+encryption+';P:'+escapeString(password)+';';
-            if (hidden) {
-                qrstring += 'H:true';
-            }
-            return qrstring;
+          //https://github.com/evgeni/qifi/blob/gh-pages/index.html#L198
+          var qrstring = 'WIFI:S:'+escapeString(ssid)+';T:'+encryption+';P:'+escapeString(password)+';';
+          if (hidden) {
+            qrstring += 'H:true';
+          }
+          return qrstring;
         }
 
         function generateMeCardString(meNameFirst, meNameLast, mePhoneNumber, meEmail, meWebsite){
-	    var meCardStringOutput = 'MECARD:';
+          var meCardStringOutput = 'MECARD:';
 
-	    //first & Last name part of string, can have one or both
-            if (meNameFirst.trim().length != 0 && meNameLast.trim().length != 0) {
-                meCardStringOutput += 'N:'+meNameLast.trim()+','+meNameFirst.trim()+';';
-	    }
-            else if (meNameLast.trim().length != 0) {
-                meCardStringOutput += 'N:'+meNameLast.trim()+';';
-	    }
-            else if (meNameFirst.trim().length != 0) {
-                meCardStringOutput += 'N:'+meNameFirst.trim()+';';
-	    }
+          //first & Last name part of string, can have one or both
+          if (meNameFirst.trim().length != 0 && meNameLast.trim().length != 0) {
+            meCardStringOutput += 'N:'+meNameLast.trim()+','+meNameFirst.trim()+';';
+          }
+          else if (meNameLast.trim().length != 0) {
+            meCardStringOutput += 'N:'+meNameLast.trim()+';';
+          }
+          else if (meNameFirst.trim().length != 0) {
+            meCardStringOutput += 'N:'+meNameFirst.trim()+';';
+          }
 
-            if (mePhoneNumber.trim().length != 0) {
-                meCardStringOutput += 'TEL:'+mePhoneNumber.trim()+';';
-	    }
+          if (mePhoneNumber.trim().length != 0) {
+            meCardStringOutput += 'TEL:'+mePhoneNumber.trim()+';';
+          }
 
-            if (meEmail.trim().length != 0) {
-                meCardStringOutput += 'EMAIL:'+meEmail.trim()+';';
-	    }
+          if (meEmail.trim().length != 0) {
+            meCardStringOutput += 'EMAIL:'+meEmail.trim()+';';
+          }
 
-            if (meWebsite.trim().length != 0) {
-                meCardStringOutput += 'URL:'+meWebsite.trim()+';';
-	    }
+          if (meWebsite.trim().length != 0) {
+            meCardStringOutput += 'URL:'+meWebsite.trim()+';';
+          }
 
-	    meCardStringOutput += ';';
-	    return meCardStringOutput;
-	}
+          meCardStringOutput += ';';
+          return meCardStringOutput;
+        }
 
         function refreshQRCode(){
-            if (qrcode == null){
-                qrcode = new QRCode("qrcode", {
-                    text: document.getElementById("text").value,
-                    colorDark : "#000000",
-                    colorLight : "#ffffff"
-                });
-            }
-            document.getElementById("errors").innerText="";
-            qrcode.clear(); // clear the code.
-            var qrText = "";
-            if(document.getElementById("useWIFI").checked){
-                const ssid = document.getElementById("ssid").value;
-                const password = document.getElementById("password").value;
-                const encryption = document.getElementById("encryption").value;
-                const hidden = document.getElementById("hidden").checked;
-                const wifiString = generateWifiString(ssid, password, hidden, encryption);
-                qrText= wifiString;
-            } else if (document.getElementById("useMECARD").checked) {
-                const meNameFirst = document.getElementById("meNameFirst").value;
-                const meNameLast = document.getElementById("meNameLast").value;
-                const mePhoneNumber = document.getElementById("mePhoneNumber").value;
-                const meEmail = document.getElementById("meEmail").value;
-                const meWebsite = document.getElementById("meWebsite").value;
-                const meCardString = generateMeCardString(meNameFirst, meNameLast, mePhoneNumber, meEmail, meWebsite);
-                qrText = meCardString;
-            } else if (document.getElementById("useCAM").checked) {
-                qrText= document.getElementById("camQrResult").innerText;
-            } else if (document.getElementById("useFILE").checked) {
-                qrText= document.getElementById("fileQrResult").innerText;
-            } else {
-                qrText = document.getElementById("text").value;
-            }
+          if (qrcode == null){
+            qrcode = new QRCode("qrcode", {
+              text: document.getElementById("text").value,
+              colorDark : "#000000",
+              colorLight : "#ffffff"
+            });
+          }
+          document.getElementById("errors").innerText="";
+          qrcode.clear(); // clear the code.
+          var qrText = "";
+          if(document.getElementById("useWIFI").checked){
+            const ssid = document.getElementById("ssid").value;
+            const password = document.getElementById("password").value;
+            const encryption = document.getElementById("encryption").value;
+            const hidden = document.getElementById("hidden").checked;
+            const wifiString = generateWifiString(ssid, password, hidden, encryption);
+            qrText= wifiString;
+          } else if (document.getElementById("useMECARD").checked) {
+            const meNameFirst = document.getElementById("meNameFirst").value;
+            const meNameLast = document.getElementById("meNameLast").value;
+            const mePhoneNumber = document.getElementById("mePhoneNumber").value;
+            const meEmail = document.getElementById("meEmail").value;
+            const meWebsite = document.getElementById("meWebsite").value;
+            const meCardString = generateMeCardString(meNameFirst, meNameLast, mePhoneNumber, meEmail, meWebsite);
+            qrText = meCardString;
+          } else if (document.getElementById("useCAM").checked) {
+            qrText= document.getElementById("camQrResult").innerText;
+          } else if (document.getElementById("useFILE").checked) {
+            qrText= document.getElementById("fileQrResult").innerText;
+          } else {
+            qrText = document.getElementById("text").value;
+          }
 
+          console.info("Given qrtext was: " + qrText);
+          qrcode._htOption.text = qrText;
+          qrcode._htOption.correctLevel = parseInt(document.getElementById("correction").value);
+          try {
+            qrcode.makeCode(qrText);
+          } catch (error) {
+            document.getElementById("errors").innerText="Error: QR could not be created.";
+            console.error(error);
+          }
 
+          targetSize = Math.min(deviceWidth - border, deviceHeight - border);
+          console.info("Targetsize: " + targetSize);
+          var finalSizeQr=targetSize;
+          var finalSizeCanvas=targetSize;
 
-            console.info("Given qrtext was: " + qrText);
-            qrcode._htOption.text = qrText;
-            qrcode._htOption.correctLevel = parseInt(document.getElementById("correction").value);
-            try {
-                qrcode.makeCode(qrText);
-            } catch (error) {
-                document.getElementById("errors").innerText="Error: QR could not be created.";
-                console.error(error);
-            }
+          var integerScale = Math.max(Math.floor(targetSize / (qrcode._oQRCode.moduleCount + 1)),1);
+          if (integerScale == 1) document.getElementById("errors").innerText = "Warning, QR will probably be too small to properly scan. Try less data or less error correction.";
 
-            targetSize = Math.min(deviceWidth - border, deviceHeight - border);
-            console.info("Targetsize: " + targetSize);
-            var finalSizeQr=targetSize;
-            var finalSizeCanvas=targetSize;
+          console.info("IntegerScale: " + integerScale);
 
-            var integerScale = Math.max(Math.floor(targetSize / (qrcode._oQRCode.moduleCount + 1)),1);
-            if (integerScale == 1) document.getElementById("errors").innerText = "Warning, QR will probably be too small to properly scan. Try less data or less error correction.";
+          if (!document.getElementById("preventIntegerScaling").checked){
+            finalSizeQr = integerScale * (qrcode._oQRCode.moduleCount + 1);
+            finalSizeCanvas = finalSizeQr - 1;
+          }
 
-            console.info("IntegerScale: " + integerScale);
+          console.info("FinalSizeQr: " + finalSizeQr);
+          console.info("FinalSizeCanvas: " + finalSizeCanvas);
 
-            if (!document.getElementById("preventIntegerScaling").checked){
-                finalSizeQr = integerScale * (qrcode._oQRCode.moduleCount + 1);
-                finalSizeCanvas = finalSizeQr - 1;
-            }
-            
-            console.info("FinalSizeQr: " + finalSizeQr);
-            console.info("FinalSizeCanvas: " + finalSizeCanvas);
+          qrcode._htOption.width = finalSizeQr;
+          qrcode._htOption.height = finalSizeQr;
 
-            qrcode._htOption.width = finalSizeQr;
-            qrcode._htOption.height = finalSizeQr;
-
-            document.getElementsByTagName("canvas")[0].width = finalSizeCanvas;
-            document.getElementsByTagName("canvas")[0].height = finalSizeCanvas;
-            try {
-                qrcode.makeCode(qrText);
-            } catch (error) {
-                document.getElementById("errors").innerText="Error: QR could not be created.";
-                console.error(error);
-            }
+          document.getElementsByTagName("canvas")[0].width = finalSizeCanvas;
+          document.getElementsByTagName("canvas")[0].height = finalSizeCanvas;
+          try {
+            qrcode.makeCode(qrText);
+          } catch (error) {
+            document.getElementById("errors").innerText="Error: QR could not be created.";
+            console.error(error);
+          }
         }
 
         document.getElementById("useTEXT").addEventListener("change",function(){toggleVis("srcText");});
@@ -316,13 +313,13 @@
         document.getElementById("meWebsite").addEventListener("change",refreshQRCode);
 
         document.getElementById("useCAM").addEventListener("change",function(){
-            initQrScanner();
-            initQrCam();
-            toggleVis("srcScanCam");
+          initQrScanner();
+          initQrCam();
+          toggleVis("srcScanCam");
         });
         document.getElementById("useFILE").addEventListener("change",function(){
-            initQrScanner();
-            toggleVis("srcScanFile");
+          initQrScanner();
+          toggleVis("srcScanFile");
         });
         document.getElementById("useWIFI").addEventListener("change",function(){toggleVis("srcWifi");});
         document.getElementById("ssid").addEventListener("change",refreshQRCode);
@@ -336,17 +333,18 @@
         document.getElementById("useWIFI").addEventListener("change",refreshQRCode);
         document.getElementById("preventIntegerScaling").addEventListener("change",refreshQRCode);
         document.getElementById("correction").addEventListener("change",refreshQRCode);
+
         document.getElementById("upload").addEventListener("click", function() {
-            var content = document.getElementById("text").value;
-            if(document.getElementById("useWIFI").checked){
-                content = document.getElementById("ssid").value
-            }
-            if(!(document.getElementById("description").value === "")){
-                content = document.getElementById("description").value;
-            }
-            var img = imageconverter.canvastoString(document.getElementsByTagName("canvas")[0],{mode:"1bit",output:"string",compression:true});
-            var app = `var img = ${img};
-${ document.getElementById("preventBrightnessChangeOnTouch").checked ? '' : `var backlight = 0;
+          var content = document.getElementById("text").value;
+          if(document.getElementById("useWIFI").checked){
+            content = document.getElementById("ssid").value
+          }
+          if(!(document.getElementById("description").value === "")){
+            content = document.getElementById("description").value;
+          }
+          var img = imageconverter.canvastoString(document.getElementsByTagName("canvas")[0],{mode:"1bit",output:"string",compression:true});
+          var app = `var img = ${img};
+          ${document.getElementById("preventBrightnessChangeOnTouch").checked ? '' : `var backlight = 0;
 Bangle.on('touch', function(button, xy) {
   backlight += 0.3;
   if (backlight > 1) backlight = 0;
@@ -354,50 +352,50 @@ Bangle.on('touch', function(button, xy) {
 });
 `}
 
-${document.getElementById("boostBacklight").checked ? 'Bangle.setLCDBrightness(1);' : ''}
-${document.getElementById("stayOn").checked ? 'Bangle.setLCDTimeout(0);' : ''}
-${document.getElementById("hideDescription").checked ? '' : `var content = ${JSON.stringify(content)};`}
+          ${document.getElementById("boostBacklight").checked ? 'Bangle.setLCDBrightness(1);' : ''}
+          ${document.getElementById("stayOn").checked ? 'Bangle.setLCDTimeout(0);' : ''}
+          ${document.getElementById("hideDescription").checked ? '' : `var content = ${JSON.stringify(content)};`}
 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);
-${ document.getElementById("hideDescription").checked ? '' : `g.setFontAlign(0,0).setFont("6x8").setColor(0,0,0);
+          ${document.getElementById("hideDescription").checked ? '' : `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({
-                storage:[{name:"qrcode.app.js", url:"app.js", content:app},]
-            });
+          sendCustomizedApp({
+            storage:[{name:"qrcode.app.js", url:"app.js", content:app}]
+          });
 
         });
 
         document.getElementById('camList').addEventListener('change', event => {
-            scanner.setCamera(event.target.value).then(updateFlashAvailability);
+          scanner.setCamera(event.target.value).then(updateFlashAvailability);
         });
 
         document.getElementById('flashToggle').addEventListener('click', () => {
-            scanner.toggleFlash().then(() => document.getElementById('flashState').textContent = scanner.isFlashOn() ? 'on' : 'off');
+          scanner.toggleFlash().then(() => document.getElementById('flashState').textContent = scanner.isFlashOn() ? 'on' : 'off');
         });
 
         document.getElementById('startButton').addEventListener('click', () => {
-            scanner.start();
+          scanner.start();
         });
 
         document.getElementById('stopButton').addEventListener('click', () => {
-            scanner.stop();
+          scanner.stop();
         });
 
         document.getElementById('fileSelector').addEventListener('change', event => {
-            const file = document.getElementById('fileSelector').files[0];
-            if (!file) {
-                return;
-            }
-            QrScanner.scanImage(file)
-                .then(result => setResult(document.getElementById('fileQrResult'), result))
-                .catch(e => setResult(document.getElementById('fileQrResult'), e || 'No QR code found.'));
+          const file = document.getElementById('fileSelector').files[0];
+          if (!file) {
+            return;
+          }
+          QrScanner.scanImage(file)
+            .then(result => setResult(document.getElementById('fileQrResult'), result))
+            .catch(e => setResult(document.getElementById('fileQrResult'), e || 'No QR code found.'));
         });
 
-    </script>
+      </script>
 
   </body>
 </html>

From 86baa4ceddcaa391c618d32eade4876450d7b762 Mon Sep 17 00:00:00 2001
From: Rob Pilling <robpilling@gmail.com>
Date: Mon, 28 Apr 2025 22:05:53 +0100
Subject: [PATCH 2/6] qrcode: remove "Click" text

---
 apps/qrcode/custom.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/qrcode/custom.html b/apps/qrcode/custom.html
index 2149dcde7..ec6221a59 100644
--- a/apps/qrcode/custom.html
+++ b/apps/qrcode/custom.html
@@ -101,7 +101,7 @@
           <option value="2">H - High - 30%</option>
         </select>
       </div>
-      <p>Click <button id="upload" class="btn btn-primary">Upload</button></p>
+      <button id="upload" class="btn btn-primary">Upload</button>
 
       <script src="../../core/lib/customize.js"></script>
       <script src="../../core/lib/qrcode.min.js"></script><!-- https://davidshimjs.github.io/qrcodejs/ -->

From 0a4cc641c0bc5362fae65f48ce9da1c196123d93 Mon Sep 17 00:00:00 2001
From: Rob Pilling <robpilling@gmail.com>
Date: Mon, 28 Apr 2025 22:06:12 +0100
Subject: [PATCH 3/6] qrcode: return on error (instead of generating more)

---
 apps/qrcode/custom.html | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/apps/qrcode/custom.html b/apps/qrcode/custom.html
index ec6221a59..9106fdbb5 100644
--- a/apps/qrcode/custom.html
+++ b/apps/qrcode/custom.html
@@ -270,6 +270,7 @@
           } catch (error) {
             document.getElementById("errors").innerText="Error: QR could not be created.";
             console.error(error);
+            return;
           }
 
           targetSize = Math.min(deviceWidth - border, deviceHeight - border);
@@ -300,6 +301,7 @@
           } catch (error) {
             document.getElementById("errors").innerText="Error: QR could not be created.";
             console.error(error);
+            return;
           }
         }
 

From 2401063c7d604aed0e062a6757a4e0bfef069737 Mon Sep 17 00:00:00 2001
From: Rob Pilling <robpilling@gmail.com>
Date: Mon, 28 Apr 2025 22:06:37 +0100
Subject: [PATCH 4/6] qrcode: simplify `if`

---
 apps/qrcode/custom.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/qrcode/custom.html b/apps/qrcode/custom.html
index 9106fdbb5..a51190153 100644
--- a/apps/qrcode/custom.html
+++ b/apps/qrcode/custom.html
@@ -341,7 +341,7 @@
           if(document.getElementById("useWIFI").checked){
             content = document.getElementById("ssid").value
           }
-          if(!(document.getElementById("description").value === "")){
+          if(document.getElementById("description").value !== ""){
             content = document.getElementById("description").value;
           }
           var img = imageconverter.canvastoString(document.getElementsByTagName("canvas")[0],{mode:"1bit",output:"string",compression:true});

From e146686b070db37d397770a614fa032e92c05688 Mon Sep 17 00:00:00 2001
From: Rob Pilling <robpilling@gmail.com>
Date: Mon, 28 Apr 2025 22:07:53 +0100
Subject: [PATCH 5/6] qrcode: allow custom app name (for multiple QR codes)

---
 apps/qrcode/custom.html | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/apps/qrcode/custom.html b/apps/qrcode/custom.html
index a51190153..2ff1cd9db 100644
--- a/apps/qrcode/custom.html
+++ b/apps/qrcode/custom.html
@@ -101,6 +101,8 @@
           <option value="2">H - High - 30%</option>
         </select>
       </div>
+      <label for="appname">App name</label>
+      <input type="text" id="appname" class="form-input" value="qrcode">
       <button id="upload" class="btn btn-primary">Upload</button>
 
       <script src="../../core/lib/customize.js"></script>
@@ -365,8 +367,10 @@ g.drawString(content,g.getWidth()/2,g.getHeight()-(g.getHeight()-img[1])/4);
 `}
 g.setColor(1,1,1);
 `;
+
+          var appname = document.getElementById("appname").value.trim() || "qrcode";
           sendCustomizedApp({
-            storage:[{name:"qrcode.app.js", url:"app.js", content:app}]
+            storage:[{name:`${appname}.app.js`, url:"app.js", content:app}]
           });
 
         });

From 0bf0a3fb972117aa44d6f142a87fd0624c23282e Mon Sep 17 00:00:00 2001
From: Rob Pilling <robpilling@gmail.com>
Date: Mon, 28 Apr 2025 22:08:39 +0100
Subject: [PATCH 6/6] qrcode: bump version

---
 apps/qrcode/ChangeLog     | 1 +
 apps/qrcode/metadata.json | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/apps/qrcode/ChangeLog b/apps/qrcode/ChangeLog
index 52eadbcf9..9b4526c10 100644
--- a/apps/qrcode/ChangeLog
+++ b/apps/qrcode/ChangeLog
@@ -4,3 +4,4 @@
 0.04: Allow scanning of QR codes from camera or file
 0.05: Change brightness on touch
 0.06: Add ability to generate contact info (MeCard format) QR code
+0.07: Add custom appname (for storing multiple QR codes)
diff --git a/apps/qrcode/metadata.json b/apps/qrcode/metadata.json
index 89c859a0c..fc70ab27d 100644
--- a/apps/qrcode/metadata.json
+++ b/apps/qrcode/metadata.json
@@ -2,7 +2,7 @@
   "id": "qrcode",
   "name": "Custom QR Code",
   "shortName": "QR Code",
-  "version": "0.06",
+  "version": "0.07",
   "description": "Use this to upload a customised QR code to Bangle.js",
   "icon": "app.png",
   "tags": "qrcode",