Scanning Barcodes
PhoneGap provides the ability to scan barcodes Barcode scanning capabilities are integrated into our Profound UI Mobile Client; this is possible through the use of a plugin called Scandit. The following are instructions on how to add the necessary files for Scandit and how to make changes to an existing application so that it can take advantage of this functionality.
Scandit for Android
To begin, you will need to download the Scandit SDK for Android. You must register with Scandit first. The link for this can be found here: Scandit Options
There are 3 options. For this tutorial, the community edition will suffice. Once you select an option, you will receive instructions on registering and an email confirming your registration. From there, you will be presented with a link to download the SDKs. Download the Android Community Edition SDK.
After the download is finished, extract the contents to a folder on your computer.
Setting Up Your Eclipse Environment
In Eclipse, open the project which you wish to add barcode scanning functionality to. Then, follow these instructions:
1. Open the folder into which you extracted the Scandit SDK.
2. Take the contents inside the libs folder and place them into the libs folder of your project.
3. Copy the res/raw folder inside of the SDK into the res folder of your project.
4. Create a package named com.mirasense.scanditsdk.plugin into your src folder for your project. Select File->New->Package.
5. Take the ScanditSDK.java file and ScanditSDKActivity.java files located in com.mirasense.demos of the extracted SDK and place them in the newly created package within your project.
6. Inside of ScanditSDKActivity.java, you will find an error on the following line:
...
import com.mirasense.cordova.R;
You will have to change this to the name of your project's main package. For example:
...
import com.profoundlogic.exampleproject.R;
The reason for this is the java file included in the SDK is setup to import this file from a demo application. Of course, since you are adding this for your particular project, the com.mirasense.cordova package does not exist and needs to point to your project's package instead.
7. Add the file scanditsdk-barcodepicker-android-3.1.x.jar to the build path. To do this inside of your project, go to libs and right click on this file and select Build Path-> Add to Build Path. To verify this worked correctly, you should now see this file under Referenced Libraries. You shouldn't have to do this for the Cordova file since this is an already existing project, but verify that cordova-2.x.x.jar is also included inside of Referenced Libraries.
8. Add the following line to your res->xml->config file under the <plugins> tag along with all the other plugins:
...
<plugin name="ScanditSDK" value="com.mirasense.scanditsdk.plugin.ScanditSDK"/>
9. Add the following line to your AndroidManifest.xml file inside of the <Application ....> tag after the closing </activity> tag of the first activity:
...
<activity android:name="com.mirasense.scanditsdk.plugin.ScanditSDKActivity"/>
10. This option does not apply for anyone with an application that can already access the camera without problem. But otherwise, verify that this line is in the list of permissions in your manifest file; if it is not, add it or otherwise your application will throw an error indicating it cannot access the camera:
...
<uses-permission android:name="android.permission.CAMERA" />
11. At this point, the scanner can be called by calling cordova.exec with the following arguments:
- argument #1: function to be called when the scan succeeds.
- argument #2: function to be called when cancel button is pressed
- argument #3: name of the plugin, which is "ScanditSDK"
- argument #4: name of the function of the plugin to be called, which is "scan"
- argument #5: an array where the first item is the Scandit SDK app key (available from your Scandit SDK web account) and the second item is a dictionary with customization options (listed in ScanditSDK.java
To grab the value of the scanned barcode, simply use result. Result is an array which holds information about the scanned barcode.
For example:
| Code Block |
|---|
var barcode = result[0];
var symbology = result[1];
|
Below is an example call to cordova.exec():
...
function scan() {
cordova.exec(success, failure, "ScanditSDK", "scan",
["123456abcdefg",
{"beep": true,
"1DScanning": true,
"2DScanning": true,
"scanningHotspot": "0.5/0.5",
"vibrate": true}]);
}\
Scandit for iOS
To begin, you will need to download the Scandit SDK for iOS, as well as the Phonegap Plugin for Scandit SDK for iOS. You must first register with Scandit first. The link for this can be found here: Scandit Options
Here you are presented with 3 options. For this tutorial, the community edition will suffice. Once you select an option, you will receive instructions on registering and an email confirming your registration. From there, you will be presented with a link to download the SDKs. You will need to download both the Barcode Scanner SDK for iOS, Community version and PhoneGap Plugin for Barcode Scanner SDK for iOS
After the downloads are finished, extract the contents to a folder on your computer.
Setting up you Xcode Project
Keep in mind where you have extracted the downloaded folders, because you will need to grab and copy files from these directories into your existing project.
1. Find the main folder for your Xcode project, in this example case BarcodeScan. Inside of your SDK download (as of this writing, the default folder name of the extracted SDK download is scanditsdk-community-ios_2.2.4), locate and copy the ScanditSDK folder and then go to BarcodeScan->barcodeScan->Plugins and paste the ScanditSDK folder you copied into here.
2. Inside of your extracted PhoneGap Plugin for Barcode Scanner SDK for iOS *folder *(as of this writing, default name is *scanditsdk-phonegap-plugin-iphone_1.0.8, go into CordovaDemo->CordovaDemo->Plugins, and copy the files ScanditSDKRotatingBarcodePicker.h, ScanditSDKRotatingBarcodePicker.m, ScanditSDK.h, and ScanditSDK.mm into the same Plugins folder of your XCode project that you placed ScanditSDK in.
3. Open up your Project in XCode.
4. Right click on your project and select "Add files to..."and select the ScanditSDK folder you copied into Plugins in Step 1.
5. Right click on the Plugins folder listed inside of your project in XCode and select "Add files to.." and select the files you copied in Step 2.
6. Select your project and click the Build Phases tab. Under Link Binary With Libraries, select the plus button and add the following frameworks:
AudioToolbox.framework
AVFoundation.framework
CoreGraphics.framework
CoreLocation.framework
CoreMedia.framework
CoreVideo.framework
QuartzCore.framework
SystemConfiguration.framework
libiconv.dylib
libz.dylib
7. In the Resources folder of your project, locate the Cordova.plist file. Under the Plugins entry, add a new entry of type String with "ScanditSDK" as the Key and "ScanditSDK" as the Value.
8. At this point, the scanner can be called by calling cordova.exec with the following arguments:
- argument #1: function to be called when the scan succeeds.
- argument #2: function to be called when cancel button is pressed
- argument #3: name of the plugin, which is "ScanditSDK"
- argument #4: name of the function of the plugin to be called, which is "scan"
- argument #5: an array where the first item is the Scandit SDK app key (available from your Scandit SDK web account) and the second item is a dictionary with customization options (listed in ScanditSDK.java
To grab the value of the scanned barcode, simply use result. Result is a concatenated string which contains information about your scanned barcode, with each piece of information seperated by a "|" character.
An example of how to grab the needed barcode string:
| Code Block |
|---|
var barcode = "";
var index = result.indexOf("|");
for(var i = index + 1; i < result.length;i++){
barcode += result[i];
}
|
Below is an example call to cordova.exec():
...
Cordova barcode scanning plugin linked here.
If you are creating your own Apache Cordova app and are installing the plugins, please use the following links corresponding to the version of Cordova you are using:
- v5.0.0+ - Note: you will need to install this version from the repository as the suggested add code will install the latest version.
- v7.1.0+
Calling the plugin in an application running through our Mobile Client is a matter of using some javascript coding. The following is a simple example of a barcode application that should give a proper idea of how to create a Rich Display application that uses barcode scanning.
This application consists of one Output field bound to the variable "code", a Textbox bound to the same field, a "scan" button that will trigger the barcode scanning on a mobile device, a "save" button that will submit the barcode read back to the RPG code, and an exit button that closes the application. The following screenshots show the values for the scan button, as well as the javascript code needed for the onclick event of the button.
What the code is doing is defining a success and failure function that will be passed along to the scan function of the scanner object. These functions will fire depending on whether your barcode reader is successful in scanning a given barcode or not. Inside of these functions, we define the behavior we wish to occur depending on the context. For both of these functions, a parameter will be passed that gives the relevant info needed; in a success function, the object that is passed contains a "text" property that contains the value of the barcode scanner and a "format" property that contains the format type of the barcode scanned. In a failure function, the object passed is just a string containing the reason for the failure. You can see in the success function we are changing the value of the "code" textbox to be equal to the "text" property of the passed object called "result"; this changes the textbox's value to the scanned barcode's value. The if statement surrounding the scanner variable and scan call is checking to see if you are on mobile running Apache Cordova (which our client uses) first. If not it will automatically call the failure function (in this example nothing is passed into it, but you could pass it a string explaining that you are not on a mobile device), which simply throws an alert that displays the error.
Here is the code driving this screen:
The exit button is bound to the btnExit indicator, which ends the program. The save button has a "pui.click()" call in it's "onclick" property which submits the screen to the code.
| Child pages (Children Display) |
|---|
.