Navigation

Page Contents

Widgets Menu

Image Widgets

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

Table of Contents

Adding an Image

This object is created with elm_image_add(). 

Evas_Object *image = elm_image_add(parent);

Configuring Image Widget

Various properties of the image can be tuned. First, we 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);

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 we rotate our image 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 we want to keep the original aspect ration when resizing the image, we 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 fit the entire object
elm_image_fill_outside_set(image, EINA_TRUE);

In this configuration, part of the image may 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 widget emits the signals below:

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

Here is how 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
static void
_clicked_cb(void *data, Evas_Object *obj, void *event_info)
{
   printf("Image clicked\n");
}

An Image Example

Widgets Menu