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:

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!!!