From 684ce5865eed331e6babab1018a5cc0dc0bde450 Mon Sep 17 00:00:00 2001
From: Patrizio Bekerle <patrizio@bekerle.com>
Date: Wed, 16 Jun 2021 11:40:16 +0200
Subject: [PATCH] Add dbp-qr-code-scanner usage documentation, fixes and other
additions
---
packages/qr-code-scanner/README.md | 22 +++++++++++++++-------
packages/qr-code-scanner/package.json | 2 +-
2 files changed, 16 insertions(+), 8 deletions(-)
diff --git a/packages/qr-code-scanner/README.md b/packages/qr-code-scanner/README.md
index 318d03bb..dc633f3e 100644
--- a/packages/qr-code-scanner/README.md
+++ b/packages/qr-code-scanner/README.md
@@ -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>`
diff --git a/packages/qr-code-scanner/package.json b/packages/qr-code-scanner/package.json
index f9d5e3fc..4748a280 100644
--- a/packages/qr-code-scanner/package.json
+++ b/packages/qr-code-scanner/package.json
@@ -1,7 +1,7 @@
{
"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": {
--
GitLab