iphone

Use ZBar barcode reader with PhoneGap

ZBar and zxing are two iphone-compatible barcode reader libraries. I figured out how to integrate Zbar with PhoneGap for use as a QR code reader in my PhoneGap iphone application.

The process has a few major steps.

  • Download and install PhoneGap.
  • Setup a PhoneGap application in XCode
  • Download and install Zbar.
  • Follow the Zbar documentation to incorporate the SDK library into your PhoneGap

Using the Git

  • Once you download the Git repository, copy the “ZbarPlug.h” and “ZbarPlug.m” files to the “Plugins” directory in your Xcode project.
  • Copy “ZbarPlug.js” to your Project’s “www” directory.
  • Link to the js file in your “index.html” file. Be sure to put it below the include for phonegap.js
cp ZbarPlug.h /path/to/xcode/project/Plugins
cp ZbarPlug.m /path/to/xcode/project/Plugins
cp ZbarPlug.js /path/to/xcode/project/www
<script type="text/javascript" 
              charset="utf-8" 
              src="ZbarPlug.js"></script>

The example pops a javascript alert when a bar code or QR code have been decoded. Now you need to adapt the library to your project.

ZBar Barcode reader / QR code reader code for PhoneGap.

jeff's blog

Upload photos from iPhone using PhoneGap, jQuery, and Python

PhoneGap

Setup an HTML button to click.

<a onclick="uploadPhoto(pictureSource.PHOTOLIBRARY);">Photo Upload</a>

the click handler

// A button will call this function

//

function uploadPhoto(source) {
  // Retrieve image file location from specified source
  navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 25, 
    destinationType: destinationType.DATA_URL,
    sourceType: source,
    allowEdit: true });

}

The callback handlers.

function onPhotoDataSuccess(imageData) {
  // upload the captured photo
  $.post(‘http://path/to/ajaxUpload’, {data:imageData}, 
                 function(data){alert(‘success’);});
}
 
 
// Called if something bad happens.
// 
function onFail(mesage) {
  alert(‘Failed because: ‘ + message);
}

the server side handler (cherrypy)

    @cherrypy.expose
    def ajaxUpload(self, **kwargs):
        """
        Accept miscellaneous iphone picture upload.
        """
        import os
        import base64

 
        filename = "test.jpg"
        tmpFileName = os.path.join( "/tmp/", filename )
        tmpFile = open(tmpFileName , ‘wb’)
        data = base64.b64decode(kwargs.get(‘data’))
        tmpFile.write(data)
        tmpFile.close() 

 
        cherrypy.response.headers[‘Content-Type’] = ‘text/javascript’
        return "some type of return message for your AJAX if you like"

Reference Material:

Image Upload using jQuery and Python

PhoneGap Camera API

jeff's blog

O'Reilly book has a great PhoneGap tutorial

The draft of a new O’Reilly book titled iPhone Apps with HTML, CSS, and JavaScript is in the works.

Chapter 7, titled “Going Native” contains a wonderful introduction to PhoneGap. This is an excellent starting point for those of you interested in using PhoneGap or simply understanding what PhoneGap is.

jeff's blog
123next ›last »