Edje Image Part

An "image" part type is one of the most featureful types of the Edje libraries and make possible to display any image file type supported by Evas in an interface.

part {
  name: "part_name";
  type:  IMAGE;

  description {
    state:  "default" INDEX;

    image {
    }

    fill {
    }
    
    rel1 {
    }
    
    rel2 {
    }

  }
}

Image

image {
  normal: "filename.ext";
  tween:  "filename.ext";
  border:  left right top bottom;
  middle:  0-1;
}

The image block contains information about the image files that the part is going to display.

normal: "filename.ext";
Name of image to be used as previously declared in the images block. In an animation, this is the first and last image displayed. It's required in any image part

tween: "filename.ext";
Name of an image to be used in an animation loop, an image block can have none, one or multiple tween declarations. Images are displayed in the order they are listed. See also: Edje Animations.

border: left right top bottom;
If set, the area (in pixels) of each side of the image will be displayed as a fixed size border, from the side -> inwards, preventing the corners from being changed on a resize.

middle: 0-1;
If border is set, this boolean value tells Edje if the rest of the image (not covered by the defined border) will be displayed or not. The default value is 1.

Fill

fill {
  smooth: 0-1;

  origin {
    relative: X-axis Y-axis;
    offset:   X-axis Y-axis;
  }

  size {
    relative: width  height;
    offset:   width  height;
  }
} 

The fill block is optional and it sets the way an image is going to be displayed inside it's container.

By default, the image will be stretched to occupy the whole container, but when used, the fill block allows the designer to create a tile of a given image.

smooth: 0-1;
The smooth property takes a boolean value to decide if the image will be smoothed on scaling (1) or not (0). The default value is 1.

origin

Origin effects

origin {
  relative: X-axis Y-axis;
  offset:   X-axis Y-axis;
}

The origin block is used to place the starting point, inside the image, that will be used to render the tile, by default, the origin is set at the image left-up corner.

relative: X-axis Y-axis;
Sets the point inside the image using the relative positioning system but relative to the image itself.

offset: X-axis Y-axis;
Allows to move the starting point a fixed number of pixels along both axis, unlike the relative positioning system offset, a positive number moves it left/up, and a negative number right/down.

size

Size Effects

size {
  relative: width  height;
  offset:   width  height;
}

This block defines the size of the tile relatively to the size of the image container, by default, the size is the 100% of the image.

relative: width height;
Takes a pair of decimal values to decide the size of the tile based on a percentual value relative to the original size of the image.
For example, 0.5 is 50% of the image size and 2.0 is 200% of the image size. The default value is "1.0 1.0".

offset: width height;
Takes two integers to change the size a fixed amount of pixels. The default value is "0 0".

Tips

Visibility and Events

Invisible parts don't receive mouse events, but in some cases a image part that's used to retrieve events might need turn invisible while retaining this capability.

part {
  name: "part_name";
  type:  IMAGE;
  
  description {
    state:  "default" 0.0;
    visible: 1;
  }

  description {
    inherit: "default" 0.0;
    state:   "invisible" 0.0;
    color:    0 0 0 0;
  }
}

Defining an invisible color property inside the description where the image turns invisible allows this to happen. Keep in mind, that if the alpha channel is greater than 0 a rect will be displayed instead of the image.

Note: For the sake of clarity some required image properties have been omitted in this example.