Merge pull request yannbf#18 from miguelcarrascoq/barcodescanner

yannbf · web-flow · commit 8b340521539f · 2017-03-14T01:03:25.000-03:00
Adds Barcode Scanner feature to miscellaneous
diff --git a/src/app/app.imports.ts b/src/app/app.imports.ts
@@ -88,6 +88,7 @@ import { CreditCardScanPage } from '../pages/miscellaneous/credit-card-scan/cred
 import { RuntimePermissionsPage } from '../pages/miscellaneous/runtime-permissions/runtime-permissions';
 import { ChartsPage } from '../pages/miscellaneous/charts/charts';
 import { GetImagePage } from '../pages/miscellaneous/get-image/get-image';
+import { BarcodescannerPage } from '../pages/miscellaneous/barcodescanner/barcodescanner';
 
 // Providers
 import { WeatherService } from '../pages/miscellaneous/weather/weather.service';
@@ -172,6 +173,7 @@ export const Pages = [
     GetImagePage,
     FlashCardComponent,
     FlashCardPage,
+    BarcodescannerPage,
 
     // Modals
     PopupModalsPage,
diff --git a/src/pages/miscellaneous/barcodescanner/Readme.md b/src/pages/miscellaneous/barcodescanner/Readme.md
@@ -0,0 +1,25 @@
+# Barcode Scanner
+You can check more info on the docs: https://github.com/phonegap/phonegap-plugin-barcodescanner
+
+In order to use this feature, you have to install the plugin:
+```sh
+$ ionic plugin add phonegap-plugin-barcodescanner --save --variable CAMERA_USAGE_DESCRIPTION="To scan barcodes"
+```
+
+Important note: Since iOS 10 it's mandatory to add a `NSCameraUsageDescription` in the info.plist.
+
+`NSCameraUsageDescription` describes the reason that the app accesses the user’s camera. When the system prompts the user to allow access, this string is displayed as part of the dialog box.
+
+This entry is passed on the `--variable` flag on plugin install.
+
+
+In case you want to support low end/old devices, make sure to install crosswalk:
+```sh
+$ ionic plugin add cordova-plugin-crosswalk-webview
+```
+
+You can either try it out on a device or try it using an emulator:
+```sh
+$ ionic build android
+$ adb install -r platforms/android/build/outputs/apk/android-armv7-debug.apk
+```
diff --git a/src/pages/miscellaneous/barcodescanner/barcodescanner.html b/src/pages/miscellaneous/barcodescanner/barcodescanner.html
@@ -0,0 +1,21 @@
+<ion-header>
+  <ion-navbar>
+    <ion-title>Barcode Scanner</ion-title>
+  </ion-navbar>
+</ion-header>
+
+
+<ion-content padding>
+
+  <p>NOTE: THIS ONLY WORKS ON MOBILE!</p>
+
+  <div class="json">{{ barcodeData | json }}</div>
+
+  <div text-center>
+    <button ion-button icon-left color="primary" (click)="scan()">
+      <ion-icon name="qr-scanner"></ion-icon>
+      Scan
+    </button>
+  </div>
+
+</ion-content>
diff --git a/src/pages/miscellaneous/barcodescanner/barcodescanner.scss b/src/pages/miscellaneous/barcodescanner/barcodescanner.scss
@@ -0,0 +1,7 @@
+page-barcodescanner {
+
+    .json {
+        white-space: pre;
+    }
+
+}
diff --git a/src/pages/miscellaneous/barcodescanner/barcodescanner.ts b/src/pages/miscellaneous/barcodescanner/barcodescanner.ts
@@ -0,0 +1,53 @@
+import { Component } from '@angular/core';
+import { NavController, AlertController } from 'ionic-angular';
+import { BarcodeScanner } from 'ionic-native';
+
+@Component({
+    selector: 'page-barcodescanner',
+    templateUrl: 'barcodescanner.html'
+})
+export class BarcodescannerPage {
+
+    public barcodeData;
+
+    constructor(public navCtrl: NavController, public alertCtrl: AlertController) { }
+
+    ionViewDidLoad() {
+        console.log('ionViewDidLoad BarcodescannerPage');
+    }
+
+    scan() {
+
+        let options =
+            {
+                preferFrontCamera: false, // iOS and Android
+                showFlipCameraButton: true, // iOS and Android
+                showTorchButton: true, // iOS and Android
+                torchOn: false, // Android, launch with the torch switched on (if available)
+                prompt: "Place a barcode inside the scan area", // Android
+                resultDisplayDuration: 500, // Android, display scanned text for X ms. 0 suppresses it entirely, default 1500
+                formats: "QR_CODE,PDF_417", // default: all but PDF_417 and RSS_EXPANDED
+                orientation: "portrait", // Android only (portrait|landscape), default unset so it rotates with the device
+                disableAnimations: true, // iOS
+                disableSuccessBeep: false // iOS
+            };
+
+        BarcodeScanner.scan(options)
+            .then((data) => {
+                this.barcodeData = data;
+                let alert = this.alertCtrl.create({
+                    title: 'Scan Results',
+                    subTitle: data.text,
+                    buttons: ['OK']
+                });
+                alert.present();
+            }).catch((err) => {
+                let alert = this.alertCtrl.create({
+                    title: 'Attention!',
+                    subTitle: err,
+                    buttons: ['Close']
+                });
+                alert.present();
+            });
+    }
+}
diff --git a/src/pages/miscellaneous/miscellaneous.ts b/src/pages/miscellaneous/miscellaneous.ts
@@ -6,6 +6,7 @@ import { ChatsPage } from './chat/chats';
 import { WeatherPage } from './weather/weather';
 import { CurrencyConverterPage } from './currency-converter/currency-converter';
 import { FlashCardPage } from './flash-card/flash-card';
+import { BarcodescannerPage } from './barcodescanner/barcodescanner';
 // import { ClockPage } from './clock/clock';
 import { CountdownOnePage } from './countdown/countdown';
 import { TestimonialsPage } from './testimonials/testimonials';
@@ -25,6 +26,10 @@ export class MiscellaneousListPage {
 
     constructor(public navCtrl: NavController, public menu: MenuController) {
         this.items = [
+            {
+                title: 'Barcode Scanner',
+                page: BarcodescannerPage
+            },
             {
                 title: 'Blog Post',
                 page: BlogPostPage

-Original file line number
+Diff line change
@@ @@ -0,0 +1,7 @@ @@
 +page-barcodescanner {
++
 +    .json {
 +        white-space: pre;
 +    }
++
 +}