Camera Element

The Camera Element adds a group of buttons used to capture or select an image that can be sent with the form. Once the image data is selected via the camera or the device's library (aka "gallery"), it is saved within the form data. When the form is submitted, the image data is sent in base64-encoded string format which can easily be decoded in a Template.

Camera Properties

These camera properties can be accessed after the element is added by right-clicking on the object.

General group:

Source: Use the drop-down to select what buttons are available in the element (see below)

Take: Only accept pictures taken from the camera. The gallery is unavailable.
Pick from Library: Only accept gallery pictures. The camera is unavailable.
Take or pick from library: Accept both taking pictures with the camera and loading them from the gallery.

Allow annotations: Check to allow SVG annotations to the image after it has been taken or selected.
Edit Images: Check to bring up the Crop & Edit dialog after the image has been taken or selected.

Image Options group:

Format: Select the image format: PNG or JPG.
Quality: Select the image quality, aka compression.
Scale Image: Check to enable image scaling. Then set the maximum width and height of images before they are sent to the server. Note that only the "smallest" of these is applied and the size ratio is always maintained.

Width: Enter the maximum image width.
Height: Enter the maximum image size.

The three controls added to the page are:

Take now: Click to open the device's default Camera application and take a picture using the device's camera. Capture OnTheGo has no impact on the device's applications, so the features available (quality, orientation, filters) are dependent on the device itself.
Library: Click to open the device's default library or gallery application, allowing the selection of a single image that is then saved in the form data. The accessible images and navigation depends on the device itself.
Clear: Click to remove any existing image data from the form.

Camera Element Properties:

ID: A unique identifier for the inserted element. Used for CSS selections as well as JavaScript expressions affecting single elements.
Class: One or more classes that can be common to more than one elements. Used for CSS selections and JavaScript expressions that can affect multiple elements.
Label: Enter the text that is displayed adjacent to the field, indicating to the expected information from the web page visitor.
Style: Defines how labels are added to input form elements:
- Wrap input with label: The label is wrapped around the element, such as <label>First Name <input type="text" name="first_name"></label>
- Attach label to input: The label is placed before the input, and refers to it: <label for="first_name">First Name</label> <input type="text" name="first_name">
- No label: The label value is ignored.
Insertion Point: Defines how new elements are inserted, by default:

At cursor position: The element is inserted where the cursor is located in the template.
Before element: The element is inserted before the current element where the cursor is located. For example if the cursor is within a paragraph, insertion occurs before the <p> tag.
After start tag: The element is inserted within the current element, at the beginning, just after the start tag.
Before end tag: The element is inserted within the current element, at the end, just before the end tag.
After element: The element is inserted after the current element where the cursor is located. For example if the cursor is within a paragraph, insertion occurs after the <p> tag.

Elements: Use the drop-down to select which element is used for the insertion location. The list displays every element in the breadcrumbs, from the current selection point until the root of the body.