Mobile native

Image

This feature is supported in mobile applications only.

The image component can load and display an image from a disk file or a memory region.

Figure: Image component

Image component

Figure: Image hierarchy

Image hierarchy

Adding an Image Component

This object is created with elm_image_add().

Evas_Object *image, *parent;
image = elm_image_add(parent);

Configuring the Image Component

Various properties of the image can be tuned. First, you can disable the elementary scaling so that the image does not scale but resizes on both directions.

elm_image_no_scale_set(image, EINA_TRUE);
elm_image_resizable_set(image, EINA_TRUE, EINA_TRUE);

When scaling images, the smooth scaling algorithm can be used. It provides a better quality image but is slower than the default algorithm.

elm_image_smooth_set(image, EINA_TRUE);

Preloading is used to load images without blocking the user interface. This preserves the reactivity of the user experience. The image is loaded in a thread. It can be disabled if desired.

elm_image_preload_disabled_set(image, EINA_TRUE);

The image can be rotated or flipped. Here the image is rotated 180 degrees.

elm_image_orient_set(image, ELM_IMAGE_ROTATE_180);

The following orientations are available:

  • ELM_IMAGE_ORIENT_0: No orientation change
  • ELM_IMAGE_ROTATE_90: Rotate the image 90 degrees clockwise
  • ELM_IMAGE_ROTATE_180: Rotate the image 180 degrees clockwise
  • ELM_IMAGE_ROTATE_270: Rotate the image 90 degrees counter-clockwise
  • ELM_IMAGE_FLIP_HORIZONTAL: Flip the image horizontally
  • ELM_IMAGE_FLIP_VERTICAL: Flip the image vertically
  • ELM_IMAGE_FLIP_TRANSPOSE: Flip the image along the bottom-left to top-right line
  • ELM_IMAGE_FLIP_TRANSVERSE: Flip the image along the top-left to bottom-right line

If you want to keep the original aspect ration when resizing the image, you must define how the image fits into the object's area.

// Tell the image to keep original aspect ratio 
elm_image_aspect_fixed_set(image, EINA_TRUE);
// Then let the image fill the entire object 
elm_image_fill_outside_set(image, EINA_TRUE);

In this configuration, part of the image can go outside the object. If elm_image_fill_outside_set is set to EINA_FALSE, the image stays inside the limits of the parent object.

Using Image Callbacks

The image component emits the following signals:

  • drop: The user drops an image typed object onto the object in question - the event info argument is the path to that image file
  • clicked: The user clicks the image. event_info is NULL.

To register a callback when a user clicks on the image:

{
   evas_object_smart_callback_add(image, "clicked", clicked_cb, data);
}

// Callback function for the "clicked" signal
// This callback is called when the image is clicked
void clicked_cb(void *data, Evas_Object *obj, void *event_info)
{
   dlog_print(DLOG_INFO, LOG_TAG, "Image clicked\n");
}
Go to top