blog

GETTING STARTED WITH PHONEGAP, PART 2

The first part of this mini-series showed you what PhoneGap is, and how it can help you develop mobile applications with familiar technologies.

In this second part we’ll look at some more device APIs.

THE GEOLOCATION API

This API is used on a variety of websites to make the site (or in this case the mobile application) location aware.

A simple example that would get you the user’s latitude, longitude and altitude coordinates and show them on the screen would look something like:

document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
    navigator.geolocation.getCurrentPosition(success, error);
}
function success(position) {
    var div = document.getElementById('geolocation');
    div.innerHTML = 'Latitude: ' + position.coords.latitude + '
' + 'Longitude: ' + position.coords.longitude + '
' + 'Altitude: ' + position.coords.altitude;
}
function error() {
    alert('We were unable to retrieve your location');
}

The first part of this code should look very familiar to you, that is the part where we check if the device is ready and if it is, we use the geolocation API to get the device’s current position.

If we succeed in getting the location we just need to place the coordinates we want in a div with the ID of geolocation and as you can see getting this value is pretty intuitive seeing as their names are self-explanatory. Finally if we don’t retrieve the user’s location we show an error.

In the example above I’ve used the getCurrentPosition function and this function only gives us the location when the success function is fired, if we want something that constantly watches the coordinates and updates them on the fly we would use the watchPositionfunction which also takes a third parameter specifying the frequency with which we would like to update the coordinates. Not a lot would need to change in our code:

var watchID = null;
function onDeviceReady() {
watchID = navigator.geolocation.watchPosition(success, error, {       frequency: 5000 });
}

As you can see if you want your coordinates to update every 5 seconds the onDeviceReadyfunction is all that would change.

CAMERA API

One thing we use daily on our smartphones is the camera, and there thousands of apps that take advantage of the functionality.

PhoneGap also gives us a simple way to capture images and use them in our application, the method for doing this is camera.getPicture().

This method takes three parameters, the third one being the options, of which there are many:

  • Quality — The quality of the image ( from 0 to 100 ).
  • destinationType — Choose the format of the return value. It could be DATA_URL and that returns the image as base64 encoded string or FILE_URI and that returns the URI of the image.
  • sourceType — this option sets the source of the picture from three options: cameraphotolibrary or savedphotoalbum.
  • allowEdit — If set to true this option allows the user to edit the image before it’s saved.
  • encodingType — Here you can set whether you want your image to be a PNG or JPG.
  • targetWidth and targetHeight — The width and height of the image if you want it scaled. (Must be used together.)
  • mediaType — If you selected your PictureSourceType as photolibrary, here you can specify the type of media that can be selected, you can choose from : picture, video or all media.
  • saveToPhotoAlbum — If set to true, this option will save the captured image to the photo album after capture.
  • correctOrientation — If set to true, it rotates the image to correct for the orientation of the device during capture.

As you can see with all these options you can do anything you please with the camera.

To use this in a simple manner, taking a picture, allowing the user to edit it and then showing the image up in the screen we would use something like:

var pictureSource;
var destinationType;
document.addEventListener("deviceready",onDeviceReady,false);
function onDeviceReady() {
    pictureSource = navigator.camera.PictureSourceType;
    destinationType = navigator.camera.DestinationType;
}
function getPhoto(imageData) {
    var image = document.getElementById('image');
    image.style.display = 'block';
    image.src = "data:image/jpeg;base64," + imageData;
}
function capturePhoto() {
    navigator.camera.getPicture(getPhoto, error, {allowEdit :true, quality: 90 });
}
function error(errorMessage) {
    alert(errorMessage);
}

and the HTML would be:

As always we wait for PhoneGap to be loaded and when it is, we set the destinationType and sourceType ( by default they are camera and data_url). After this we wait for the user to click the button and when she does the capturePhoto function fires and here we place our options and also the error and success callbacks.

If the function succeeds our getPhoto function fires and we set the img element’s display value to block and then place the image in its src attribute. And since our allowEdit option is true the user will be able to edit the image before it shows up in the app.

CONCLUSION

In this second part we looked at two more API’s we have at our disposal with PhoneGap, the Geolocation API and the Camera API, and how easily these two can be used to our benefit.

Related posts

