学习笔记ESP32——lvgl模拟器

 文章中的工程 阿里云盘 https://www.aliyundrive.com/s/Zfuc6FZYiAB

一、lvgl模拟器获取

在GitHub上搜索lvgl

用VSstudio打开模拟器

 安装VSstudio时，勾选一下插件

二、文件系统配置

在lv_conf文件内，将模拟器色深配置为16位

 设置文件系统open的文件夹，新建一个lvgl_path文件夹在LVGL.Simulator下

  ctrl左键跳转过去是空的“”，在里面加上刚刚新建文件夹的名字

 设置盘符为'/'

在lv_conf开启gif和png

 在lvgl_path里放入自己的gif，并修改路径

 最后，在主函数里把默认展示的注释掉

 放入刚刚修改的gif函数

记得修改成x86，然后本地编译器编译

编译成功

 三、生成字库

增加外部/内部中文字库

1、生成部分字库

下载下来字体文件，先点击安装

 选择刚刚安装的字体

 输入要生成的部分字库内容        包含这个头文件

#include "lvgl_porting/lvgl_mount_cus_font.h"

 新建文件夹——保存在工程里

lv_port_pc_visual_studio\LVGL.Simulator\lvgl_porting\lvgl_fonts

2、生成全字库

选择4.0来生成全字库

插入全部图标，加入常用汉字，选择字体，选择配置

输入包含里，包含这个头文件

#include "lvgl_porting/lvgl_mount_cus_font.h"

点击转换，在工程里新建一个sd来存放生成的bin文件

 完成之后，复制.c文件到porting文件夹里

3、字体使用

在工程里进行修改

添加刚刚生成的文件

 添加支持文件

 使用这个方式在虚拟器里没问题，但是在单片机里不行

把这段删除

static uint8_t *__user_font_getdata(int offset, int size){
    //如字模保存在SPI FLASH, SPIFLASH_Read(__g_font_buf,offset,size);
    //如字模已加载到SDRAM,直接返回偏移地址即可如:return (uint8_t*)(sdram_fontddr+offset);
    return __g_font_buf;
}

修改成

static uint8_t __g_font_buf[612];//如bin文件存在SPI FLASH可使用此buff
static lv_fs_file_t lv_file;
int siyuan_Medium_51_flash_fs_init(void)
{

    lv_fs_res_t  lv_res;


    lv_res = lv_fs_open(&lv_file, LVGL_PATH"/fonts/lv_siyuan_Medium_51.bin", LV_FS_MODE_RD);
    if (lv_res != LV_FS_RES_OK)
    {
        //lv_printf("LVGL FS open error. (%d)\n", lv_res);
    }
    else
    {
        lv_fs_seek(&lv_file, 0, LV_FS_SEEK_SET);/* 移动到头部 */
        //lv_printf("rey 11 -> file -> %x\r\n", *(int*)lv_file.file_d);
        //lv_printf("rey 12 -> file -> %d %d\r\n", offset, size);
        //lv_fs_seek(&lv_file, offset);
        //lv_fs_read(&lv_file, __g_font_buf, size, NULL);
        //lv_printf("LVGL FS open Ok\n");
        //lv_fs_close(&lv_file);
    }
    return 0;
}

static uint8_t* __user_font_getdata(int offset, int size) {
    //如字模保存在SPI FLASH, SPIFLASH_Read(__g_font_buf,offset,size);
    //如字模已加载到SDRAM,直接返回偏移地址即可如:return (uint8_t*)(sdram_fontddr+offset);
    lv_fs_seek(&lv_file, offset, LV_FS_SEEK_SET);
    lv_fs_read(&lv_file, __g_font_buf, size, NULL);
    return __g_font_buf;
}

同时，把支持文件里的lv_siyuanheiti_23用lv_siyuan_Medium_51替换

修改初始化文件系统siyuanheiti_23_flash_fs_init用刚刚增加的siyuan_Medium_51_flash_fs_init替换

同上，继续增加82号字体，只需要在上图的文件中增加既可

 在.h文件里，声明刚刚增加的

  在LVGL.Simulator.cpp文件中，先包含#include "lvgl_porting/lvgl_mount_cus_font.h"头文件

 测试一下

 

四、消息订阅和发布

1、消息第三方库

msg是第三方库，需要自己在lv_conf添加定义

 #define LV_USE_MSG  1 把msg打开

 背景修改 

 2、lvgl_app

新建一个文件夹，存放消息订阅函数

 把刚刚的消息代码放在weather.c文件里

#ifdef LV_LVGL_H_INCLUDE_SIMPLE
#include "lvgl.h"
#else
#include "lvgl/lvgl.h"
#endif
#include "lvgl_app/lvgl_app.h"

static void label_event_cb(lv_event_t* e)
{
    lv_obj_t* label = lv_event_get_target(e);
    lv_msg_t* m = lv_event_get_msg(e);

    const char* fmt = lv_msg_get_user_data(m);
    const int32_t* v = lv_msg_get_payload(m);

    lv_label_set_text_fmt(label, fmt, *v);
}

void lv_weather_main()
{
    lv_obj_t* temp_lab = lv_label_create(lv_scr_act());
    lv_label_set_long_mode(temp_lab, LV_LABEL_LONG_SCROLL_CIRCULAR);
    lv_obj_add_style(temp_lab, &font_style_siyuan_Medium_51, LV_PART_MAIN);
    lv_label_set_text(temp_lab, "最高温度 30度");

    lv_obj_add_event_cb(temp_lab, label_event_cb, LV_EVENT_MSG_RECEIVED, NULL);        //增加一个回调
    lv_msg_subscribe_obj(1, temp_lab, "最高温度 %d度");

    int data = 20;
    lv_msg_send(1, &data);
}

lvgl_app.h文件

/**
 * @file lv_examples.h
 *
 */

#ifndef LVGL_APP_H
#define LVGL_APP_H

#ifdef __cplusplus
extern "C" {
#endif

/*********************
*      INCLUDES
*********************/
#include "lvgl_porting/lvgl_mount_cus_font.h"
/*********************
*      DEFINES
*********************/

/**********************
*      TYPEDEFS
**********************/

/**********************
* GLOBAL PROTOTYPES
**********************/

/**********************
*      MACROS
**********************/
void lv_weather_main(void);
#ifdef __cplusplus
} /*extern "C"*/
#endif

#endif /*LVGL_APP_H*/

在主函数中直接调用lv_weather_main函数即可

 五、全部函数

增加了其他字体，布局

 最终效果