Images¶

An image can be a file or a variable which stores the bitmap itself and some metadata.

Store images¶

You can store images in two places

as a variable in internal memory (RAM or ROM)
as a file

Variables¶

Images stored internally in a variable are composed mainly of an lv_img_dsc_t structure with the following fields:

header
- cf Color format. See below
- w width in pixels (<= 2048)
- h height in pixels (<= 2048)
- always zero 3 bits which need to be always zero
- reserved reserved for future use
data pointer to an array where the image itself is stored
data_size length of data in bytes

These are usually stored within a project as C files. They are linked into the resulting executable like any other constant data.

Files¶

To deal with files you need to add a storage Drive to LVGL. In short, a Drive is a collection of functions (open, read, close, etc.) registered in LVGL to make file operations. You can add an interface to a standard file system (FAT32 on SD card) or you create your simple file system to read data from an SPI Flash memory. In every case, a Drive is just an abstraction to read and/or write data to memory. See the File system section to learn more.

Images stored as files are not linked into the resulting executable, and must be read into RAM before being drawn. As a result, they are not as resource-friendly as images linked at compile time. However, they are easier to replace without needing to rebuild the main program.

Color formats¶

Various built-in color formats are supported:

LV_IMG_CF_TRUE_COLOR Simply stores the RGB colors (in whatever color depth LVGL is configured for).
LV_IMG_CF_TRUE_COLOR_ALPHA Like LV_IMG_CF_TRUE_COLOR but it also adds an alpha (transparency) byte for every pixel.
LV_IMG_CF_TRUE_COLOR_CHROMA_KEYED Like LV_IMG_CF_TRUE_COLOR but if a pixel has the LV_COLOR_TRANSP color (set in lv_conf.h) it will be transparent.
LV_IMG_CF_INDEXED_1/2/4/8BIT Uses a palette with 2, 4, 16 or 256 colors and stores each pixel in 1, 2, 4 or 8 bits.
LV_IMG_CF_ALPHA_1/2/4/8BIT Only stores the Alpha value with 1, 2, 4 or 8 bits. The pixels take the color of style.img_recolor and the set opacity. The source image has to be an alpha channel. This is ideal for bitmaps similar to fonts where the whole image is one color that can be altered.

The bytes of LV_IMG_CF_TRUE_COLOR images are stored in the following order.

For 32-bit color depth:

Byte 0: Blue
Byte 1: Green
Byte 2: Red
Byte 3: Alpha

For 16-bit color depth:

Byte 0: Green 3 lower bit, Blue 5 bit
Byte 1: Red 5 bit, Green 3 higher bit
Byte 2: Alpha byte (only with LV_IMG_CF_TRUE_COLOR_ALPHA)

For 8-bit color depth:

Byte 0: Red 3 bit, Green 3 bit, Blue 2 bit
Byte 2: Alpha byte (only with LV_IMG_CF_TRUE_COLOR_ALPHA)

You can store images in a Raw format to indicate that it's not encoded with one of the built-in color formats and an external Image decoder needs to be used to decode the image.

LV_IMG_CF_RAW Indicates a basic raw image (e.g. a PNG or JPG image).
LV_IMG_CF_RAW_ALPHA Indicates that an image has alpha and an alpha byte is added for every pixel.
LV_IMG_CF_RAW_CHROMA_KEYED Indicates that an image is chroma-keyed as described in LV_IMG_CF_TRUE_COLOR_CHROMA_KEYED above.

Add and use images¶

You can add images to LVGL in two ways:

using the online converter
manually create images

Online converter¶

The online Image converter is available here: https://lvgl.io/tools/imageconverter

Adding an image to LVGL via the online converter is easy.

You need to select a BMP, PNG or JPG image first.
Give the image a name that will be used within LVGL.
Select the Color format.
Select the type of image you want. Choosing a binary will generate a .bin file that must be stored separately and read using the file support. Choosing a variable will generate a standard C file that can be linked into your project.
Hit the Convert button. Once the conversion is finished, your browser will automatically download the resulting file.

In the generated C arrays (variables), bitmaps for all the color depths (1, 8, 16 or 32) are included in the C file, but only the color depth that matches LV_COLOR_DEPTH in lv_conf.h will actually be linked into the resulting executable.

