4.3 Adding and editing images

A form design may contain elements for adding images, such as photos and drawings.
On a phone or a tablet with a camera, running a Zegeba app, the element will have two buttons: [Capture] and [Select] – see picture below. [Capture] will open the camera so the user can take a photo and place it directly into the form. If the form is opened in a browser on a PC, phone or tablet, only the [Select] button will appear. This button will open up the gallery of pictures stores on the device, so you can enter this in the form.

After you have captured or selected an image fram these buttons it will be displayed in the form like this:

Press the [Open] button to open the image in full size:

From this Image Viewer you can right-click to Save the image in full size or Copy it so you can paste it somewhere else.

Press [Rotate] to rotate the image 90°. Continue pressing the button until the image is shown in teh direction you want.

Press [Clear] to remove the image from the form. The image will still be saved on your device/PC.

Editing images

You can edit an image after it has been added to the form. This means either to crop the image or – if the form designer has allowed it – to draw/type on the image.

Press [Edit] and then [Crop] to open the image in the Image Cropping window:

Drag the blue handles to define where the image should be cropped or type Width and Height values in the boxes on top. Press [Reset selection] to get the entire image again, or press [Confirm selection] when you are done.

If the form designer has allowed for drawing on this image, see Designing: 4.1 List of elements, you can press [Edit] and then [Draw] to open the image in the Image Draw window:

The toolbar in the upper left corner contains buttons for selecting (finger icon), drawing (pencil icon), erasing (eraser icon), figures (square icon), typing text (T icon), color (red icon), and Undo and Redo (arrow icons). When you select a drawing, figure or text you have added, the toolbar will also have a Delete option (bin icon). Below the toolbar are boxes for selecting size and – for text – font and character formatting (bold, italics, underline).

When you select a drawing, figure or text object, there will be handles for moving, resizing or rotating the object. In the picture below we have used the handle to the middle right hand side of the yellow arrow to rotate it.

Press [Save] to save this edit of the image in the form. Note that the original image will still be saved on your device – the edit is done on a copy of the original image.