How to use Camera and Geo-Location plugins with SAP Web IDE
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!
Nice blog, and between the lines, also a great introduction and use case for the SAP Web IDE Hybrid App Toolkit Add-on
very good blog post. I definitely agree this has many use cases to benefit from.
Thank you Simmaco.
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.
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
Thanks Pandu for your answer, I've also updated the blog with this information.
Regards,
Simmaco
Hi simmaco,
really nice blog. Thank you for sharing it. This I will add to my example list.
~Florian
really good information shared here. Thanks for explaining this
Hi Simmaco,
Useful blog!
Thank You
Hi Simmaco,
Thank u its very useful..
Great blog Simmaco Ferriero, simple and very useful 😀
Thanks for sharing 😀
BR,
Raphael Pacheco.
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
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
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
Please create a new Discussion to ask your question.
Regards, Mike (Moderator)
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.
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/
John,
Please create a new Discussion to ask your question.
Regards, Mike (Moderator)
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
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
I got a error in this particular place when any other solution in this area plz reply me onGeoSuccess : function(position)
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
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,
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
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
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
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
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.
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
Hi Simmaco,
Below is the snap shot of my Project Settings
Thanks
Rajesh
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
Hi,
When I deploy this application on HCP, I get an undefined error for "navigator.camera". But it works fine when I try to run it on web ide. Can you please suggest ?
Hi All ,
Is it possible we can deploy this application on to fiori launchpad . My requierment is to use GPS and Camera Functionality to be used throught application running of Fiori Launch Pad.
Please let me know if this is possible ??
Thanks 🙂
Hi,
I am getting "navigator usage is forbidden, use sap.ui.Device" message in web ide. How to overcome this use.
-Ranjan
Hi Ranjan,
Just replace "navigator" with "sap.ui.Device".
Hi everybody,
I have the same problem in sap fiori launchpad. navigator.camera shows undefined. Could anyone help me with that?