- SAP Managed Tags:
Barcode Scanner
This plugin enables the ability to scan and decode a barcode. It uses the open source BarcodeScanner plugin.
There are a lot of acronyms in this area. The following are some related topics, links and a few brief points on how they compare or relate to barcodes.
UPC or Universal Product Code is a standard way that one dimensional barcodes are encoded. It represents a 12 digit number. The site http://www.barcoding.com/upc/#.U3Di1_ldUtI can be used to generate a sample UPC.
QR or Quick Response code is a two dimension bar code. It can represent numbers and text such as a URL or a person's contact information. The ZXing project provides a QR generator and decoder.
RFID or Radio-Frequency Identification is used to transfer data wireless for the purposes of identification. RFID tags can be used with barcodes. For example a pallet may be identified by an RFID tag but each item in the pallet may contain a barcode. Barcodes are less expensive than RFID tags. RFID tags can be read hundreds at a time whereas barcodes must be scanned one at a time. Barcodes can be sent via email such as movie ticket or flight ticket and read off of a screen of mobile device. A RFID chip does not require a line of sight to the reader. Each RFID chip has a unique identifier. Many passports include an RFID chip as do electronic toll transponders. An RFID tag can typically hold a few kilobytes of data.
NFC or Near Field Communication is a set of standards for two devices in close proximity to establish radio communication based on RFID. NFC can be used to bootstrap more capable wireless connections such as Bluetooth. It is also used for mobile payment such as PayPass. It enables two way communication. iOS does not support NFC. On Google Nexus devices the feature is called Android Beam. On Samsung devices it is known as S-Beam. NFC has a lower transfer rate, requires less power, and sets up more quickly than Bluetooth.
Bluetooth is a wireless technology for exchanging data over short distances similar to NFC.
iBeacon is an indoor positioning system used by Apple Inc. It uses Bluetooth Low Energy.
For additional details on the Barcode Scanner plugin see the file C:\SAP\MobileSDK3\KapselSDK\plugins\barcodescanner\www\barcodescanner.js or BarcodeScanner plugin or Using the Kapsel Barcode Scanner Plugin.
The following steps will demonstrate an example of using this plugin. Note, the Kapsel Barcode Scanner requires the Android SDK Build-tools to be >= 19.0.3 otherwise an error of java.lang.NoClassDefFoundError may occur when calling scan.
- Create the project.
cordova create C:\Kapsel_Projects\BarcodeScannerDemo com.mycompany.barcodescanner BarcodeScannerDemo
cd C:\Kapsel_Projects\BarcodeScannerDemo
cordova platform add android
or
cordova platform add windows
or
cordova create ~/Documents/Kapsel_Projects/BarcodeScannerDemo com.mycompany.barcodescanner BarcodeScannerDemo
cd ~/Documents/Kapsel_Projects/BarcodeScannerDemo
cordova platform add ios
- Add the dialogs plugin and the device plugin to determine if the device is Android or iOS, and then either the Kapsel or open source barcode scanner.
cordova plugin add cordova-plugin-device
cordova plugin add cordova-plugin-dialogs
cordova plugin add kapsel-plugin-barcodescanner --searchpath %KAPSEL_HOME%/plugins
or
cordova plugin add kapsel-plugin-barcodescanner --searchpath $KAPSEL_HOME/plugins
or
cordova plugin add phonegap-plugin-barcodescanner
- To workaround a bug on Android that occurs when encode is called (if using open source plugin), modify C:\Kapsel_Projects\BarcodeScannerDemo\platforms\android\res\menu\encode.xml. See also Encode doesn't work on Android.
<menu xmlns:android="http://schemas.android.com/apk/res/android"> <item android:id="@+id/menu_share" android:title="@string/menu_share" android:icon="@android:drawable/ic_menu_share" android:orderInCategory="1" android:showAsAction="withText|ifRoom"/> <item android:id="@+id/menu_encode" android:title="@string/menu_encode_vcard" android:icon="@android:drawable/ic_menu_sort_alphabetically" android:orderInCategory="2" android:showAsAction="withText|ifRoom"/> </menu>
- Replace www\index.html with the contents below.
<html>
<head>
<title>Barcode Scanner Sample</title>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script>
document.addEventListener("deviceready", init, false);
function init() {
}
function scan() {
log("scanning");
cordova.plugins.barcodeScanner.scan(scanSuccessCallback, scanErrorCallback);
}
function scanSuccessCallback(result) {
log(result.text);
}
function scanErrorCallback(error) {
navigator.notification.alert("Scanning failed: " + JSON.stringify(error));
}
function encode() {
log("encoding");
var stringToEncode = "http://www.sap.com";
cordova.plugins.barcodeScanner.encode(cordova.plugins.barcodeScanner.Encode.TEXT_TYPE, stringToEncode, encodeSuccessCallback, encodeErrorCallback);
}
function encodeSuccessCallback(result) {
log(JSON.stringify(result));
}
function encodeErrorCallback(error) {
navigator.notification.alert("Encoding failed: " + JSON.stringify(error));
}
function log(line) {
var results = document.getElementById("scan_results");
results.innerHTML+= "<br>" + line;
}
</script>
</head>
<body>
<h1>Barcode Scanner Sample</h1>
<button onclick="scan()">Scan</button>
<button onclick="encode()">Encode</button>
<div id="scan_results"></div>
</body>
</html>
- Prepare, build and deploy the app with the following commands for Android and iOS or use Visual Studio for Windows.
cordova run android
or
cordova run ios
Find or create (QR generator) and then scan a barcode.
Note that on iOS, make sure that the character encoding is set to IOS-8859-1.
Note that the encode functionality was recently added to the open source version of this plugin (Add QR code encoder implementation for IOS).
Here is the result of calling encode on a URL.
It is also possible to use the SAPUI5 sap.ndc.BarCodeScannerButton. This is part of the sap.ndc package which has controls with native device capabilities.
The following is an index.html that makes use of this control and a few screenshots demonstrating how it looks.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>Barcode Scanner App</title>
<script id="sap-ui-bootstrap" src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js" data-sap-ui-theme="sap_bluecrystal" data-sap-ui-libs="sap.m, sap.ui.commons, sap.ndc"></script>
<script type="text/javascript" src="cordova.js"></script>
<script>
var app1 = new sap.m.App("myApp", {
initialPage: "page1"
});
var page1 = new sap.m.Page("page1", {
title: "Barcode Scanner"
});
var buttonScan = new sap.ndc.BarcodeScannerButton({
text: "Scan"
});
var buttonEncode = new sap.m.Button({
text: "Encode"
});
var textOp = new sap.m.Text({
text: "N/A"
});
var textOpResult = new sap.m.Text({
text: "N/A"
});
var oLayout2 = new sap.ui.layout.VerticalLayout("Layout2", {
content: [
buttonScan,
buttonEncode,
textOp,
textOpResult
]
});
page1.addContent(oLayout2);
app1.addPage(page1);
app1.placeAt("content"); // place the App into the HTML document
document.addEventListener(
"deviceready",
function() {
log("Device Ready", "All plugins are now ready to be called");
},
false
);
function scanSuccessCallback(result) {
log("Scan Succeeded", result.mParameters.text);
}
function scanFailCallback(error) {
navigator.notification.alert("Scanning failed: " + JSON.stringify(error));
}
function encode() {
var stringToEncode = "http://www.sap.com";
log("encoding", stringToEncode);
if (device.platform == "Android") { //Not supported on iOS
cordova.plugins.barcodeScanner.encode(cordova.plugins.barcodeScanner.Encode.TEXT_TYPE, stringToEncode, encodeSuccessCallback, encodeErrorCallback);
}
else {
log("Encoding is not supported on iOS. See https://github.com/wildabeast/BarcodeScanner/issues/106");
}
}
function encodeSuccessCallback(result) {
log(result.text);
}
function encodeErrorCallback(error) {
navigator.notification.alert("Encoding failed: " + JSON.stringify(error));
}
function log(operation, result) {
textOp.setText(operation);
textOpResult.setText(result);
}
buttonScan.attachScanSuccess(scanSuccessCallback);
buttonScan.attachScanFail(scanFailCallback);
buttonEncode.attachPress(encode);
</script>
</head>
<body class="sapUiBody">
<div id="content"></div>
</body>
</html>
Note if the Barcode scanner is unable to successfully complete the scan, the following dialog appears to enable manual entry.
Another example is available at BarCodeScannerButton.
Back to Getting Started With Kapsel
3 Comments
