Kendo UI Mobile Cordova Templates for Hybrid Mobile Apps

Hybrid Mobile Apps are one of the ways in which you can create a cross platform Mobile Applications using HTML/JavaScript/CSS technologies. The key here is Cross Platform. I want to write once and want to take my app to all platforms. One of the quickest ways is the Hybrid Way. Although Hybrid has its disadvantages when it comes to scenarios like high graphical UIs – it is a good choice when we have a simple data entry kind of scenario. In this blog post i will introduce you to Kendo UI Mobile templates we have done. These templates will speed up your Cordova based Hybrid Mobile App development. These templates makeĀ use of our Open Source Hybrid Mobile UI Framework called Kendo UI Mobile. Continue reading

How to work with camera in Icenium

Learn more about Icenium here

In this post we will take a look on working with camera in Icenium. You can access camera in Icenium using Cordova or PhoneGap.

Let us say we want to capture a photo on touch of a button. I have designed view as below. On touch of button camera will be launched and then taken photo will get bind to image control.


<div id="home"
 data-role="view"
 data-title="Share">
 <button onclick="capturePhoto();">Capture Photo</button> <br>
 <img style="width:60px;height:60px;" id="smallImage" src="" />
 </div>

On touch of Capture Photo button we are calling function capturePhoto().


function capturePhoto() {

navigator.camera.getPicture(onPhotoDataSuccess, onFail, {
 quality: 50,
 destinationType: destinationType.DATA_URL
 }
 );

}

In above function we are using cordova function navigator.camera.getPicture() to launch camera and click photo. You can pass many optional parameters to this function like quality, destinationType, sourceType, targetWidth , targetHeight etc.

On successful selection of photo onPhotoDataSucess function will be called. In this function you can access photo and use that as per your required. In this scenario we are binding that too an image control.


function onPhotoDataSuccess(imageData) {

 var smallImage = document.getElementById('smallImage');

&nbsp;

smallImage.src = "data:image/jpeg;base64," + imageData;
 }

As you see that we are reading image with data url and setting that as source of image. If there is error selecting photo then onFail() function will be called. We can simply display an error message in this function.


function onFail(message) {
 alert('Failed because: ' + message);
 }

In this way you can work with camera in Icenium. I hope you find this post useful. Thanks for reading.