In the case of binary files, you need to specify the color format you want:

RGB332 for 8-bit color depth
RGB565 for 16-bit color depth
RGB565 Swap for 16-bit color depth (two bytes are swapped)
RGB888 for 32-bit color depth

Manually create an image¶

If you are generating an image at run-time, you can craft an image variable to display it using LVGL. For example:

uint8_t my_img_data[] = {0x00, 0x01, 0x02, ...};

static lv_img_dsc_t my_img_dsc = {
    .header.always_zero = 0,
    .header.w = 80,
    .header.h = 60,
    .data_size = 80 * 60 * LV_COLOR_DEPTH / 8,
    .header.cf = LV_IMG_CF_TRUE_COLOR,          /*Set the color format*/
    .data = my_img_data,
};

If the color format is LV_IMG_CF_TRUE_COLOR_ALPHA you can set data_size like 80 * 60 * LV_IMG_PX_SIZE_ALPHA_BYTE.

Another (possibly simpler) option to create and display an image at run-time is to use the Canvas object.

Use images¶

The simplest way to use an image in LVGL is to display it with an lv_img object:

lv_obj_t * icon = lv_img_create(lv_scr_act(), NULL);

/*From variable*/
lv_img_set_src(icon, &my_icon_dsc);

/*From file*/
lv_img_set_src(icon, "S:my_icon.bin");

If the image was converted with the online converter, you should use LV_IMG_DECLARE(my_icon_dsc) to declare the image in the file where you want to use it.

Image decoder¶

As you can see in the Color formats section, LVGL supports several built-in image formats. In many cases, these will be all you need. LVGL doesn't directly support, however, generic image formats like PNG or JPG.

To handle non-built-in image formats, you need to use external libraries and attach them to LVGL via the Image decoder interface.

An image decoder consists of 4 callbacks:

info get some basic info about the image (width, height and color format).
open open an image: either store a decoded image or set it to NULL to indicate the image can be read line-by-line.
read if open didn't fully open an image this function should give some decoded data (max 1 line) from a given position.
close close an opened image, free the allocated resources.

You can add any number of image decoders. When an image needs to be drawn, the library will try all the registered image decoders until it finds one which can open the image, i.e. one which knows that format.

The LV_IMG_CF_TRUE_COLOR_..., LV_IMG_INDEXED_... and LV_IMG_ALPHA_... formats (essentially, all non-RAW formats) are understood by the built-in decoder.

Custom image formats¶

The easiest way to create a custom image is to use the online image converter and select Raw, Raw with alpha or Raw with chroma-keyed format. It will just take every byte of the binary file you uploaded and write it as an image "bitmap". You then need to attach an image decoder that will parse that bitmap and generate the real, renderable bitmap.

header.cf will be LV_IMG_CF_RAW, LV_IMG_CF_RAW_ALPHA or LV_IMG_CF_RAW_CHROMA_KEYED accordingly. You should choose the correct format according to your needs: a fully opaque image, using an alpha channel or using a chroma key.

After decoding, the raw formats are considered True color by the library. In other words, the image decoder must decode the Raw images to True color according to the format described in the Color formats section.

If you want to create a custom image, you should use LV_IMG_CF_USER_ENCODED_0..7 color formats. However, the library can draw images only in True color format (or Raw but ultimately it will be in True color format). The LV_IMG_CF_USER_ENCODED_... formats are not known by the library and therefore they should be decoded to one of the known formats from the Color formats section. It's possible to decode an image to a non-true color format first (for example: LV_IMG_INDEXED_4BITS) and then call the built-in decoder functions to convert it to True color.

With User encoded formats, the color format in the open function (dsc->header.cf) should be changed according to the new format.

Register an image decoder¶

Here's an example of getting LVGL to work with PNG images.

First, you need to create a new image decoder and set some functions to open/close the PNG files. It should look like this:

/*Create a new decoder and register functions */
lv_img_decoder_t * dec = lv_img_decoder_create();
lv_img_decoder_set_info_cb(dec, decoder_info);
lv_img_decoder_set_open_cb(dec, decoder_open);
lv_img_decoder_set_close_cb(dec, decoder_close);


