mirror of https://github.com/BTCPrivate/copay.git
Flash and toggle camera working
This commit is contained in:
parent
81b3c2930d
commit
55eb8b1bcd
|
@ -40,6 +40,7 @@
|
||||||
"@nsalaun/ng-logger": "2.0.1",
|
"@nsalaun/ng-logger": "2.0.1",
|
||||||
"ajv": "5.2.2",
|
"ajv": "5.2.2",
|
||||||
"autoprefixer": "7.1.2",
|
"autoprefixer": "7.1.2",
|
||||||
|
"cordova-android": "^6.2.3",
|
||||||
"cordova-clipboard": "1.0.0",
|
"cordova-clipboard": "1.0.0",
|
||||||
"cordova-ios": "4.4.0",
|
"cordova-ios": "4.4.0",
|
||||||
"cordova-plugin-console": "1.0.5",
|
"cordova-plugin-console": "1.0.5",
|
||||||
|
@ -60,8 +61,7 @@
|
||||||
"ngx-qrcode2": "0.0.3",
|
"ngx-qrcode2": "0.0.3",
|
||||||
"rxjs": "5.4.0",
|
"rxjs": "5.4.0",
|
||||||
"sw-toolbox": "3.6.0",
|
"sw-toolbox": "3.6.0",
|
||||||
"zone.js": "0.8.12",
|
"zone.js": "0.8.12"
|
||||||
"cordova-android": "^6.2.3"
|
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@angular/cli": "1.3.0",
|
"@angular/cli": "1.3.0",
|
||||||
|
|
|
@ -16,17 +16,14 @@
|
||||||
<ion-content class="back-trasnparent" padding>
|
<ion-content class="back-trasnparent" padding>
|
||||||
<p>Scanner text: {{ text }}</p>
|
<p>Scanner text: {{ text }}</p>
|
||||||
<p>Scanner visible: {{ scannerVisible }}</p>
|
<p>Scanner visible: {{ scannerVisible }}</p>
|
||||||
<div class="ng-hide" id="tab-scan-camera-ready" *ngIf="scannerVisible">
|
<div class="ng-hide" id="page-scan-camera-ready" *ngIf="scannerVisible">
|
||||||
<button type="button" (click)="ngOnInit()">Open camera</button>
|
|
||||||
<div class="guides">
|
<div class="guides">
|
||||||
<img class="svg qr-scan-guides" src="assets/img/bitpay-wallet-qr-scan-guides.svg">
|
<img class="svg qr-scan-guides" src="assets/img/bitpay-wallet-qr-scan-guides.svg">
|
||||||
</div>
|
</div>
|
||||||
<div class="scanner-controls">
|
<div class="scanner-controls">
|
||||||
<span ng-click="toggleLight()">
|
<span class="icon-flash" [ngClass]="{'active': lightActive}" (click)="toggleLight()">
|
||||||
<ion-icon class="icon-flash" [ngClass]="{'active': lightActive}" name="flash"></ion-icon>
|
|
||||||
</span>
|
</span>
|
||||||
<span ng-click="toggleCamera()">
|
<span class="icon-camera-toggle" [ngClass]="{'active': cameraToggleActive}" (click)="toggleCamera()">
|
||||||
<ion-icon class="icon-camera-toggle" [ngClass]="{'active': lightActive}" name="reverse-camera"></ion-icon>
|
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -29,14 +29,6 @@ page-scan {
|
||||||
#page-scan-camera-ready {
|
#page-scan-camera-ready {
|
||||||
// view background is transparent to show video preview
|
// view background is transparent to show video preview
|
||||||
background: none transparent;
|
background: none transparent;
|
||||||
.scanner-controls {
|
|
||||||
width: 100%;
|
|
||||||
text-align: center;
|
|
||||||
bottom: 0;
|
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
}
|
|
||||||
.guides {
|
.guides {
|
||||||
display: flex;
|
display: flex;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
@ -46,37 +38,45 @@ page-scan {
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
}
|
.qr-scan-guides {
|
||||||
.qr-scan-guides {
|
width: 60%;
|
||||||
width: 60%;
|
max-width: 400px;
|
||||||
max-width: 400px;
|
margin-bottom: 8em;
|
||||||
margin-bottom: 8em;
|
max-height: 50%;
|
||||||
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);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.icon-flash {
|
.scanner-controls {
|
||||||
background-image: url("assets/img/icon-flash.svg");
|
width: 100%;
|
||||||
}
|
text-align: center;
|
||||||
.icon-camera-toggle {
|
bottom: 0;
|
||||||
background-image: url("assets/img/icon-camera-toggle.svg");
|
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");
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
import { Component, OnInit } from '@angular/core';
|
import { Component } from '@angular/core';
|
||||||
import { NavController, NavParams } from 'ionic-angular';
|
import { NavController, NavParams } from 'ionic-angular';
|
||||||
import { QRScanner, QRScannerStatus } from '@ionic-native/qr-scanner';
|
import { QRScanner, QRScannerStatus } from '@ionic-native/qr-scanner';
|
||||||
import { PlatformProvider } from '../../providers/platform/platform';
|
import { PlatformProvider } from '../../providers/platform/platform';
|
||||||
|
@ -10,16 +10,19 @@ import { ScanProvider } from '../../providers/scan/scan';
|
||||||
templateUrl: 'scan.html',
|
templateUrl: 'scan.html',
|
||||||
providers: [ScanProvider]
|
providers: [ScanProvider]
|
||||||
})
|
})
|
||||||
export class ScanPage implements OnInit {
|
export class ScanPage {
|
||||||
|
|
||||||
public text: string;
|
public text: string;
|
||||||
public scannerVisible: boolean;
|
public scannerVisible: boolean;
|
||||||
public canEnableLight: boolean;
|
public canEnableLight: boolean;
|
||||||
public canChangeCamera: boolean;
|
public canChangeCamera: boolean;
|
||||||
|
public lightActive: boolean;
|
||||||
|
public cameraToggleActive: boolean;
|
||||||
|
|
||||||
// private qrScannerBrowser: QRScannerBrowser (inside constructor)
|
// private qrScannerBrowser: QRScannerBrowser (inside constructor)
|
||||||
constructor(public navCtrl: NavController, public navParams: NavParams, private scanProvider: ScanProvider, private platform: PlatformProvider) {
|
constructor(public navCtrl: NavController, public navParams: NavParams, private scanProvider: ScanProvider, private platform: PlatformProvider) {
|
||||||
this.text = "Codigo QR";
|
this.text = "Codigo QR";
|
||||||
|
this.lightActive = false;
|
||||||
this.canEnableLight = true;
|
this.canEnableLight = true;
|
||||||
this.canChangeCamera = true;
|
this.canChangeCamera = true;
|
||||||
this.scannerVisible = this.platform.isCordova ? true : false;
|
this.scannerVisible = this.platform.isCordova ? true : false;
|
||||||
|
@ -29,16 +32,49 @@ export class ScanPage implements OnInit {
|
||||||
console.log('ionViewDidLoad ScanPage');
|
console.log('ionViewDidLoad ScanPage');
|
||||||
}
|
}
|
||||||
|
|
||||||
ngOnInit () {
|
ionViewWillEnter() {
|
||||||
|
this.lightActive = false;
|
||||||
this.scanProvider.activate()
|
this.scanProvider.activate()
|
||||||
.then(resp => {
|
.then(resp => {
|
||||||
console.log("resp");
|
|
||||||
console.log(resp);
|
|
||||||
this.text = resp;
|
this.text = resp;
|
||||||
})
|
})
|
||||||
.catch(error => {
|
.catch(error => {
|
||||||
console.log("error: " + 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;
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -4,41 +4,113 @@ import { QRScanner, QRScannerStatus } from '@ionic-native/qr-scanner';
|
||||||
import { PlatformProvider } from '../platform/platform';
|
import { PlatformProvider } from '../platform/platform';
|
||||||
import 'rxjs/add/operator/map';
|
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()
|
@Injectable()
|
||||||
export class ScanProvider {
|
export class ScanProvider {
|
||||||
|
|
||||||
public text: string;
|
public text: string;
|
||||||
public scannerVisible: boolean;
|
public scannerVisible: boolean;
|
||||||
|
public lightEnabled: boolean;
|
||||||
|
public frontCameraEnabled: boolean;
|
||||||
|
|
||||||
|
private scanSub: any;
|
||||||
|
|
||||||
constructor(public http: Http, private qrScanner: QRScanner, private platform: PlatformProvider) {
|
constructor(public http: Http, private qrScanner: QRScanner, private platform: PlatformProvider) {
|
||||||
this.scannerVisible = false;
|
this.scannerVisible = false;
|
||||||
|
this.lightEnabled = false;
|
||||||
|
this.frontCameraEnabled = false;
|
||||||
}
|
}
|
||||||
|
|
||||||
activate(): Promise<any> {
|
activate(): Promise<any> {
|
||||||
return new Promise(resolve => {
|
return new Promise((resolve, reject) => {
|
||||||
if (this.platform.isCordova) {
|
if (this.platform.isCordova) {
|
||||||
console.log("Cordova device");
|
|
||||||
this.qrScanner.show();
|
this.qrScanner.show();
|
||||||
this.scannerVisible = true;
|
this.scannerVisible = true;
|
||||||
// start scanning
|
// start scanning
|
||||||
let scanSub = this.qrScanner.scan().subscribe((text: string) => {
|
this.scanSub = this.qrScanner.scan().subscribe((text: string) => {
|
||||||
console.log('Scanned something' + text);
|
console.log('Scanned something' + text);
|
||||||
this.text = text;
|
this.text = text;
|
||||||
resolve(this.text);
|
resolve(this.text);
|
||||||
this.scannerVisible = false;
|
this.scannerVisible = false;
|
||||||
this.qrScanner.hide(); // hide camera preview
|
this.qrScanner.pausePreview();
|
||||||
scanSub.unsubscribe(); // stop scanning
|
this.scanSub.unsubscribe(); // stop scanning
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
resolve("ERROR - No Cordova device");
|
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);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue