Skip to content
Snippets Groups Projects
Unverified Commit 684ce586 authored by Bekerle, Patrizio's avatar Bekerle, Patrizio :fire:
Browse files

Add dbp-qr-code-scanner usage documentation, fixes and other additions

parent 921798e4
No related branches found
No related tags found
No related merge requests found
Pipeline #45724 failed
......@@ -7,7 +7,8 @@ npm i @dbp-toolkit/qr-code-scanner
```
## Requirements
- Https
For some browsers it might be necessary to host the html using this component via https.
## Usage
......@@ -16,17 +17,23 @@ npm i @dbp-toolkit/qr-code-scanner
<script type="module" src="node_modules/@dbp-toolkit/qr-code-scanner/dist/dbp-qr-code-scanner.js"></script>
```
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'`.
Or directly via CDN:
```html
<dbp-qr-code-scanner></dbp-qr-code-scanner>
<script type="module" src="https://unpkg.com/@dbp-toolkit/qr-code-scanner@0.2.2/dist/dbp-qr-code-scanner.js"></script>
```
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 an event named `dbp-qr-code-scanner-data` will be fired.
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"></dbp-qr-code-scanner>`
- `match-regex` (optional, default: `'.*'`): a regular expression that when matching the QR code will result in the user getting feedback
- `match-regex` (optional, default: `.*`): a regular expression that when matching the QR code will result in the user getting feedback
- `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>`
......@@ -85,4 +92,5 @@ 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>`
Example: `<dbp-qr-code-scanner show-output></dbp-qr-code-scanner>`
{
"name": "@dbp-toolkit/qr-code-scanner",
"homepage": "https://gitlab.tugraz.at/dbp/web-components/toolkit/-/tree/master/packages/qr-code-scanner",
"version": "0.2.2",
"version": "0.2.3",
"main": "src/index.js",
"license": "LGPL-2.1-or-later",
"repository": {
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment