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",
|
||||
"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",
|
||||
|
|
|
@ -16,17 +16,14 @@
|
|||
<ion-content class="back-trasnparent" padding>
|
||||
<p>Scanner text: {{ text }}</p>
|
||||
<p>Scanner visible: {{ scannerVisible }}</p>
|
||||
<div class="ng-hide" id="tab-scan-camera-ready" *ngIf="scannerVisible">
|
||||
<button type="button" (click)="ngOnInit()">Open camera</button>
|
||||
<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 ng-click="toggleLight()">
|
||||
<ion-icon class="icon-flash" [ngClass]="{'active': lightActive}" name="flash"></ion-icon>
|
||||
<span class="icon-flash" [ngClass]="{'active': lightActive}" (click)="toggleLight()">
|
||||
</span>
|
||||
<span ng-click="toggleCamera()">
|
||||
<ion-icon class="icon-camera-toggle" [ngClass]="{'active': lightActive}" name="reverse-camera"></ion-icon>
|
||||
<span class="icon-camera-toggle" [ngClass]="{'active': cameraToggleActive}" (click)="toggleCamera()">
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -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,13 +38,20 @@ page-scan {
|
|||
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;
|
||||
|
@ -65,18 +64,19 @@ page-scan {
|
|||
margin: 2em 1em;
|
||||
cursor: pointer;
|
||||
// hover for desktop only
|
||||
body:not(.platform-cordova) &:hover {
|
||||
/*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");
|
||||
background-image: url("../assets/img/icon-flash.svg");
|
||||
}
|
||||
.icon-camera-toggle {
|
||||
background-image: url("assets/img/icon-camera-toggle.svg");
|
||||
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 { 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;
|
||||
});
|
||||
};
|
||||
|
||||
}
|
||||
|
|
|
@ -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<any> {
|
||||
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<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