Skip to Content
Technical Articles
Author's profile photo Ferry Djaja

Build Android SAPUI5 OCR Scanner with SAP Web IDE and Anyline OCR SDK

I would like to share how easy to build the Android SAP Fiori OCR Scanner to scan the barcode label and text.

Here are the screenshots of the final app that we are going to build.

 

Configuration & Installation

We need to configure & install the following software.

  • SAP Mobile Platform SDK
  • SAP Web IDE Full Stack with HAT enabled
  • SAP HAT Local Installation
  • Anyline Cordova SDK

SAP Mobile Platform SDK

Download and install SAP Mobile Platform SDK from https://www.sap.com/sea/developer/trials-downloads/additional-downloads/mobile-platform-sdk-free-download-13098.html

Install the following components. The version in the bracket is the version that I am currently using and is working perfectly.

  • Oracle Java (1.8.0)
  • Android SDK
  • Android Studio (3.0.1)
  • Cordova (6.5.0)
  • Kapsel SDK (3.16.0)
  • Ant (1.10.5)

Set the following environment variables: ANT_HOME, JAVA_HOME and KAPSEL_HOME.


SAP Web IDE Full Stack with HAT enabled

Logon to SAP Cloud Platform Cockpit and enable the SAP Web IDE Full Stack

Then go to service.

Click Preferences > Features (Extensions) and search for Hybrid App Toolkit.

Enable and save it.

You will see the Hybrid App Toolkit.

Even though this feature has reached the end of maintenance, I can still use this feature to build the awesome apps and I find it easier.

Next step is to install the HAT locally on your computer.


I downloaded version 1.29.7

Download the required components for HAT.

  • NodeJS (8.9.4)
  • Npm (5.6.0)
  • Git (2.13.2)
  • Bower (1.8.4)

Extract the HAT Add-on to your C:\ drive. For my case is C:\SAP_HAT_local-1.29.7

We need to modify the HAT Add-on setup script, otherwise you will get an error message.

Open check_env.cmd at folder .\SAP_HAT_local-1.29.7\setup\scripts\win and change the NodeJS version major, minor and build at line 62–64.

Change it according to your NodeJS version (for my case is 8.9.4):

Run the setup.cmd.

If no error, the browser will be opened. Click Check All to start the installation.

Make sure there is no error on each step and status is passed.

 

When you at step 2.Install Hybrid App Toolkit > 3. Configure HAT Connector for SAP Web IDE, enter the SAP Web IDE Full Stack URL

 

At step 5 Configure path for custom plugins, specify the folder where you want to put the Anyline SDK Cordova plugin (for my case is C:\SAP\Plugins). Later we will download this plugin.

Continue the installation.

Check again to ensure there is no error and all steps are passed then close the browser.

Go to HAT Add-on folder installation and run the HAT server.

Check if SAP Web IDE can communicate to the server. Go to Web IDE > Hybrid Application Toolkit and test the connection. If no error, you will see the similar result as per the below screenshot.

 


Anyline Cordova SDK

Download Anyline Cordova SDK from https://github.com/Anyline/anyline-ocr-cordova-module and put it under C:\SAP\Plugins\Anyline. That’s it!.


Create SAPUI5 App

On SAP Web IDE, create the SAPUI5 app Scanner.

Click Finish to complete.

Go to Project Settings.

Select Hybrid App Toolkit > App Configuration > Application

Enter the App Name and App Id.

Select Hybrid App Toolkit > App Configuration > Plugins > Custom.

Select Local > AnylineSDK

Click Save

Click Deploy > Prepare Hybrid Project.

You will see the progress on the console. One of the activity is to install the Anyline Cordova plugin locally.

Wait until the app has been successfully deployed.

It will be saved at C:\Users\<user>\SAPHybrid\Scanner.

Open Android Studio and import the project at C:\Users\<user>\SAPHybrid\Scanner\hybrid\platforms\android

If you see this error message:

Open gradle-wrapper.properties, change distributionUrl to:

