Skip to Content
Author's profile photo SIMMACO FERRIERO

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/wp-content/uploads/2015/02/03_643594.png
  • 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

/wp-content/uploads/2015/02/04_643614.png

  • Change the page title to something like “Camera Test”

/wp-content/uploads/2015/02/05_643615.png

  • Add 5 HBox controls to the view

/wp-content/uploads/2015/02/07_643617.png

  • In the first HBox control add 2 buttons

/wp-content/uploads/2015/02/08_643618.png

  • 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

/wp-content/uploads/2015/02/09_643619.png

  • 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

/wp-content/uploads/2015/02/11_643621.png

  • 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

/wp-content/uploads/2015/02/12_643622.png

  • Save the file

Create the main view controller

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

/wp-content/uploads/2015/02/13_643624.png

  • 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”

/wp-content/uploads/2015/02/18_643641.png

  • 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

/wp-content/uploads/2015/02/15_643642.png

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

/wp-content/uploads/2015/02/16_643646.png

  • 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

/wp-content/uploads/2015/02/19_643725.png

This is the final result

IMG_1229.PNG

That’s all folks!

Assigned Tags

      35 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Robin van het Hof
      Robin van het Hof

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

      Author's profile photo Sergio Guerrero
      Sergio Guerrero

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

      Thank you Simmaco.

      Author's profile photo Sung-Yen Yang
      Sung-Yen Yang

      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.

      Author's profile photo Former Member
      Former Member

      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/

      1.7.JPG

      Cheers

      Pandu

      Author's profile photo Simmaco Ferriero
      Simmaco Ferriero
      Blog Post Author

      Thanks Pandu for your answer, I've also updated the blog with this information.

      Regards,

      Simmaco

      Author's profile photo Florian Henninger
      Florian Henninger

      Hi simmaco,

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

      ~Florian

      Author's profile photo Kunal Jauhari
      Kunal Jauhari

      really good information shared here. Thanks for explaining this

      Author's profile photo Former Member
      Former Member

      Hi Simmaco,

      Useful blog!

      Thank You

      Author's profile photo Vinothkumar T
      Vinothkumar T

      Hi Simmaco,

           Thank u its very useful..

      Author's profile photo Raphael Pacheco
      Raphael Pacheco

      Great blog Simmaco Ferriero, simple and very useful 😀

      Thanks for sharing 😀

      BR,

      Raphael Pacheco.

      Author's profile photo Former Member
      Former Member

      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

      Author's profile photo Simmaco Ferriero
      Simmaco Ferriero
      Blog Post Author

      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

      Author's profile photo Former Member
      Former Member

      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

      Author's profile photo Michael Appleby
      Michael Appleby

      Please create a new Discussion to ask your question.

      Regards, Mike (Moderator)

      Author's profile photo Former Member
      Former Member

      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.

      Capture.PNG

      Author's profile photo Simmaco Ferriero
      Simmaco Ferriero
      Blog Post Author

      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/

      Author's profile photo Michael Appleby
      Michael Appleby

      John,

      Please create a new Discussion to ask your question.

      Regards, Mike (Moderator)

      Author's profile photo Ruchi Dhiman
      Ruchi Dhiman

      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

      Author's profile photo Simmaco Ferriero
      Simmaco Ferriero
      Blog Post Author

      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

      Author's profile photo Former Member
      Former Member

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

      Author's profile photo Former Member
      Former Member

      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

      Author's profile photo Johnny Muñoz
      Johnny Muñoz

      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,

      Author's profile photo Simmaco Ferriero
      Simmaco Ferriero
      Blog Post Author

      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

      Author's profile photo Former Member
      Former Member

      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

      Author's profile photo Daniel Van Leeuwen
      Daniel Van Leeuwen

      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

       

       

      Author's profile photo Former Member
      Former Member

      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

       

      Author's profile photo Former Member
      Former Member

      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.

      Author's profile photo rajeshkumar rajeshkumar
      rajeshkumar rajeshkumar

      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

       

      Author's profile photo rajeshkumar rajeshkumar
      rajeshkumar rajeshkumar

      Hi Simmaco,

      Below is the snap shot of my Project Settings

      Thanks
      Rajesh

      Author's profile photo Klaus Koblinger
      Klaus Koblinger

      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");
      		});
      	},
      Author's profile photo Former Member
      Former Member

      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 ?

      Author's profile photo Mayank Thakur
      Mayank Thakur

      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 🙂

      Author's profile photo Former Member
      Former Member

      Hi,

      I am getting "navigator usage is forbidden, use sap.ui.Device" message in web ide. How to overcome this use.

       

      -Ranjan

       

       

      Author's profile photo Binh Thai
      Binh Thai

      Hi Ranjan,

      Just replace "navigator" with "sap.ui.Device".

      Author's profile photo Angel Gutierrez Bellido
      Angel Gutierrez Bellido

      Hi everybody,

       

      I have the same problem in sap fiori launchpad. navigator.camera shows undefined. Could anyone help me with that?