LVGL 显示图片

news2024/11/17 9:57:43

LVGL 显示图片

LVGL显示图片
1. 显示图片文件
2. 显示C数组格式
3. 显示RAM中的图像文件
4. 图像符号显示
5. 显示GIF动画
LVGL显示图片代码分析

LVGL显示图片

lvgl 8.3版本默认支持PNG,BMP,JPG,SJPG和GIF动图等格式的图片显示；
需要在lv_conf.h配置文件里使能对应图片的支持：
在这里插入图片描述

1. 显示图片文件

lv_obj_t *img= lv_img_create(lv_scr_act()); // 创建img对象
lv_img_set_src(img, "S:/images/1.jpg"); // 设置图像数据源，文件类型可以是：1.jpg, 1.sjpg, 1.png, 1.bmp
lv_obj_align(obj, LV_ALIGN_CENTER, 0, 0);  // 居中显示

2. 显示C数组格式

需要先使用LV_IMG_DECLARE(xxx) 声明要lv_img_dsc_t 类型的图像结构

	// 通过在线工具转换的图片数据
	const uint8_t img_lvgl_logo_map[] = {
	  /*Pixel format: Blue: 2 bit, Green: 3 bit, Red: 3 bit, Alpha 8 bit */
	  0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xdb,
		.......
	};	
	
	const lv_img_dsc_t img_lvgl_logo = {
	  .header.always_zero = 0,
	  .header.w = 42,
	  .header.h = 43,
	  .data_size = 1806 * LV_IMG_PX_SIZE_ALPHA_BYTE,
	  .header.cf = LV_IMG_CF_TRUE_COLOR_ALPHA,
	  .data = img_lvgl_logo_map,
	};

	LV_IMG_DECLARE(img_lvgl_logo);
	lv_img_set_src(obj, &img_lvgl_logo);

3. 显示RAM中的图像文件

	// 从TF卡读取jpeg图片到内存，再通过内存加载图片
	uint8_t *message_buf = NULL;
    message_buf = malloc(20*1024);
    if (message_buf == NULL) {
        log_e("message_buf malloc error\n");
    }
	
	lv_obj_t * img_play = lv_img_create(lv_scr_act());	
	lv_obj_set_pos(img_play, 0, 0);
	// lv_obj_set_size(img_play, 240, 240);

    FIL fp;
	unsigned int readLen;
	if (f_open(&fp, "images/11.jpg",   FA_READ) != FR_OK)
	{
		log_e("open images/11.jpg error\n");
	} else {
		log_d("open images/11.jpg success\n");
		f_read(&fp, message_buf, RECEIVE_BUF_LEN, &readLen);
		f_close(&fp);        
	}

    lv_img_dsc_t img_dsc;
    img_dsc.header.cf = 0;
    img_dsc.header.always_zero = 0;
    img_dsc.header.w = 0;
    img_dsc.header.h = 0;
    img_dsc.data_size = readLen;	// 读取的图片文件数据长度
    img_dsc.data = message_buf; 	// 读取的图片文件数据
    lv_img_set_src(img_play, &img_dsc);	// 设置图片数据源

4. 图像符号显示

	// lv_symbol_def.h
    lv_obj_t *obj = lv_img_create(lv_scr_act());
    lv_img_set_src(obj, LV_SYMBOL_OK);
    
    // lv_img_set_src(img, LV_SYMBOL_DUMMY "Some text"); //

5. 显示GIF动画

	// GIF动画
	lv_obj_t *gif = lv_gif_create(lv_scr_act());
	lv_gif_set_src(gif, "S:/images/1.gif");
	// lv_gif_restart(gif); // 重新播放GIF

LVGL显示图片代码分析

void lv_img_set_src(lv_obj_t * obj, const void * src) 设置图片数据源
在这里插入图片描述

void lv_img_set_src(lv_obj_t * obj, const void * src)函数 lv_img_decoder_get_info(src, &header);