Image Capture - Camera/Photo Library

Description

Capture an image using the camera, or from the photo library. On devices that don't support a camera, select an image from the filesystem. Action calls a function with the Image URI when the image has been obtained.

images/icc.png
The "Image Capture - Camera/Photo Library" action genie.

The Image Capture - Camera/Photo Library action is used with the UX component. This genie that appears when this action is selected allows you to set how you want to capture an image. On a device that has a camera, the image is captured using a camera. For devices that do not support a camera, you can choose an image from the filesystem. Camera access is either done using Cordova or HTML5. Once the image has been captured a Javascript event is fired.

The 'Image Capture - Camera/Photo Library' action allows you to specify some Javascript code to execute once the image has been acquired. Your Javascript code can reference:

  • e.data - the base64 encoded image data

  • e.fileSystemURL - (Cordova only) the native file system URL for the image.

Contrast this action with the 'Image Capture for List-Detail View - Camera/Photo Library' which also allows you to capture an image using the camera. This action however, is specifically for an Image control in a List View with a Detail View. The 'Image Capture - Camera/Photo Library' action simply returns the image data (base 64 encoded) and the native file URL (in the case where Cordova is being used). It is up to the developer to decide what to do with the base64 encoded data or file URL.

Adding Videos to the Image Capture Photo Library

The "Image Capture - Camera/Photo Library"" action allows the user to select videos from the Photo Library. This only works in a Cordova application. The Type property, shown in the image below, is visible if the Image capture method is set to "PhoneGap" and the Picture source property is set to "Photo Library".

images/vidlibact.png

Once the user has selected a video from the Photo Library, the Javascript defined in the "Javascript to execute when image has been captured" property is executed.

Your code can reference e.fileSystemURL, the filename of the video file. You could use this value to set the value of the VideoPlayer control so that the video can be played back, or you might want to upload the video to your server, or to Amazon S3. For example

{dialog.object}.setValue('myvideoplayer',e.fileSystemURL)

Image Capture Properties

Javascript to execute when image has been captured

Specify the Javascript to call once the image has been captured. Your Javascript can reference e.data. In the case

Image capture method

Specify the method for obtaining the image. If the component is running in a Cordova shell, then you can use Cordova to access the camera (if you are not in a Cordova shell, the user will get an error if they try to capture an image). If you select 'PhoneGapPreferred' then the PhoneGap method will be used if the component is running in a Cordova shell, otherwise the HTML5 method will be used.

Move file to permanent storage after capture

This property appears if the Image capture method is set to PhoneGap or PhoneGapPreferred. When an image file is captured using the PhoneGap the captured file is placed in a temporary storage location that could be cleared when the app is terminated. Therefore, it is advisable to move the file to a permanent location.

File system part2

This property appears if the Image capture method is set to PhoneGap or PhoneGapPreferred and is used with iOS. The 'public' option is the application's 'Documents directory', accessible in iTunes file sharing and backed up to the iCloud. The 'private' option relates to the application's private persisted data, which is deleted when the application is uninstalled. The 'saved' option is similar to 'private', but is backed up to iTunes.

Folder2

Specify the folder in the file system where the file should be stored.

HTML5 Options

Resize image

Specify the policy for resizing the image. The 'Always' option will cause the image to always be resized, regardless of its raw size. The 'Only If Image Exceeds Max Size' setting will cause the image to be resized only if the raw image size is greater than the maximum image size.

Image compression

Specify the image compression factor to use when capturing an image using HTML5. When set to '1' there will be no compression. For maximum compression use '0'.

Max image height

Specify the maximum image height (in pixels).

Max image width

Specify the maximum image width (in pixels).

images/iccpg.png
PhoneGap property settings for the Image Capture-Camera-Photo Library

PhoneGap Options

Maximum image size (bytes)

Specify the maximum image size (in bytes) that can be captured. Set to -1 for no limit (NOT RECOMMENDED)

Picture source

Specify if the image should be captured by using the camera to take a picture, or if the user should select the image from the Photo Library on the device.

Save picture to photo album

When enabled, the image is saved to the device's photo library.

Image quality

Specify the image quality when using Cordova.

Allow picture editing after capture

Can the user edit the picture after capturing it?

Max image height

Specify the maximum image height (in pixels).

Max image width

Specify the maximum image width (in pixels).

PhoneGap Message Customization

Image selection canceled message

By default this reads 'Image Selection Canceled'

Image selection message close button

The default text reads 'Done'.

Camera canceled message

The default message is 'Camera Action Canceled'

Camera canceled message close button

The default text reads 'Done'.

Client-side events

Before image capture

Specify the Javascript to run before the image is captured. If your code contains 'return false;' then the image capture is cancelled.

images/icc2.png
Capturing an Image

Use an 'Image Capture-Camera-Photo Library' Action to Add an Image to a Component

  1. In the UX Builder on the Controls page open the 'Other Controls' menu. Click on the [Static Text] option to add a Static Text control to the component.

    images/icc3.png
  2. [Highlight the Static Text control. In the properties list on the right set the 'Static text' property to be the following:

    <img id="image1" />
    images/icc4.png
  3. In the Other Controls menu click on the [Button] option to add a button to the component.

    images/icc5.png
  4. The controls tree should look like this:

    images/iccshow.png
  5. Highlight the button. Scroll down the button's properties list on the right. In the 'Javascript - (Touch, Mouse, Pointer Events)' section click the [...] button next to the 'click' property.

    images/icc6.png
  6. In the 'Edit Click Event' dialog leave the radio button set to 'Action Javascript' and click the 'Add New Action' button.

    images/icc7.png
  7. In the 'Action Javascript - Select an Action' dialog, go to the Filter list and enter 'image'. Select the 'Image Capture - Camera/Photo Library' action and click OK.

    images/icc8.png
  8. In the 'Image Capture Properties' dialog click the [...] button next to the 'Javascript to execute when image has been captured' property.

    images/icc9.png
  9. Add the following line of code to the onImageCapture event.

    $('image1').src = e.data;
    images/icc10.png
  10. Click OK, OK, and Save. Run the Component in Live Preview.

    images/icc11.png
  11. Click the Button you defined. The Image Capture-Camera-Photo Library action will prompt you to open an image on your computer. Open an image.

    images/icc2.png
  12. The image should automatically be displayed in the Static Text control.

    images/icc12.png

See Also