Skip to Content
3
Former Member
May 15, 2013 at 03:06 PM

Hybrid Web Container with Camera, Network and Location Base

49 Views

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);

}

Attachments

workflow.png (12.1 kB)