App:Library:LVGL:docs:Overview:Images

https://docs.lvgl.io/8.2/overview/style.html

英文	自動翻訳

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.

1. You need to select a BMP, PNG or JPG image first.
2. Give the image a name that will be used within LVGL.
3. Select the Color format.
4. 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.
5. 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

戻る : Previous