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

Add webcomponent qr-code-scanner

parent 9dc05ecd
No related branches found
No related tags found
No related merge requests found
Pipeline #13198 failed
Stage: test
Expand all Show whitespace changes
Inline Side-by-side
Showing
with 915 additions and 0 deletions
packages/qr-code-scanner/.cert/server.cert 0 → 100644
+ 13
− 0
View file @ 27053180
-----BEGIN CERTIFICATE-----
MIIB+zCCAWSgAwIBAgIJdpM6qGYddQBkMA0GCSqGSIb3DQEBCwUAMBwxGjAYBgNV
BAMTEWRicC1kZXYubG9jYWxob3N0MB4XDTIwMDkyOTA4NTM1NFoXDTQ4MDIxNDA5
NTM1NFowHDEaMBgGA1UEAxMRZGJwLWRldi5sb2NhbGhvc3QwgZ8wDQYJKoZIhvcN
AQEBBQADgY0AMIGJAoGBAK0gJFcxEE6DqThq1/ewpHBm0h7l8I0UjcYpeO0syvUS
gXVo0yv3XUqQCMMFXJHBHbyqSF3VBjzvCzLsnqcXvoldY9bIz+flz9Ek6/1zIhww
uLjmS4C9r56+1pyZv4tK5w6UqciXoxeJPz+L1DhSfPqFGc65NB/iVKSqhWUPKqPf
AgMBAAGjRTBDMAwGA1UdEwQFMAMBAf8wCwYDVR0PBAQDAgL0MCYGA1UdEQQfMB2G
G2h0dHA6Ly9leGFtcGxlLm9yZy93ZWJpZCNtZTANBgkqhkiG9w0BAQsFAAOBgQB+
34EFsWF1Uw7GHUYD9ZFp1MxvvY0Sz5DJ1o+7Pf73d0/+bu1xDZmpI5cWtx/meVBO
2+8R8CzzI4X5CpRT1Dd6kKJHnhFmjqrgw4Vgp4rjbikW83G9ccpjPniimiXsR+ep
W+ekyndqxMssoCTMaC7WqOSLrHU3PzFaTeTJeimELg==
-----END CERTIFICATE-----
packages/qr-code-scanner/.cert/server.key 0 → 100644
+ 15
− 0
View file @ 27053180
-----BEGIN RSA PRIVATE KEY-----
MIICXQIBAAKBgQCtICRXMRBOg6k4atf3sKRwZtIe5fCNFI3GKXjtLMr1EoF1aNMr
911KkAjDBVyRwR28qkhd1QY87wsy7J6nF76JXWPWyM/n5c/RJOv9cyIcMLi45kuA
va+evtacmb+LSucOlKnIl6MXiT8/i9Q4Unz6hRnOuTQf4lSkqoVlDyqj3wIDAQAB
AoGBAISeWZg9Kmuqqcdg+T1xIBZGfXFT3RiFhTEmdc7hgDuJyIfDG/jTDbDfcwbJ
paa1k20B2Fugop2s1BxXbBU9uCNI0lyRQk0oo3nrEg2lcpqkF2w5q7LnF+MhsqOL
9GPgCH9dk5gogLMcm4kdhmSvil6pBA42vA9JLrc1wMTsvBqBAkEA3nsQ8t9x9Gka
/u5D3WD7Xx/j8XVetsv+Pk2x+Uw0maOuHUHSjGFvcNEZKv5RN9Q16ypKcZlL3inT
0t2EC/UIQQJBAMc1esK8a5Yr6zwBQpxYtZ4mXce+Zyi9R3M4w7dSOtKXHY2WlyaR
q/GfDwXu0mqoH9s6fEPCLziX1jWmtn31pB8CQQCFm0hhYnivu5L/t5y/zKcIyED+
V2rqwfTL+6K+wNnxzk8YuNe1gCoJiTjhDds+eM1sjXgpYlMiduIDhw3ulFdBAkBB
c9vi8f+zdriynYNiVW9PCDIV+ARzCUXZoNQFfrofCVHHfKwrGv/Qwr8v5tkx/A2D
fYLozHuxb4oNVLpvRm9nAkA7rin1POovAdwPLcuuRavxU+oOgAnZ/H3r1aEqI2Lm
jIah8AQQorfHKAqBbkv93lej0LcP0ubW8meO4G41Hhig
-----END RSA PRIVATE KEY-----
packages/qr-code-scanner/.gitignore 0 → 100644
+ 5
− 0
View file @ 27053180
dist
node_modules
.idea
npm-debug.log
package-lock.json
packages/qr-code-scanner/.gitmodules 0 → 100644
+ 3
− 0
View file @ 27053180
[submodule "vendor/common"]
path = vendor/common
url = git@gitlab.tugraz.at:dbp/web-components/Common.git
packages/qr-code-scanner/LICENSE 0 → 100644
+ 502
− 0
View file @ 27053180
This diff is collapsed.
packages/qr-code-scanner/README.md 0 → 100644
+ 56
− 0
View file @ 27053180
# Qr Code Scanner Web Component
[GitLab Repository](https://gitlab.tugraz.at/dbp/web-components/qr-code-scanner)
## Requirements
- Https
## Usage
```html
<dbp-qr-code-scanner></dbp-qr-code-scanner>
```
## 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>`
## Local development
```bash
# get the source
git clone git@gitlab.tugraz.at:dbp/web-components/qr-code-scanner.git
cd qr-code-scanner
git submodule update --init
# install dependencies (make sure you have npm version 4+ installed, so symlinks to the git submodules are created automatically)
yarn install
# constantly build dist/bundle.js and run a local web-server on port 8002
yarn run watch-local
# run tests
yarn test
```
Jump to <http://localhost:8002> and you should get a demo page.
## Camera for local development
You can use your desktop as a camera, to test the qr code reader
```bash
#install the virtual cam
sudo apt install ffmpeg v4l2loopback-dkms; sudo modprobe v4l2loopback
#start virtual cam - Dummy video device (0x0000)
ffmpeg -f x11grab -r 15 -s 1280x720 -i :0.0+0,0 -vcodec rawvideo -pix_fmt yuv420p -threads 0 -f v4l2 /dev/video0
```
Then you can place a QR Code in the left corner of your desktop.
You can try the webcomponent with this example QR Code.
![QR-Code-Example](qr-code-dummy.png)
packages/qr-code-scanner/assets/favicon.ico 0 → 100644
+ 0
− 0
View file @ 27053180
packages/qr-code-scanner/assets/favicon.ico

2.49 KiB

packages/qr-code-scanner/assets/index.html 0 → 100644
+ 13
− 0
View file @ 27053180
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<script type="module" src="dbp-qr-code-scanner-demo.js"></script>
</head>
<body>
<dbp-qr-code-scanner-demo lang="de"></dbp-qr-code-scanner-demo>
</body>
</html>
packages/qr-code-scanner/i18next-scanner.config.js 0 → 100644
+ 15
− 0
View file @ 27053180
module.exports = {
input: [
'src/*.js',
],
output: './',
options: {
debug: false,
removeUnusedKeys: true,
lngs: ['en','de'],
resource: {
loadPath: 'src/i18n/{{lng}}/{{ns}}.json',
savePath: 'src/i18n/{{lng}}/{{ns}}.json'
},
},
}
packages/qr-code-scanner/karma.conf.js 0 → 100644
+ 23
− 0
View file @ 27053180
// Trick to use the auto-downloaded puppeteer chrome binary
process.env.CHROME_BIN = require('puppeteer').executablePath();
module.exports = function(config) {
config.set({
basePath: 'dist',
frameworks: ['mocha', 'chai'],
files: [
{pattern: './*.js', included: true, watched: true, served: true, type: 'module'},
{pattern: './**/*', included: false, watched: true, served: true},
],
autoWatch: true,
browsers: ['ChromeHeadlessNoSandbox'],
customLaunchers: {
ChromeHeadlessNoSandbox: {
base: 'ChromeHeadless',
flags: ['--no-sandbox']
}
},
singleRun: false,
logLevel: config.LOG_ERROR
});
}
packages/qr-code-scanner/package.json 0 → 100644
+ 48
− 0
View file @ 27053180
{
"name": "dbp-qr-code-scanner",
"version": "1.0.0",
"main": "src/index.js",
"license": "LGPL-2.1-or-later",
"private": true,
"devDependencies": {
"@rollup/plugin-commonjs": "^14.0.0",
"@rollup/plugin-json": "^4.0.0",
"@rollup/plugin-node-resolve": "^8.4.0",
"@rollup/plugin-url": "^5.0.1",
"chai": "^4.2.0",
"file-loader": "^6.1.0",
"i18next-scanner": "^2.10.2",
"karma": "^5.1.0",
"karma-chai": "^0.1.0",
"karma-chrome-launcher": "^3.0.0",
"karma-mocha": "^2.0.1",
"mocha": "^8.0.1",
"puppeteer": "^2.1.1",
"rollup": "^2.19.0",
"rollup-plugin-consts": "^1.0.1",
"rollup-plugin-copy": "^3.1.0",
"rollup-plugin-delete": "^2.0.0",
"rollup-plugin-serve": "^1.0.1",
"rollup-plugin-terser": "^6.1.0"
},
"dependencies": {
"@open-wc/scoped-elements": "^1.1.1",
"dbp-common": "^1.0.0",
"lit-element": "^2.3.1",
"qr-scanner": "^1.2.0"
},
"scripts": {
"clean": "rm dist/*",
"build": "npm run build-local",
"build-local": "rollup -c",
"build-dev": "rollup -c --environment BUILD:development",
"build-prod": "rollup -c --environment BUILD:production",
"build-demo": "rollup -c --environment BUILD:demo",
"build-test": "rollup -c --environment BUILD:test",
"i18next": "i18next-scanner",
"watch": "npm run watch-local",
"watch-local": "rollup -c --watch",
"watch-dev": "rollup -c --watch --environment BUILD:development",
"test": "npm run build-test && karma start --singleRun"
}
}
packages/qr-code-scanner/qr-code-dummy.png 0 → 100644
+ 0
− 0
View file @ 27053180
packages/qr-code-scanner/qr-code-dummy.png

3.86 KiB

packages/qr-code-scanner/rollup.config.js 0 → 100644
+ 81
− 0
View file @ 27053180
import glob from 'glob';
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import copy from 'rollup-plugin-copy';
import {terser} from "rollup-plugin-terser";
import json from '@rollup/plugin-json';
import serve from 'rollup-plugin-serve';
import url from "@rollup/plugin-url";
import consts from 'rollup-plugin-consts';
import del from 'rollup-plugin-delete';
import fs from "fs";
import selfsigned from "selfsigned";
import {getPackagePath} from "../../rollup.utils";
const build = (typeof process.env.BUILD !== 'undefined') ? process.env.BUILD : 'local';
console.log("build: " + build);
const USE_HTTPS = true;
function generateTLSConfig() {
fs.mkdirSync('.cert', {recursive: true});
if (!fs.existsSync('.cert/server.key') || !fs.existsSync('.cert/server.cert')) {
const attrs = [{name: 'commonName', value: 'dbp-dev.localhost'}];
const pems = selfsigned.generate(attrs, {algorithm: 'sha256', days: 9999});
fs.writeFileSync('.cert/server.key', pems.private);
fs.writeFileSync('.cert/server.cert', pems.cert);
}
return {
key: fs.readFileSync('.cert/server.key'),
cert: fs.readFileSync('.cert/server.cert')
}
}
export default (async () => {
return {
input: (build != 'test') ? ['src/dbp-qr-code-scanner.js', 'src/dbp-qr-code-scanner-demo.js'] : glob.sync('test/**/*.js'),
output: {
dir: 'dist',
entryFileNames: '[name].js',
chunkFileNames: 'shared/[name].[hash].[format].js',
format: 'esm',
sourcemap: true
},
plugins: [
del({
targets: 'dist/*'
}),
consts({
environment: build,
}),
resolve(),
commonjs(),
json(),
url({
limit: 0,
emitFiles: true,
fileName: 'shared/[name].[hash][extname]'
}),
(build !== 'local' && build !== 'test') ? terser() : false,
copy({
targets: [
{src: 'assets/index.html', dest: 'dist'},
{src: 'assets/favicon.ico', dest: 'dist'},
{
src: await getPackagePath('qr-scanner', 'qr-scanner-worker.min.js'),
dest: 'dist/local/dbp-qr-scanner'
},
]
}),
(process.env.ROLLUP_WATCH === 'true') ? serve({
contentBase: 'dist',
host: '127.0.0.1',
port: 8002,
https: USE_HTTPS ? generateTLSConfig() : false
}) : false
]
}
});
packages/qr-code-scanner/src/dbp-qr-code-scanner-demo.js 0 → 100644
+ 61
− 0
View file @ 27053180
import {i18n} from './i18n';
import {css, html, LitElement} from 'lit-element';
import {ScopedElementsMixin} from '@open-wc/scoped-elements';
import * as commonUtils from 'dbp-common/utils';
import * as commonStyles from "dbp-common/styles";
import {QrCodeScanner} from './qr-code-scanner.js';
class QrCodeScannerDemo extends ScopedElementsMixin(LitElement) {
constructor() {
super();
this.lang = 'de';
}
static get scopedElements() {
return {
'dbp-qr-code-scanner': QrCodeScanner,
};
}
static get properties() {
return {
lang: { type: String },
};
}
connectedCallback() {
super.connectedCallback();
i18n.changeLanguage(this.lang);
this.updateComplete.then(()=>{
});
}
static get styles() {
// language=css
return css`
${commonStyles.getThemeCSS()}
${commonStyles.getGeneralCSS()}
${commonStyles.getButtonCSS()}
`;
}
render() {
return html`
<section class="section">
<div class="container">
<h1 class="title">QR-Code-Scanner-Demo</h1>
</div>
<div class="container">
<div class="columns is-centered">
<div class="column">
<dbp-qr-code-scanner lang="${this.lang}"></dbp-qr-code-scanner>
</div>
</div>
</div>
</section>
`;
}
}
commonUtils.defineCustomElement('dbp-qr-code-scanner-demo', QrCodeScannerDemo);
packages/qr-code-scanner/src/dbp-qr-code-scanner.js 0 → 100644
+ 3
− 0
View file @ 27053180
import * as commonUtils from 'dbp-common/utils';
commonUtils.defineCustomElement('dbp-qr-code-scanner', QrCodeScanner);
packages/qr-code-scanner/src/i18n.js 0 → 100644
+ 6
− 0
View file @ 27053180
import {createInstance} from 'dbp-common/i18next.js';
import de from './i18n/de/translation.json';
import en from './i18n/en/translation.json';
export const i18n = createInstance({en: en, de: de}, 'de', 'en');
\ No newline at end of file
packages/qr-code-scanner/src/i18n/de/translation.json 0 → 100644
+ 2
− 0
View file @ 27053180
{
}
packages/qr-code-scanner/src/i18n/en/translation.json 0 → 100644
+ 2
− 0
View file @ 27053180
{
}
packages/qr-code-scanner/src/index.js 0 → 100644
+ 3
− 0
View file @ 27053180
import {QrCodeScanner} from './qr-code-scanner.js';
export {QrCodeScanner};
\ No newline at end of file
packages/qr-code-scanner/src/qr-code-scanner.js 0 → 100644
+ 64
− 0
View file @ 27053180
import {i18n} from './i18n';
import {css, html} from 'lit-element';
import DBPLitElement from 'dbp-common/dbp-lit-element';
import * as commonStyles from 'dbp-common/styles';
import {Icon, MiniSpinner} from 'dbp-common';
import {classMap} from 'lit-html/directives/class-map.js';
import QrScanner from 'qr-scanner';
import * as commonUtils from "dbp-common/utils";
/**
* Notification web component
*/
export class QrCodeScanner extends DBPLitElement {
constructor() {
super();
this.lang = 'de';
}
/**
* See: https://lit-element.polymer-project.org/guide/properties#initialize
*/
static get properties() {
return {
lang: { type: String },
};
}
connectedCallback() {
super.connectedCallback();
i18n.changeLanguage(this.lang);
const that = this;
this.updateComplete.then(()=>{
QrScanner.WORKER_PATH = commonUtils.getAssetURL('dbp-qr-scanner', 'qr-scanner-worker.min.js');
const qrScanner = new QrScanner(this._('#reader'), result => console.log('decoded qr code:', result), undefined, undefined, 'user');
qrScanner.start();
});
}
static get styles() {
// language=css
return css`
${commonStyles.getThemeCSS()}
${commonStyles.getGeneralCSS()}
`;
}
//todo check for cam: QrScanner.hasCamera();
//start stop button
//doku
//demo
//quadrat
render() {
return html`
<div class="columns">
<div class="column" id="qr">
<button class="start">start scanning</button>
<video id="reader"></video>
</div>
</div>
`;
}
}
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment