Add color border to QR code scanner, Update README for QR code scanner

packages/qr-code-scanner/README.md

-# 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.
 
 ![QR-Code-Example](qr-code-dummy.png)
 
+### Hint
+
+Add the attribute `show-output` for debugging propose.
+- example: `<dbp-qr-code-scanner show-output></dbp-qr-code-scanner>`

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>