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.

For more information, see the Image API.

Figure: Image component

Figure: Image hierarchy

Adding an Image Component

To create an image component, use the elm_image_add() function:

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

Configuring the Image Component

To configure the image component:

• Disable 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);
  

• Use the smooth scaling algorithm to provide a better quality image. It is slower than the default algorithm.

  elm_image_smooth_set(image, EINA_TRUE);
  

• Preload 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.

  elm_image_preload_disabled_set(image, EINA_TRUE);
  

• Rotate or flip the image. In the following example, 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

• To keep the original aspect ratio when resizing the image, 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 the elm_image_fill_outside_set() function is set to EINA_FALSE, the image stays inside the limits of the parent object.

• Execute an animation with the elm_image_animated_set() and elm_image_animated_play_set() functions. The flag must be set to EINA_TRUE on both functions.

  // Check whether an image object supports animation
  elm_image_animated_available_get(image);
  
  // Set whether an image object is to animate itself
  // To play or stop is decided by elm_image_animated_play_set() 
  elm_image_animated_set(image, EINA_TRUE);
  
  // Control to animate. EINA_TRUE is for being animated, EINA_FALSE otherwise
  elm_image_animated_play_set(image, EINA_TRUE);
  

  The following example shows how to use the functions together:

  if (elm_image_animated_available_get(image))
  {
     elm_image_animated_set(image, EINA_TRUE);
     elm_image_animated_play_set(image, EINA_TRUE);
  }
  

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 parameter 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");
}

Note
Except as noted, this content is licensed under LGPLv2.1+.