Technology Blogs by SAP
Learn how to extend and personalize SAP applications. Follow the SAP technology blog for insights into SAP BTP, ABAP, SAP Analytics Cloud, SAP HANA, and more.
cancel
Showing results for 
Search instead for 
Did you mean: 
Dan_vL
Product and Topic Expert
Product and Topic Expert
5,681
Previous   Home   Next


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.barcode-generator.org/ can be used to generate a sample UPC-A barcode.

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 instructions will demonstrate the barcode scanner plugin.

  • Replace the contents of www\index.html with the following content.
    <html>
    <head>
    <title>Barcode Scanner Sample</title>
    <script type="text/javascript" charset="utf-8" src="cordova.js"></script>
    <script>
    document.addEventListener("deviceready", init, false);

    var options = {
    preferFrontCamera : true, // iOS and Android
    showFlipCameraButton : true, // iOS and Android
    showTorchButton : true, // iOS and Android
    torchOn: true, // Android, launch with the torch switched on (if available)
    prompt : "Place a barcode inside the scan area", // Android
    resultDisplayDuration: 500, // Android, display scanned text for X ms. 0 suppresses it entirely, default 1500
    //formats : "QR_CODE,PDF_417", // default: all but PDF_417 and RSS_EXPANDED
    orientation : "landscape", // Android only (portrait|landscape), default unset so it rotates with the device
    disableAnimations : true // iOS
    };

    function init() {
    }

    function scan() {
    log("scanning");
    cordova.plugins.barcodeScanner.scan(scanSuccessCallback, scanErrorCallback, options);
    }

    function scanSuccessCallback(result) {
    log(result.text);
    //log(JSON.stringify(result));
    }

    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>


  • Add the dialogs plugin and either the Kapsel or open source barcode scanner.
    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


  • Prepare, build and deploy the app.
    cordova run android
    or
    cordova run windows -- --archs=x64
    or
    cordova run windows --device -- --archs=arm --phone
    or
    cordova run ios


  • If the scan fails on Windows, open the appxmanifest.xml file and ensure that the capability Webcam is checked. See also Windows 10 app crashes, when starting barcodescanner.

  • Find or create a barcode and then scan it.
    On iOS, you may need to set the character encoding to IOS-8859-1.

    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.
Below is a simple example 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.

If you are not using the device's camera but a specialized laser barcode scanner, the following video may be of interest showing how to integrate with a Zebra barcode scanner. Zebra DEV { TALK } Want to Integrate DataWedge or Printing into Your Cordova Application



Previous   Home   Next
6 Comments