Umer Pasha Blogs

www.umerpasha.com

Simplest example of Phonegap testing bar code, camera picture, camera video and geo location

When I started using phonegap, It took a while even with the available documentation to get the app going. I made this example project to trim it to bare minimum but still perform the most sought after functions on any mobile device.

For build purposes i am using build.phonegap.com. Create a test account that allows for one app.

You will probably also need a github account as it makes it very simple to pull updated code from repository when making a build on build.phonegap.com.

I am testing this on an android device as it is just easy to update and download app for testing using android. For Apple/iOS, you will need to have a key.

The functionality has been tested on latest versions of Android, iOS and WinPhone.

To understand this tutorial, you should already know:
Some knoweldge of HTML and HTML5
Working knowledge of Javascript
Some idea what phonegap really is

It has examples of camera function, video recording and geo location.

The only files you have to look into are in www folder.

Config.xml has all the plug-ins defined:

Example: <gap:plugin name=”org.apache.cordova.core.geolocation” version=”0.3.10″ />

Index.html has all the UI and buttons to invoke different functions along with DIVs to show results

Js/app.js has all the javascript code.

I wait for device to be ready to listen to events:

Example: document.addEventListener(“deviceready”, onDeviceReady, false);

If an event is fired (touch end of a button), separate functions are called:

Example: document.querySelector(“#startGLoc”).addEventListener(“touchend”, startGLoc, false);

On event completion, result is updated:

Example: GLocDiv = document.querySelector(“#GLoc”);
Code location is on GitHUb: https://github.com/genrex/PhonegapCamera

Build can be accessed from this QR code:

Advertisements
1 Comment »

Simplest Phonegap Barcode reader example

Created a small app last night to read barcodes.

 

Nothing fancy. Just a button to invoke the barcode reader camera and then returns the barcode number along with the barcode standard.

 

You can get it here:

 UmerBarcodeReader_QR

 

Checked on iPhone 5S and Android Kit Kat.

 

I am only using an html file and a js file along with the config.xml.

 

You can get the code from my github repository. You can remove the resource files from config.xml. I just got it from the base template.

 https://github.com/genrex/PhonegapBarcode

 

Instructions:

 

  1. To add the plugin , in Config.xml you need to have:

<gap:plugin name=”com.phonegap.plugins.barcodescanner”/>

 

  1. Write the following javascript to listen for an event (button click) and then start the scanner

 

</p><p>var resultDiv;</p><p> </p><p>document.addEventListener("deviceready", init, false);</p><p>function init() {</p><p>               
 document.querySelector("#startScan").addEventListener("touchend", startScan, false);</p><p>               
 resultDiv = document.querySelector("#results");</p><p>}</p><p> </p><p>function startScan() {</p><p> </p><p>               
 cordova.plugins.barcodeScanner.scan(</p><p>                               function(result) {</p><p>                                               
 var s = "Result: " + result.text + "&lt;br/&gt;" +</p><p>                                               "Format: " + result.format + "&lt;br/&gt;" +</p><p>                                               "Cancelled: " + result.cancelled;</p><p>                                               
 resultDiv.innerHTML = s;</p><p>                               
 },</p><p>                               function(error) {</p><p>                                               
 alert("Scanning failed: " + error);</p><p>                               
 }</p><p>               );</p><p> </p><p>}</p><p> </p><p>

 

 

 

 

 

7 Comments »