PhoneGap device plugins are one of the important plugin sets which can provide the important information about your device.
These plugins have the capability to use the features of device hardware as well as software.
PhoneGap device plugin uses the device hardware to make a discovery about the device like device model, device version, device UUID(Unique ID for device identification) and etc…
The device sensors are used to get the motion(Accelerometer) and orientation(compass) of the device.
In a broad way, both the plugins are used to get the device direction, vibration, and orientation.
Device motion gives the coordinate values in three direction X, Y & Z. This value change related to gravity(9.8 m/s^2) with respect to earth frame.
Device orientation gives the value of a device head direction, it calculates the magnetic value matching to the device head pointer and gives us the value in a degree which further tell us a pointed direction of the device.
As magnetic field value are more accurate than Accelerometer value so in a case to get the accurate data we prefer the device compass value.
The Device Plugin is further classified into three types of plugin:
- Device info
- Device Motion(Accelerometer)
- Device orientation (Compass)
Device Info:
Device info plugin provides few important information related to device hardware and software.
The information provided by device info:
Device Model
Device Cordova
Device Platform
Device UUID
Device Version
Device Motion:
This device motion plugin is used to measure the position of your device on the coordinate axis. This coordinate value is measured relative to the gravity. This device accelerometer provides the value in three directions say X, Y and Z and one value for the timestamp.
Information provided by device motion:
Acceleration X
Acceleration Y
Acceleration Z
Timestamp
Device Orientation:
This plugin is used to get the device direction with a measure of the magnetic field with respect to the earth framework. It shows a value in degree and then with the help of this value you can calculate the direction where the device is pointing to.
Information provided by device orientation:
Compass-heading value
Start building your first PhoneGap Device Info application:
I am explaining this code project by keeping a focus on the android platform, but it will be a similar procedure to make it run across all platforms.
To develop a mobile application, you need to make some setup which is listed below:
- Install Node.js.
- Install PhoneGap Desktop App.
Install PhoneGap/Cordova:
You can install it two ways either PhoneGap CLI(Command Line Interface) mode or PhoneGap desktop(GUI) mode.
I am using a desktop PhoneGap installation here but if you want to try it with PhoneGap CLI then follow command listed below.
C:\>npm install -g Cordova
C:\>npm install -g PhoneGap
Create New PhoneGap Project & Add required Platforms such as android:
$ Cordova create PhoneGapDevice
Add Platforms:
$ Cordova platform add android
Add Device Plugin:
$ Cordova plugin add org.apache.cordova.device
$ Cordova plugin add org.apache.cordova.device-motion
$ Cordova plugin add org.apache.cordova.device-orientation
Note: If you are facing any problem regarding PhoneGap Installation or Plugin Installation then you can go through following blog post:
Learn how to install PhoneGap?
Learn how to create, run, build PhoneGap build?
Learn how to use PhoneGap Plugin API?
Complete Code:
Index.html:
<!DOCTYPE html>
<html>
<head>
<title>Compass Example</title>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<link rel="stylesheet" type="text/css" href="css/Style.css">
</head>
<body id ="indexbdy">
<marquee onmouseover ="stop();" onmouseout ="start();"><h1 id ="indexhead">Get Your Device Info Using PhoneGap Device Plugin</h1></marquee>
<center>
<div id ="deviceall">
<a href="deviceinfo.html" class="btn-info" role="button">PhoneGap Info</a><br/><br/>
<a href="devicemotion.html" class="btn-info" role="button">PhoneGap Device Motion</a><br/><br/>
<a href="deviceorientation.html" class="btn-info" role="button">PhoneGap Device Orientation</a>
</div></center>
</body>
</html>
Deviceinfo.html:
<!DOCTYPE html>
<html>
<head>
<title>PhoneGap Device Info</title>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<link rel="stylesheet" type="text/css" href="css/Style.css">
<script type="text/javascript" charset="utf-8">
</script>
</head>
<body id ="deviceinfobdy">
<center><h2 id ="infohead">Your Device Information</h2><div id ="deviceinfo">
<p id="deviceProperties">Loading device properties...</p>
</div></center>
<center><div id ="goback"><a href="index.html" class="goback" role="button">Go Back</a><br/><br/></div></center>
<script src="js/deviceinfo.js" type="text/javascript"></script>
</body>
</html>
Devicemotion.html:
<!DOCTYPE html>
<html>
<head>
<title>Acceleration Example</title>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<link rel="stylesheet" type="text/css" href="css/Style.css">
</head>
<body id ="devicemotionbdy">
<center><h2 id ="infohead">Your Device Accelerometer</h2> <div id ="devicemotion">
<div id="accelerometer"><h3>Waiting for accelerometer...</h3></div>
<button onclick="stopWatch();" class="btn-info" >Stop Watching</button></div></center>
<center><div id ="goback"><a href="index.html" class="goback" role="button">Go Back</a><br/><br/></div></center>
<script src="js/devicemotion.js" type="text/javascript"></script>
</body>
</html>
Deviceorientation.html:
<!DOCTYPE html>
<html>
<head>
<title>Compass Example</title>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<link rel="stylesheet" type="text/css" href="css/Style.css">
</head>
<body id ="deviceorientationbdy">
<center><h2 id ="infohead">Your Device Compass</h2> <div id ="deviceorientation">
<div id="heading"><h3>Waiting for heading...</h3></div>
<button onclick="startWatch();" class="btn-info" >Start Watching</button>
<button onclick="stopWatch();" class="btn-info" >Stop Watching</button>
</div></center>
<center><div id ="goback"><a href="index.html" class="goback" role="button">Go Back</a><br/><br/></div></center>
<script src="js/deviceorientation.js" type="text/javascript"></script>
</body>
</html>
Deviceinfo.js
// device API libraries are loading
document.addEventListener("deviceready", onDeviceReady, false);
// The device API are ready to use
function onDeviceReady() {
var element = document.getElementById('deviceProperties');
element.innerHTML = 'Device Model: ' + device.model + '<br />' +
'Device Cordova: ' + device.cordova + '<br />' +
'Device Platform: ' + device.platform + '<br />' +
'Device UUID: ' + device.uuid + '<br />' +
'Device Version: ' + device.version + '<br />';
}
Devicemotion.js
var watchID = null;
// Device API libraries are loading
document.addEventListener("deviceready", onDeviceReady, false);
// device API are ready to use
function onDeviceReady() {
startWatch();
}
// Trigger for start watching acceleration value
function startWatch() {
// acceleration updation after 3sec
var options = { frequency: 3000 };
watchID = navigator.accelerometer.watchAcceleration(onSuccess, onError, options);
}
// Trigger for stoping the acceleration watch
function stopWatch() {
if (watchID) {
navigator.accelerometer.clearWatch(watchID);
watchID = null;
}
}
// Display 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 />';
}
// Message display in case of failure
function onError() {
alert('onError!');
}
Deviceorientation.js
var watchID = null;
// API libraries are loading
document.addEventListener("deviceready", onDeviceReady, false);
// Device API are ready to use
function onDeviceReady() {
startWatch();
}
// Trigger for starting the watch
function startWatch() {
// After every 3 sec it update the compass value
var options = { frequency: 3000 };
watchID = navigator.compass.watchHeading(onSuccess, onError, options);
}
// Trigger for stoping the watch
function stopWatch() {
if (watchID) {
navigator.compass.clearWatch(watchID);
watchID = null;
}
}
// Get the current heading
function onSuccess(heading) {
var element = document.getElementById('heading');
element.innerHTML = 'Heading: ' + heading.magneticHeading;
var test =heading.magneticHeading;
s=String;s.prototype.a=s.prototype.replace;var a=test/11.25,a=a+0.5|0,b,k,c=a,d=c%8,c=c/8|0,e=["north","east","south","west"],f,g,h;f=e[c];g=e[(c+1)%4];h=f==e[0]|f==e[2]?f+g:g+f;b="1;1 by 2;1-C;C by 1;C;C by 2;2-C;2 by 1".split(";")[d].a(1,f).a(2,g).a("C",h);k=b.a(/north/g,"N").a(/east/g,"E").a(/south/g,"S").a(/west/g,"W").a(/by/g,"b").a(/[\s-]/g,"");b=b[0].toUpperCase()+b.slice(1);alert(b+" "+k)
}
// message display in case of failure
function onError(compassError) {
alert('Compass error: ' + compassError.code);
}
Style.css
.btn-info
{
-webkit-box-shadow:rgba(0,0,0,0.2) 0 1px 0 0;
-moz-box-shadow:rgba(0,0,0,0.2) 0 1px 0 0;
box-shadow:rgba(0,0,0,0.2) 0 1px 0 0;
color:#141414;
background-color:#00B2EE;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border:none;
text-decoration: none;
font-size:20px;
font-weight:700;
padding:4px 16px;
text-shadow:#FE6 0 1px 0;
}
#deviceall
{
margin-top:60%;
}
#indexbdy
{
background-color:#a8a8a8;
}
#indexhead{
color:blue;
}
#deviceinfo{
margin-top:60%;
}
#devicemotion
{
margin-top:60%;
}
#deviceinfobdy
{
background-color:#a8a8a8;
}
#deviceorientationbdy
{
background-color:#a8a8a8;
}
#devicemotionbdy
{
background-color:#a8a8a8;
}
.goback
{
font-size:25px;
color:blue;
}
#goback
{
margin-top:55%;
}
#accelerometer
{margin-bottom:20px;
font-size:18px;
color:#141414;
font-style:bold;
}
#heading
{
margin-bottom:20%;
font-size:18px;
color:black;
font-style:bold;
}
#deviceProperties
{
font-size:18px;
color:#141414;
font-style:bold;
}
#infohead
{
color:blue;
text-decoration:underline;
}
Conclusion:
Hope, you would have liked this post and would have learned about App building using PhoneGap. You would have also learned about PhoneGap plugins and platforms installation and few other necessary settings for running the application. We will be updating you regarding the same or something new, so keep reading our blog post.
You may also like –
- PhoneGap : How Push Notifications Work?
- PhoneGap SQLite Plugin
