Improving QR Comparison page

index.v-1.html

@@ -46,16 +46,16 @@
             </div>
             <div class="full-div">
                 <div class="half">
-                    <canvas id="qr-code1"></canvas><br/>
-                    <pre id="qr-code1-url"></pre>
+                    <canvas id="qr-code1-code"></canvas><br/>
+                    <pre id="qr-code1-result"></pre>
                     <pre id="qr-code1-bytes"></pre>
                     <pre id="qr-code1-mode"></pre>
                     <pre id="qr-code1-error"></pre>
                     
                 </div>
                 <div class="half">
-                    <canvas id="qr-code2"></canvas><br/>
-                    <pre id="qr-code2-url"></pre>
+                    <canvas id="qr-code2-code"></canvas><br/>
+                    <pre id="qr-code2-result"></pre>
                     <pre id="qr-code2-bytes"></pre>
                     <pre id="qr-code2-mode"></pre>
                     <pre id="qr-code2-error"></pre>
@@ -65,6 +65,7 @@
         </div>
         
         <script src="js/qrcode.min.js"></script>
+        <script src="js/ui-utils.js"></script>
         <script>
             function e(elem) {
                 return document.getElementById(elem);
@@ -76,30 +77,8 @@
 
             function generateCode(elemIdSource, elemPrefix) {
                 let uri = e(elemIdSource).value;
-                let params = {margin:0, width:e('qr-code1').scrollWidth, errorCorrectionLevel: 'Q', color: {dark: '#3654DD' }};
-                let qr = QRCode.create(uri, );
-                
-                QRCode.toCanvas(e(elemPrefix), uri, params, function (error) {
-                    e(elemPrefix + "-error").innerHTML = error;
-                    e(elemPrefix + "-url").innerHTML = uri;
-                });
-                
-                let qrQ = QRCode.create(uri, { margin:0, width:275, errorCorrectionLevel: 'Q', color: {dark: '#3654DD' }});
-                let qrH = QRCode.create(uri, { margin:0, width:275, errorCorrectionLevel: 'H', color: {dark: '#3654DD' }});
-                let qrM = QRCode.create(uri, { margin:0, width:275, errorCorrectionLevel: 'M', color: {dark: '#3654DD' }});
-                let qrL = QRCode.create(uri, { margin:0, width:275, errorCorrectionLevel: 'L', color: {dark: '#3654DD' }});
-
-                e(elemPrefix+"-bytes").innerHTML += "QR Size Analysis: ";
-                e(elemPrefix+"-bytes").innerHTML += "<br>- ECC L  7% " + describe(qrL);
-                e(elemPrefix+"-bytes").innerHTML += "<br>- ECC M 15% " + describe(qrM);
-                e(elemPrefix+"-bytes").innerHTML += "<br>- ECC Q 25% " + describe(qrQ);
-                e(elemPrefix+"-bytes").innerHTML += "<br>- ECC H 30% " + describe(qrH);
 
-                e(elemPrefix + "-mode").innerHTML = "Broken in " + qr.segments.length + " segments";
-                for (i=0; i<qr.segments.length; i++) {
-                    e(elemPrefix + "-mode").innerHTML += "<br>- " + i + ": " + qr.segments[i].mode.id + " " + qr.segments[i].data;
-                }
-                //e(elemPrefix + "-bytes").innerHTML = "QR Version: " + qr.version + " with size " + qr.modules.size + "x" + qr.modules.size + " bits => " + Math.round((qr.modules.size*qr.modules.size)/8) + " bytes";
+                UIUtils.drawsQR(elemPrefix, uri, uri, "Q");
             }
             function generateQRCodes() {
                 gtag('event', 'generateQR');

js/ui-utils.js

@@ -23,8 +23,12 @@ var UIUtils = {
       return qr.modules.size + "x" + qr.modules.size + " " + this.qrSizeBytes(qr) + " bytes";
   },
 
-  renderQR: function(elemPref, value) {
-      const params = { margin:0, width:e(elemPref+'-code').scrollWidth, errorCorrectionLevel: 'Q', color: {dark: '#3654DD' }};
+  renderQR: function(elemPref, value, ecc) {
+      if (!ecc) {
+          ecc = "Q";
+      }
+
+      const params = { margin:0, width:e(elemPref+'-code').scrollWidth, errorCorrectionLevel: ecc, color: {dark: '#3654DD' }};
 
       if (e(elemPref+"-code-label"))
         e(elemPref+"-code-label").style.display = '';
@@ -51,25 +55,20 @@ var UIUtils = {
       }
   },
 
-  drawsQR: function(elemPref, value, debugURI) {
-      this.renderQR(elemPref, value);
+  tryBuildQR: function(uri, ecc) {
+    try {
+        return QRCode.create(uri, { margin:0, width:275, errorCorrectionLevel: ecc, color: {dark: '#3654DD' }});
+    }  catch {}
+    return undefined;
+  },
 
-      let qrQ = null;
-      try {
-          qrQ = QRCode.create(value, { margin:0, width:275, errorCorrectionLevel: 'Q', color: {dark: '#3654DD' }});
-      } catch (err) {
-          console.error("Q " + err);
-      }
-      
-      let qrH = null;
-      try {
-          qrH = QRCode.create(value, { margin:0, width:275, errorCorrectionLevel: 'H', color: {dark: '#3654DD' }});
-      } catch (err) {
-          console.error("H " + err);
-      }
+  drawsQR: function(elemPref, value, debugURI, ecc) {
+      this.renderQR(elemPref, value, ecc);
 
-      let qrM = QRCode.create(value, { margin:0, width:275, errorCorrectionLevel: 'M', color: {dark: '#3654DD' }});
-      let qrL = QRCode.create(value, { margin:0, width:275, errorCorrectionLevel: 'L', color: {dark: '#3654DD' }});
+      let qrQ = this.tryBuildQR(value, 'Q');
+      let qrH = this.tryBuildQR(value, 'H');
+      let qrM = this.tryBuildQR(value, 'M');
+      let qrL = this.tryBuildQR(value, 'L');
       
       e(elemPref+"-bytes").innerHTML = "URI in A/N (5.5bit/char): "+ Math.round(value.length * 5.5/8) + " bytes<br>";