/**
 * Get info about a PNG image
 * @param decoder pointer to the decoder where this function belongs
 * @param src can be file name or pointer to a C array
 * @param header store the info here
 * @return LV_RES_OK: no error; LV_RES_INV: can't get the info
 */
static lv_res_t decoder_info(lv_img_decoder_t * decoder, const void * src, lv_img_header_t * header)
{
  /*Check whether the type `src` is known by the decoder*/
  if(is_png(src) == false) return LV_RES_INV;

  /* Read the PNG header and find `width` and `height` */
  ...

  header->cf = LV_IMG_CF_RAW_ALPHA;
  header->w = width;
  header->h = height;
}

/**
 * Open a PNG image and return the decided image
 * @param decoder pointer to the decoder where this function belongs
 * @param dsc pointer to a descriptor which describes this decoding session
 * @return LV_RES_OK: no error; LV_RES_INV: can't get the info
 */
static lv_res_t decoder_open(lv_img_decoder_t * decoder, lv_img_decoder_dsc_t * dsc)
{

  /*Check whether the type `src` is known by the decoder*/
  if(is_png(src) == false) return LV_RES_INV;

  /*Decode and store the image. If `dsc->img_data` is `NULL`, the `read_line` function will be called to get the image data line-by-line*/
  dsc->img_data = my_png_decoder(src);

  /*Change the color format if required. For PNG usually 'Raw' is fine*/
  dsc->header.cf = LV_IMG_CF_...

  /*Call a built in decoder function if required. It's not required if`my_png_decoder` opened the image in true color format.*/
  lv_res_t res = lv_img_decoder_built_in_open(decoder, dsc);

  return res;
}

/**
 * Decode `len` pixels starting from the given `x`, `y` coordinates and store them in `buf`.
 * Required only if the "open" function can't open the whole decoded pixel array. (dsc->img_data == NULL)
 * @param decoder pointer to the decoder the function associated with
 * @param dsc pointer to decoder descriptor
 * @param x start x coordinate
 * @param y start y coordinate
 * @param len number of pixels to decode
 * @param buf a buffer to store the decoded pixels
 * @return LV_RES_OK: ok; LV_RES_INV: failed
 */
lv_res_t decoder_built_in_read_line(lv_img_decoder_t * decoder, lv_img_decoder_dsc_t * dsc, lv_coord_t x,
                                                  lv_coord_t y, lv_coord_t len, uint8_t * buf)
{
   /*With PNG it's usually not required*/

   /*Copy `len` pixels from `x` and `y` coordinates in True color format to `buf` */

}

/**
 * Free the allocated resources
 * @param decoder pointer to the decoder where this function belongs
 * @param dsc pointer to a descriptor which describes this decoding session
 */
static void decoder_close(lv_img_decoder_t * decoder, lv_img_decoder_dsc_t * dsc)
{
  /*Free all allocated data*/

  /*Call the built-in close function if the built-in open/read_line was used*/
  lv_img_decoder_built_in_close(decoder, dsc);

}

So in summary:

In decoder_info, you should collect some basic information about the image and store it in header.
In decoder_open, you should try to open the image source pointed by dsc->src. Its type is already in dsc->src_type == LV_IMG_SRC_FILE/VARIABLE. If this format/type is not supported by the decoder, return LV_RES_INV. However, if you can open the image, a pointer to the decoded True color image should be set in dsc->img_data. If the format is known, but you don't want to decode the entire image (e.g. no memory for it), set dsc->img_data = NULL and use read_line to get the pixel data.
In decoder_close you should free all allocated resources.
decoder_read is optional. Decoding the whole image requires extra memory and some computational overhead. However, it can decode one line of the image without decoding the whole image, you can save memory and time. To indicate that the line read function should be used, set dsc->img_data = NULL in the open function.

Manually use an image decoder¶

LVGL will use registered image decoders automatically if you try and draw a raw image (i.e. using the lv_img object) but you can use them manually too. Create an lv_img_decoder_dsc_t variable to describe the decoding session and call lv_img_decoder_open().

The color parameter is used only with LV_IMG_CF_ALPHA_1/2/4/8BIT images to tell color of the image. frame_id can be used if the image to open is an animation.

