Cordova Plugins

Core Plugins

There are two types of Cordova plugins, namely, core plugins and custom plugins. The former gives you access to native Android app functionality from existing Cordova plugins while the latter gets additional functions from third party plugins. A typical core plugin is the geolocation plugin. This gets the current geographical location of the device. A typical custom plugin is the Google maps plugin which draws a map on the screen and can be used with the geolocation plugin to draw a map of the current location of the phone.

Here we will examine the camera plugin to illustrate the use of core plugins.

To add all plugins we use CLI commands in the project directory. So, to list any plugins that are already added we use

cordova plugin

To add a particular plugin, for example the camera plugin, which is called cordova-plugin-camera, we use

cordova plugin add cordova-plugin-camera

Now cordova plugin will list the camera and another plugin called whitelist. This essentially protects the app from dangerous plugins which would, presumeably, be blacklisted.

 

HTML

In the best spirit of object oriented programming we will reuse the HTML code developed for the Notepad app.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
<link rel="stylesheet" type="text/css" href="css/index.css">
<title>Cordova Cam</title>
</head>

<body>
<h2>Cam Pad</h2>
<img src="" id="pad" alt="">
<input id="save" type="button" value="save" onClick="app.save()">
<input id="open" type="button" value="open" onClick="app.open()">
<input id="wipe" type="button" value="wipe" onClick="app.wipe()">
<input id="take" type="button" value="take" onClick="app.take()">
<input id="rest" type="button" value="rest" onClick="app.rest()">
<script type="text/javascript" src="cordova.js"></script>
<script src="js/index.js"></script>
</body>
</html>


This differs from tthe previous code only in the use of an iml element to allow for the picture to be sized and there are two buttons, "take" and "rest" which are essentially spaare for further development.

CSS

The style sheet is the same as the not app.

body {
background-color:#860;
}

h2 {
color:#fff;
}

#pad {
position:absolute;
left:8.5%;
top:10%;
padding:0.3em;
width:80%;
color: #ff8;
font-family:arial;
font-size:1.2em;
}

#save {
position:absolute;
left:4%;
top:82%;
width:15%;
height:2em;
padding:0.2em;
margin:1em;
font-family: arial;
font-size:1.2em;
font-weight: bold;
background-color: #ddd;
}

#open {
position:absolute;
left:21%;
top:82%;
width:15%;
height: 2em;
padding:0.2em;
margin:1em;
font-family: arial;
font-size:1.2em;
font-weight: bold;
background-color: #ddd;
}

#wipe {
position:absolute;
left:38%;
top:82%;
width:15%;
height: 2em;
padding:0.2em;
margin:1em;
font-family: arial;
font-size:1.2em;
font-weight: bold;
background-color: #ddd;
}

JavaScript File

 

Here we use the same app structure as before with an app object using initialise() and onDeviceReady() to prepare the app and the remaing app methods to define the callback functions..But, of course the business logic is different. This is contained in the onDeviceReady function and the button codes are confined to user interactions, as before.

The code required to take a picture is obtained from the Cordova documentation.

 

app = {
initialize: function(){
document.addEventListener('deviceready', this.onDeviceReady, false);
},
onDeviceReady: function(){
options = {
quality: 80,
destinationType: Camera.DestinationType.FILE_URI,
sourceType: Camera.PictureSourceType.CAMERA,
mediaType: Camera.MediaType.PICTURE,
encodingType: Camera.EncodingType.JPEG,
cameraDirection: Camera.Direction.BACK, // may have to set on camera
correctOrientation: true
}
navigator.camera.getPicture(app.onCameraSuccess, app.onCameraError, options);
},
onCameraSuccess: function(camData){
var cam = document.getElementById("pad");
pad.src = camData;
},
onCameraError: function(error) {
alert("No picture taken");
},
save: function(){
var title="title";
var note=document.getElementById("pad").src;
if(note!="") localStorage.setItem(title,note);
},
open: function(){
document.getElementById("pad").src="";
var note=localStorage.getItem("title");
document.getElementById("pad").src=note;
},
wipe: function(){
document.getElementById("pad").src="";
},
take: function(){
// var title="backup";
// var note=document.getElementById("cam").src;
// if(note!="") localStorage.setItem(title,note);
navigator.camera.getPicture(app.onCameraSuccess, app.onCameraError, options);
},
rest: function(){
document.getElementById("pad").srce="";
var note=localStorage.getItem("backup");
document.getElementById("pad").src=note;
}
};
app.initialize();