From c16bff11b1b46d0bf3c07ff607d3d3e3a1933c34 Mon Sep 17 00:00:00 2001
From: Christoph Reiter <reiter.christoph@gmail.com>
Date: Wed, 21 Oct 2020 15:43:41 +0200
Subject: [PATCH] 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 | 4 +--
.../src/dbp-qr-code-scanner-demo.js | 2 +-
.../qr-code-scanner/src/qr-code-scanner.js | 35 +++++++++----------
3 files changed, 19 insertions(+), 22 deletions(-)
diff --git a/packages/qr-code-scanner/README.md b/packages/qr-code-scanner/README.md
index ad498df5..f62262b9 100644
--- a/packages/qr-code-scanner/README.md
+++ b/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>`
diff --git a/packages/qr-code-scanner/src/dbp-qr-code-scanner-demo.js b/packages/qr-code-scanner/src/dbp-qr-code-scanner-demo.js
index f7728da0..7f97c462 100644
--- a/packages/qr-code-scanner/src/dbp-qr-code-scanner-demo.js
+++ b/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>
diff --git a/packages/qr-code-scanner/src/qr-code-scanner.js b/packages/qr-code-scanner/src/qr-code-scanner.js
index ce6e30e8..2e338eb4 100644
--- a/packages/qr-code-scanner/src/qr-code-scanner.js
+++ b/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;
--
GitLab