lv_res_t res;
lv_img_decoder_dsc_t dsc;
res = lv_img_decoder_open(&dsc, &my_img_dsc, color, frame_id);

if(res == LV_RES_OK) {
  /*Do something with `dsc->img_data`*/
  lv_img_decoder_close(&dsc);
}

Image caching¶

Sometimes it takes a lot of time to open an image. Continuously decoding a PNG image or loading images from a slow external memory would be inefficient and detrimental to the user experience.

Therefore, LVGL caches a given number of images. Caching means some images will be left open, hence LVGL can quickly access them from dsc->img_data instead of needing to decode them again.

Of course, caching images is resource intensive as it uses more RAM to store the decoded image. LVGL tries to optimize the process as much as possible (see below), but you will still need to evaluate if this would be beneficial for your platform or not. Image caching may not be worth it if you have a deeply embedded target which decodes small images from a relatively fast storage medium.

Cache size¶

The number of cache entries can be defined with LV_IMG_CACHE_DEF_SIZE in lv_conf.h. The default value is 1 so only the most recently used image will be left open.

The size of the cache can be changed at run-time with lv_img_cache_set_size(entry_num).

Value of images¶

When you use more images than cache entries, LVGL can't cache all the images. Instead, the library will close one of the cached images to free space.

To decide which image to close, LVGL uses a measurement it previously made of how long it took to open the image. Cache entries that hold slower-to-open images are considered more valuable and are kept in the cache as long as possible.

If you want or need to override LVGL's measurement, you can manually set the time to open value in the decoder open function in dsc->time_to_open = time_ms to give a higher or lower value. (Leave it unchanged to let LVGL control it.)

Every cache entry has a "life" value. Every time an image is opened through the cache, the life value of all entries is decreased to make them older. When a cached image is used, its life value is increased by the time to open value to make it more alive.

If there is no more space in the cache, the entry with the lowest life value will be closed.

Memory usage¶

Note that a cached image might continuously consume memory. For example, if three PNG images are cached, they will consume memory while they are open.

Therefore, it's the user's responsibility to be sure there is enough RAM to cache even the largest images at the same time.

Clean the cache¶

Let's say you have loaded a PNG image into a lv_img_dsc_t my_png variable and use it in an lv_img object. If the image is already cached and you then change the underlying PNG file, you need to notify LVGL to cache the image again. Otherwise, there is no easy way of detecting that the underlying file changed and LVGL will still draw the old image from cache.

To do this, use lv_img_cache_invalidate_src(&my_png). If NULL is passed as a parameter, the whole cache will be cleaned.

API¶

Image buffer¶

Typedefs

typedef uint8_t lv_img_cf_t¶

Enums

enum [anonymous]¶

Values:

enumerator LV_IMG_CF_UNKNOWN¶

enumerator LV_IMG_CF_RAW¶: Contains the file as it is. Needs custom decoder function

enumerator LV_IMG_CF_RAW_ALPHA¶: Contains the file as it is. The image has alpha. Needs custom decoder function

enumerator LV_IMG_CF_RAW_CHROMA_KEYED¶: Contains the file as it is. The image is chroma keyed. Needs custom decoder function

enumerator LV_IMG_CF_TRUE_COLOR¶: Color format and depth should match with LV_COLOR settings

enumerator LV_IMG_CF_TRUE_COLOR_ALPHA¶: Same as LV_IMG_CF_TRUE_COLOR but every pixel has an alpha byte

enumerator LV_IMG_CF_TRUE_COLOR_CHROMA_KEYED¶: Same as LV_IMG_CF_TRUE_COLOR but LV_COLOR_TRANSP pixels will be transparent

enumerator LV_IMG_CF_INDEXED_1BIT¶: Can have 2 different colors in a palette (always chroma keyed)

enumerator LV_IMG_CF_INDEXED_2BIT¶: Can have 4 different colors in a palette (always chroma keyed)

enumerator LV_IMG_CF_INDEXED_4BIT¶: Can have 16 different colors in a palette (always chroma keyed)

enumerator LV_IMG_CF_INDEXED_8BIT¶: Can have 256 different colors in a palette (always chroma keyed)

