- SAP Managed Tags:
Previous Home Next
The following examples demonstrate how to include and use some of the native functionality that Cordova plugins provide.
Taking, Storing and Retrieving a Picture
Acquiring the Device Location and Displaying it on a Map
The following steps demonstrate how to take a picture using the Cordova camera plugin and how to store and retrieve previously taken images.
The following steps demonstrate how to get a location and then use Google services to translate a location into an address and to display a map showing the address.
Previous Home Next
The following examples demonstrate how to include and use some of the native functionality that Cordova plugins provide.
Taking, Storing and Retrieving a Picture
Acquiring the Device Location and Displaying it on a Map
Taking, Storing and Retrieving a Picture
The following steps demonstrate how to take a picture using the Cordova camera plugin and how to store and retrieve previously taken images.
- Create a new project named CameraDemo and add Android or iOS or both.
cordova create C:\Kapsel_Projects\CameraDemo com.mycompany.camera CameraDemo
cd CameraDemo
cordova platform add android
cordova create ~/Documents/Kapsel_Projects/CameraDemo com.mycompany.camera CameraDemo
cd ~/Documents/Kapsel_Projects/CameraDemo
cordova platform add ios
- Add the Kapsel Encrypted Storage plugin, the Cordova Camera and Dialogs plugins.
cordova plugin add cordova-plugin-camera
cordova plugin add cordova-plugin-dialogs
cordova plugin add kapsel-plugin-encryptedstorage --searchpath %KAPSEL_HOME%/plugins
or
cordova plugin add kapsel-plugin-encryptedstorage --searchpath $KAPSEL_HOME/plugins
- Replace the contents of index.html with the below code.
<html>
<head>
<title>Camera Demo</title>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script>
var selectEl = null;
var imageEl = null;
var store = null;
var firstTime = null;
function onLoad() {
selectEl = document.getElementById("imageNumSelect");
imageEl = document.getElementById("imageID");
}
function addOption(select, text, value) {
var option = document.createElement("option");
option.text = text;
option.value = value;
select.options.add(option);
select.selectedIndex = select.options.length - 1;
showImage();
}
function populateSelectFromStore() {
store.length(function(length) {
for (var i = 0; i < length; i++) {
store.key(i, function(key) {
addOption(selectEl, key, key);
}, onFail);
}
}, onFail);
}
function deletePhoto() {
var selectedValue = selectEl.options[selectEl.selectedIndex].value;
store.removeItem(selectedValue, successCallback, onFail);
selectEl.options.remove(selectEl.selectedIndex);
showImage();
}
function showImage() {
if (selectEl.options.length == 0) {
imageEl.src = "data:image/jpeg;base64,";
return;
}
var selectedValue = selectEl.options[selectEl.selectedIndex].value;
store.getItem(selectedValue, function(imageData) {
imageEl.src = "data:image/jpeg;base64," + imageData;
}, onFail);
}
function capturePhoto() {
firstTime = true;
navigator.camera.getPicture(onSuccess, onFail, { quality: 85, allowEdit: true, targetWidth : 399, targetHeight : 300, sourceType: navigator.camera.PictureSourceType.CAMERA, destinationType: navigator.camera.DestinationType.DATA_URL });
}
function onSuccess(imageData) {
if (firstTime) { //method is called twice on iOS. Not sure why.
firstTime = false;
imageEl.src = "data:image/jpeg;base64," + imageData;
var imageName = prompt("Please enter a name for the image",""); //prompt doesn't work on Windows. Need to use navigator.notification.prompt and handle async.
//store image
store.setItem(imageName, imageData, successCallback, onFail);
//update dropdown
addOption(selectEl, imageName, imageName);
}
}
function onFail(message) {
firstTime = false;
navigator.notification.alert("Failed because: " + message);
}
function init() {
var appId = "com.mycompany.camera"; // Change this to app id on server
var context = {
"passcode": "password", //Note hardcoding passwords and unlock passcodes are strictly for ease of use during development
//Once set can be changed by calling sap.Logon.managePasscode()
"unlockPasscode": "password",
"passcode_CONFIRM":"password",
};
var passcodePolicy = {
"expirationDays":"0",
"hasDigits":"false",
"hasLowerCaseLetters":"false",
"hasSpecialLetters":"false",
"hasUpperCaseLetters":"fales",
"defaultAllowed":"true",
"lockTimeout":"300", //5 minutes, if this is set too low (0), the data vault could be locked when coming back from the camera app and storing the picture will fail.
"minLength":"6",
"minUniqueChars":"0",
"retryLimit":"0"
};
//Used if the application is not registering with the SMP 3.0 server. New to SP03.
sap.Logon.initPasscodeManager(logonSuccessCallback, errorCallback, appId, null, passcodePolicy, context);
}
function logonSuccessCallback() {
store = new sap.EncryptedStorage("testStore");
populateSelectFromStore();
}
function successCallback() {
}
function errorCallback(error) {
navigator.notification.alert("An error occurred: " + JSON.stringify(error));
}
document.addEventListener("deviceready", init, false);
</script>
</head>
<body onload="onLoad()">
<button onclick="capturePhoto();">Capture Photo</button><br>
<button onclick="deletePhoto();">Delete Photo</button><br>
<select id="imageNumSelect" onchange="showImage()";>
</select><br>
<img src="" id="imageID">
</body>
</html>
- Prepare, build and deploy the app with the following commands.
cordova run android
or
cordova run ios
Acquiring the Device Location and Displaying it on a Map
The following steps demonstrate how to get a location and then use Google services to translate a location into an address and to display a map showing the address.
- Create a new project named LocationDemo and add Android or iOS or both.
cordova create C:\Kapsel_Projects\LocationDemo com.mycompany.location LocationDemo
cd LocationDemo
cordova platform add android
cordova create ~/Documents/Kapsel_Projects/LocationDemo com.mycompany.location LocationDemo
cd ~/Documents/Kapsel_Projects/LocationDemo
cordova platform add ios
- Add the InAppBrowser plugin to the project to enable showing the Google Map in a separate window that will have a close button. Also add the Dialogs and geolocation plugins.
cordova plugin add cordova-plugin-inappbrowser
cordova plugin add cordova-plugin-dialogs
cordova plugin add cordova-plugin-geolocation
- Replace the contents of index.html with the code below.
<html>
<head>
<title>Location Demo</title>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script>
function getLocation() {
navigator.geolocation.getCurrentPosition(locSuccess, locFail, {maximumAge:10000, timeout:30000, enableHighAccuracy: true});
}
function getAddress() {
var lat = document.getElementById("latitude").value;
var long = document.getElementById("longitude").value;
var url = "https://maps.googleapis.com/maps/api/geocode/json?latlng=" + lat + "," + long + "&sensor=false";
//var url = "https://maps.googleapis.com/maps/api/geocode/json?latlng= &sensor=false"
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", url, false);
try {
xmlhttp.send();
}
catch (e) {
navigator.notification.alert(JSON.stringify(e));
return;
}
var responseText = xmlhttp.responseText;
var responseObj = JSON.parse(responseText);
var address = responseObj.results[0].formatted_address;
document.getElementById("address").value = address;
}
function locSuccess(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
document.getElementById("latitude").value = latitude;
document.getElementById("longitude").value = longitude;
}
function locFail(error) {
console.log(JSON.stringify(error));
navigator.geolocation.getCurrentPosition(locSuccess, locFail2, {maximumAge:10000, timeout:30000, enableHighAccuracy: false});
}
function locFail2(error) {
console.log(JSON.stringify(error));
console.log("Failed to establish the device's location");
}
function showStaticMap() {
var lat = document.getElementById("latitude").value;
var long = document.getElementById("longitude").value;
var img_url="https://maps.googleapis.com/maps/api/staticmap?center=";
img_url = img_url + lat + "," + long + "&zoom=14&size=400x300&sensor=false";
document.getElementById("mapholder").innerHTML="<img src='"+img_url+"'>";
}
function showFullMap() {
var lat = document.getElementById("latitude").value;
var long = document.getElementById("longitude").value;
var URLToOpen = encodeURI("https://maps.google.com/?q=" + lat + "," + long); //may be needed if URL contains parameters
var ref = window.open(URLToOpen, '_blank ', 'location=yes'); //location bar shown or not //use _system if you wish to open in the system browser.
}
</script>
</head>
<body><br><br>
<button onclick="getLocation();">Get Location</button><br>
<button onclick="getAddress();">Get Address from Location</button><br>
Latitude:<input type="text" id="latitude"><br>
Longitude:<input type="text" id="longitude"><br>
Address:<textarea rows="2" cols="30" id="address"></textarea><br>
<button onclick="showStaticMap()">Show Static Map</button>
<button onclick="showFullMap()">Show Full Map</button>
<div id="mapholder"></div>
</body>
</html>
- Prepare, build and deploy the app with the following commands.
cordova run android
or
cordova run ios
If you are using Windows Phone, enable the location capability as shown below.
If using an Android emulator, the emulator's location can be changed from the emulator's extended controls under location.
On an iOS simulator the location can be changed under Debug > Location.
- Depending on the device, the location may not be returned before the timeout occurs.
On Android, ensure that the Location is enabled under Settings > Location > On. The Mode can also be set. Finally under recent location requests should appear LocationDemo if you have previously pressed the Get Location button.
On iOS, ensure that Location is enabled under Settings > Privacy > Location > Location Service > On
Previous Home Next
4 Comments
