LVGL笔记(2)-电子相册（windows模拟和ESP32-S3）

本例子整合了韦山东老师的文件浏览器和网友的电子相册，实现可以浏览文件和浏览jpg图片的功能。
1.韦山东老师的文件浏览器， gitee仓库；
2.网友的电子相册， github仓库。

1.功能介绍

本例子实现了2个界面（文件浏览和图片浏览）的切换。一开始进入文件浏览，当点击到jpg文件时，隐藏文件浏览界面，显示jpg图片。图片浏览界面有左、中、右3个按键，中间键为退出，退出时隐藏图片浏览界面，显示文件浏览界面。

电子相册

2.切换界面

在 main 函数中，同时初始化2个界面，图片浏览界面设置为隐藏属性。

    lv_100ask_file_explorer_simple_test();
    ui_albumpage_screen_init(lv_scr_act());

    lv_obj_add_flag(ui_albumpage, LV_OBJ_FLAG_HIDDEN);

2.1 切换到图片浏览界面

在浏览文件过程中，如果点击的时图片名，就隐藏文件浏览界面，显示图片浏览界面。

static void file_explorer_simple_test_event_handler(lv_event_t * e)
{
  ......

        if((strcmp((sel_fn + (strlen(sel_fn) - 4)) , ".jpg") == 0) || (strcmp((sel_fn + (strlen(sel_fn) - 4)) , ".JPG") == 0)){
        	lv_obj_add_flag(file_explorer, LV_OBJ_FLAG_HIDDEN); //  隐藏文件浏览界面

        	lv_obj_clear_flag(ui_albumpage, LV_OBJ_FLAG_HIDDEN);//  显示图片界面，更新图片
            sprintf(g_fullPath,"%s/%s",g_curPath,sel_fn);
            printf("fullPath:%s,total:%d",g_fullPath,imgs_total_nums);
            g_curImg_p = findImgListByName(sel_fn);
            lv_img_set_src(ui_Image1, g_fullPath);
        }
    }
}

2.2 切换到文件浏览界面

点击图片浏览界面的退出键，隐藏图片浏览界面，显示文件浏览界面。退出键的回调函数：

static void ui_event_btnswitch(lv_event_t *e)
{
    lv_event_code_t event = lv_event_get_code(e);
    lv_obj_t * ta = lv_event_get_target(e);
    if(event == LV_EVENT_CLICKED) {
		extern      lv_obj_t * file_explorer;
		//	隐藏图片浏览界面
        lv_obj_add_flag(ui_albumpage, LV_OBJ_FLAG_HIDDEN);
		//	显示文件浏览界面
        lv_obj_clear_flag(file_explorer, LV_OBJ_FLAG_HIDDEN);
    }
}

3.生成图片文件名的双向链表

进入文件夹时，会产生一个当前目录下的jpg文件名链表，这个链表的结构如下：

typedef		struct {
	int index;	//	在链表中的序号(索引)，和图片总数结合，显示当前图片是第几张
	char name[48-4];
}img_tag;
typedef		struct{
	img_tag		img_info;	
    unsigned char * head;
    unsigned char * tail;
}ll_jmg_t;

在遍历文件夹里面的内容时，把jpg文件加入链表中：

/***********************
*函数名：show_dir
*描  述：显示当前目录下的文件夹及文件
*        附带功能：生成jpg文件列表
                1.清空列表
                2.初始化列表
                3.逐项加入列表
                4.产生当前目录和jpg文件数量的全局变量
***********************/
static void show_dir(lv_obj_t * obj, char * path)
{
......
        // 识别并展示文件
        if ((strcmp((fn + (strlen(fn) - 4)) , ".jpg") == 0) || (strcmp((fn + (strlen(fn) - 4)) , ".JPG") == 0) )
        {
            
            lv_table_set_cell_value_fmt(explorer->file_list, index, 0, LV_SYMBOL_IMAGE "  %s", fn);
        //  是文件，要把文件加入列表中
            tempact = _lv_ll_ins_tail(&ll_test);
            memcpy(tempact->name,fn,strlen(fn)+1);
            imgs_total_nums++;
            tempact->index = imgs_total_nums;
            LV_LOG_USER("this is file:%s",fn);
        }
.....
}        

4.切换图片

图片浏览界面的左右按键，回调函数如下：

static void ui_event_btnleft(lv_event_t * e)
{
    lv_event_code_t event = lv_event_get_code(e);
    lv_obj_t * ta = lv_event_get_target(e);
    if(event == LV_EVENT_CLICKED) {
        imganmitoleft();
    }
}
void imganmitoleft()
{
    //  如果不是第一个，指向前一个指针
    if(g_curImg_p->index > 1 ){
        g_curImg_p = _lv_ll_get_prev(&ll_test, g_curImg_p);
        sprintf(g_fullPath,"%s/%s",g_curPath,g_curImg_p->name);
                printf(g_fullPath);
        lv_img_set_src(ui_Image1, g_fullPath);
        //  显示图片的总数和索引
        sprintf(g_fullPath,"%d/%d,exit",g_curImg_p->index,imgs_total_nums);
        lv_label_set_text(ui_Labbtnswitch, g_fullPath);
    }
}

static void ui_event_btnright(lv_event_t * e)
{
    lv_event_code_t event = lv_event_get_code(e);
    lv_obj_t * ta = lv_event_get_target(e);
    if(event == LV_EVENT_CLICKED) {
        imganmitoright();
    }
}
void imganmitoright()
{
    //  如果不是最后一个，指向后一个指针
    if(g_curImg_p->index < imgs_total_nums ){
        g_curImg_p = _lv_ll_get_next(&ll_test, g_curImg_p);
        sprintf(g_fullPath,"%s/%s",g_curPath,g_curImg_p->name);
                printf(g_fullPath);
        lv_img_set_src(ui_Image1, g_fullPath);
        //  显示图片的总数和索引
        sprintf(g_fullPath,"%d/%d,exit",g_curImg_p->index,imgs_total_nums);
        lv_label_set_text(ui_Labbtnswitch, g_fullPath);
    }
}

5.工程源码

【测试代码工程】是在韦东山老师的开源工程上改动的。本例子在工程中的位置：

6.移植到esp32-s3，480x800,4.3寸屏效果(软硬件开源)

esp电子相册-15

源码：gitee
硬件介绍：
LVGL笔记(4)-PCB硬件:esp32-S3,并口8bit,4.3寸480x800LCD(FPC4301MS)