enumerator LV_IMG_CF_ALPHA_1BIT¶: Can have one color and it can be drawn or not

enumerator LV_IMG_CF_ALPHA_2BIT¶: Can have one color but 4 different alpha value

enumerator LV_IMG_CF_ALPHA_4BIT¶: Can have one color but 16 different alpha value

enumerator LV_IMG_CF_ALPHA_8BIT¶: Can have one color but 256 different alpha value

enumerator LV_IMG_CF_RESERVED_15¶: Reserved for further use.

enumerator LV_IMG_CF_RESERVED_16¶: Reserved for further use.

enumerator LV_IMG_CF_RESERVED_17¶: Reserved for further use.

enumerator LV_IMG_CF_RESERVED_18¶: Reserved for further use.

enumerator LV_IMG_CF_RESERVED_19¶: Reserved for further use.

enumerator LV_IMG_CF_RESERVED_20¶: Reserved for further use.

enumerator LV_IMG_CF_RESERVED_21¶: Reserved for further use.

enumerator LV_IMG_CF_RESERVED_22¶: Reserved for further use.

enumerator LV_IMG_CF_RESERVED_23¶: Reserved for further use.

enumerator LV_IMG_CF_USER_ENCODED_0¶: User holder encoding format.

enumerator LV_IMG_CF_USER_ENCODED_1¶: User holder encoding format.

enumerator LV_IMG_CF_USER_ENCODED_2¶: User holder encoding format.

enumerator LV_IMG_CF_USER_ENCODED_3¶: User holder encoding format.

enumerator LV_IMG_CF_USER_ENCODED_4¶: User holder encoding format.

enumerator LV_IMG_CF_USER_ENCODED_5¶: User holder encoding format.

enumerator LV_IMG_CF_USER_ENCODED_6¶: User holder encoding format.

enumerator LV_IMG_CF_USER_ENCODED_7¶: User holder encoding format.

Functions

lv_img_dsc_t *lv_img_buf_alloc(lv_coord_t w, lv_coord_t h, lv_img_cf_t cf)¶

Allocate an image buffer in RAM

Parameters

w -- width of image
h -- height of image
cf -- a color format (LV_IMG_CF_...)

Returns

an allocated image, or NULL on failure

lv_color_t lv_img_buf_get_px_color(lv_img_dsc_t *dsc, lv_coord_t x, lv_coord_t y, lv_color_t color)¶

Get the color of an image's pixel

Parameters

dsc -- an image descriptor
x -- x coordinate of the point to get
y -- x coordinate of the point to get
color -- the color of the image. In case of LV_IMG_CF_ALPHA_1/2/4/8 this color is used. Not used in other cases.
safe -- true: check out of bounds

Returns

color of the point

lv_opa_t lv_img_buf_get_px_alpha(lv_img_dsc_t *dsc, lv_coord_t x, lv_coord_t y)¶

Get the alpha value of an image's pixel

Parameters

dsc -- pointer to an image descriptor
x -- x coordinate of the point to set
y -- x coordinate of the point to set
safe -- true: check out of bounds

Returns

alpha value of the point

void lv_img_buf_set_px_color(lv_img_dsc_t *dsc, lv_coord_t x, lv_coord_t y, lv_color_t c)¶

Set the color of a pixel of an image. The alpha channel won't be affected.

Parameters

dsc -- pointer to an image descriptor
x -- x coordinate of the point to set
y -- x coordinate of the point to set
c -- color of the point
safe -- true: check out of bounds

void lv_img_buf_set_px_alpha(lv_img_dsc_t *dsc, lv_coord_t x, lv_coord_t y, lv_opa_t opa)¶

Set the alpha value of a pixel of an image. The color won't be affected

Parameters

dsc -- pointer to an image descriptor
x -- x coordinate of the point to set
y -- x coordinate of the point to set
opa -- the desired opacity
safe -- true: check out of bounds

void lv_img_buf_set_palette(lv_img_dsc_t *dsc, uint8_t id, lv_color_t c)¶

Set the palette color of an indexed image. Valid only for LV_IMG_CF_INDEXED1/2/4/8

Parameters

