Skip to Content

/wp-content/uploads/2015/07/sap_logo_750601.png

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.
image4.PNG

  • 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.
    image1.PNG

    Note that on iOS, make sure that the character encoding is set to IOS-8859-1.

    image2.PNG

    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.
    image3.PNG

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>

image5.PNG

Note if the Barcode scanner is unable to successfully complete the scan, the following dialog appears to enable manual entry.

image6.PNG

Another example is available at BarCodeScannerButton.

Back to Getting Started With Kapsel

To report this post you need to login first.

3 Comments

You must be Logged on to comment or reply to a post.

  1. David Fish

    When I tried the SAPUI5 barcode button with iOS9 the page was blank and I got this error in the console:

    NSURLSession/NSURLConnection HTTP load failed (kCFStreamErrorDomainSSL, –9824

    CFNetwork SSLHandshake failed (-9824)


    I found a solution on StackOverflow and wanted to share it in case anyone else encounters this problem. It appears to be related to the SAP CDN (https://sapui5.hana.ondemand.com/resources/sap-ui-core.js)

    only supporting TLS 1.0.

    When I added the below section to my Info.plist file the app started working.


    <key>NSAppTransportSecurity</key>

    <dict>

        <key>NSExceptionDomains</key>

        <dict>

            <key>ondemand.com</key>

            <dict>

                <key>NSIncludesSubdomains</key>

                <true/>

                <key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>

                <true/>

                <key>NSTemporaryExceptionMinimumTLSVersion</key>

                <string>1.0</string>

                <key>NSTemporaryExceptionRequiresForwardSecrecy</key>

                <false/>

            </dict>

        </dict>

    </dict>


    Here is a link to the StackOverflow post:


    http://stackoverflow.com/questions/30739473/nsurlsession-nsurlconnection-http-load-failed-on-ios-9


    Regards,

    Dave

    (0) 
  2. Deepak Arora

    If running the android version, you may need to add:

    <string name=”menu_share”>Menu Share</string>

    <string name=”menu_encode_vcard”>Menu Encode VCard</string>

    To strings.xml

    (0) 

Leave a Reply