How to make dynamic apps using Phonegap?

  • 2
  • Problem
  • Updated 6 months ago
Hi there, i am a student creating an app. But having some problems, i still cudn't found that what are the plugins and how we can use i used many from list but all they are not responding. Phonegap Team please help me i just want to create an app with camera(to capture images) and Call(to a particular number) how i can use them? I am using build.phonegap.com using dreamweaver. Thanks in advance. I also attached the screen shot of my app
Photo of Saba Rais

Saba Rais

  • 724 Posts
  • 3 Reply Likes

Posted 4 years ago

  • 2
Photo of Saba Rais

Saba Rais

  • 724 Posts
  • 3 Reply Likes
Petra, I am doing this from long time, but the button not launching Photo Library can u please find errors?Please Petra
HTML
<div id=launchCamera onclick="getCamera()" class="button button-pill button-action button-large" style="margin:1em;">Capture Image</div>
<div id=launchCamera onclick="getPhoto()" class="button button-pill button-action button-large" style="margin:1em;">Choose From Gallery</div>

camera.js

pictureSource=navigator.camera.PictureSourceType;
destinationType=navigator.camera.DestinationType;
var cameraOptions = {
quality: 50,
destinationType: Camera.DestinationType.FILE_URI
};

function getCamera() {
navigator.camera.getPicture(onSuccessCamera, onFailCamera, cameraOptions);
}
function getPhoto() {
// Retrieve image file location from specified source
navigator.camera.getPicture(onSuccessCamera, onFailCamera, cameraOptions,{sourceType: pictureSource.PHOTOLIBRARY});
}
function onSuccessCamera(imageURI) {
var image = document.getElementById('myImage');
// place image in view
image.src = imageURI;
// reuse object
image = document.getElementById('imgName');
// write the text next to the image
image.innerHTML = imageURI;
}

function onFailCamera(message) {
alert('Failed because: ' + message);
}


plugin used:<plugin name="cordova-plugin-camera"/>
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
Two errors:
1. You can't have two Divs with the same id
2. In getPhoto() you have 4 parameters for getPicture. Only three are allowed
Photo of Saba Rais

Saba Rais

  • 724 Posts
  • 3 Reply Likes

pictureSource=navigator.camera.PictureSourceType;
destinationType=navigator.camera.DestinationType;
var cameraOptions = {
quality: 50,
destinationType: Camera.DestinationType.FILE_URI
};
var photogallery={
sourceType: pictureSource.PHOTOLIBRARY
};

function getCamera() {
navigator.camera.getPicture(onSuccessCamera, onFailCamera, cameraOptions);
}
function getPhoto() {
// Retrieve image file location from specified source
navigator.camera.getPicture(onSuccessCamera, onFailCamera, photogallery);
}
function onSuccessCamera(imageURI) {
var image = document.getElementById('myImage');
// place image in view
image.src = imageURI;
// reuse object
image = document.getElementById('imgName');
// write the text next to the image
image.innerHTML = imageURI;
}

function onFailCamera(message) {
alert('Failed because: ' + message);
}

It's also not working now, when i am clicking Choose from Gallery button, its working same like Add Image button , I also removed the same Id from "Choose From Gallery" button,
Photo of Saba Rais

Saba Rais

  • 724 Posts
  • 3 Reply Likes
I found the mistake Petra, Now it's working fine, Thank God.
Now working on geolocation, thank you
Photo of Saba Rais

Saba Rais

  • 724 Posts
  • 3 Reply Likes
Petra Please can you explain this your line to me?

include a small Google map picture with a pin at the current location. Add a check box, to be checked if the users wants to post that location.
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
Instead of your button "Find on Google Map", display a static image with marker of the current position. Create it with http://staticmapmaker.com/google/

Add a checkbox with caption "...or use current position".

If user checks this, pass current location to server, otherwise location description is required.
Photo of Saba Rais

Saba Rais

  • 724 Posts
  • 3 Reply Likes
Thank You Petra, I really really can't forget your favors on me :) May GOD Bless You always and Your relatives, aameen
Now working on it,
Photo of Saba Rais

Saba Rais

  • 724 Posts
  • 3 Reply Likes
