Skip to content
Snippets Groups Projects
Commit 76c217b4 authored by Steinwender, Tamara's avatar Steinwender, Tamara
Browse files

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

parent c862e755
No related branches found
No related tags found
No related merge requests found
Pipeline #13332 passed
# 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>`
......@@ -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>
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment