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:

Test HTML5 compatibility.

Found this great site to check scores for your browser’s HTML5 compatibility. I use HTML5 extensively these days for mobile apps as well as everyday web programming and layouts. All scores are out of a total of 500. Check out http://www.html5test.com

To keep cross browser compatibility is a great challenge though. Worse offender being Microsoft’s IE. I think it is downright irresponsible that the most used browser in the world comes out with the latest version that scores just 325. Relatively comparing, even my LG TV browser scores 290! It is a disgrace for IE 10!

This also shows why I am always rooting for Google Chrome as the best browser by far on almost any platform. It even beat Apple’s safari and iOS by a fair margin. Down below are the different scores I got for different browsers I have to use everyday to keep cross-browser compatibility issues at bay.

Android
Dolphin HD on Android: 278
Firefox Mobile 14.0.1: 320
Opera Mobile 12.0 : 380
Chrome for Android 18.0: 380

Windows
IE 8: 42
IE 9: 143
IE 10: 325
Firefox 12.0: 339
Chrome 20.0: 427

Apple
iOS 6.0: 369
Safari 6.0: 384

 

Finding GeoLocation using HTML5

HTML5 is really fun. Its like combining old school coding with ease of HTML and technology of the future.

Today I tried out geolocation services within HTML5. Turned out it is as easy as anything!

First you need to check if your browser supports that aspect of HTML5. As always….. i prefer Chrome over IE 😛

Here is the required Javascript:

window.onload = getMyLocation;

function getMyLocation() {

if (navigator.geolocation) {

navigator.geolocation.getCurrentPosition(showLocation);

}

else {

alert(“Sorry, no geolocation support”);

}

}

The following JS will actually determine your location. I am assuming you have a div in HTML named “mylocation”. That is where the coordinates will appear:

 

function showLocation(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;

var div = document.getElementById(“mylocation”);
div.innerHTML = “Latitude: ” + latitude + “, Longitude: ” + longitude;
div.innerHTML += ” (with ” + position.coords.accuracy + ” meters accuracy)”;
}

 

And that is about it….. this is the very basic information though but a good starting point. You can do a lot more than this…. calculate distance, convert distance units, map it on google maps etc.

Good luck integrating!!!