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)
