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.

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.

Open gradle-wrapper.properties, change distributionUrl to:

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

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()
    }
}

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