SAP Web IDE, SAPUI5

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

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.

SAP HAT Local Installation

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\\SAPHybrid\Scanner.

Open Android Studio and import the project at C:\Users\\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.

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);
},

Leave a Reply

Your email address will not be published. Required fields are marked *