CODEWITHSUNDEEP
ionic-frameworkbarcode-scanner
SSen
SSen

Reputation: 123

Barcode Scanner add button inside scanning page

I have implemented Barcode Scanner for my Ionic project for both iOS and Android. But when my Scanner starts, I want to add a button inside the view and add an event to it. I am using phonegap-plugin-barcodescanner plugin

Please help me with how to append something inside the scanning view.

Upvotes: 5

Views: 6118

Answers (2)

aNkM
aNkM

Reputation: 31

If you want to add stuff to the layout of your scanner, you need to write code in the plugin itself.

YOU CANNOT INTERACT DIRECTLY WITH THE SCANNER FROM THE JS.

In fact, the plugin you use uses cordova.exec in order to launch the scanner view by passing it arguments.

  • For Android, you just have to know Java and some XML.
  • For iOS, you have to know Objective-C / Swift.

For Android, you may have 4 files to modify :

  • plugin.xml : home of all you dependencies
  • Your_Activity.java : java file which permits to interact with the scanner view itself by calling buttons, textviews, layouts, etc...
  • Your_Main.java : java file which gets and returns parameters from the js file of your plugin
  • Your_Layout.xml : xml file in res/layout which is composed of xml attributes interpreted by java

Beside that, I found two good plug-ins for cordova/ionic apps from GitHub :

  • phonegap/phonegap-plugin-barcodescanner
  • tjwoon/csZBar

And there's the expensive one, Scandit, which resolves all of your problems for about 200$ per month, check the pricing for every solution they propose.

If you use their SDK, you may be able to interact with the scanner view from js files because of their work, but they're the only company I know to do that. (perhaps ManateeWorks...)

Under this part is what I've been doing since mid-July, in order to give you ideas.

I'm currently making an ANDROID scanner layout for my ionic app. You can find my GitHub repository here, I forked it from tjwoon's csZBar and I added some stuff my ionic app needs.

I guarantee nothing, but I'm pretty sure I'll implement an iOS layout soon (at least I'll try), and unfortunately I don't really know android / iOS mobile programming.

Here's a screenshot of the layout

I made a "tab bar" composed of 3 image buttons, a "top bar" composed of text views & image buttons. The scanner is embedded between these two.

There are pop-ups for the app's features, which pause the scanner and respond to click events.

See the README and Java files (csZBar/android/) for more information.

Don't hesitate to ask questions and/or inspect my code.

Warning

  • 1) It's currently on development so use it at your own risks (use branch master, not develop)
  • 2) I only modified the android part, not the iOS!
  • 3) It doesn't work for Windows phone...

Upvotes: 3

Prashant G
Prashant G

Reputation: 4900

After adding plugin, installngCordova with bower install ngCordova

Add link to ng-cordova.js JS file above reference to cordova.js:

index.html

<script src="lib/ngCordova/dist/ng-cordova.js"></script>
<script src="cordova.js"></script>

Also, don't forget to add ngCordova module:

app.js

angular.module('myApp', ['ngCordova'])

Now you're ready to use the plugin like this:

Controller:

var module = angular.module('starter.controllers', []);
module.controller('BarcodeCtrl', function($scope, $cordovaBarcodeScanner, $ionicPlatform) {
  $ionicPlatform.ready(function(){
    $scope.scan = function() {
        $cordovaBarcodeScanner
          .scan()
          .then(function(barcodeData) {
            alert(JSON.stringify(barcodeData));
          }, function(error) {
            alert(error);
          });
      };
  });
});

View:

<button ng-click="scan()">Scan</button>

Upvotes: 0

Related Questions