Open gradle-wrapper.properties, change distributionUrl to:

distributionUrl=https\://services.gradle.org/distributions/gradle-4.6-all.zip

Update buildscript and allprojects section on build.gradle (Project level):
buildscript {
    repositories {
        mavenCentral()
        google()
        jcenter()
    }

    // Switch the Android Gradle plugin version requirement depending on the
    // installed version of Gradle. This dependency is documented at
    // http://tools.android.com/tech-docs/new-build-system/version-compatibility
    // and https://issues.apache.org/jira/browse/CB-8143
    dependencies {
        classpath 'com.android.tools.build:gradle:3.2.1'
    }
}

// Allow plugins to declare Maven dependencies via build-extras.gradle.
allprojects {
    repositories {
        mavenCentral();
        google()
        jcenter()
    }
}
Update dependencies section:
dependencies {
    compile fileTree(dir: 'libs', include: '*.jar')
    // SUB-PROJECT DEPENDENCIES START
    //debugCompile(project(path: "CordovaLib", configuration: "debug"))
    //releaseCompile(project(path: "CordovaLib", configuration: "release"))
    compile project(':CordovaLib')
    // SUB-PROJECT DEPENDENCIES END
}

Remove uses-sdk tag on AndroidManifest.xml.

<uses-sdk android:minSdkVersion="16" android:targetSdkVersion="25" />

Also remove uses-sdk on AndroidManifest.xml at CordovaLib level:

<uses-sdk android:minSdkVersion="14" />

Try to rebuild again.

Now the build is success!

The main functions to scan the barcode and OCR  are in the the Scanner.controller.js.

Make sure the asset folder is there. It consist of the available trained fonts that will be used to recognize the character in the scanning process. We are going to use only the Calibri.traineddata for this project. Feel free to experiment with other asset files if the scan result is poor.

https://github.com/ferrygun/Scanner/tree/master/webapp/assets

Let’s take a look at the main function in Scanner.controller.js before we build the app. We need to define the Anyline OCR & Barcode configuration as described below.

Anyline OCR config

OCRConfig: {
    "camera": {
        "captureResolution": "1080"
    },
    "flash": {
        "mode": "manual",
        "alignment": "bottom_right"
    },
    "viewPlugin": {
        "plugin": {
            "id": "OCRID",
            "ocrPlugin": {
                "scanMode": "LINE",
                "languages": ["www/assets/Calibri.traineddata"],
                "charWhitelist": "1234567890",
                "validationRegex": "^[0-9]{12}$",
                "minConfidence": 60,
                "minSharpness": 66,
                "removeSmallContours": true,
                "removeWhitespaces": true
            }
        },
        "cutoutConfig": {
            "style": "rect",
            "maxWidthPercent": "80%",
            "maxHeightPercent": "80%",
            "alignment": "center",
            "width": 500,
            "ratioFromSize": {
                "width": 720,
                "height": 95
            },
            "strokeWidth": 2,
            "cornerRadius": 3,
            "strokeColor": "FFFFFF",
            "outerColor": "000000",
            "outerAlpha": 0.3,
            "feedbackStrokeColor": "0099FF"
        },
        "scanFeedback": {
            "style": "contour_point",
            "strokeWidth": 3,
            "strokeColor": "0099FF",
            "fillColor": "220099FF",
            "beepOnResult": true,
            "vibrateOnResult": true,
            "blinkAnimationOnResult": true
        },
        "visualFeedback": {
            "style": "contour_point",
            "animation": "resize",
            "animationDuration": 150,
            "strokeColor": "0099FF",
            "strokeWidth": 2
        },
        "cancelOnResult": true
    }
},

 

Anyline Barcode config

