cancel
Showing results for 
Search instead for 
Did you mean: 

Hybrid Web Container with Camera, Network and Location Base

Former Member
0 Kudos

I'm pretty sure these questions have been asked and been addressed in SCN somewhere.  But I thought I'd share how I was able to get a handle on these hardware from a HWC app perspective.  I've gotten this to work on SUP 2.1.3 and also in SUP 2.2.  I'm sure there are better ways to do this but in case someone just wants a quick and easy example to follow, I've put together a quick and dirty example.  This has been tested on iOS, iPad and Android S3.  Hope this helps someone at some point.

Create the following workflow:

An action from a button going to a new screen was the only way I could trigger the handler for device's hardware.  In this example, I am using the camera and determine network usage, Wifi or 3G and location in lat & long

In "Start" scree, add buttons:

Configure each button to open to the appropriate screen.

In Custom.js:

You should be able to do this in either customBeforeNavigateForward or after navigate forward.  In this example, I am just using the before navigate forward.  The logic in here calls the appropriate function for device handling. 

hwc.customBeforeNavigateForward = function(screenKey, destScreenKey) {

if(destScreenKey === "Network") {

var state = document.readyState;

        if (state == 'loaded' || state == 'complete') {

             getConnectionType();

        } else {

             if (navigator.userAgent.indexOf('Browzr') > -1) {

                  setTimeout(getConnectionType, 250);

             } else {

                  document.addEventListener('deviceready',getConnectionType,false);

             }

        }

}//if network type screen

if(destScreenKey === "Camera") {

//capture image using PhoneGap API

var state = document.readyState;

        if (state == 'loaded' || state == 'complete') {

             useCamera();

        } else {

             if (navigator.userAgent.indexOf('Browzr') > -1) {

                  setTimeout(useCamera, 250);

             } else {

                  document.addEventListener('deviceready',useCamera,false);

             }

        }

}//if camera

//for Geo Location getting Lat and Long values:

if(destScreenKey === "Geo_Location") {

var state = document.readyState;

        if (state == 'loaded' || state == 'complete') {

             run();

        } else {

             if (navigator.userAgent.indexOf('Browzr') > -1) {

                  setTimeout(run, 250);

             } else {

                  document.addEventListener('deviceready',run,false);

             }

        }

}//geo location

}//hwc.customBeforeNavigateForward

For handling camera:

function useCamera() {

// start image capture

navigator.device.capture.captureImage(captureSuccess, captureError, {limit:2});

}

//called by navigator.device.capture.captureImage(captureSuccess, captureError, {limit:2});

var captureError = function(error) {

    //navigator.notification.alert('Error code: ' + error.code, null, 'Capture Error');

showAlertDialog('Error code: ' + error.code, null, 'Capture Error');

};

//called by navigator.device.capture.captureImage(captureSuccess, captureError, {limit:2});

function captureSuccess(mediaFiles) {

/*var i, len,imageName;

var form = document.forms["CameraForm"];

for (i = 0, len = mediaFiles.length; i < len; i += 1) {

        imagePath = mediaFiles[i].fullPath;

        imageName = mediaFiles[i].name;

        //display image

            if(form) {

                    //display base64 image on HTMLView canvas

                    var canvas = document.getElementById("formkey_image_canvas");

                    var ctx = canvas.getContext('2d');

                    var theImage = new Image();

                    theImage.src = imagePath; 

                    ctx.drawImage(theImage,10,20);

            }

    } 

form.formkey_base64_image.value = imagePath + ":" + imageName;*/

}

For handling network device

function getConnectionType() {

var networkState = navigator.network.connection.type;

    var states = {};

    states[Connection.UNKNOWN]  = 'Unknown connection';

    states[Connection.ETHERNET] = 'Ethernet connection';

    states[Connection.WIFI]     = 'WiFi connection';

    states[Connection.CELL_2G]  = 'Cell 2G connection';

    states[Connection.CELL_3G]  = 'Cell 3G connection';

    states[Connection.CELL_4G]  = 'Cell 4G connection';

    states[Connection.NONE]     = 'No network connection';

    hwc.showAlertDialog('Connection type: ' + states[networkState]);

}

//geo location run method called from customBeforeNavigateForward

//"http://maps.google.com/maps/api/staticmap?center=" + 50.448574 + "," + 104.608917 + "&zoom=13&size=320x480&maptype=roadmap&key=<enter your google developer id key>&sensor=true"

