I'm trying to work out the watch position with android but its not working!!
<script type="text/javascript" charset="utf-8" src="phonegap.js"></script>
<script type="text/javascript" charset="utf-8">
// Wait for PhoneGap to load
//
document.addEventListener("deviceready", onDeviceReady, false);
// PhoneGap is ready
//
function onDeviceReady()
{
watchID = navigator.geolocation.watchPosition(onSuccess, onError,{enableHighAccuracy: true,frequency: 3000 });
}
// onSuccess Geolocation
//
function onSuccess(position)
{
alert("Successful!!");
}
// onError Callback receives a PositionError object
//
function onError(error) {
alert('code: ' + error.code + '\n' +
'message: ' + error.message + '\n');
}
</script>
Check the path to phonegap.js. When I changed your snippet to match the phonegap-1.1.0.js in my assets/www directory, the Successful!! alert popped up for me.
Related
I have created a phonegap app and I added Android platform to it. But unfortunately, deviceready event is not getting fired. It works fine on ripple emulator but it is not working on chrome (desktop) and on the android phone as well.
If I run it on chrome (desktop) or my Android L phone, I get the error gap:
["Device","getDeviceInfo","Device1231860141"]
and the browser as well as NetBeans hangs.
I have the cordova.js file in my www folder. I tried removing it, and the error goes away, but deviceready is still not fired.
The following is my code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=320, user-scalable=no" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="css/index.css" />
<link rel="stylesheet" href="js/libs/jquery.mobile-1.4.5/jquery.mobile-1.4.5.min.css"/>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/libs/jquery/jquery.js"></script>
<script type="text/javascript">
function init(){
document.addEventListener("deviceready", onDeviceReady, true);
}
function onDeviceReady() {
startWatch();
}
// Start watching the acceleration
//
function startWatch() {
// Update acceleration every 3 seconds
var options = { frequency: 3000 };
watchID = navigator.accelerometer.watchAcceleration(onSuccess, onError, options);
}
// Stop watching the acceleration
//
function stopWatch() {
if (watchID) {
navigator.accelerometer.clearWatch(watchID);
watchID = null;
}
}
// onSuccess: Get a snapshot of the current acceleration
//
function onSuccess(acceleration) {
var element = document.getElementById('accelerometer');
element.innerHTML = 'Acceleration X: ' + acceleration.x + '<br />' +
'Acceleration Y: ' + acceleration.y + '<br />' +
'Acceleration Z: ' + acceleration.z + '<br />' +
'Timestamp: ' + acceleration.timestamp + '<br />';
}
// onError: Failed to get the acceleration
//
function onError() {
alert('onError!');
}
</script>
</head>
<body onload="init()">
</body>
</html>
deviceready is a cordova event it will not work in browser.
...
<script type="text/javascript">
document.addEventListener("deviceready", onDeviceReady, true);
function onDeviceReady() {
startWatch();
}
...
</script>
</head>
<body onload="onDeviceReady()">
</body>
</html>
Let me first start by saying that I have seen a lot of these questions, and many of them just says it <script src="cordova-x-x-x.js"></script> and some says not include the cordova.js file into Phonegap Build.
So I have been testing and fixing my code for some time now, and still getting the error from onError function. I have also copied and pasted the code from phonegap docs.
So here's the clean code from the url:
<!DOCTYPE html>
<html>
<head>
<title>Acceleration Example</title>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8">
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
navigator.accelerometer.getCurrentAcceleration(onSuccess, onError);
}
function onSuccess(acceleration) {
alert('Acceleration X: ' + acceleration.x + '\n' +
'Acceleration Y: ' + acceleration.y + '\n' +
'Acceleration Z: ' + acceleration.z + '\n' +
'Timestamp: ' + acceleration.timestamp + '\n');
}
function onError() {
alert('onError!');
}
</script>
</head>
<body>
</body>
</html>
And in my config.xml file I have added:
<gap:plugin name="org.apache.cordova.device-motion" />
<gap:plugin name="org.apache.cordova.device-orientation" />
After testing and asking the Phonegap Build crew, they showed me a code with all the functions. And this is the best way to get the accelerometer to work with Phonegap Build
<!DOCTYPE html>
<html>
<head>
<title>Device Ready Example</title>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8">
function onLoad() {
document.addEventListener("deviceready", onDeviceReady, false);
}
function onDeviceReady() {
alert("Device is Ready");
alert(device.available);
}
function getAcceleration(){
navigator.accelerometer.getCurrentAcceleration(onAccelSuccess, onError);
}
function onAccelSuccess(acceleration) {
var element = document.getElementById('accelerometer');
element.innerHTML = 'Acceleration X: ' + acceleration.x + '<br />' +
'Acceleration Y: ' + acceleration.y + '<br />' +
'Acceleration Z: ' + acceleration.z + '<br />' +
'Timestamp: ' + acceleration.timestamp + '<br />';
}
function onError() {
alert('onError!');
}
function startWatch() {
// Update acceleration every 1 seconds
var options = { frequency: 1000 };
watchID = navigator.accelerometer.watchAcceleration(onAccelSuccess, onError, options);
}
function stopWatch() {
if (watchID) {
navigator.accelerometer.clearWatch(watchID);
watchID = null;
}
}
</script>
</head>
<body onload="onLoad()">
<p>
<button onclick="getAcceleration()">Get Acceleration</button>
</p>
<p>
<button onclick="startWatch()">Watch Acceleration</button>
</p>
<p>
<button onclick="stopWatch()">Stop Watching Acceleration</button>
</p>
<div id="accelerometer">Waiting for accelerometer...</div>
</body>
</html>
I would say you try a total clean reinstall/rebuild with cordova. First off all you have to install cordova for that. If you want to know, how to get started with that you should have a look into the cordova documentation: Cordova CLI-Docs
After you installed cordova, you enter the Terminal and type in the following commands:
cd ~/desktop
cordova create test com.example.test test
cd test
cordova platform add android
cordova plugin add org.apache.cordova.device-motion
cordova build
Open the builded project in Eclipse and add
<!DOCTYPE html>
<html>
<head>
<title>Acceleration Example</title>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8">
// Wait for device API libraries to load
//
document.addEventListener("deviceready", onDeviceReady, false);
// device APIs are available
//
function onDeviceReady() {
navigator.accelerometer.getCurrentAcceleration(onSuccess, onError);
}
// onSuccess: Get a snapshot of the current acceleration
//
function onSuccess(acceleration) {
alert('Acceleration X: ' + acceleration.x + '\n' +
'Acceleration Y: ' + acceleration.y + '\n' +
'Acceleration Z: ' + acceleration.z + '\n' +
'Timestamp: ' + acceleration.timestamp + '\n');
}
// onError: Failed to get the acceleration
//
function onError() {
alert('onError!');
}
</script>
</head>
<body>
<h1>Example</h1>
<p>getCurrentAcceleration</p>
</body>
</html>
Save all and deploy the project to your device. And let me know, if this worked or not.
Can't comment, so answering instead.
In reference to above comment re "Phonegap and Cordova are similar (Same codebase)"
From http://docs.build.phonegap.com/en_US/3.1.0/introduction_getting_started.md.html:
To do so, simply ensure that the following reference is made in your
index.html
<script src="phonegap.js">
Note that this is interchangeable with
<script src="cordova.js">
I am using Cordova 2.0.0 and i am testing on Android 2.2.
So after 2 threads and alot of searching i am finally able get get my geolocation and have it shown in google maps. Now every time i open the app it will get my geolocation and show it in google maps with a marker. Now i want the program to store the data. This is the first time i use html5,JS. When i made a native app i just used the SQLite database.
How would i go on about storing the data?
This is what i have so far, any help tutorials, samples, help and advice would be greatly appreciated.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta name="viewport" content="width=device-width; height=device-height; user-scalable=no" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Beer Me</title>
<link rel="stylesheet" href="/master.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" charset="utf-8" src="cordova-2.0.0.js"></script>
<script type="text/javascript">
function onLoad() {
document.addEventListener("deviceready", onDeviceReady, false);
}
function onDeviceReady() {
navigator.geolocation.getCurrentPosition(onSuccess, onError,{'enableHighAccuracy':true,'timeout':10000});
}
//GEOLOCATION
var onSuccess = function(position) {
alert('Latitude: ' + position.coords.latitude + '\n' +
'Longitude: ' + position.coords.longitude + '\n');
var myLat = position.coords.latitude;
var myLong = position.coords.longitude;
//MAP
var mapOptions = {
center: new google.maps.LatLng(myLat, myLong),
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
};
// onError Callback receives a PositionError object
//
function onError(error) {
alert('code: ' + error.code + '\n' +
'message: ' + error.message + '\n');
}
</script>
</head>
<body onload="onLoad()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
You can use a simple SQLite database as usual: http://docs.phonegap.com/en/2.0.0/cordova_storage_storage.md.html#Storage
I'm trying to get my location coordinates with HTML5 but it gives me error every time .
this is the code I have write to phone gap android project
I used the same code on the documentation of the phone gap geolocation .
and add the call for the function device-ready () to know if this code is running
and it gives me
error 2 : messege 2 : the last location provider was disabled
this is the code that I'm using to get my location on the android device !
<!DOCTYPE html>
<html>
<head>
<title>Device Properties Example</title>
<script type="text/javascript" charset="utf-8" src="phonegap-1.4.1.js"></script>
<script type="text/javascript" charset="utf-8">
// Wait for PhoneGap to load
//
document.addEventListener("deviceready", onDeviceReady, false);
var watchID = null;
// PhoneGap is ready
//
function onDeviceReady() {
// Update every 3 seconds
var options = { frequency: 3000 };
watchID = navigator.geolocation.watchPosition(onSuccess, onError, options);
}
// onSuccess Geolocation
//
function onSuccess(position) {
var element = document.getElementById('geolocation');
element.innerHTML = 'Latitude: ' + position.coords.latitude + '<br />' +
'Longitude: ' + position.coords.longitude + '<br />' +
'<hr />' + element.innerHTML;
//alert("the lang is : "+position.coords.latitude);
document.write("the lang is : "+position.coords.latitude);
}
// clear the watch that was started earlier
//
function clearWatch() {
if (watchID != null) {
navigator.geolocation.clearWatch(watchID);
watchID = null;
}
}
// onError Callback receives a PositionError object
//
function onError(error) {
alert('code: ' + error.code + '\n' +
'message: ' + error.message + '\n');
}
</script>
</head>
<body>
<p id="geolocation">Watching geolocation...</p><br>
<button onclick="onDeviceReady();">onDeviceReady()</button> <br>
<button onclick="clearWatch();">Clear Watch</button> <br>
index 2
</body>
</html>
I got this tutorial from here http://docs.phonegap.com/en/1.7.0/cordova_geolocation_geolocation.md.html#Geolocation !
Hope to suggest what shall I do !!
Try setting the option enableHighAccuracy to true
this is my code:
function onDeviceReady() {
console.log("Device Ready");
startWatch();
};
function startWatch() {
// Update acceleration every 5 seconds
var options = { frequency: 5000 };
watchID = navigator.accelerometer.watchAcceleration(onSuccess, onError, options);
};
function onSuccess(acceleration){
console.log('Acceleration X: ' + acceleration.x +
'Acceleration Y: ' + acceleration.y +
'Acceleration Z: ' + acceleration.z +
'Timestamp: ' + acceleration.timestamp);
};
function onError(){
console.log("Acceleration Error occured");
};
I test it on 2 Android Phones (Samsung Galaxy Nexus GT-I9250, Android 4.0 and Huawei Ideos X3, Android 2.3.3), from my console outputs I know both only call the Error Callback, but why?
I can't find the cause for this on google, so please help if you have an Idea.
You might have a timing issue.
You should try the following which runs successfully on my HTC Evo or post your whole app:
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=320; user-scalable=no" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>PhoneGap</title>
<script type="text/javascript" charset="utf-8" src="phonegap-1.3.0.js"></script>
<script type="text/javascript" charset="utf-8">
function onDeviceReady() {
console.log("Device Ready");
startWatch();
};
function startWatch() {
// Update acceleration every 5 seconds
var options = { frequency: 5000 };
watchID = navigator.accelerometer.watchAcceleration(onSuccess, accelerometerError, options);
};
function onSuccess(acceleration){
alert('Acceleration X: ' + acceleration.x +
'Acceleration Y: ' + acceleration.y +
'Acceleration Z: ' + acceleration.z +
'Timestamp: ' + acceleration.timestamp);
};
function accelerometerError(){
alert("Acceleration Error occured");
};
function init() {
document.addEventListener("deviceready", onDeviceReady, true);
}
</script>
</head>
<body onload="init();" id="stage" class="theme">
</body>
</html>
Could it be because you are passing in a reference that does not exist to your watchAccelerometer() call?
You are passing in onError, but the name of your handler is accelerometerError
Here is a thought. I have not tested this (my Mobile Dev machine is at home), but it occurs to me that you may need to tell Android devices that you want to use the accelerometer in your Android Manifest.
<uses-feature android:name="android.hardware.sensor.accelerometer" android:required="true" />
Do you have that setting in your manifest XML file?