18 Replies to “GETTING STARTED WITH PHONEGAP, PART 2
  1. 9合1升級保護,提升全面防護!!! 相比之前四合一的疫苗只能預防四種hpv病毒,70的相關癌症。 九合一可以預防9種hpv病毒,可預防高達90以上的子宮頸癌、外陰癌、陰道癌和肛門癌及癌前病變等。 HPV9合1子宮頸癌疫苗 Gardasil 功效 100 預防高危致癌的 HPV 16、18、31、33、45、52 及 58 型號 (可減低 90 患子宮頸癌、、90-95 肛門癌、85-90 外陰癌、80-85 陰道癌及相關癌前病變的風險) 100 減低引致生殖器官濕疣 (俗稱「椰菜花」) 的 HPV 6、11 型的感染 (可減低超過 90 患生殖器官濕疣的風險) 男性方面,能減低患上肛門癌、生殖器官濕疣 (俗稱「椰菜花」) 及傳播 HPV 病毒的風險 注射位置紅腫及痛、輕微發燒和頭痛,至今未有嚴重副作用記錄

    http://cosmedicbook.com/treatments/info/HIFU-無創超聲波4D拉皮

  2. [教學] TOPSHOP 購物流程。英倫女孩的最愛~❤ @ ❤ Bonjour.Amanda 愛曼達購物。旅遊日誌♫ :: 痞客邦 :: [教學] TOPSHOP 購物流程。英倫女孩的最愛~❤ @ ❤ Bonjour.Amanda 愛曼達購物。旅遊日誌♫ :: 痞客邦 ::

    https://cosmetic.wiki/tag/皇牌激光去斑

  3. I really wanted to write down a brief message to be able to appreciate you for those wonderful tricks you are showing at this site. My considerable internet investigation has at the end been paid with useful insight to talk about with my neighbours. I ‘d claim that we site visitors are really blessed to dwell in a decent website with very many brilliant individuals with interesting things. I feel pretty privileged to have discovered the web site and look forward to many more cool moments reading here. Thanks again for all the details.

  4. I needed to write you this tiny note to finally say thanks a lot over again relating to the breathtaking techniques you have discussed here. It was quite extremely generous with people like you to present unhampered what a number of people would’ve supplied as an e book to help with making some profit for themselves, particularly seeing that you might well have tried it if you decided. The secrets also worked to be the great way to recognize that many people have similar desire just like my own to understand somewhat more with respect to this problem. I know there are a lot more pleasant situations up front for folks who looked at your site.

  5. I just wanted to develop a brief word so as to express gratitude to you for all of the awesome tricks you are writing at this website. My time-consuming internet investigation has at the end of the day been paid with reasonable knowledge to write about with my partners. I would declare that most of us website visitors are really fortunate to live in a good website with so many perfect individuals with very beneficial principles. I feel truly lucky to have encountered your web site and look forward to tons of more fabulous times reading here. Thanks once more for all the details.

  6. Thank you for all of your efforts on this web page. My mother take interest in participating in internet research and it’s simple to grasp why. A number of us know all concerning the lively form you produce vital guidance on the blog and as well cause participation from other people on that area plus my princess is now learning so much. Have fun with the rest of the year. You’re doing a useful job.

  7. Thank you for all your valuable work on this blog. My daughter take interest in doing investigation and it’s simple to grasp why. A lot of people hear all regarding the compelling method you make priceless steps through the website and as well invigorate contribution from some others on this concept while our simple princess is without question learning a lot of things. Enjoy the rest of the year. Your performing a fantastic job.

  8. I needed to write you a tiny observation just to give thanks once again considering the striking views you’ve contributed on this page. It was so extremely open-handed with you to supply unreservedly precisely what a few people would have made available for an electronic book in order to make some profit on their own, precisely considering the fact that you could have done it if you desired. Those tactics also served as a easy way to realize that some people have the same passion the same as my very own to know significantly more pertaining to this issue. I am certain there are a lot more enjoyable sessions ahead for people who browse through your website.

  9. I have to express my love for your generosity in support of people who really want guidance on this important concern. Your real dedication to passing the message all-around has been wonderfully practical and have made men and women just like me to reach their dreams. Your entire insightful instruction indicates a lot to me and even more to my fellow workers. Warm regards; from each one of us.

  10. Thanks for all of your labor on this web site. My mother enjoys doing investigation and it’s really easy to understand why. A lot of people notice all about the powerful means you give reliable guidelines by means of this web site and as well recommend participation from people about this article plus our own daughter has always been understanding a lot. Take advantage of the remaining portion of the year. You’re the one performing a pretty cool job.

  11. I have to express some thanks to you just for bailing me out of this issue. Right after researching through the online world and finding things which were not productive, I thought my life was done. Living without the presence of strategies to the problems you’ve sorted out all through your article is a serious case, and the kind that could have in a wrong way affected my career if I had not noticed your web blog. Your own personal expertise and kindness in playing with the whole lot was vital. I am not sure what I would’ve done if I had not come across such a step like this. I can also at this time relish my future. Thank you so much for your high quality and amazing guide. I won’t think twice to suggest your blog post to any person who needs to have guidelines about this issue.

  12. I and also my buddies were actually checking out the nice helpful tips found on the blog and instantly came up with a horrible suspicion I had not expressed respect to the website owner for them. These young boys were for that reason thrilled to see them and have really been taking advantage of those things. Thanks for simply being very considerate and also for going for this kind of magnificent things most people are really desirous to be aware of. My honest apologies for not expressing appreciation to you earlier.

  13. I enjoy you because of your own efforts on this site. Gloria enjoys going through research and it’s really easy to understand why. Most of us learn all concerning the compelling way you offer informative tactics via your web blog and as well as strongly encourage contribution from others on the area and our favorite daughter has always been becoming educated a whole lot. Take advantage of the remaining portion of the new year. Your carrying out a stunning job.

Leave a Reply