Skip to content
GitLab
Explore
Sign in
Primary navigation
Search or go to…
Project
Toolkit
Manage
Activity
Members
Labels
Plan
Issues
Issue boards
Milestones
Wiki
Code
Merge requests
Repository
Branches
Commits
Tags
Repository graph
Compare revisions
Snippets
Build
Pipelines
Jobs
Pipeline schedules
Artifacts
Deploy
Releases
Package Registry
Container Registry
Model registry
Operate
Environments
Terraform modules
Monitor
Incidents
Analyze
Value stream analytics
Contributor analytics
CI/CD analytics
Repository analytics
Model experiments
Help
Help
Support
GitLab documentation
Compare GitLab plans
Community forum
Contribute to GitLab
Provide feedback
Terms and privacy
Keyboard shortcuts
?
Snippets
Groups
Projects
This is an archived project. Repository and other project resources are read-only.
Show more breadcrumbs
digital blueprint
Web Component Framework
Toolkit
Commits
684ce586
Unverified
Commit
684ce586
authored
3 years ago
by
Bekerle, Patrizio
Browse files
Options
Downloads
Patches
Plain Diff
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
3 years ago
Stage: test
Stage: deploy
Stage: e2e
Changes
2
Pipelines
1
Hide whitespace changes
Inline
Side-by-side
Showing
2 changed files
packages/qr-code-scanner/README.md
+15
-7
15 additions, 7 deletions
packages/qr-code-scanner/README.md
packages/qr-code-scanner/package.json
+1
-1
1 addition, 1 deletion
packages/qr-code-scanner/package.json
with
16 additions
and
8 deletions
packages/qr-code-scanner/README.md
+
15
−
7
View file @
684ce586
...
@@ -7,7 +7,8 @@ npm i @dbp-toolkit/qr-code-scanner
...
@@ -7,7 +7,8 @@ npm i @dbp-toolkit/qr-code-scanner
```
```
## Requirements
## Requirements
-
Https
For some browsers it might be necessary to host the html using this component via https.
## Usage
## Usage
...
@@ -16,17 +17,23 @@ npm i @dbp-toolkit/qr-code-scanner
...
@@ -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>
<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).
Or directly via CDN:
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'`
.
```
html
In this event you can read the data of the qr code with:
`'event.detail'`
.
<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
## Attributes
-
`lang`
(optional, default:
`de`
): set to
`de`
or
`en`
for German or English
-
`lang`
(optional, default:
`de`
): set to
`de`
or
`en`
for German or English
-
example
`<dbp-qr-code-scanner lang="de"></dbp-qr-code-scanner>`
-
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
-
`show-output`
(optional, default:
`false`
): set to
`true`
for showing
a box under the video canvas with the read QR code data
a box under the video canvas with the read QR code data
-
example
`<dbp-qr-code-scanner show-output></dbp-qr-code-scanner>`
-
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.
...
@@ -85,4 +92,5 @@ You can try the webcomponent with this example QR Code.
### Hint
### Hint
Add the attribute
`show-output`
for debugging propose.
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>`
This diff is collapsed.
Click to expand it.
packages/qr-code-scanner/package.json
+
1
−
1
View file @
684ce586
{
{
"name"
:
"@dbp-toolkit/qr-code-scanner"
,
"name"
:
"@dbp-toolkit/qr-code-scanner"
,
"homepage"
:
"https://gitlab.tugraz.at/dbp/web-components/toolkit/-/tree/master/packages/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"
,
"main"
:
"src/index.js"
,
"license"
:
"LGPL-2.1-or-later"
,
"license"
:
"LGPL-2.1-or-later"
,
"repository"
:
{
"repository"
:
{
...
...
This diff is collapsed.
Click to expand it.
Preview
0%
Loading
Try again
or
attach a new file
.
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Save comment
Cancel
Please
register
or
sign in
to comment