Merge pull request #159 from Tangerine-Community/158_qr-code-boundary…

…-box-failure

QR code: Adding try/catch when using drawLine

CHANGELOG.md

@@ -1,5 +1,10 @@
 # CHANGELOG
 
+## v4.17.10
+- Fix: abandons drawing boundary box when unable to identify all corners of scanned QR code.
+- Updated "@zxing/library": "^0.17.1",
+- Set width of canvas to 340px to reduce load on tablets.
+
 ## v4.17.9
 - Fix: switch observer on hintText from render to fix issue with mutually exclusive checkboxes.
 

input/tangy-qr.js

@@ -28,7 +28,8 @@ class TangyQr extends PolymerElement {
         }
         
         #canvas {
-          width:100%;
+          display: inline-block;
+          width:340px;
           border-color: black;
           border-style: solid;
           border-width: 0px;
@@ -46,7 +47,7 @@ class TangyQr extends PolymerElement {
           color: var(--primary-text-color);
           margin-bottom: 15px;
         }
-        #scan-icon, #container, #canvas {
+        #scan-icon, #container {
           display: inline-block;
           width: 100%;
           height: 100%;
@@ -235,7 +236,7 @@ class TangyQr extends PolymerElement {
     this.notScanning = false 
     this.isScanning = true
     this.$.container.innerHTML = `
-      <canvas id="canvas"></canvas>
+      <canvas id="canvas" height="320"></canvas>
     `
     var video = document.createElement("video");
     this.video = video;
@@ -274,10 +275,14 @@ class TangyQr extends PolymerElement {
         const codeReader = new BrowserMultiFormatReader();
         try {
           const result = await codeReader.decodeFromImageElement(imageEl)
-          drawLine(result.resultPoints[0], result.resultPoints[1], "#FF3B58");
-          drawLine(result.resultPoints[1], result.resultPoints[2], "#FF3B58");
-          drawLine(result.resultPoints[2], result.resultPoints[3], "#FF3B58");
-          drawLine(result.resultPoints[3], result.resultPoints[0], "#FF3B58");
+          try {
+            drawLine(result.resultPoints[0], result.resultPoints[1], "#FF3B58");
+            drawLine(result.resultPoints[1], result.resultPoints[2], "#FF3B58");
+            drawLine(result.resultPoints[2], result.resultPoints[3], "#FF3B58");
+            drawLine(result.resultPoints[3], result.resultPoints[0], "#FF3B58");
+          } catch (e) {
+            // console.log("May not have gotten all of the corners in result.resultPoints.")
+          }
           if (component.value !== result.text) {
             component.value = result.text 
             component.stopScanning()

package.json

@@ -23,7 +23,7 @@
     "@polymer/paper-tabs": "^3.0.0-pre.18",
     "@polymer/paper-toggle-button": "^3.0.1",
     "@polymer/polymer": "^3.0.0",
-    "@zxing/library": "^0.17.0",
+    "@zxing/library": "^0.17.1",
     "devtools-detect": "^3.0.0",
     "dr-niels-sortable-list": "git://github.com/DrNiels/sortable-list.git#master",
     "moment": "^2.24.0",