How to use Camera and Geo-Location plugins with SAP Web IDE

February 12, 2015 | 2,456 Views |

SIMMACO FERRIERO

SAPUI5

Introduction

With this blog I would like to show you how to create an application with SAP Web IDE which runs on smartphones and make use of the camera and the geolocation features provided by the Cordova plugin. With this application we’ll be able to capture photos using the phone’s camera and to load as well pictures from the phone’s gallery. Beside this we also display on the main view of the app, latitude, longitude and altitude information coming from the GPS sensor.

The main view for this application will be built by using the SAP Web IDE Layout Editor.

You can find here the complete source code for this project.

Let’s get started!

Prerequisites

SAP Web IDE 1.7 and later (you can register at SAP HANA Cloud Platform to get your development environment)
Hybrid Application Toolkit 1.1.0 downloadable from here.

Walkthrough

Create the application on SAP Web IDE

Open SAP Web IDE
Choose File –> New –> Project from Template and click on Next
Select the SAPUI5 Mobile Kapsel App Project and click on Next
Enter a project name (i.e. “testcamera”) and click on Next
Set the View Type to XML, leave the Namespace empty, enter the view name (i.e. “main”) and click on Next
Click on Finish. You have your application, now let’s go in the view folder

Create the main view layout

Right click on the view xml file (i.e. main.view.xml) and open it in the Layout Editor

Change the page title to something like “Camera Test”

Add 5 HBox controls to the view

In the first HBox control add 2 buttons

For the first button set the text to “Take a photo” and set the witdth to 150px
For the second button set the text to “Pick from gallery” and set the witdht to 150px
Save the file
Add an image control to the second HBox
Set the HBox’s Justify Content property to Center

Select the image you just added and change the following properties:

Property	Value
Height	200px
Width	200px
Element ID	myImage

Save the file
Add a label and a text controls in the 3rd HBox and repeat this step also for the other two HBox controls

For each one of the 3 added labels set the text property in the following order: Latitude, Longitude and Altitude
For each one of the 3 added text controls set the text property to “Calculating…”
For each one of the 3 added text controls change also the Element ID property and set it to txtLatitude,txtLongitude,txtAltitude, respectively

Save the file

Create the main view controller

Double click on the main view controller and delete in the file all the commented code

Add the following content


sap.ui.controller("view.main", {
    oView : null,
    onInit : function() {
        oView = this.getView();
        navigator.geolocation.getCurrentPosition(this.onGeoSuccess, this.onGeoError, {enableHighAccuracy:true});
    },
    onGeoSuccess : function(position) {
        oView.byId("txtLatitude").setText(position.coords.latitude);
        oView.byId("txtLongitude").setText(position.coords.longitude);
        oView.byId("txtAltitude").setText(position.coords.altitude);
    },
    onGeoError : function() {
        console.log('code: '    + error.code    + '\n' + 'message: ' + error.message + '\n');
    },
    onPhotoDataSuccess :  function(imageData) {
        var myImage = oView.byId("myImage");
        myImage.setSrc("data:image/jpeg;base64," + imageData);
    },
    onPhotoURISuccess : function(imageURI) {
        var myImage = oView.byId("myImage");
        myImage.setSrc(imageURI);
    },
    onFail :  function(message) {
    console.log("Failed because: " + message);
    },
    getPhoto : function() {
        var oNav = navigator.camera;
        oNav.getPicture(this.onPhotoURISuccess, this.onFail, { quality: 50,
        destinationType: oNav.DestinationType.FILE_URI,
        sourceType: oNav.PictureSourceType.PHOTOLIBRARY });
    },
    capturePhoto : function() {
    var oNav = navigator.camera;
    oNav.getPicture(this.onPhotoDataSuccess, this.onFail, { quality: 10, destinationType: oNav.DestinationType.DATA_URL });
    }
});

Define the onpress event for the two buttons

Reopen the view xml file and add the following functions to the press event of the two buttons:
- for the first button add the function press=”capturePhoto”
- for the second button add the function press=”getPhoto”

Save the file

Deploy and run the app

Right click on the name of the project and open Project Settings
Go on Device Configuration
Set the name of the project, the description, the application ID and choose the platforms which you want to run this app on

Enable the Cordova plugins Geolocation, Camera and Access File and save the configuration

Right click on the name of the project and choose Deploy –> Deploy to local Hybrid Toolkit
Once deployed, right click on the index.html file and choose Run –> Run on –> iOS (Android) device.
NOTE: Pay attention that if you want to use the emulator for testing, only the Android emulator can be used, because the iOS Simulator doesn’t support camera emulation. Of course, for the Android emulator, camera emulation needs to be enabled in the AVD Manager. Geo-location only works on a real device

This is the final result

That’s all folks!

To report this post you need to login first.

