Replace the show-ok property with a regex that needs to match the QR code

This allows us to show feedback to the user by coloring the clip border.
Also in case there is no match we don't send an event.

packages/qr-code-scanner/README.md

@@ -21,9 +21,7 @@ With this camera device you can scan a QR code. If a QR code is detected a event
 
 - `lang` (optional, default: `de`): set to `de` or `en` for German or English
     - example `<dbp-qr-code-scanner lang="de"></dbp-qr-code-scanner>`
-- `scan-is-ok` (optional, default: `false`): set to `true` or `false` for green or red border of the QR code. 
-The colors are from css vars (`--dbp-success-bg-color` and `--dbp-danger-bg-color`) 
-    - example `<dbp-person-select scan-is-ok></dbp-person-select>`
+- `match-regex` (optional, default: `'.*'`): a regular expression that when matching the QR code will result in the event being emitted and give feedback to the user
 - `show-output` (optional, default: `false`): set to `true` for showing 
 a box under the video canvas with the read QR code data
     - example `<dbp-qr-code-scanner show-output></dbp-qr-code-scanner>`

packages/qr-code-scanner/src/dbp-qr-code-scanner-demo.js

@@ -49,7 +49,7 @@ class QrCodeScannerDemo extends ScopedElementsMixin(LitElement) {
                 <div class="container">
                     <div class="columns is-centered">
                         <div class="column">
-                            <dbp-qr-code-scanner clip-mask lang="${this.lang}"></dbp-qr-code-scanner>
+                            <dbp-qr-code-scanner clip-mask show-output lang="${this.lang}"></dbp-qr-code-scanner>
                         </div>
                     </div>
                 </div>

packages/qr-code-scanner/src/qr-code-scanner.js

@@ -77,7 +77,6 @@ export class QrCodeScanner extends ScopedElementsMixin(DBPLitElement) {
         this.front = false;
         this.loading = false;
 
-        this.scanIsOk = false;
         this.showOutput = false;
         this.stopScan = false;
 
@@ -88,6 +87,8 @@ export class QrCodeScanner extends ScopedElementsMixin(DBPLitElement) {
         this._devices = new Map();
         this._requestID = null;
         this._loadingMessage = '';
+
+        this.matchRegex = '.*';
     }
 
     static get scopedElements() {
@@ -107,7 +108,6 @@ export class QrCodeScanner extends ScopedElementsMixin(DBPLitElement) {
             videoRunning: { type: Boolean, attribute: false },
             front: { type: Boolean, attribute: false },
             loading: { type: Boolean, attribute: false },
-            scanIsOk: { type: Boolean, attribute: 'scan-is-ok' },
             showOutput: { type: Boolean, attribute: 'show-output' },
             stopScan: { type: Boolean, attribute: 'stop-scan' },
             activeCamera: { type: String, attribute: false },
@@ -115,6 +115,7 @@ export class QrCodeScanner extends ScopedElementsMixin(DBPLitElement) {
             clipMask: { type: Boolean, attribute: 'clip-mask' },
             _devices: { type: Map, attribute: false},
             _loadingMessage: { type: String, attribute: false },
+            matchRegex: { type: String, attribute: 'match-regex' },
         };
     }
 
@@ -164,18 +165,8 @@ export class QrCodeScanner extends ScopedElementsMixin(DBPLitElement) {
         let qrContainer = this._("#qr");
         let scroll = false;
 
-        let color = this.scanIsOk ? getComputedStyle(this)
-                .getPropertyValue('--dbp-success-bg-color') : getComputedStyle(this)
-            .getPropertyValue('--dbp-danger-bg-color');
-
-        function drawLine(begin, end, color) {
-            canvas.beginPath();
-            canvas.moveTo(begin.x, begin.y);
-            canvas.lineTo(end.x, end.y);
-            canvas.lineWidth = 4;
-            canvas.strokeStyle = color;
-            canvas.stroke();
-        }
+        let okColor = getComputedStyle(this).getPropertyValue('--dbp-success-bg-color');
+        let notOkColor = getComputedStyle(this).getPropertyValue('--dbp-danger-bg-color');
 
         let videoId = this.activeCamera;
         let constraint = { video:  { deviceId: videoId } };
@@ -287,6 +278,8 @@ export class QrCodeScanner extends ScopedElementsMixin(DBPLitElement) {
                     code = lastCode;
                 }
 
+                let matched = code ? code.data.match(that.matchRegex) !== null : false;
+
                 //draw mask
                 canvas.beginPath();
                 canvas.fillStyle = "#0000006e";
@@ -298,7 +291,11 @@ export class QrCodeScanner extends ScopedElementsMixin(DBPLitElement) {
                 canvas.fill();
 
                 canvas.beginPath();
-                canvas.fillStyle = code ? color: "white";
+                if (code)
+                    canvas.fillStyle = matched ? okColor : notOkColor;
+                else
+                    canvas.fillStyle = 'white';
+
                 canvas.moveTo(maskStartX,maskStartY);
                 canvas.rect(maskStartX, maskStartY, maskWidth/3, 10);
                 canvas.rect(maskStartX, maskStartY, 10, maskHeight/3);
@@ -313,9 +310,11 @@ export class QrCodeScanner extends ScopedElementsMixin(DBPLitElement) {
                 if (code) {
                     outputMessage.hidden = true;
                     outputData.parentElement.hidden = false;
-                    outputData.innerText = code.data;
-                    if (lastSentData !== code.data)
-                        that.sendUrl(code.data);
+                    if (lastSentData !== code.data) {
+                        if (matched)
+                            that.sendUrl(code.data);
+                        outputData.innerText = code.data;
+                    }
                     lastSentData = code.data;
                 } else {
                     outputMessage.hidden = false;