关于LVGL和Squareline studio

LVGL是一个供嵌入式设备调用开发UI界面的开源库，Squareline studio是LVGL官方推出的图形开发工具，用于加速界面开发，目前个人免费版可使用150个元件和10个屏幕.

LVGL库的机构

以全动电子3.5寸spi串口TFT提供的工程示例为例，这款屏幕是SPI接口负责屏幕显示，IIC负责触摸屏输入。
整体外部引用库有四个如下图所示，lvgl库是基于TFT-espi库的，因此两个都需要，FT6336是触屏库，Tjpg是图片解码库，一般不使用

其中LVGL库的文件夹结构如下所示

espi库的文件夹机构如下所示

示例程序有自己定义的头文件touch.h

屏幕显示引脚在espi库定义（user-setup.h），自己定义的touch.h中有触屏引脚定义，lvgl库lv_config文件有各种配置细节，宏定义0-1，如果用demo，则lv_confi对应的demo中的宏0-1要打开，心跳时钟打开（lv-tick-custom）0-1，字体，fps显示，memory设置（包括外部sram）等等
》touch.h的引脚定义部分

#include <FT6336.h>

 #define TOUCH_FT6336
 #define TOUCH_FT6336_SCL 25
 #define TOUCH_FT6336_SDA 32
 #define TOUCH_FT6336_INT -1
 #define TOUCH_FT6336_RST 33

》espi库中User_Setup.h中的引脚定义部分

// For ESP32 Dev board (only tested with ILI9341 display)
// The hardware SPI can be mapped to any pins

#define TFT_MISO 12
#define TFT_MOSI 13
#define TFT_SCLK 14
#define TFT_CS   15  // Chip select control pin
#define TFT_DC    2  // Data Command control pin
#define TFT_RST  27  // Reset pin (could connect to RST pin)

Squareline studio工程导出

在Squareline studio软件中export可导出示例工程，导出的工程文件夹如下

这里提供两种方法移植这个导出工程到我们现在开发的工程中。
方法一：将导出工程整体拷贝过去
流程是，platform io中新建开发工程-》将squareline studio导出的工程lib文件夹下lvgl、espi、ui文件夹复制到pio/lib-》espi下user_setup.h修改-》添加触屏库，头文件touch.h-》屏幕厂家的lv_conf.h拷贝到pio/lib/lvgl下-》打开lvgl/src下lv_conf_interna.h修改41行饮用路径../../lv_conf.h为../lv_conf.h-》拷贝屏幕厂家的espi库下user_setup.h,替换pio/espi下的-》拷贝厂家st7796_init.h，替换pio/espi/tft_drivers下的-》根据squareline导出的ui.ino文件修改main.c文件（使用屏幕厂家的main.c，加上ui_init()和头文件）
方法二：只拷贝ui文件夹和lv_conf.h过去
根据squareline导出的ui.ino文件修改main.c文件（使用屏幕厂家的main.c，加上ui_init()和头文件）,lv_conf.h需与厂家的对应一下不同，综合拷贝。

主控程序与ui界面的交互

基本逻辑是，在squareline studio中ui设计时，元件的event和用户插入的function会导出到ui文件夹ui.c文件中，可以在这些函数中与主程序进行交互，主程序中也可以库中的api函数（例如切换屏幕）

///////////////////// FUNCTIONS ////////////////////
void ui_event_Button4( lv_event_t * e) {
    lv_event_code_t event_code = lv_event_get_code(e);lv_obj_t * target = lv_event_get_target(e);
if ( event_code == LV_EVENT_CLICKED) {
      _ui_screen_change( &ui_Screen2, LV_SCR_LOAD_ANIM_FADE_ON, 500, 0, &ui_Screen2_screen_init);
}
}
void ui_event_Button3( lv_event_t * e) {
    lv_event_code_t event_code = lv_event_get_code(e);lv_obj_t * target = lv_event_get_target(e);
if ( event_code == LV_EVENT_CLICKED) {
      _ui_screen_change( &ui_Screen1, LV_SCR_LOAD_ANIM_FADE_ON, 500, 0, &ui_Screen1_screen_init);
}
}