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-dow...
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
Download the HAT from this link: https://www.sap.com/india/developer/trials-downloads/additional-downloads/hybrid-app-toolkit-add-on-...
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
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
- SAP Managed Tags:
6 Comments