function run() {

  var win = function(position) {                          // Grab coordinates object from the Position object passed into success callback.

       var coords = position.coords;

       // Call for static google maps data - make sure you use your own Google Maps API key!

       var url = "http://maps.google.com/maps/api/staticmap?center=" + coords.latitude + "," + coords.longitude + "&zoom=13&size=320x480&maptype=roadmap&key=MyGoogleMapsAPIKey&sensor=true";

      // document.getElementById('map').setAttribute('src',url);

       hwc.showAlertDialog(coords.latitude + ":" + coords.longitude);

  };

  var fail = function(e) {

       hwc.showAlertDialog('Can\'t retrieve position.\nError: ' + e);

  };

  navigator.geolocation.getCurrentPosition(win, fail);

}

Accepted Solutions (0)

Answers (5)

Answers (5)

Former Member
0 Kudos

Thank you for reading my post.  Because I'm not sure if your SAP screen is browser base app or native, executable app, I'll have to answer this question in fragments.

First and foremost, your interface with the Webcam would be device specific.  Unless you know how to interface with the cam using native C/C++.  I'm sure there's going to be Java APIs out there that can give you handle of the Webcam. 

Secondly, you'll have to find a way to comm between the video module and the app that needs to show the videos. 

My suggestion is to just think about how WebEx meeting works.  When you start WebEx for the first time, it still downloads and install an app.  There's no way, at this point, to run a web cam on a browser base app is not possible. 

But others may have a better idea.  Hope this helps.  I know it's probably not what you're looking for. 

Good luck!

Former Member
0 Kudos

Thank you Jay.

I do not video to run in my application.

I need to capture the image of a truck and display it as image in SAP GUI or in Webdynpro screen. User checks the truck by viewing the image and approves the truck.

I do not want to store the image anywhere. Needed during program runtime only.

Former Member
0 Kudos

Hi Jay Sanchez:

I need a help. How can i integrate Custom 3rd Party Plug-ins to the HWC (SMP 2.3), I want to integrate both IOS and Android.

For example the following:


007-surajit/Directory-List-PhoneGap-Plugin at 62181f0c476c31047a57f9d07e3bdfa7c459573e · GitHub


Regards

Armando Ibarra

Former Member
0 Kudos

Hi Jay,

Thanks for this tutorial.

I have some problem with the following method...I'm using SUP V 2.1.3

function run() {

   ....................

.............................

          showAlertDialog(coords.latitude + ":" + coords.longitude); //should it be without HWC

      };

      var fail = function(e) {

         showAlertDialog('Can\'t retrieve position.\nError: ' + e); //should it be without HWC

      };

      navigator.geolocation.getCurrentPosition(win, fail);

    }

I did this without HWC.The alert dialog pops up showing latitude and longitude but still not getting the map/location. What could be the problem?

am I doing any thing wrong in this method call: navigator.geolocation.getCurrentPosition(win, fail); ??

Please help.

Former Member
0 Kudos

Hi Jyotiranjan.  Sorry for the very late response.  I try not to touch a computer when on vacation.   What device are you testing this on? 

The important part prior to the above logic is this snippet to be run in the "beforeNavigateForward" method:

//for Geo Location getting Lat and Long values:

if(destScreenKey === "Geo_Location") {

var state = document.readyState;

        if (state == 'loaded' || state == 'complete') {

             run();

        } else {

             if (navigator.userAgent.indexOf('Browzr') > -1) {

                  setTimeout(run, 250);

             } else {

                  document.addEventListener('deviceready',run,false);

             }

        }

}//geo location

The "document.readyState", I believe, is what triggers the gps chip.  hope this helps.

J

Former Member
0 Kudos

Thanks for this help.

I'm testing this on iphone simulator.Could you please tell me how to enable this on simulator? Am I missing some google map SDK related things? Do I need to get new iOS key from Google? If my code is correct..what step I need to follow? Is this something, I need to pay Google for this testing and access there map?

Thanks.

Former Member
0 Kudos

I'm not sure if the simulator will work well with getting actual geo location.  I have always tested on an actual device.  If your Apple developer ID is up to date, I don't see any reason why it won't work other than if you are testing this on a simulator, that could be the point of failure.

For getting the Lat & Long, you won't need the Google Map API.  This is more of having access to the GPS chip which is all expose through PhoneGap.

If you are testing this on the simulator, then I am not sure if you can get this to work accurately.

