Use Camera Functions

The Common.control.Camera class can be used to add the photo acquisition feature to a form. The Camera control extends the Ext.Button class and can used in a form as a regular button.

The camera control displays a panel containing the photo data. Tapping the Attach button will process the image data. The panel can be dismissed using the Close button.

mobile camera button.jpg

Adding the Camera control to a form can be done by adding the camera configuration.

Example: Camera Control Configuration:

{
xtype: 'camera',
iconCls: 'photo1',
iconMask: true,
ui: 'iron',
listeners: {

// Process photo data when the image is attached
attach: function(cameraControl) {
var imageData = cameraControl.getImageData();

// Do something with the image data
}
}
}

Setting the Photo Resolution Quality

You can set the photo resolution using the AbSystemAdministration-MobilePhotoQuality parameter with a range is 15 - 100. The represents the percentage of possible camera resolution. For example, a value of 15 sets the camera photo quality to 15% of the possible camera resolution.

Note that high resolution images can result in:

  • application memory errors
  • increased sync times

Using the Camera Function in Demo Mode

For the purposes of development and demonstration, the camera function can be made to display mocked up images. This is necessary if you are demonstrating using a device such as Google Chrome which does not have a native camera such as the iPad.

You can display application specific images when the apps are running in demo mode on the browser.

By default the camera icon is only displayed on the form if the camera feature is available. This behavior can be overridden by setting the AbSystemAdministration-MobileAppsShowSampleCameraImages activity parameter to true.

The demo images are added to the ../src/Common/device-api.js file. The image data is added as base64 strings in the phoneGapStubData.appData array.