SAPUI5 Multi-Barcode Scanner App

Multi barcode scanner app is a productivity tool that is easy to integrate with SAPUI5 to capture one or more barcodes with a single press of a scan button. The app will be able to  capture all barcodes simultaneously on a single label. No need repetitive scanning to capture all required barcodes and increase productivity!

The barcode result will be auto populated in SAPUI5 field for further validations before sending to SAP backend.

We will build an SAPUI5 Multi-Barcode scanner Android app to scan the item with multiple barcode labels.

Setup

I wrote a detailed steps in this blog on how to setup all the required components. Please ensure you have setup the required components before continue with the rest.

Instead of using cordova plugin camera from SAP Web IDE, we will use cordova-plugin-camera-preview. 

We will modify cordova-plugin-ml to add the multi barcode scan features as well.

Modify cordova-plugin-ml

Open Mltext.java and replace the code with this.

Simple UI

We will create a simple UI to start and stop the camera preview. Also to take picture and feed to the recognizer.

Update View and Controller

View

<mvc:View controllerName="GPS.GPS.controller.GPS" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:mvc="sap.ui.core.mvc" displayBlock="true"
	xmlns="sap.m">
	<App id="idAppControl">
		<Page title="Camera test">
			<content>
				<HBox width="100%" id="__hbox0" justifyContent="SpaceBetween">
					<items>
						<Button icon="sap-icon://begin"  width="30%" id="__button0" press="startCamera">
							<layoutData>
								<FlexItemData alignSelf="Stretch" id="__data0"/>
							</layoutData>
						</Button>
						<Button icon="sap-icon://stop" width="30%" id="__button1" press="stopCamera">
							<layoutData>
								<FlexItemData alignSelf="Stretch" id="__data1"/>
							</layoutData>
						</Button>
						<Button icon="sap-icon://video" width="40%" id="__button2" press="takePicture">
							<layoutData>
								<FlexItemData alignSelf="Stretch" id="__data2"/>
							</layoutData>
						</Button>
					</items>
				</HBox>
				<HBox width="100%" id="__hbox1" justifyContent="Center">
					<items>
						<SearchField id="Barcode1">
						</SearchField>
					</items>
				</HBox>
				<HBox width="100%" id="__hbox2" justifyContent="Center">
					<items>
						<SearchField id="Barcode2">
						</SearchField>
					</items>
				</HBox>
				<HBox width="100%" id="__hbox3" justifyContent="Center">
					<items>
						<SearchField id="Barcode3">
						</SearchField>
					</items>
				</HBox>
				<HBox width="100%" id="__hbox4" justifyContent="Center">
					<items>
						<SearchField id="Barcode4">
						</SearchField>
					</items>
				</HBox>
			</content>
		</Page>
	</App>
</mvc:View>

Controller

• startCamera and stopCamera is to start and stop the camera preview.
• takePicture is to get the picture and feed the picture to barcode recognition  mltext.getBarcode.
• For this demo app, the maximum barcode that can be recognized is fixed to four labels. We can adjust it to maximum number as per requirements.
• Once the barcode(s) is recognized, onSuccessBarcode function will be called and the result is in JSON format recognizeText.blocktext.
• and finally fill in the myBarcodex field with the result.

sap.ui.define([
    "sap/ui/core/mvc/Controller"
], function(Controller) {
    "use strict";
    var oView;
    var stop = false;

    return Controller.extend("Scanner.Scanner.controller.Scanner", {
        oView: null,

        onInit: function() {
            oView = this.getView();
        },

        startCamera: function() {
            var width = 300;
            var height = 300;
            var x = (this.getView().$().width() - width)/2;
            var y = (this.getView().$().height() - height)/2 + 13,0;

            CameraPreview.startCamera({x: x, y: y, width: width, height: height, toBack: false, previewDrag: false, tapPhoto: true, tapFocus: true, camera: CameraPreview.CAMERA_DIRECTION.BACK});
        },

        stopCamera: function() {
             stop = true;
             CameraPreview.stopCamera();
        },

        takePicture: function(){
            CameraPreview.takePicture({quality: 100}, function(imgData){

                mltext.getBarcode(onSuccessBarcode, onFailBarcode, {
                    imgType: 4,
                    imgSrc: imgData
                });

                function onSuccessBarcode(recognizedText) {
                    console.log(recognizedText.blocktext);

                    var myBarcode1 = oView.byId("Barcode1");
                    var myBarcode2 = oView.byId("Barcode2");
                    var myBarcode3 = oView.byId("Barcode3");
                    var myBarcode4 = oView.byId("Barcode4");

                    myBarcode1.setValue(recognizedText.blocktext[0]);
                    myBarcode2.setValue(recognizedText.blocktext[1]);
                    myBarcode3.setValue(recognizedText.blocktext[2]);
                    myBarcode4.setValue(recognizedText.blocktext[3]);
                }

                function onFailBarcode(message) {
                    console.log('Failed because: ' + message);
                    alert('Failed because: ' + message);
                }
            });
        },
    });
});

Full source code on my repo.

Here is the demo video – the response time is pretty fast. In the video it looks slow is because of my stylus is not quite responsive 🙂