Home

Welcome to the Zbar-PhoneGap-Plugin wiki!

Questions from a User:

I am trying to use your plugin for phonegap for using zbar barcode scanning.

With an onclick-event to a button, I call the `window.plugins.ZbarPlug.getQrCode()` – function. But how do i read the result after scanning? Calling any function that returns the ‘data’-attribute of the object runs before scanning is done. I need something like a callback I can run when i’m sure scanning a barcode is over.

Answer:

I haven’t done anything with a callback yet but I do know you will definitely need to tinker with the Objective-C code in order to use the barcode reader in a meaningful way. I think you will need to do 2 things.

1. Add your callback to the `ZbarPlug` js object.
2. Edit the Obj-C file `ZbarPlug.m` to initiate your callback when the barcode reader is finished.

1. Add your callback

You could edit the `ZbarPlug.js` directly or put this into your own js library.

ZbarPlug.prototype.finished_callback = function () {
        // data was stored in -- window.plugins.ZbarPlug.data
        alert('ZBar found this ' + window.plugins.ZbarPlug.data);
};

2. Editing the Obj-C file

The function `window.plugins.ZbarPlug.getQrCode()` from the JS file uses PhoneGap to call into the Obj-C code. In the `ZbarPlug.m` file the function `didFinishPickingMediaWithInfo` is the callback that Zbar fires after a barcode has been successfully captured. You can probably add your callback after `window.plugins.ZbarPlug.data` has been set.

// put your javascript callback in the string
NSString* retStr = [ NSString stringWithFormat:@"window.plugins.ZbarPlug.finished_callback()"];

// this will execute the javascript and your callback
[ webView stringByEvaluatingJavaScriptFromString:retStr ];

Another approach to support the Callback in Javascript (update by Kishore)

Here is another way I implemented this callback to be able to read the decoded value from Javascript. If you see ZbarPlug.m, you will notice that the decoded information is set into window.plugins.ZbarPlug.data. All I did was to wait (in a setInterval loop) and watch for this value being set and then return the value via the callback.

Change the getQrCode function as follows:

ZbarPlug.prototype.getQrCode = function (callback) {
        this.data = null; // set the data to be null before scanning the QR code
	PhoneGap.exec("ZbarPlug.showZbar");
	
	var count = 0;	
	var self = this;
	
	var intId = setInterval(function() {
	   count++;
           if(self.data) {
 		clearInterval(intId);
		//alert('received data from plugin - ' + plugin.data);
		callback.onSuccess.call(this, self.data);
	   }
	   if(count > 100) {
		clearInterval(intId);
		callback.onFailure.call(this, {message: 'Unable to read the data'});
	   }
       }, 200);
};

You code to invoke the API should look like this:

 if(window.plugins && window.plugins.ZbarPlug) {
	window.plugins.ZbarPlug.getQrCode({
		onSuccess: function(data) { 
                    alert('Data decoded from QR Code = ' + data);
                },
                onFailure: function(e) {
                    alert('Unable to read the QR Code - ' + e.message);
                }
       });
}

Integration process hint:

After Phonegap 0.9.6 there is a slight difference in the integration process of ZbarPlug. After having integrated the ZBarSDK (without the viewcontroller pointed there), you should do one more thing – make sure you have the ZbarPlug folder added as group (yellow) folder to your Plugin folder. Then, go to Resources and open the PhoneGap.plist file, scroll to the bottom, go with the mouse cursor to the bottom-right and click the + button. Then add as Key and Value – “ZbarPlug” (no quotations).