dsc -- pointer to an image descriptor
id -- the palette color to set:
- for LV_IMG_CF_INDEXED1: 0..1
- for LV_IMG_CF_INDEXED2: 0..3
- for LV_IMG_CF_INDEXED4: 0..15
- for LV_IMG_CF_INDEXED8: 0..255
c -- the color to set

void lv_img_buf_free(lv_img_dsc_t *dsc)¶

Free an allocated image buffer

Parameters: dsc -- image buffer to free

uint32_t lv_img_buf_get_img_size(lv_coord_t w, lv_coord_t h, lv_img_cf_t cf)¶

Get the memory consumption of a raw bitmap, given color format and dimensions.

Parameters

w -- width
h -- height
cf -- color format

Returns

size in bytes

void _lv_img_buf_transform_init(lv_img_transform_dsc_t *dsc)¶

Initialize a descriptor to rotate an image

Parameters: dsc -- pointer to an lv_img_transform_dsc_t variable whose cfg field is initialized

bool _lv_img_buf_transform_anti_alias(lv_img_transform_dsc_t *dsc)¶

Continue transformation by taking the neighbors into account

Parameters: dsc -- pointer to the transformation descriptor

bool _lv_img_buf_transform(lv_img_transform_dsc_t *dsc, lv_coord_t x, lv_coord_t y)¶

Get which color and opa would come to a pixel if it were rotated

Note

the result is written back to dsc->res_color and dsc->res_opa

Parameters

dsc -- a descriptor initialized by lv_img_buf_rotate_init
x -- the coordinate which color and opa should be get
y -- the coordinate which color and opa should be get

Returns

true: there is valid pixel on these x/y coordinates; false: the rotated pixel was out of the image

void _lv_img_buf_get_transformed_area(lv_area_t *res, lv_coord_t w, lv_coord_t h, int16_t angle, uint16_t zoom, const lv_point_t *pivot)¶

Get the area of a rectangle if its rotated and scaled

Parameters

res -- store the coordinates here
w -- width of the rectangle to transform
h -- height of the rectangle to transform
angle -- angle of rotation
zoom -- zoom, (256 no zoom)
pivot -- x,y pivot coordinates of rotation

struct lv_img_header_t¶

#include <lv_img_buf.h>

The first 8 bit is very important to distinguish the different source types. For more info see lv_img_get_src_type() in lv_img.c On big endian systems the order is reversed so cf and always_zero must be at the end of the struct.

Public Members

uint32_t h¶

uint32_t w¶

uint32_t reserved¶

uint32_t always_zero¶

uint32_t cf¶

struct lv_img_header_t

#include <lv_img_buf.h>

The first 8 bit is very important to distinguish the different source types. For more info see lv_img_get_src_type() in lv_img.c On big endian systems the order is reversed so cf and always_zero must be at the end of the struct.

Public Members

uint32_t h

uint32_t w

uint32_t reserved

uint32_t always_zero

uint32_t cf

struct lv_img_dsc_t¶

#include <lv_img_buf.h>

Image header it is compatible with the result from image converter utility

Public Members

lv_img_header_t header¶: A header describing the basics of the image

uint32_t data_size¶: Size of the image in bytes

const uint8_t *data¶: Pointer to the data of the image

struct lv_img_transform_dsc_t¶

Public Members

const void *src¶

lv_coord_t src_w¶

lv_coord_t src_h¶

lv_coord_t pivot_x¶

lv_coord_t pivot_y¶

int16_t angle¶

uint16_t zoom¶

lv_color_t color¶

lv_img_cf_t cf¶

bool antialias¶

struct lv_img_transform_dsc_t::[anonymous] cfg¶

lv_opa_t opa¶

struct lv_img_transform_dsc_t::[anonymous] res¶

lv_img_dsc_t img_dsc¶

int32_t pivot_x_256¶

int32_t pivot_y_256¶

int32_t sinma¶

int32_t cosma¶

uint8_t chroma_keyed¶

uint8_t has_alpha¶

uint8_t native_color¶

uint32_t zoom_inv¶

lv_coord_t xs¶

lv_coord_t ys¶

lv_coord_t xs_int¶

lv_coord_t ys_int¶

uint32_t pxi¶

uint8_t px_size¶

struct lv_img_transform_dsc_t::[anonymous] tmp¶