Add Barcode Scanner

miguelcarrascoq · miguelcarrascoq · commit b32e4af54fae · 2017-03-09T11:23:59.000-06:00
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,5 @@
+$ sudo ionic plugin add phonegap-plugin-barcodescanner
+$ sudo ionic plugin add cordova-plugin-crosswalk-webview
+
+$ sudo 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,54 @@
+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 opciones =
+      {
+          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(opciones)
+      .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';
@@ -69,6 +70,10 @@ export class MiscellaneousListPage {
                 title: 'Flash Card',
                 page: FlashCardPage
             },
+            {
+                title: 'Barcode Scanner',
+                page: BarcodescannerPage
+            },
             // {
             //     title: 'Weather',
             //     page: WeatherPage

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