30 Comments

You must be Logged on to comment or reply to a post.

Robin van het Hof February 12, 2015 at 10:57 am

Nice blog, and between the lines, also a great introduction and use case for the SAP Web IDE Hybrid App Toolkit Add-on

like (0)
Sergio Guerrero February 12, 2015 at 11:44 am

very good blog post. I definitely agree this has many use cases to benefit from.

Thank you Simmaco.

like (0)
Sung-Yen Yang February 13, 2015 at 1:28 pm

Hi Simmaco,

Thanks for this excellent how-to blog and I cannot wait to do the same thing as your described in this blog, but you said WebIDE needs version 1.7. Where I can get this new version of WebIDE? Right now, SAP store only provides version 1.4.4 for us to download. So, would like to know where we can download this new WebIDE. Thanks.

like (0)
1. pandu j February 13, 2015 at 1:58 pm
  
  Hi Sung-Yen Yang,
  
  you may have to use the Webide in HANA cloud Trial Account as it offers Webide 1.7.1
  
  https://account.hanatrial.ondemand.com/
  
  Cheers
  
  Pandu
  
  like (0)
  1. SIMMACO FERRIERO Post authorFebruary 13, 2015 at 5:08 pm
    
    Thanks Pandu for your answer, I’ve also updated the blog with this information.
    
    Regards,
    
    Simmaco
    
    like (0)
Florian Henninger February 13, 2015 at 5:20 pm

Hi simmaco,

really nice blog. Thank you for sharing it. This I will add to my example list.

~Florian

like (0)
Kunal Jauhari February 27, 2015 at 9:17 am

really good information shared here. Thanks for explaining this

like (0)
John Stamatelos May 6, 2015 at 9:12 am

Hi Simmaco,

Useful blog!

Thank You

like (0)
Vinothkumar T May 8, 2015 at 1:30 am

Hi Simmaco,

Thank u its very useful..

like (0)
Raphael Pacheco May 8, 2015 at 1:44 am

Great blog Simmaco Ferriero, simple and very useful 😀

Thanks for sharing 😀

BR,

Raphael Pacheco.

like (0)
Sivadurga Prasad Madhuranthakam June 2, 2015 at 9:36 am

Hi Simmaco, nice blog, which helps all of us who are working on Hybrid app development.

I have got HANA Trial connectivity and also downloaded Hybrid Application Toolkit 1.1.0 from SCN. How to integrate these two??? I think without that integration this option “SAPUI5 Mobile Kapsel App Project” will not show up.

BR

Siva

like (0)
1. SIMMACO FERRIERO Post authorJune 2, 2015 at 10:36 am
  
  In SAP Web Ide you need to go on Tools –> Preferences. Select the Optional Plugins on the left side and enable the Hybrid App Toolkit plugin from the SAP Plugins category.
  
  Remember to refresh SAP Web IDE after doing this.
  
  Regards,
  
  Simmaco
  
  like (0)
Tom Dammer June 22, 2015 at 6:48 am

Hi Thank you for this example.

I want a 3rd Button to send the Photo via E-Mail.

How is the command in the main.controller.js ?

A Event in xml press=”sendMail”

Thank you for your Help.

regards

Tom

like (0)
1. Michael Appleby June 22, 2015 at 9:36 pm
  
  Please create a new Discussion to ask your question.
  
  Regards, Mike (Moderator)
  
  like (0)
John Jerome Mallari June 26, 2015 at 9:02 am

Im getting an error when trying to create a new project from template —> the flow cannot be continued due to incorrect wizard configuration.

Anyone familiar to resolve this? thanks in advance.

like (0)
1. SIMMACO FERRIERO Post authorJune 26, 2015 at 9:10 am
  
  Hi,
  
  from the screenshot is not clear: are you using the SAP Web IDE on the HANA Trial Landscape? I.E. https://webide-<your_account>.dispatcher.hanatrial.ondemand.com/
  
  like (0)
2. Michael Appleby July 7, 2015 at 9:51 pm
  
  John,
  
  Please create a new Discussion to ask your question.
  
  Regards, Mike (Moderator)
  
  like (0)
Ruchi Dhiman August 28, 2015 at 3:38 pm

Thank you for this tutorial Simmaco!

We tried to follow your instructions, but got syntax errors in WebIDE, because the variable oView cannot be found by the functions.

Do you know if the WebIDE now interprets your code differently than when you developed your tutorial?

Regards, Ruchi and Sarah

like (0)
1. SIMMACO FERRIERO Post authorAugust 31, 2015 at 1:59 pm
  
  Hi Ruchi,
  
  you don’t have to worry about those errors. The SAP Web IDE editor is checking a little bit the code and it found that the oView variable is declared but never use. This is not true because we are using a jSON object and the variable oView is declare at the beginning and assigned to “null”. That variable is also declared globally so that all the declared functions can use it.
  
  Simmaco
  
  like (0)
