Step 1 : Open Visual Studio 2010
![pg 2.jpg]()
Step 2 : Open File menu -select new - Choose Project then.
![pg 3.jpg]()
Step 3 : Select the new phone application and rename it according to your requirement.
![new.jpg]()
Step 4 : After opening up the source code, replace the code with the given code for the index.html file:
![out 1.jpg]()
Scripting for getting User interface
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
<title>PhoneGap WP7</title>
<link rel="stylesheet" href="master.css" type="text/css" media="screen" title="no title" charset="utf-8"/>
<script type="text/javascript" charset="utf-8" src="phonegap-1.3.0.js"></script>
<script type="text/javascript">
// provide our own console if it does not exist ,huge dev aid'
if (typeof window.console == "Undefined") {
window.console = { log: function (str) { window.external.Notify(str); } };
}
// output any errors to console log ,created above'
window.onerror = function (e) {
console.log("window.onError::" + JSON.stringify(e));
};
console.log("Installed console !");
</script>
<script type="text/javascript" charset="uft-8" src="photo.js"></script>
</head>
<body>
<h1> Photo Location</h1>
<div>
<input id="loadImageButton" type="button" value="Select Photo" onclick="selectPhoto(false);" />
<input id="TakePictureButton" type="button" value="Take Photo" onclick="selectPhoto(true);" />
</div>
<div>
<img id="imageControl" alt="" />
</div>
<div>
<span>Current Location : </span>
<ul>
<li> Latitude : <span id="latSpan"></span></li>
<li> Longitude:<span id="lonSpan"></span></li>
</ul>
</div>
</body>
</html>
Designing
![out.jpg]()
Step 5 : Code for the Master.css file.
body
{
background:#000 none repeat scroll 0 0;
color:#ccc;
font-family:Helvetica, Verdana, Geneva, sans-serif;
margin:0;
border-top:1px solid #393939;
}
h1
{
text-align:center;
font-size:18px;
color:#FFC312; /* Mango me! */
}
input[tpye=button]
{
background-color:#000;
border:4px Solid #fff;
padding:4px;
color:#fff;
}
div input[type=button]:nth-child(n+2)
{
margin-left:6px;
}
#imageControl
{
margin-top:80px;
margin-left:10px;
width:300px;
height:300px;
}
Step 6 : In this section we use JavaScript for various functionality for the PhoneGapPhoto application. To create a new main.js file, go to www then right-click - add new items then select Text file and rename to main.js.
![output0.jpg]()
![out 2.jpg]()
Scripting for getting info using JavaScript
Put the given JavaScript in the photo.js file.
/* js file the operations */
var pictureSource;
var destinationType;
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
pictureSource = navigator.camera.PictureSourceType;
destinationType = navigator.camera.DestinationType;
getCurrentLocation();
}
function selectPhoto(useCamera) {
if (useCamera) { // take picture
navigator.camera.getPicture(photoLoaded, onError, { allowEdit: true, destinationType: destinationType.FILE_URI });
}
else {
// select from library
navigator.camera.getPicture(photoLoaded, onError, { allowEdit: true, sourceType: pictureSource.PHOTOLIBRARY, destinationType: destinationType.FILE_URI });
}
}
function photoLoaded(imageData) {
var image = document.getElementById("imageControl");
image.src = imageData;
}
function onError(message) {
navigator.notification.alert(message, "", "Error");
}
function getCurrentLocation() {
navigator.geolocation.getCurrentPosition(locationSuccess, onError);
}
function locationSuccess(position) {
var lat = document.getElementById("latSpan");
var lon = document.getElementById("lonSpan");
lat.innerText = position.coords.latitude;
lon.innerText = position.coords.longitude;
}
Step 7 : Output Pres F5
![ou.jpg]()
Additional Tools window:
![o.jpg]()
Getting latitude and longitude for the New Delhi location.
![output 2.jpg]()
Getting latitude and longitude for the Palwal location.
![output 1.jpg]()
Getting latitude and longitude for the Aligarh location.
![output 3.jpg]()
Getting latitude and longitude for the Varanasi location.
![output 4.jpg]()