Blog

  • Scab Barcode in Titanium

    This blog demonstrates the integration of Barcode Reader into your iOS/Android mobile app in Titanium using Acktie Mobile Barcode Reader Module.

    You may download the Module for iOS / Android from the link below :

    https://github.com/acktie/

     

    • Create a new project in titanium.

    Add the downloaded modules for iOS and Android in your tiapp.xml file.

    • Now, replace your "app.js" code with the code written below :
    • Create a window and include the "barcode reader module" in the window.

     

    // this sets the background color of the master UIView (when there are no windows/tab groups on it)
    Titanium.UI.setBackgroundColor('#000');
    
    // create tab group
    var tabGroup = Titanium.UI.createTabGroup();
    //
    // create base UI tab and root window
    //
    var win1 = Ti.UI.createWindow({
    	backgroundColor : 'white',
    	title: "Scan Barcode",
    });
    var tab1 = Titanium.UI.createTab({
    	icon : 'KS_nav_views.png',
    	title : 'Tab 1',
    	window : win1
    });
    
    var barcodereader = undefined;
    var barcodeCodeWindow = undefined;
    var barcodeCodeView = undefined;
    
    // Depending on the platform, include the appropriate barcode module
    if (Ti.Platform.osname === 'iphone' || Ti.Platform.osname === 'ipad') {
    	barcodereader = require('com.acktie.mobile.ios.barcode');
    } else if (Ti.Platform.osname === 'android') {
    	barcodereader = require('com.acktie.mobile.android.barcode');
    }

     

    • Create an Array and include all the Barcode types available.
    // All supported Barcode types
    var ALL = [
        "EAN2",
        "EAN5",
        "EAN8",
        "UPCE",
        "ISBN10",
        "UPCA",
        "EAN13",
        "ISBN13",
        "COMPOSITE",
        "I25",
        "DATABAR",
        "DATABAR_EXP",
        "CODE39",
        "PDF417",
        "CODE93",
        "CODE128",];
    
    
    
    • Function that includes the Barcode reader behaviour, for Android :
       
    /*
     * Function that mimics the iPhone Barcode Code reader behavior.
     */
    function scanBarcodeFromCamera(options) {
    	barcodeCodeWindow = Titanium.UI.createWindow({
    		backgroundColor : 'black',
    		width : '100%',
    		height : '100%',
    	});
    	barcodeCodeView = barcodereader.createBarcodeView(options);
    
    	var closeButton = Titanium.UI.createButton({
    		title : "close",
    		bottom : 0,
    		left : 0
    	});
    	var lightToggle = Ti.UI.createSwitch({
    		value : false,
    		bottom : 0,
    		right : 0
    	});
    
    	closeButton.addEventListener('click', function() {
    		barcodeCodeView.stop();
    		barcodeCodeWindow.close();
    	});
    
    	lightToggle.addEventListener('change', function() {
    		barcodeCodeView.toggleLight();
    	})
    
    	barcodeCodeWindow.add(barcodeCodeView);
    	barcodeCodeWindow.add(closeButton);
    
    	if (options.userControlLight != undefined && options.userControlLight) {
    		barcodeCodeWindow.add(lightToggle);
    	}
    
    	// NOTE: Do not make the window Modal.  It screws stuff up.  Not sure why
    	barcodeCodeWindow.open();
    }
    
    
    
    
    • Now, create a button on click of which barcode has to be read.
    /**
     * Read Barcode code from the Camera feed.  Once the Barcode code is read it will
     * stop scanning.
     */
    var barcodeFromCameraButton = Titanium.UI.createButton({
    	title : 'Barcode from Camera (All)',
    	height : 40,
    	width : '100%',
    	top : 60
    });
    barcodeFromCameraButton.addEventListener('click', function() {
    	var options = {
    		// ** Android Barcode Reader properties (ignored by iOS)
    		backgroundColor : 'black',
    		width : '100%',
    		height : '90%',
    		top : 0,
    		left : 0,
    		// **
    
    		// ** Used by both iOS and Android
    		overlay : {
    			color : "blue",
    			layout : "center",
    			alpha : .75
    		},
    		barcodes:ALL,
    		success : success,
    		cancel : cancel,
    		error : error,
    	};
    
    	if (Ti.Platform.name == "android") {
    		scanBarcodeFromCamera(options);
    	} else {
    		barcodereader.scanBarcodeFromCamera(options);
    	}
    });
    
    win1.add(barcodeFromCameraButton);
    
    function success(data) {
    	if(data != undefined && data.data != undefined) {
    		Titanium.Media.vibrate();
    		alert('data: ' + data.data + ' type: ' + data.type);
    	}
    };
    
    function cancel() {
    	alert("Cancelled");
    };
    
    function error() {
    	alert("error");
    };
    

     

    • Now, after all the code written your "app.js" will look like the one below:

     

       
    Titanium.UI.setBackgroundColor('#000');
    
    var tabGroup = Titanium.UI.createTabGroup();
    
    var win1 = Ti.UI.createWindow({
    	backgroundColor : 'white',
    	title: "Scan Barcode",
    });
    var tab1 = Titanium.UI.createTab({
    	icon : 'KS_nav_views.png',
    	title : 'Tab 1',
    	window : win1
    });
    
    var barcodereader = undefined;
    var barcodeCodeWindow = undefined;
    var barcodeCodeView = undefined;
    
    if (Ti.Platform.osname === 'iphone' || Ti.Platform.osname === 'ipad') {
    	barcodereader = require('com.acktie.mobile.ios.barcode');
    } else if (Ti.Platform.osname === 'android') {
    	barcodereader = require('com.acktie.mobile.android.barcode');
    }
    
    var ALL = [
        "EAN2",
        "EAN5",
        "EAN8",
        "UPCE",
        "ISBN10",
        "UPCA",
        "EAN13",
        "ISBN13",
        "COMPOSITE",
        "I25",
        "DATABAR",
        "DATABAR_EXP",
        "CODE39",
        "PDF417",
        "CODE93",
        "CODE128",];
    
    var barcodeFromCameraButton = Titanium.UI.createButton({
    	title : 'Barcode from Camera (All)',
    	height : 40,
    	width : '100%',
    	top : 60
    });
    barcodeFromCameraButton.addEventListener('click', function() {
    	var options = {
    		backgroundColor : 'black',
    		width : '100%',
    		height : '90%',
    		top : 0,
    		left : 0,
    		overlay : {
    			color : "blue",
    			layout : "center",
    			alpha : .75
    		},
    		barcodes:ALL,
    		success : success,
    		cancel : cancel,
    		error : error,
    	};
    
    	if (Ti.Platform.name == "android") {
    		scanBarcodeFromCamera(options);
    	} else {
    		barcodereader.scanBarcodeFromCamera(options);
    	}
    });
    
    win1.add(barcodeFromCameraButton);
    
    function success(data) {
    	if(data != undefined && data.data != undefined) {
    		Titanium.Media.vibrate();
    		alert('data: ' + data.data + ' type: ' + data.type);
    	}
    };
    
    function cancel() {
    	alert("Cancelled");
    };
    
    function error() {
    	alert("error");
    };
    
    function scanBarcodeFromCamera(options) {
    	barcodeCodeWindow = Titanium.UI.createWindow({
    		backgroundColor : 'black',
    		width : '100%',
    		height : '100%',
    	});
    	barcodeCodeView = barcodereader.createBarcodeView(options);
    
    	var closeButton = Titanium.UI.createButton({
    		title : "close",
    		bottom : 0,
    		left : 0
    	});
    	var lightToggle = Ti.UI.createSwitch({
    		value : false,
    		bottom : 0,
    		right : 0
    	});
    
    	closeButton.addEventListener('click', function() {
    		barcodeCodeView.stop();
    		barcodeCodeWindow.close();
    	});
    
    	lightToggle.addEventListener('change', function() {
    		barcodeCodeView.toggleLight();
    	})
    
    	barcodeCodeWindow.add(barcodeCodeView);
    	barcodeCodeWindow.add(closeButton);
    
    	if (options.userControlLight != undefined && options.userControlLight) {
    		barcodeCodeWindow.add(lightToggle);
    	}
    
    	barcodeCodeWindow.open();
    }
    
    if (Ti.Platform.osname == 'android') {
    	var activity = Ti.Android.currentActivity;
    	activity.addEventListener('pause', function(e) {
    		Ti.API.info('Inside pause');
    		if (barcodeCodeView != undefined) {
    			barcodeCodeView.stop();
    		}
    
    		if (barcodeCodeWindow != undefined) {
    			barcodeCodeWindow.close();
    		}
    	});
    }
    
    tabGroup.addTab(tab1);
    
    tabGroup.open();
    
    
    • iOS and Android screenshots are provided below :

      

     

      

     

    Hope this helps..

    Anuj Vashistha

    anuj.vashistha@oodlestechnologies.com

    http:/oodlestechnologies.com/

Tags: titanium , android , ios