Former Member
0 Kudos

Hi Jay Sanchez,

Great post.

I need a help. I want capture images from WEBCAM and display it in SAP Screen or Webdynpro application. How can i do it?

Thanks in advance.

Former Member
0 Kudos

Hi Jay,

I tried to reproduce as done by you. But, when I open the application I get a blank screen.

Should I initialize phonegap APIs before using them ? Can you please help me here ?

I have pasted the code custombeforenavigationforward.

- Suraj

Former Member
0 Kudos

Yes, the screens will be blank because I'm not really doing anything with them.  I just found that going to a screen invoked from the button is what makes the device use able.  But that issue was on 2.1.  Now that we have SUP 2.2, that may not be the case anymore.

So if you are testing the camera, for example, and you want to handle the data from the camera, I should implement on one of the "customGetPicture...." method. 

For example, in customGetPictureDataSuccess(filename, imageData).  you can do this:

var pictureDataValue = new MessageValue();

 

          pictureDataValue.setKey("formkey_Image_Raw_Data");                                                  // Must be set by the user. 

 

      pictureDataValue.setValue(imageData); //imageData parameter is already in Base64

          pictureDataValue.setType(MessageValueType.TEXT);

          var mvc = getWorkflowMessage().getValues();

          if( mvc ) {

                    mvc.add( pictureDataValue.getKey(), pictureDataValue );

                    //navigate back to step 7

                    navigateForward('Step_7_of_8');

                    setCurrentScreen('Step_7_of_8');

                    // Add a message value for the MIME type of the image if desired.

                    //var mimeType = getMimeType(fileName);

                    //var mimeMessageValue = new MessageValue();

                    //mimeMessageValue.setKey("");                                        // Must be set by the user.

                    //mimeMessageValue.setValue(mimeType);

                    //mimeMessageValue.setType(MessageValueType.TEXT);

                    //mvc.add(mimeMessageValue.getKey(), mimeMessageValue);

          }

and in the "Camera" screen, you can use HTMLView to create a canvas and draw base64 image onto a canvas.  Hope this helps.

Former Member
0 Kudos

Hi Jay,

Thanks for your response. As I mentioned before, I was unable to see the "Start" screen itself after implementing the code .

Should I initialize phonegap API for camera before calling navigator.device.capture.captureImage ?

- Suraj

Former Member
0 Kudos

Hi Suraj.

You should not have to do anything upon loading the "Start" screen.  only thing I can think off that's preventing the start screen from showing is if you have something in the before and after hybrid load.  Also, I find that the app won't start if there is a syntax error somewhere along your codes in custom.js. 

I recommend that you start with one button at a time and eliminate the rest of the code.  This will remove multiple points of failures.  Hope this helps.

J

Former Member
0 Kudos

Hi Jay,

I was able to implement camera, geo location, and other supported featues. Thanks for your help.

However, I am struggling to implment barcode scanner with HWC. I would appreciate if you can share your thoughts: http://scn.sap.com/thread/3372820

- Suraj

Former Member
0 Kudos

Hi Suraj.  Glad to see you got it working.  Barcode scanning; that's going to be a bit tougher.  Something I was working on a few weeks back trying to use PhoneGap's barcode scanner but I had to shift focus on another project.  But have a look at Scandit, 

Reason why it's a bit challenging with SUP is due to the flexibility of the framework itself.  Since we can only do things in Custom.js, and the examples of Scandit, I still have to figure out how to implement Scandit's example into SUP's Custom.js.

But with SMP 2.3, we have a lot more flexibility because SUP essentially moved to a library type of toolkit.  So we aren't stuck with the constraint of Custom.js.  I'm looking into the barcode scanner with PhoneGap now that I've been working with SAPUI5 and the GateWay Demo so stay tuned, no more Custom.js but I do/will miss MBOs.  Made my life easy.

Thanks

J

Former Member
0 Kudos

Hi Jay,

We have developed good number of native applications with SUP and recently been successful to explore HWC features as well .

Customers are happy about this. However, expectations are limitless .

I have not stepped in to SAPUI5 and Gateway, but looks exciting from your comments . Also, looking forward to SMP 2.3.

- Suraj

Former Member
0 Kudos

Hello Jay,

Great Post, It was very helpful.

Regards,

Pratheek

midhun_vp
Active Contributor
0 Kudos

Good job. It will be very useful for all. Keep it up.

-Midhun VP