BarcodeConfig: {
    "camera": {
        "captureResolution": "1080"
    },
    "flash": {
        "mode": "manual",
        "alignment": "bottom_right"
    },
    "viewPlugin": {
        "plugin": {
            "id": "BarcodeID",
            "barcodePlugin": {
                "barcodeFormatOptions": ["CODABAR", "EAN_13", "UPC_A"]
            }
        },
        "cutoutConfig": {
            "style": "rect",
            "maxWidthPercent": "80%",
            "maxHeightPercent": "80%",
            "alignment": "center",
            "ratioFromSize": {
                "width": 100,
                "height": 80
            },
            "strokeWidth": 1,
            "cornerRadius": 3,
            "strokeColor": "FFFFFF",
            "outerColor": "000000",
            "outerAlpha": 0.3,
            "feedbackStrokeColor": "0099FF"
        },
        "scanFeedback": {
            "style": "rect",
            "strokeColor": "0099FF",
            "fillColor": "220099FF",
            "animationDuration": 150,
            "blinkOnResult": true,
            "beepOnResult": true,
            "vibrateOnResult": true
        },
        "cancelOnResult": true
    }
},

These two functions getBarcode() and getOCR() to call cordova barcode label and OCR scanner.

getBarcode: function() {
  cordova.exec(this.onResultBarcode, this.onError, "AnylineSDK", "scan", [this.licenseKey, this.BarcodeConfig]);
},

getOCR: function() {
  cordova.exec(this.onResultOCR, this.onError, "AnylineSDK", "scan", [this.licenseKey, this.OCRConfig]);
},

onResultOCR: function(result) {
  console.log(result);
  alert(result.text);
},

onResultBarcode: function(result) {
  console.log(result);
  alert(result.value);
},

 

Now everything is setup and we are ready to build & run the app !

All the codes can be found here: https://github.com/ferrygun/Scanner

Assigned Tags

      6 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Kajaria Aanchal
      Kajaria Aanchal

      Hello Ferry,

      I am new to this mobile dev world, but have experience in working for custom UI5 dev in SCP.

      My target is to create something like in your blog

      https://blogs.sap.com/2019/01/11/add-machine-learning-capabilities-in-sap-fiori-app-with-google-ml-kit-custom-model/?source=social-Global-SAP+Developers-LINKEDIN_COMPANY-AudienceEngagement-Developers-Fiori&campaigncode=CRM-XB19-MKT-DGEALL

      Can you please help me explain the setup required here?

      I have downloaded all that is mentioned in your previous blogs, but not able to use the setup to create apps.

      Run the setup.cmd. fails for me

      Thanks

      Aanchal

       

       

       

      Author's profile photo Ferry Djaja
      Ferry Djaja
      Blog Post Author

      Hi Aanchal

      Do you have any error details ? from the screenshot, I can't find any details.

       

      Cheers,

      Ferry

      Author's profile photo Andre Julius
      Andre Julius

      Hi Ferry Djaja

       

      Thanks for the insightful blogs that you created, I however have some trouble installing the Local HAT for a while. Last time I gave up local HAT and deploy Hybrid app directly from SCP Web IDE.

      After I call setup.cmd (actually more like double clicking setup.cmd in windows explorer), I got the web page below.

       

      I've been googling about this for a while but apparently having no luck finding solution. would you be able to advise?

       

      Best Regards

       

      Andre Julius

       

       

      Author's profile photo Ferry Djaja
      Ferry Djaja
      Blog Post Author

      Hi Andre

       

      I believe there is an issue with bower components, but I am not sure which one causing that. Can you check the bower components and make sure the path is correct and complete?

       

      Best,

      Ferry

      Author's profile photo Andre Julius
      Andre Julius

      Hi Ferry Djaja

      Sorry, I'm not sure how to check them, but once I see your clue, I realized that all my bower is returning 404 when i double clicked setup.cmd...maybe I should try to reinstall

      on a separate note, do I need to be well versed in android app development to be able to comprehend your articles related to Google ML?

      Best Regards

       

      Andre Julius

       

      Author's profile photo Andre Julius
      Andre Julius

      Hi Ferry Djaja

       

      I have reinstalled most of them (node JS, Kapsel Cli, bower) and I still get the error 404 even though the path should be valid

       

      Best Regards

       

      Andre Julius