Android TutorialsImplementing Accelerometer with Phonegap

Implementing Accelerometer with Phonegap

In this session today we will create an app using accelerometer which will respond to X ,Y and Z axis when the mobile phone is tilted in the respective angles.

  • To work on accelerometer follow the steps given below :

  1. First of all download and install the Xampp server in your machine or if it is already installed then go to Xampp -> htdocs folder and in htdocs folder create a new folder say Accelerometer .
  2. In Accelerometer folder create new file say index.html .
  3. Now open this index.html file with Notepad++ or any other text editor and write the following code :
  4. <!DOCTYPE html>
    <html>
    	<head>
    	<title>PhoneGap application</title>
    	<script type="text/javascript" charset="utf-8" src="phonegap.js"> </script>
    	<script type="text/javascript" >
    		var WatchID = null;
    		<!-- wait for the phonegap to load >
    		document.addEventListener("deviceready",onDeviceReady,false);
    		<!-- Phonegap is ready>
    		function onDeviceReady()
            {
    		startWatch();
    		} 
    		function startWatch(){
    				var options = {frequency: 3000};
    				watchID = navigator.accelerometer.watchAcceleration(onSuccess,onError,options);
    		}
    		
    		function stopWatch(){
    			if(watchID){
    				navigator.accelerometer.clearWatch(watchID);
    				watchID = null;
    			}
    		}
    function startWatch( ){
    	var options = {frequency: 3000};
         watchID = navigator.accelerometer.watchAcceleration(onSuccess,onError,options);
    <!  - -  To get the acceleration along X , Y and Z axis >
    	}
    	function stopWatch(){
    		if(watchID){      <!- - If watchID is not null then clear watchID >
    			navigator.accelerometer.clearWatch(watchID);
    			watchID = null;
    		}
    		}
    		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/>';
    		      }
                                     function onError()
    		    {           <!—message to be displayed when error is  occurred>
                          alert('There was a problem');
    		     }
    		    </script>
    		    </head>
              <body>
    		<div id = "accelerometer">waiting for accelerometer...</div>
              </body>
    </html>
    

  5. Here is the screen shot of Notepad++ window :
  6. 1
    2

  7. Now save your file and start your apache and MySQL modules from XAMPP Control Pannel.
  8. 0.1

  9. Now lets execute our app on ripple emulator .
  10. Go to emulate.phonegap.com then you will get the following window:
  11. 0.2

  12. Click on the Get Ripple Emulator button then you will be navigated to the following window :
  13. 0.3

  14. Now click on the FREE button as shown by the red arrow in the above image and you will get the following window :
  15. 0.4

  16. Now click on the ADD button and the Ripple Emulator will get added to the browser :
  17. 0.5

  18. Now open up the browser and enter the url as localhost/Accelerometer(i.e your folder name in htdocs) and enable the ripple emulator as shown in the image below :
  19. 3

  20. After clicking the enable button you will get the ripple emulator as shown below: where you have to click on the dropdown button on the left hand side as shown by the red arrow,similarly drag and rotate the mobile icon indicated by the red arrow to get the output for X , Y , Z axis:
  21. 4

  22. So as you drag and rotate the mobile icon which is located at the left handside you will get the readings at the X , Y , Z axis as shown in the image below :
  23. 5

  24. Thus we have successfully implemented accelerometer app with phonegap .

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Exclusive content

- Advertisement -

Latest article

21,501FansLike
4,106FollowersFollow
106,000SubscribersSubscribe

More article

- Advertisement -