Merge pull request #6627 from Gamboster/v4

Feat: QR Scanner (Mobile)
This commit is contained in:
Gustavo Maximiliano Cortez 2017-09-05 11:00:19 -03:00 committed by GitHub
commit f84ce6656b
13 changed files with 504 additions and 110 deletions

View File

@ -1,111 +1,118 @@
{
"name": "copay",
"description": "Copay Bitcoin Wallet",
"version": "0.0.1",
"author": "BitPay",
"homepage": "https://copay.io/",
"private": true,
"scripts": {
"clean": "ionic-app-scripts clean",
"clean-all": "git clean -dfx",
"build": "ionic-app-scripts build",
"lint": "ionic-app-scripts lint",
"ionic:build": "ionic-app-scripts build",
"ionic:serve": "ionic-app-scripts serve",
"test": "karma start ./test-config/karma.conf.js",
"test-ci": "karma start ./test-config/karma.conf.js --single-run",
"extract": "ngx-translate-extract --input ./src --output ./src/assets/i18n/app.pot --clean --sort --format pot"
},
"dependencies": {
"@angular/common": "4.1.3",
"@angular/compiler": "4.1.3",
"@angular/compiler-cli": "4.1.3",
"@angular/core": "4.1.3",
"@angular/forms": "4.1.3",
"@angular/http": "4.1.3",
"@angular/platform-browser": "4.1.3",
"@angular/platform-browser-dynamic": "4.1.3",
"@angular/tsc-wrapped": "4.1.3",
"@biesbjerg/ngx-translate-po-http-loader": "1.0.1",
"@ionic-native/clipboard": "4.1.0",
"@ionic-native/core": "3.12.1",
"@ionic-native/file": "4.1.0",
"@ionic-native/social-sharing": "4.1.0",
"@ionic-native/splash-screen": "3.12.1",
"@ionic-native/status-bar": "3.12.1",
"@ionic-native/toast": "4.1.0",
"@ionic/storage": "2.0.1",
"@ngx-translate/core": "6.0.1",
"@nsalaun/ng-logger": "2.0.1",
"ajv": "5.2.2",
"autoprefixer": "7.1.2",
"cordova-clipboard": "1.0.0",
"cordova-ios": "4.4.0",
"cordova-plugin-console": "1.0.5",
"cordova-plugin-device": "1.1.4",
"cordova-plugin-splashscreen": "4.0.3",
"cordova-plugin-statusbar": "2.2.2",
"cordova-plugin-whitelist": "1.3.1",
"cordova-plugin-x-socialsharing": "5.1.8",
"cordova-plugin-x-toast": "2.6.0",
"cordova-sqlite-storage": "2.0.4",
"es6-promise-plugin": "4.1.0",
"ionic-angular": "3.6.0",
"ionic-plugin-keyboard": "2.2.1",
"ionicons": "3.0.0",
"lodash": "4.17.4",
"ngx-clipboard": "8.0.3",
"ngx-qrcode2": "0.0.3",
"rxjs": "5.4.0",
"sw-toolbox": "3.6.0",
"zone.js": "0.8.12"
},
"devDependencies": {
"@angular/cli": "1.3.0",
"@biesbjerg/ngx-translate-extract": "2.3.2",
"@ionic/app-scripts": "2.1.4",
"@types/chrome": "0.0.47",
"@types/jasmine": "2.5.53",
"@types/lodash": "4.14.71",
"@types/node": "8.0.19",
"angular2-template-loader": "0.6.2",
"codecov": "2.2.0",
"html-loader": "0.4.5",
"ionic": "3.9.2",
"jasmine-core": "2.6.4",
"jasmine-spec-reporter": "4.1.1",
"karma": "1.7.0",
"karma-chrome-launcher": "2.2.0",
"karma-jasmine": "1.1.0",
"karma-jasmine-html-reporter": "0.2.2",
"karma-mocha-reporter": "2.2.3",
"karma-phantomjs-launcher": "1.0.4",
"karma-remap-istanbul": "0.6.0",
"karma-sourcemap-loader": "0.3.7",
"karma-webpack": "2.0.4",
"null-loader": "0.1.1",
"ts-loader": "2.0.3",
"ts-node": "3.3.0",
"tslint": "5.5.0",
"tslint-eslint-rules": "4.1.1",
"typescript": "2.3.4",
"webpack": "3.4.1"
},
"cordova": {
"plugins": {
"cordova-sqlite-storage": {},
"cordova-plugin-console": {},
"cordova-plugin-device": {},
"cordova-plugin-splashscreen": {},
"cordova-plugin-statusbar": {},
"cordova-plugin-whitelist": {},
"ionic-plugin-keyboard": {},
"cordova-clipboard": {},
"cordova-plugin-x-toast": {},
"cordova-plugin-x-socialsharing": {}
"name": "copay",
"description": "Copay Bitcoin Wallet",
"version": "0.0.1",
"author": "BitPay",
"homepage": "https://copay.io/",
"private": true,
"scripts": {
"clean": "ionic-app-scripts clean",
"clean-all": "git clean -dfx",
"build": "ionic-app-scripts build",
"lint": "ionic-app-scripts lint",
"ionic:build": "ionic-app-scripts build",
"ionic:serve": "ionic-app-scripts serve",
"test": "karma start ./test-config/karma.conf.js",
"test-ci": "karma start ./test-config/karma.conf.js --single-run",
"extract": "ngx-translate-extract --input ./src --output ./src/assets/i18n/app.pot --clean --sort --format pot"
},
"platforms": [
"ios"
]
}
}
"dependencies": {
"@angular/common": "4.1.3",
"@angular/compiler": "4.1.3",
"@angular/compiler-cli": "4.1.3",
"@angular/core": "4.1.3",
"@angular/forms": "4.1.3",
"@angular/http": "4.1.3",
"@angular/platform-browser": "4.1.3",
"@angular/platform-browser-dynamic": "4.1.3",
"@angular/tsc-wrapped": "4.1.3",
"@biesbjerg/ngx-translate-po-http-loader": "1.0.1",
"@ionic-native/clipboard": "4.1.0",
"@ionic-native/core": "3.12.1",
"@ionic-native/file": "4.1.0",
"@ionic-native/qr-scanner": "^4.1.0",
"@ionic-native/social-sharing": "4.1.0",
"@ionic-native/splash-screen": "3.12.1",
"@ionic-native/status-bar": "3.12.1",
"@ionic-native/toast": "4.1.0",
"@ionic/storage": "2.0.1",
"@ngx-translate/core": "6.0.1",
"@nsalaun/ng-logger": "2.0.1",
"ajv": "5.2.2",
"autoprefixer": "7.1.2",
"cordova-android": "^6.2.3",
"cordova-clipboard": "1.0.0",
"cordova-ios": "4.4.0",
"cordova-plugin-console": "1.0.5",
"cordova-plugin-device": "1.1.4",
"cordova-plugin-qrscanner": "^2.5.0",
"cordova-plugin-splashscreen": "4.0.3",
"cordova-plugin-statusbar": "2.2.2",
"cordova-plugin-whitelist": "1.3.1",
"cordova-plugin-wkwebview-engine": "git+https://github.com/ionic-team/cordova-plugin-wkwebview-engine.git",
"cordova-plugin-x-socialsharing": "5.1.8",
"cordova-plugin-x-toast": "2.6.0",
"cordova-sqlite-storage": "2.0.4",
"es6-promise-plugin": "4.1.0",
"ionic-angular": "3.6.0",
"ionic-plugin-keyboard": "2.2.1",
"ionicons": "3.0.0",
"lodash": "4.17.4",
"ngx-clipboard": "8.0.3",
"ngx-qrcode2": "0.0.3",
"rxjs": "5.4.0",
"sw-toolbox": "3.6.0",
"zone.js": "0.8.12"
},
"devDependencies": {
"@angular/cli": "1.3.0",
"@biesbjerg/ngx-translate-extract": "2.3.2",
"@ionic/app-scripts": "2.1.4",
"@types/chrome": "0.0.47",
"@types/jasmine": "2.5.53",
"@types/lodash": "4.14.71",
"@types/node": "8.0.19",
"angular2-template-loader": "0.6.2",
"codecov": "2.2.0",
"html-loader": "0.4.5",
"ionic": "3.9.2",
"jasmine-core": "2.6.4",
"jasmine-spec-reporter": "4.1.1",
"karma": "1.7.0",
"karma-chrome-launcher": "2.2.0",
"karma-jasmine": "1.1.0",
"karma-jasmine-html-reporter": "0.2.2",
"karma-mocha-reporter": "2.2.3",
"karma-phantomjs-launcher": "1.0.4",
"karma-remap-istanbul": "0.6.0",
"karma-sourcemap-loader": "0.3.7",
"karma-webpack": "2.0.4",
"null-loader": "0.1.1",
"ts-loader": "2.0.3",
"ts-node": "3.3.0",
"tslint": "5.5.0",
"tslint-eslint-rules": "4.1.1",
"typescript": "2.3.4",
"webpack": "3.4.1"
},
"cordova": {
"plugins": {
"cordova-sqlite-storage": {},
"cordova-plugin-console": {},
"cordova-plugin-device": {},
"cordova-plugin-splashscreen": {},
"cordova-plugin-statusbar": {},
"cordova-plugin-whitelist": {},
"ionic-plugin-keyboard": {},
"cordova-clipboard": {},
"cordova-plugin-x-toast": {},
"cordova-plugin-x-socialsharing": {},
"cordova-plugin-qrscanner": {},
"cordova-plugin-wkwebview-engine": {}
},
"platforms": [
"android",
"ios"
]
}
}

