From 514918ca215b29e5a8b6ec869cf484d30d754fb7 Mon Sep 17 00:00:00 2001
From: Tamara Steinwender <tamara.steinwender@tugraz.at>
Date: Wed, 30 Sep 2020 09:50:45 +0200
Subject: [PATCH] Small Ui fixes in Qr-Code Scanner
---
packages/qr-code-scanner/rollup.config.js | 1 +
.../qr-code-scanner/src/qr-code-scanner.js | 42 +++++++++++--------
2 files changed, 25 insertions(+), 18 deletions(-)
diff --git a/packages/qr-code-scanner/rollup.config.js b/packages/qr-code-scanner/rollup.config.js
index a7825593..71dc2688 100644
--- a/packages/qr-code-scanner/rollup.config.js
+++ b/packages/qr-code-scanner/rollup.config.js
@@ -64,6 +64,7 @@ export default (async () => {
targets: [
{src: 'assets/index.html', dest: 'dist'},
{src: 'assets/favicon.ico', dest: 'dist'},
+ {src: await getPackagePath('dbp-common', 'assets/icons/*.svg'), dest: 'dist/local/dbp-common/icons'},
{
src: await getPackagePath('qr-scanner', 'qr-scanner-worker.min.js'),
dest: 'dist/local/dbp-qr-scanner'
diff --git a/packages/qr-code-scanner/src/qr-code-scanner.js b/packages/qr-code-scanner/src/qr-code-scanner.js
index 775c4d52..7c1cc4f4 100644
--- a/packages/qr-code-scanner/src/qr-code-scanner.js
+++ b/packages/qr-code-scanner/src/qr-code-scanner.js
@@ -16,6 +16,7 @@ export class QrCodeScanner extends DBPLitElement {
super();
this.lang = 'de';
+ this.askPermission = false;
this.videoRunning = false;
this.notSupported = false;
@@ -36,6 +37,7 @@ export class QrCodeScanner extends DBPLitElement {
static get properties() {
return {
lang: { type: String },
+ askPermission: { type: Boolean, attribute: false },
videoRunning: { type: Boolean, attribute: false },
notSupported: { type: Boolean, attribute: false },
scanIsOk: { type: Boolean, attribute: true }
@@ -96,6 +98,8 @@ export class QrCodeScanner extends DBPLitElement {
}
qrCodeScannerInit() {
+ this.askPermission = true;
+
let video = document.createElement("video");
let canvasElement = this._("#canvas");
let canvas = canvasElement.getContext("2d");
@@ -104,6 +108,8 @@ export class QrCodeScanner extends 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)
.getPropertyValue('--dbp-danger-bg-color');
@@ -134,7 +140,7 @@ export class QrCodeScanner extends DBPLitElement {
// Do something with the track such as using the Image Capture API.
})
- });
+ }).catch((e) => { console.log(e); that.askPermission = true;});
function tick() {
if (that.videoRunning === false) {
@@ -181,6 +187,7 @@ export class QrCodeScanner extends DBPLitElement {
}
stopScanning() {
+ this.askPermission = false;
this.videoRunning = false;
}
@@ -195,6 +202,7 @@ export class QrCodeScanner extends DBPLitElement {
return css`
${commonStyles.getThemeCSS()}
${commonStyles.getGeneralCSS()}
+ ${commonStyles.getSelect2CSS()}
body {
font-family: 'Ropa Sans', sans-serif;
@@ -228,24 +236,16 @@ export class QrCodeScanner extends DBPLitElement {
#noQRFound {
text-align: center;
}
+
+ .border{
+ border-bottom: 1px solid black;
+ }
`;
}
//doku
//demo
- //check obs geht: function hasGetUserMedia() {
- // // Note: Opera builds are unprefixed.
- // return !!(navigator.getUserMedia || navigator.webkitGetUserMedia ||
- // navigator.mozGetUserMedia || navigator.msGetUserMedia);
- // }
- //
- // if (hasGetUserMedia()) {
- // // Good to go!
- // } else {
- // alert('getUserMedia() is not supported in your browser');
- // }
-
render() {
return html`
<div class="columns">
@@ -253,12 +253,18 @@ export class QrCodeScanner extends DBPLitElement {
<div class="${classMap({hidden: this.notSupported})}">
- <div id="loadingMessage">🎥 Unable to access video stream (please make sure you have a webcam enabled)</div>
- <button id="switch">On / Off</button>
+
+ <div class="button-wrapper border">
+ <span class="select">
+ <select id="videoSource"></select>
+ </span>
+ <button class="start button is-primary ${classMap({hidden: this.videoRunning})}" @click="${() => this.qrCodeScannerInit()}">start scanning</button>
+ <button class="stop button is-primary ${classMap({hidden: !this.videoRunning})}" @click="${() => this.stopScanning()}">stop scanning</button>
+ </div>
+ <div id="loadingMessage" class="${classMap({hidden: !this.askPermission})}">🎥 Unable to access video stream (please make sure you have a webcam enabled)</div>
<canvas id="canvas" hidden></canvas>
- <select id="videoSource"></select>
- <button class="start ${classMap({hidden: this.videoRunning})}" @click="${() => this.qrCodeScannerInit()}">start scanning</button>
- <button class="stop ${classMap({hidden: !this.videoRunning})}" @click="${() => this.stopScanning()}">stop scanning</button>
+
+
<div id="output" hidden>
<div id="outputMessage">No QR code detected.</div>
<div hidden><b>Data:</b> <span id="outputData"></span></div>
--
GitLab