Rohit pavan September 4, 2015 at 7:28 am

I got a error in this particular place when any other solution in this area plz reply me onGeoSuccess : function(position)

like (0)
Ajay Kulkarni September 8, 2015 at 7:16 am

hi Simmaco,

This works just fine as stated.

We are trying to put such application on Fiori Launchpad which will be put in Fiori Client.

Could you comment on deploying process.

Will this same app can work on Launchpad.

Regards,

Ajay

like (0)
Johnny Muñoz February 24, 2016 at 10:35 pm

Hi,

The applications can be installed in the HCP or an SAP ABAP Repository, in our case it is the latter. The application is web type and from the HCP correctly raises Cordova default libraries to take pictures with the camera built into the laptop; but when I got the application from the SAP ABAP Repository, the functionality does not respond because they have not loaded the library Cordova.js

The question is how we make SAP ABAP Repository default call the library or the library manually included in the project, because we tried manually but cordova.js internally calls other files, not full load.

Additionally, our project is based on SAPUI5 1.28 and the application does not have index.html file.

Best regards,

like (0)
1. SIMMACO FERRIERO Post authorFebruary 25, 2016 at 9:22 am
  
  Hi,
  
  I’ve not fully understood your problem. You can use the camera feature with Cordova only if your application is an Hybrid application and it’s running on a device with Camera. In order to do this, when creating application from SAP Web IDE, you can start either with a Kapsel enabled template like the one here “SAPUI5 Mobile Kapsel Starter Application” or with another template, like a Fiori template, but then you need to enable the flag “Set this project as hybrid mobile application After project creation user can configure Cordova/Kapsel plugins, HCPms or SMP in Project Settings” during the project creation. In these cases the needed libraries are added to your project.
  
  However since you are using SAPUI5 1.28 this last option is not available for you, so you need to use the first option, which means to start from a Kapsel template as described here. In this case the “index.html” file is automatically created.
  
  Regards,
  
  Simmaco
  
  like (0)
Hirak Bhowmick December 15, 2016 at 9:41 am

Hi Simmaco ,

Thanks for this document and information . I have tried and it has worked successfully. Can you please guide on how I should be able to save the photos which are captured on my phone/emulator.

Request you all to provide inputs on this.

Thanks and Regards.
Hirak Bhowmick

like (0)
1. Daniel Van Leeuwen February 8, 2017 at 7:47 pm
  
  Thought I would cross reference to the Taking, Storing and Retrieving a Picture in the Getting Started with Kapsel guide. It includes a very simple example that does some similar things but the captured images are saved using the Encrypted Storage plugin.
  
  Regards,
  
  Dan van Leeuwen
  
  like (1)
wise men llc January 2, 2017 at 3:52 am

Hi Simmaco,

Thanks for the Information, it is really nice.

I have tried and i have faced a Challenge like when i capture the image can’t save it back to SAP directly.

But i am able to save the image back to SAP when i select from the Gallery.

Appreciate all for your inputs on this.

Regards
Prabhakar

like (0)
Shilpa Jain January 6, 2017 at 9:34 am

Dear Simmaco,

I have included Cordova.js file in my application & runs it on SAP WebIDE.
Camera is able to take picture from my desktop & place it in the area as described in your code but when I deployed this app on Mobile phone through SAP Fiori Client it is able to fetch image from Gallery but I am not able to see it in that Square Box.

Please suggest.

like (0)
rajeshkumar rajeshkumar January 7, 2017 at 6:29 pm

Hi Simmaco,

Thanks for the excellent blog, I have tried the same steps but unfortunetley I couldn’t able proceed, can’t find “Device Setting” also in project type “Mobile Cordova capabilites” is disabled.

Please advise me how can I fix this

https://webide-XXXXXtrial.dispatcher.hanatrial.ondemand.com/index.html

Thanks
Rajesh

like (0)
1. rajeshkumar rajeshkumar January 7, 2017 at 6:32 pm
  
  Hi Simmaco,
  
  Below is the snap shot of my Project Settings
  
  Thanks
  Rajesh
  
  like (0)
Klaus Koblinger March 29, 2017 at 8:33 am
Hi Simmaco,

Thanks for the excellent blog, I have tried your example successfully.

Can you tell me how I can save the image with an oData Service.

When I try to save the image I receive an failure:

The following problem occurred: Converting circular structure to JSON
```
	onSave: function() {
		var oModel = this.getView().getModel();
		var oEntry = {};
		oEntry.PHOTOURL = oView.byId("myImage");
		oModel.update('/Blob(1)', oEntry, null, function() {
			alert("Update successful");
		}, function() {
			alert("Update failed");
		});
	},
```
like (0)