View File

@ -9,6 +9,7 @@ import { SplashScreen } from '@ionic-native/splash-screen';
import { Toast } from '@ionic-native/toast';
import { Clipboard } from '@ionic-native/clipboard';
import { SocialSharing } from '@ionic-native/social-sharing';
import { QRScanner } from '@ionic-native/qr-scanner';
/* Modules */
import { NgLoggerModule, Logger, Level } from '@nsalaun/ng-logger';
@ -22,6 +23,7 @@ import { CopayApp } from './app.component';
/* Pages */
import { HomePage } from '../pages/home/home';
import { ReceivePage } from '../pages/receive/receive';
import { ScanPage } from '../pages/scan/scan';
import { SendPage } from '../pages/send/send';
import { SettingPage } from '../pages/setting/setting';
import { TabsPage } from '../pages/tabs/tabs';
@ -37,6 +39,7 @@ import { PlatformProvider } from '../providers/platform/platform';
import { ConfigProvider } from '../providers/config/config';
import { LanguageProvider } from '../providers/language/language';
import { UnitProvider } from '../providers/unit/unit';
import { ScanProvider } from '../providers/scan/scan';
export function createTranslateLoader(http: Http) {
return new TranslatePoHttpLoader(http, 'assets/i18n', '.po');
@ -48,6 +51,7 @@ export function createTranslateLoader(http: Http) {
HomePage,
ReceivePage,
SendPage,
ScanPage,
SettingPage,
AboutPage,
TermsOfUsePage,
@ -72,6 +76,7 @@ export function createTranslateLoader(http: Http) {
CopayApp,
HomePage,
ReceivePage,
ScanPage,
SendPage,
SettingPage,
AboutPage,
@ -105,7 +110,9 @@ export function createTranslateLoader(http: Http) {
PlatformProvider,
ConfigProvider,
LanguageProvider,
UnitProvider
UnitProvider,
QRScanner,
ScanProvider
]
})
export class AppModule { }

View File

@ -0,0 +1,37 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 20.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="QR-scanner-guides" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" viewBox="0 0 271 236" style="enable-background:new 0 0 271 236;" xml:space="preserve">
<style type="text/css">
.st0{filter:url(#filter-2);}
.st1{fill:none;stroke:#647CE8;stroke-width:2;}
.st2{fill:#FFFFFF;fill-opacity:0.3;}
</style>
<filter filterUnits="objectBoundingBox" height="200%" id="filter-2" width="200%" x="-50%" y="-50%">
<feMorphology in="SourceAlpha" operator="dilate" radius="1" result="shadowSpreadOuter1"></feMorphology>
<feOffset dx="0" dy="0" in="shadowSpreadOuter1" result="shadowOffsetOuter1"></feOffset>
<feMorphology in="SourceAlpha" operator="erode" radius="1" result="shadowInner"></feMorphology>
<feOffset dx="0" dy="0" in="shadowInner" result="shadowInner"></feOffset>
<feComposite in="shadowOffsetOuter1" in2="shadowInner" operator="out" result="shadowOffsetOuter1"></feComposite>
<feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="6"></feGaussianBlur>
<feColorMatrix in="shadowBlurOuter1" type="matrix" values="0 0 0 0 0.392156863 0 0 0 0 0.48627451 0 0 0 0 0.909803922 0 0 0 1 0">
</feColorMatrix>
</filter>
<g id="scan-line">
<g class="st0">
<line x1="11" y1="111" x2="260" y2="111"/>
</g>
<g>
<path id="line" class="st1" d="M11,111h249"/>
</g>
</g>
<path id="top-left" class="st2" d="M28,10h53.1c2.8,0,5-2.2,5-5s-2.2-5-5-5H23c-2.8,0-5,2.2-5,5v58c0,2.8,2.2,5,5,5s5-2.2,5-5V10z"
/>
<path id="bottom-left" class="st2" d="M28,224.7v-53.1c0-2.8-2.2-5-5-5s-5,2.2-5,5v58.1c0,2.8,2.2,5,5,5h58c2.8,0,5-2.2,5-5
c0-2.8-2.2-5-5-5H28z"/>
<path id="top-right" class="st2" d="M244,10v53.1c0,2.8,2.2,5,5,5s5-2.2,5-5V5c0-2.8-2.2-5-5-5h-58c-2.8,0-5,2.2-5,5s2.2,5,5,5H244z
"/>
<path id="bottom-right" class="st2" d="M244.1,225.6H191c-2.8,0-5,2.2-5,5c0,2.8,2.2,5,5,5h58.1c2.8,0,5-2.2,5-5v-58
c0-2.8-2.2-5-5-5s-5,2.2-5,5V225.6z"/>
</svg>

After

Width:  |  Height:  |  Size: 2.0 KiB

View File

@ -0,0 +1,16 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 20.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="camera-toggle" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" viewBox="0 0 40 40" style="enable-background:new 0 0 40 40;" xml:space="preserve">
<style type="text/css">
.st0{opacity:0.8;fill:none;stroke:#FFFFFF;}
.st1{opacity:0.386;fill:#FFFFFF;enable-background:new ;}
</style>
<path id="top-arrow-line" class="st0" d="M10.5,18.1c0-4.7,4.3-8.5,9.5-8.5c3.7,0,6.9,1.9,8.5,4.7"/>
<path id="bottom-arrow-line" class="st0" d="M29.5,21c0,4.7-4.3,8.5-9.5,8.5c-3.7,0-6.9-1.9-8.5-4.7"/>
<polyline id="top-arrow-head" class="st0" points="28.9,11.1 28.4,14.1 25,13.7 "/>
<polyline id="bottom-arrow-head" class="st0" points="11,27.8 11.4,24.8 14.8,25.2 "/>
<path id="camera" class="st1" d="M24.6,21.9c0,0.8-0.7,1.5-1.5,1.5H17c-0.8,0-1.5-0.7-1.5-1.5v-3.5c0-0.8,0.7-1.5,1.5-1.5h1l0.8-1.1
h2.5l0.8,1.1h1c0.8,0,1.5,0.7,1.5,1.5V21.9z M20.1,21.9c1.1,0,2.1-0.8,2.1-1.9s-0.9-1.9-2.1-1.9C18.9,18.1,18,19,18,20
S18.9,21.9,20.1,21.9z"/>
</svg>

After

Width:  |  Height:  |  Size: 1.1 KiB

View File

@ -0,0 +1,9 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 20.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Flash_1_" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 40 40" style="enable-background:new 0 0 40 40;" xml:space="preserve">
<style type="text/css">
.st0{opacity:0.8;fill:#FFFFFF;enable-background:new ;}
</style>
<polygon id="bolt" class="st0" points="15,21.4 19.6,21.4 18,30 25,18.6 20.4,18.6 22,10 "/>
</svg>

After

Width:  |  Height:  |  Size: 536 B

30
src/pages/scan/scan.html Normal file
View File

@ -0,0 +1,30 @@
<!--
Generated template for the ScanPage page.
See http://ionicframework.com/docs/components/#navigation for more info on
Ionic pages and navigation.
-->
<ion-header>
<ion-navbar>
<ion-title>Scan</ion-title>
</ion-navbar>
</ion-header>
<ion-content class="back-trasnparent" padding>
<p>Scanner text: {{ text }}</p>
<p>Scanner visible: {{ scannerVisible }}</p>
<div class="ng-hide" id="page-scan-camera-ready" *ngIf="scannerVisible">
<div class="guides">
<img class="svg qr-scan-guides" src="assets/img/bitpay-wallet-qr-scan-guides.svg">
</div>
<div class="scanner-controls">
<span class="icon-flash" [ngClass]="{'active': lightActive}" (click)="toggleLight()">
</span>
<span class="icon-camera-toggle" [ngClass]="{'active': cameraToggleActive}" (click)="toggleCamera()">
</span>
</div>
</div>
</ion-content>

86
src/pages/scan/scan.scss Normal file
View File

@ -0,0 +1,86 @@
$v-scanner-background-color: #1e3186;
$v-scanner-guide-color: #647ce8;
html , body, .back-trasnparent, ion-app, .nav-decor {
background: none transparent !important;
}
page-scan {
color: #fff;
text-align: center;
background: transparent none;
.header {
opacity: .9;
}
svg#QR-scanner-guides path.st1 {
stroke: $v-scanner-guide-color;
}
.zero-state-cta {
padding-bottom: 6vh;
}
#page-scan-has-problems,
#page-scan-loading-camera {
background-color: $v-scanner-background-color;
}
#page-scan-loading-camera {
height: 100%;
width: 100%
}
#page-scan-camera-ready {
// view background is transparent to show video preview
background: none transparent;
.guides {
display: flex;
position: absolute;
height: 100%;
width: 100%;
align-items: center;
justify-content: center;
top: 0;
left: 0;
.qr-scan-guides {
width: 60%;
max-width: 400px;
margin-bottom: 8em;
max-height: 50%;
}
}
.scanner-controls {
width: 100%;
text-align: center;
bottom: 0;
position: absolute;
left: 0;
right: 0;
.icon-flash, .icon-camera-toggle {
border-radius: 50%;
width: 4em;
height: 4em;
background-color: rgba(13, 13, 13, 0.79);
background-repeat: no-repeat;
background-clip: padding-box;
background-size: 100%;
display: inline-block;
margin: 2em 1em;
cursor: pointer;
// hover for desktop only
/*body:not(.platform-cordova) &:hover {
background-color: rgba(31, 40, 78, 0.79);
}*/
&.active, &:active {
background-color: rgba(100, 124, 232, 0.79);
}
}
.icon-flash {
background-image: url("../assets/img/icon-flash.svg");
}
.icon-camera-toggle {
background-image: url("../assets/img/icon-camera-toggle.svg");
}
}
}
}
#cordova-plugin-qrscanner-still, #cordova-plugin-qrscanner-video-preview {
background-color: $v-scanner-background-color !important;
}

80
src/pages/scan/scan.ts Normal file
View File

@ -0,0 +1,80 @@
import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import { QRScanner, QRScannerStatus } from '@ionic-native/qr-scanner';
import { PlatformProvider } from '../../providers/platform/platform';
import { ScanProvider } from '../../providers/scan/scan';
//import { QRScanner as QRScannerBrowser } from 'cordova-plugin-qrscanner/src/browser/src/library'
@Component({
selector: 'page-scan',
templateUrl: 'scan.html',
providers: [ScanProvider]
})
export class ScanPage {
public text: string;
public scannerVisible: boolean;
public canEnableLight: boolean;
public canChangeCamera: boolean;
public lightActive: boolean;
public cameraToggleActive: boolean;
// private qrScannerBrowser: QRScannerBrowser (inside constructor)
constructor(public navCtrl: NavController, public navParams: NavParams, private scanProvider: ScanProvider, private platform: PlatformProvider) {
this.text = "Codigo QR";
this.lightActive = false;
this.canEnableLight = true;
this.canChangeCamera = true;
this.scannerVisible = this.platform.isCordova ? true : false;
}
ionViewDidLoad() {
console.log('ionViewDidLoad ScanPage');
}
ionViewWillEnter() {
this.lightActive = false;
this.scanProvider.activate()
.then(resp => {
this.text = resp;
})
.catch(error => {
console.log("error: " + error);
this.text = error;
});
}
ionViewWillLeave() {
this.scanProvider.deactivate()
.then(resp => {
this.lightActive = false;
})
.catch(error => {
console.log("error: " + error);
this.text = error;
});
}
toggleLight() {
this.scanProvider.toggleLight()
.then(resp => {
this.lightActive = resp;
})
.catch(error => {
console.log("error: " + error);
this.text = error;
});
};
toggleCamera() {
this.scanProvider.toggleCamera()
.then(resp => {
this.cameraToggleActive = resp;
})
.catch(error => {
console.log("error: " + error);
this.text = error;
});
};
}

View File

@ -1,6 +1,7 @@
<ion-tabs>
<ion-tab [root]="homeRoot" tabTitle="{{'Home'|translate}}" tabIcon="home"></ion-tab>
<ion-tab [root]="receiveRoot" tabTitle="{{'Receive'|translate}}" tabIcon="archive"></ion-tab>
<ion-tab [root]="scanRoot" tabTitle="{{'Scan'|translate}}" tabIcon="md-qr-scanner"></ion-tab>
<ion-tab [root]="sendRoot" tabTitle="{{'Send'|translate}}" tabIcon="send"></ion-tab>
<ion-tab [root]="settingRoot" tabTitle="{{'Setting'|translate}}" tabIcon="settings"></ion-tab>
</ion-tabs>

View File

@ -2,6 +2,7 @@ import { Component } from '@angular/core';
import { HomePage } from '../home/home';
import { ReceivePage } from '../receive/receive';
import { ScanPage } from '../scan/scan';
import { SendPage } from '../send/send';
import { SettingPage } from '../setting/setting';
@ -12,6 +13,7 @@ export class TabsPage {
homeRoot = HomePage;
receiveRoot = ReceivePage;
scanRoot = ScanPage;
sendRoot = SendPage;
settingRoot = SettingPage;

View File

@ -8,6 +8,7 @@ import { IStorage, KeyAlreadyExistsError } from './istorage';
export class ChromeStorage implements IStorage {
ls: chrome.storage.StorageArea;
constructor(private log: Logger) {
let chrome: any;
if (!chrome.storage || !chrome.storage.local) throw new Error('Chrome storage not supported');
this.ls = chrome.storage.local;
}

View File

@ -20,6 +20,7 @@ export class PlatformProvider {
supportsIntelTEE: boolean;
constructor(private platform: Platform, private log: Logger) {
let chrome: any;
var ua = navigator ? navigator.userAgent : null;
if (!ua) {
@ -46,6 +47,7 @@ export class PlatformProvider {
}
getBrowserName(): string {
let chrome: any;
let userAgent = window.navigator.userAgent;
let browsers = { chrome: /chrome/i, safari: /safari/i, firefox: /firefox/i, ie: /internet explorer/i };

116
src/providers/scan/scan.ts Normal file
View File

@ -0,0 +1,116 @@
import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import { QRScanner, QRScannerStatus } from '@ionic-native/qr-scanner';
import { PlatformProvider } from '../platform/platform';
import 'rxjs/add/operator/map';
@Injectable()
export class ScanProvider {
public text: string;
public scannerVisible: boolean;
public lightEnabled: boolean;
public frontCameraEnabled: boolean;
private scanSub: any;
constructor(public http: Http, private qrScanner: QRScanner, private platform: PlatformProvider) {
this.scannerVisible = false;
this.lightEnabled = false;
this.frontCameraEnabled = false;
}
activate(): Promise<any> {
return new Promise((resolve, reject) => {
if (this.platform.isCordova) {
this.qrScanner.show();
this.scannerVisible = true;
// start scanning
this.scanSub = this.qrScanner.scan().subscribe((text: string) => {
console.log('Scanned something' + text);
this.text = text;
resolve(this.text);
this.scannerVisible = false;
this.qrScanner.pausePreview();
this.scanSub.unsubscribe(); // stop scanning
});
} else {
reject("ERROR - No Cordova device");
}
});
}
deactivate(): Promise<any> {
return new Promise((resolve, reject) => {
if (this.platform.isCordova) {
if (this.lightEnabled) {
this.scanSub.unsubscribe();
this.qrScanner.disableLight();
this.lightEnabled = false;
}
this.qrScanner.hide(); // hide camera preview
} else {
reject("ERROR - No Cordova device");
}
});
}
toggleLight(): Promise<any> {
return new Promise((resolve, reject) => {
console.log('Toggling light...');
if (this.lightEnabled) {
this.qrScanner.disableLight()
.then(resp => {
this.lightEnabled = false;
resolve(this.lightEnabled);
console.log(resp);
})
.catch(err => {
console.log("Error: ",err);
reject(err);
});
} else {
this.qrScanner.enableLight()
.then(resp => {
this.lightEnabled = true;
resolve(this.lightEnabled);
console.log(resp);
})
.catch(err => {
console.log("Error: ", err);
reject(err);
});
}
});
};
toggleCamera(): Promise<any> {
return new Promise((resolve, reject) => {
console.log('Toggling camera...');
if (this.frontCameraEnabled) {
this.qrScanner.useBackCamera()
.then(resp => {
this.frontCameraEnabled = false;
resolve(this.frontCameraEnabled);
console.log(resp);
})
.catch(err => {
console.log("Error: ",err);
reject(err);
});
} else {
this.qrScanner.useFrontCamera()
.then(resp => {
this.frontCameraEnabled = true;
resolve(this.frontCameraEnabled);
console.log(resp);
})
.catch(err => {
console.log("Error: ",err);
reject(err);
});
}
});
};
}