diff --git a/packages/qr-code-scanner/README.md b/packages/qr-code-scanner/README.md index ad498df57fbf88c94663f963ed2f9c8453f9f0e1..f62262b95b724e8bfb38db300aa8c3698b11b66e 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 f7728da043dff8ba3fd1828cdf4ea3eebf78bd0f..7f97c4624bda928b720124c8e173c36b7044a1e3 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 ce6e30e8780feb3beacd48967851b7a78f79b787..2e338eb47c7741e0c1082466d80dbc40b6b7d18d 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;