Geek Answers Handbook

Scanner barcode add button inside scan page

I implemented a barcode scanner for my Ionic project for 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 the phonegap-plugin-barcodescanner

Please help me on how to add something to the viewport.

+5
source share
2 answers

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

YOU CANNOT INTERACT WITH THE SCANNER FROM JS.

In fact, the plugin you use uses cordova.exec to start scanning the scanner by passing its arguments.

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

For Android, you can have 4 files to modify:

  • plugin.xml: home of all your dependencies
  • Your_Activity.java: a java file that allows you to interact with the scanner itself by invoking buttons, text images, layouts, etc.
  • Your_Main.java: a java file that receives and returns parameters from the js file of your plugin.
  • Your_Layout.xml: xml file in res / layout, which consists of xml attributes interpreted by java

In addition, I found two good plugins for cordon-ion applications from GitHub:

  • Phonegap / Phonegap-plugin-barcodescanner
  • tjwoon / csZBar

And there dear, Scandit, which solves all your problems for about $ 200 a month, check the prices for each proposed solution.

If you use your SDK, you can interact with the scanner from js files because of their work, but this is the only company I know for this. (maybe ManateeWorks ...)

As part of this part, I have been doing this since mid-July to give you ideas.

I am currently creating a ANDROID scanner layout for my ionic application. Here you can find the GitHub repository, I unlocked it from tjwoon csZBar, and I added some things I need for the ionic app.

I can’t guarantee anything, but I’m sure that I will soon implement the iOS layout (at least I will try), and, unfortunately, I really don’t know mobile programming for Android and iOS.

Here is a screenshot of the layout

I created a “tab bar” consisting of 3 image buttons, a “top bar” consisting of text views and image buttons. A scanner is embedded between the two.

Pop-up windows will appear for application functions that pause the scanner and respond to click events.

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

Feel free to ask questions and / or check my code.

Attention!

  • 1) It is currently being developed, so use it at your own risk (use the branch wizard, do not develop).
  • 2) I only modified part of Android, not iOS!
  • 3) It does not work for a Windows phone ...
+3
source

After adding the plugin, install ngCordova using bower install ngCordova

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

index.html

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

Also, be sure to add the ngCordova module:

app.js

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

Now you can use the plugin as follows:

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>
0
source

More articles:


All Articles