Respected Petra,
Once, check it please, Like this you want?
you said:If user checks this, pass current location to server, otherwise location description is required.
It means we are giving three options to user for location e.g. (locationtxt, choose from google map by clicking on static image and by Choosing current position by checkbox?
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
No, just two options. The static map shows the current position (the app should place the pin)


Be aware that you can only display the map and offer that option if the device allows for location service.

And...why would you want a Reset button?
(Edited)
Photo of Saba Rais

Saba Rais

  • 724 Posts
  • 3 Reply Likes
1.Got, it, It will fetch the user's current location on the static image.
2. I used Reset button, to reset form, if a user want to clear all fields, but if not necessary i will remove it. Shouldn't we use it(the reset button)?
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
Have you, personally, ever pressed a Reset button in a web form? Or did you simply dismiss that page if you reconsidered?
Photo of Saba Rais

Saba Rais

  • 724 Posts
  • 3 Reply Likes
I removed "Reset" button,
https://www.nngroup.com/articles/rese...
Thank You!
Photo of Saba Rais

Saba Rais

  • 724 Posts
  • 3 Reply Likes
Petra, how we can add current location marker in Static Map image?

or

Can I use iframe instead of Statid map image?
Photo of Saba Rais

Saba Rais

  • 724 Posts
  • 3 Reply Likes
1.Dear Petra, Now I added marker on it, but in mobile after build, when i opened App, It's not showing static image, following are the images of PC and mobile.

2.Secondly how it will capture current location Automatically? It's just showing a particular location/Address. Not changing.
Please Petra give me hint and suggestions. I know that you are very busy person, But if have a little time, then reply me, thank you.
Photo of Saba Rais

Saba Rais

  • 724 Posts
  • 3 Reply Likes
Hey Petra,
How we can use current position using static map?
If this is static, then how it can change marker?
Instead of it I used this script

<section id="wrapper">
Click the allow button to let the browser find your location.

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<article>

</article>
<script>
function success(position) {
var mapcanvas = document.createElement('div');
mapcanvas.id = 'mapcontainer';
mapcanvas.style.height = '400px';
mapcanvas.style.width = '600px';

document.querySelector('article').appendChild(mapcanvas);

var coords = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);

var options = {
zoom: 15,
center: coords,
mapTypeControl: false,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.SMALL
},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("mapcontainer"), options);

var marker = new google.maps.Marker({
position: coords,
map: map,
title:"You are here!"
});
}

if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(success);
} else {
error('Geo Location is not supported');
}

</script>
</section>

On the PC, its going well, but on mobile I can't see it, Am I missing a required plugin for that?
let's have a look on PC:
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
So, where does your script fail? Have you attempted to debug it?
Photo of Saba Rais

Saba Rais

  • 724 Posts
  • 3 Reply Likes
It's successful on computer, there is no any bug or error, but not loading the map on mobile screen, Petra,
Have u seen the code above i posted yesterday?
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
Yes, I have seen that script.
But do you understand everything you coded there?
Photo of Saba Rais

Saba Rais

  • 724 Posts
  • 3 Reply Likes
GOOD MORNING PETRA,
yes slightly,
1. It's for only few browsers, and only for PC.
admitted mistake that I am doing too hurry,
Just wait petra, now I got it,, what i can do , little wait i'll share my screen shot soon.
Photo of Saba Rais

Saba Rais

  • 724 Posts
  • 3 Reply Likes
Respected Petra,
Now I used proper, coding for geolocation API, but having little problem here, It's not showing map image in mobile, and showing in PC.
Snapshot taken on phone

Petra, why picture is not loading in mobile?due to low network?
Q1.Should I use only watch current location in the static map image?
Q2,The button "Get Current Location", should i remove it, ? because I am using checkbox to use "Current Location"?
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
0. In which versions of Android doesn't it display? In which does it display?
I don't think it has anything to do with network. Perhaps some webview components don't know the html section and article elements.

1. I don't understand this question. Can you rephrase?

2.Yes.
Photo of Saba Rais

Saba Rais

  • 724 Posts
  • 3 Reply Likes
I want to ask that what is the difference between "Watch Current Location" and "Get Current Location", both are showing same location with lat and lon coords.?
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
That's explained in the docs. WatchPosition is a continuous process
Photo of Saba Rais

Saba Rais

  • 724 Posts
  • 3 Reply Likes
It means untill we will not stop it, It will continue watching location........
OK.
Then Petra, what i do , which function of *.js file I use to show current location on static map?
:(
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
1. You should use a static map, because anything else is currently over your head. Just use a single img tag as generated by the staticmaps-site I linked before.

2. When preparing the form for display, use getCurrentPosition, check for geolocation services enabled, insert the lat/lon into the static map url for both center-of-map and marker, and you're done.
Photo of Saba Rais

Saba Rais

  • 724 Posts
  • 3 Reply Likes
1. As u said I used static map image, as shown below.

2. I couldn't understood. Sorry How I will insert lat/lon coords in static map?
Photo of Saba Rais

Saba Rais

  • 724 Posts
  • 3 Reply Likes
Petra,
Only few steps far i am to complete my app.
-Should I use lat and lon values in static map URL instead of Address URL?
-and if yes, so which lat and lon values I will insert? or variable?
Pleeeeeeeeeeeeeeeeeeeeeeease