Scan Barcodes through camera in iOS and Android mobile applications built using Titanium

Posted By : Anuj Vashistha | 21-Jan-2013

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