Pages

Friday, December 4, 2015

Cordova Barcode Scanner with ionic

Recently found myself needing to scan barcodes in one of my apps.  After doing some searching I found that ngCordova had an extension for the Cordova plugin BarcodeScanner which has the ability to scan barcodes support many type of common format QR code, bar, EAN..etc..

Installation
cordova plugins add https://github.com/wildabeast/BarcodeScanner.git

Start by downloading the latest ngCordova release and copying the ng-cordova.min.js file into your project’s www/js directory.

Then include it in your index.html
          
<script src="js/ng-cordova.min.js"></script>
          
        
After setting index.html, go to app.js and add this ngCordova like below

          
angular.module('starter', ['ionic','ngCordova'])
          
        
It is now time, Create a controller and include the following method to initialize the barcode scanner. For this example, I did the following: Sample code Barcorde.html

   
<ion-view view-title="Barcode Scanner">
    <ion-content>
        <div class="card">
            <div class="item">
                <button class="button button-block button-balanced" ng-click="scanBarcode()">
                    <i class="icon ion-qr-scanner"></i>
                    Scan Now
                </button>
            </div>
        </div>

        <div class="card">
            <div class="item item-divider">
                Scan Results
            </div>
            <div class="item item-text-wrap">
                {{vm.scanResults}}
            </div>
        </div>
    </ion-content>
    <ion-footer>
        <div class="tabs-striped tabs-color-assertive">
            <div class="tabs">
                <a class="tab-item active" href="#">
                    <i class="icon ion-home"></i> Test
                </a>
                <a class="tab-item" href="#/app/viewpost">
                    <i class="icon ion-star"></i> Favorites
                </a>
                <a class="tab-item" href="#">
                    <i class="icon ion-gear-a"></i> Settings
                </a>
            </div>
        </div>
    </ion-footer>
</ion-view>
   
 
Controller.js
  
.controller("BarcodeScanner", function($scope, $cordovaBarcodeScanner, $ionicPlatform) {
    $scope.vm = [];
    $scope.scanBarcode = function() {
        $ionicPlatform.ready(function() {
            $cordovaBarcodeScanner
                .scan()
                .then(function(result) {
                    // Success! Barcode data is here
                    $scope.vm.scanResults = "Barcode\n" +
                        "Result: " + result.text + "\n" +
                        "Format: " + result.format + "\n" +
                        "Cancelled: " + result.cancelled;
                }, function(error) {
                    // An error occurred
                    $scope.vm.scanResults = 'Error: ' + error;
                });
        });
    }
})
  
 


Change Snippet Background Color

No comments:

Post a Comment