From 55eb8b1bcd572ec568d3c9db37d7bbff7089245e Mon Sep 17 00:00:00 2001 From: Gabriel Masclef Date: Thu, 24 Aug 2017 15:10:00 -0300 Subject: [PATCH] Flash and toggle camera working --- package.json | 4 +- src/pages/scan/scan.html | 9 ++-- src/pages/scan/scan.scss | 74 ++++++++++++++--------------- src/pages/scan/scan.ts | 46 ++++++++++++++++-- src/providers/scan/scan.ts | 96 +++++++++++++++++++++++++++++++++----- 5 files changed, 167 insertions(+), 62 deletions(-) diff --git a/package.json b/package.json index 36b66c055..88a17de0e 100644 --- a/package.json +++ b/package.json @@ -40,6 +40,7 @@ "@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", @@ -60,8 +61,7 @@ "ngx-qrcode2": "0.0.3", "rxjs": "5.4.0", "sw-toolbox": "3.6.0", - "zone.js": "0.8.12", - "cordova-android": "^6.2.3" + "zone.js": "0.8.12" }, "devDependencies": { "@angular/cli": "1.3.0", diff --git a/src/pages/scan/scan.html b/src/pages/scan/scan.html index b86d0bf16..7e29e74e2 100644 --- a/src/pages/scan/scan.html +++ b/src/pages/scan/scan.html @@ -16,17 +16,14 @@

Scanner text: {{ text }}

Scanner visible: {{ scannerVisible }}

-
- +
- - + - - +
diff --git a/src/pages/scan/scan.scss b/src/pages/scan/scan.scss index d820cf02e..7df36bf78 100644 --- a/src/pages/scan/scan.scss +++ b/src/pages/scan/scan.scss @@ -29,14 +29,6 @@ page-scan { #page-scan-camera-ready { // view background is transparent to show video preview background: none transparent; - .scanner-controls { - width: 100%; - text-align: center; - bottom: 0; - position: absolute; - left: 0; - right: 0; - } .guides { display: flex; position: absolute; @@ -46,37 +38,45 @@ page-scan { justify-content: center; top: 0; left: 0; - } - .qr-scan-guides { - width: 60%; - max-width: 400px; - margin-bottom: 8em; - max-height: 50%; - } - .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); + .qr-scan-guides { + width: 60%; + max-width: 400px; + margin-bottom: 8em; + max-height: 50%; } } - .icon-flash { - background-image: url("assets/img/icon-flash.svg"); - } - .icon-camera-toggle { - background-image: url("assets/img/icon-camera-toggle.svg"); + .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"); + } } } } diff --git a/src/pages/scan/scan.ts b/src/pages/scan/scan.ts index e3b41c3f9..538e697ab 100644 --- a/src/pages/scan/scan.ts +++ b/src/pages/scan/scan.ts @@ -1,4 +1,4 @@ -import { Component, OnInit } from '@angular/core'; +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'; @@ -10,16 +10,19 @@ import { ScanProvider } from '../../providers/scan/scan'; templateUrl: 'scan.html', providers: [ScanProvider] }) -export class ScanPage implements OnInit { +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; @@ -29,16 +32,49 @@ export class ScanPage implements OnInit { console.log('ionViewDidLoad ScanPage'); } - ngOnInit () { + ionViewWillEnter() { + this.lightActive = false; this.scanProvider.activate() .then(resp => { - console.log("resp"); - console.log(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; + }); + }; + } diff --git a/src/providers/scan/scan.ts b/src/providers/scan/scan.ts index afba70819..d3ffa2fd9 100644 --- a/src/providers/scan/scan.ts +++ b/src/providers/scan/scan.ts @@ -4,41 +4,113 @@ import { QRScanner, QRScannerStatus } from '@ionic-native/qr-scanner'; import { PlatformProvider } from '../platform/platform'; import 'rxjs/add/operator/map'; -/* - Generated class for the ScanProvider provider. - - See https://angular.io/docs/ts/latest/guide/dependency-injection.html - for more info on providers and Angular DI. -*/ @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 { - return new Promise(resolve => { + return new Promise((resolve, reject) => { if (this.platform.isCordova) { - console.log("Cordova device"); this.qrScanner.show(); this.scannerVisible = true; // start scanning - let scanSub = this.qrScanner.scan().subscribe((text: string) => { + this.scanSub = this.qrScanner.scan().subscribe((text: string) => { console.log('Scanned something' + text); this.text = text; resolve(this.text); this.scannerVisible = false; - this.qrScanner.hide(); // hide camera preview - scanSub.unsubscribe(); // stop scanning + this.qrScanner.pausePreview(); + this.scanSub.unsubscribe(); // stop scanning }); } else { - resolve("ERROR - No Cordova device"); + reject("ERROR - No Cordova device"); } }); } + deactivate(): Promise { + 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 { + 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 { + 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); + }); + } + }); + }; + }