From 76c217b4e493bcf5d826c94c6a5dc5030d563f89 Mon Sep 17 00:00:00 2001
From: Tamara Steinwender <tamara.steinwender@tugraz.at>
Date: Wed, 7 Oct 2020 10:12:13 +0200
Subject: [PATCH] Add color border to QR code scanner, Update README for QR
code scanner
---
packages/qr-code-scanner/README.md | 26 +++++++++++++++++--
.../qr-code-scanner/src/qr-code-scanner.js | 26 ++++++++-----------
2 files changed, 35 insertions(+), 17 deletions(-)
diff --git a/packages/qr-code-scanner/README.md b/packages/qr-code-scanner/README.md
index d2e5ee42..4661c2c9 100644
--- a/packages/qr-code-scanner/README.md
+++ b/packages/qr-code-scanner/README.md
@@ -1,4 +1,4 @@
-# Qr Code Scanner Web Component
+# QR code Scanner Web Component
[GitLab Repository](https://gitlab.tugraz.at/dbp/web-components/qr-code-scanner)
@@ -11,11 +11,29 @@
<dbp-qr-code-scanner></dbp-qr-code-scanner>
```
+The QR code Scanner Web Component uses a camera device, which you can select(if you have more than one).
+With this camera device you can scan a QR code. If a QR code is detected a event will be fired named:
+`'dbp-qr-code-scanner-data'`.
+ In this event you can read the data of the qr code with: `'event.detail'`.
+
+
## Attributes
- `lang` (optional, default: `de`): set to `de` or `en` for German or English
- - example `<dbp-qr-code-scanner lang="de" client-id="my-client-id"></dbp-notification>`
+ - 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>`
+- `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>`
+- `stop-scan` (optional, default: `false`): set to `true` when you don't want to start the QR code reader immediatly
+after loaded. This attribute is also used to stop the QR code reader if you don't need it anymore.
+ - example `<dbp-qr-code-scanner stop-scan></dbp-qr-code-scanner>`
+## Events
+
+- `'dbp-qr-code-scanner-data'`: Outgoing Event which is fired if a QR code is detected. The data of the detected QR code is in `event.detail`.
## Local development
@@ -54,3 +72,7 @@ You can try the webcomponent with this example QR Code.
+### Hint
+
+Add the attribute `show-output` for debugging propose.
+- example: `<dbp-qr-code-scanner show-output></dbp-qr-code-scanner>`
diff --git a/packages/qr-code-scanner/src/qr-code-scanner.js b/packages/qr-code-scanner/src/qr-code-scanner.js
index 73506710..7f338694 100644
--- a/packages/qr-code-scanner/src/qr-code-scanner.js
+++ b/packages/qr-code-scanner/src/qr-code-scanner.js
@@ -157,6 +157,7 @@ export class QrCodeScanner extends ScopedElementsMixin(DBPLitElement) {
this.stopScan = false;
this.askPermission = true;
+
let video = document.createElement("video");
let canvasElement = this._("#canvas");
let canvas = canvasElement.getContext("2d");
@@ -166,12 +167,10 @@ export class QrCodeScanner extends ScopedElementsMixin(DBPLitElement) {
let outputMessage = this._("#outputMessage");
let outputData = this._("#outputData");
- //TODO
- let color = this.scanIsOk ? getComputedStyle(document.documentElement)
- .getPropertyValue('--dbp-success-bg-color') : getComputedStyle(document.documentElement)
+ 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);
@@ -252,10 +251,10 @@ export class QrCodeScanner extends ScopedElementsMixin(DBPLitElement) {
inversionAttempts: "dontInvert",
});
if (code) {
- drawLine(code.location.topLeftCorner, code.location.topRightCorner, that.scanIsOk ? 'green' : 'red');
- drawLine(code.location.topRightCorner, code.location.bottomRightCorner, that.scanIsOk ? 'green' : 'red');
- drawLine(code.location.bottomRightCorner, code.location.bottomLeftCorner, that.scanIsOk ? 'green' : 'red');
- drawLine(code.location.bottomLeftCorner, code.location.topLeftCorner, that.scanIsOk ? 'green' : 'red');
+ drawLine(code.location.topLeftCorner, code.location.topRightCorner, color);
+ drawLine(code.location.topRightCorner, code.location.bottomRightCorner, color);
+ drawLine(code.location.bottomRightCorner, code.location.bottomLeftCorner, color);
+ drawLine(code.location.bottomLeftCorner, code.location.topLeftCorner, color);
outputMessage.hidden = true;
outputData.parentElement.hidden = false;
outputData.innerText = code.data;
@@ -279,9 +278,9 @@ export class QrCodeScanner extends ScopedElementsMixin(DBPLitElement) {
this.videoRunning = false;
}
- sendUrl(url) {
- const event = new CustomEvent("dbp-qr-code-scanner-url",
- { bubbles: true, composed: true , detail: url});
+ sendUrl(data) {
+ const event = new CustomEvent("dbp-qr-code-scanner-data",
+ { bubbles: true, composed: true , detail: data});
this.dispatchEvent(event);
}
@@ -351,9 +350,6 @@ export class QrCodeScanner extends ScopedElementsMixin(DBPLitElement) {
`;
}
- //doku
- //demo
-
render() {
return html`
<div class="columns">
@@ -384,7 +380,7 @@ export class QrCodeScanner extends ScopedElementsMixin(DBPLitElement) {
<div hidden><b>${i18n.t('data')}:</b> <span id="outputData"></span></div>
</div>
</div>
- <div class="border ${classMap({hidden: !this.notSupported})}">
+ <div class="${classMap({hidden: !this.notSupported})}">
${i18n.t('no-support')}
</div>
</div>
--
GitLab