【得捷电子Follow me第2期】ESP32-S3之LVGL适配和显示中文（Arduino）

小默叔叔

【得捷电子Follow me第2期】ESP32-S3之LVGL适配和显示中文（Arduino） [复制链接]

<i class="pstatus"> 本帖最后由 小默叔叔 于 2023-10-9 13:46 编辑 </i>

# 【得捷电子Follow me第2期】ESP32-S3之LVGL适配和显示中文（Arduino）
## 往期内容：
[【得捷电子Follow me第2期】ESP32-S3之基于Clion+PlatformIO+Arduino环境搭建和使用](https://bbs.eeworld.com.cn/thread-1258611-1-1.html "【得捷电子Follow me第2期】ESP32-S3之基于Clion+PlatformIO+Arduino环境搭建和使用")

## 一、LVGL

1. LVGL介绍

LittlevGL（LVGL）是一款开源嵌入式图形用户界面（GUI）库，专为嵌入式系统设计。它能在ESP32等嵌入式平台上创建用户友好的界面，用于制作交互式应用，如IoT设备控制面板和嵌入式产品。LVGL提供轻量级、可扩展的GUI元素，允许开发人员快速构建现代用户界面。

2. 增加依赖库

```arduino
 lib_deps =
   lvgl/lvgl@^8.3.9
   bodmer/TFT_eSPI@^2.5.31
 ```

### 二、LVGL移植

1. 复制lv_conf_template.h 为 lv_conf.h ，并修改配置

```arduino
 /* clang-format off */打开用于使用lvgl的配置使能
 #if 1 /*Set it to "1" to enable content*/
 // 这个宏用于自定义图形用户界面（GUI）库的定时器功能，以满足特定应用的需求
 #define LV_TICK_CUSTOM 1
 // 用于显示中文的宏
 #define LV_FONT_DEJAVU_16_PERSIAN_HEBREW 1/*Hebrew, Arabic, Persian letters and all their forms*/
 #defineLV_FONT_SIMSUN_16_CJK   1/*1000 most common CJK radicals*/
 #define LV_USE_BIDI 1
 // 用于防止图片的宏
 #define LV_USE_PNG 1
 ```

2. 拷贝 LVGL_Arduino.ino 到自己的工程

LVGL_Arduino.ino的文件路径：Project_name\\.pio\libdeps\adafruit_feather_esp32s3_tft\lvgl\examples\arduino\LVGL_Arduino\LVGL_Arduino.ino

3. 修改 LVGL_Arduino.ino 代码

- 设置屏幕宽和高，这个需要注意，宽是240，高是135（后面还要适配屏偏）（当初这里花了2天时间，才搞明白怎么玩，，，）

```c
 /*Change to your screen resolution*/
 static const uint16_t screenWidth= 240;
 static const uint16_t screenHeight = 135;
 ```

- 屏幕初始化

```c
 static void esp32s3_ftt_init()
 {
   // turn on backlite
   pinMode(TFT_BACKLITE, OUTPUT);
   digitalWrite(TFT_BACKLITE, HIGH);
 
   // turn on the TFT / I2C power supply
   pinMode(TFT_I2C_POWER, OUTPUT);
   digitalWrite(TFT_I2C_POWER, HIGH);
   delay(10);
 
   tft.begin();
   tft.setRotation( 1 ); /* Landscape orientation, flipped */
 }
 ```

4. 开启定时器

```c
 // 创建定时器，每隔1秒钟更新时间和温度数据
   while(true)
   {
   lv_timer_handler(); /* let the GUI do its work */
   delay( 1000 );
   }
 ```

## 三、屏幕驱动适配

1. 使用的是库是TFT_eSPI，第一步需要修改User_Setup.h

```c
 // 1.使用 ST7789 驱动
 #define ST7789_DRIVER
 
 // 2.设置长宽高，其实这里定义了，LVGL可以直接调用
 #define TFT_WIDTH240
 #define TFT_HEIGHT 135
 
 // 3.For adafruit_feather_esp32s3_tft 定义引脚
 #define TFT_MOSI 35 // In some display driver board, it might be written as "SDA" and so on.
 #define TFT_SCLK 36
 #define TFT_CS 7// Chip select control pin
 #define TFT_DC 39// Data Command control pin
 #define TFT_RST40// Reset pin (could connect to Arduino RESET pin)
 #define TFT_BL 45// LED back-light
 
 // 4. 设置SPI_FREQUENCY
 #define SPI_FREQUENCY80000000
 ```

2. 修改适配ST7789 ，设置屏幕宽和高，并打开宏，文件ST7789_Defines.h

```c
 // Adafruit 1.44 TFT support
 #if (TFT_HEIGHT == 135) && (TFT_WIDTH == 240)
 #ifndef CGRAM_OFFSET
   #define CGRAM_OFFSET
 #endif
 #endif
 ```

3. 设置屏偏，文件ST7789_Rotation.h

```c
   case 1: // Landscape (Portrait + 90)
 #ifdef CGRAM_OFFSET
   if (_init_width == 135)
   {
   colstart = 40;
   rowstart = 53;
   }
   else if (_init_width == 240)
   {
   colstart = 40;
   rowstart = 53;
   }
 ```

4. 这个时候你就可以正常跑LVGL的官方demo了。

<ignore_js_op>

<div class="tip tip_4 aimg_tip" id="aimg_738385_menu" style="position: absolute; display: none" disautofocus="true">
<div class="xs0">
<p><strong>Untitled.png</strong> <em class="xg1">(443.48 KB, 下载次数: 0)</em></p>
<p>
<a href="javascript:;" class="loginf" >下载附件</a>

<a href="javascript:;" onclick="showWindow(this.id, this.getAttribute('url'), 'get', 0);" id="savephoto_738385" url="home.php?mod=spacecp&ac=album&op=saveforumphoto&aid=738385&handlekey=savephoto_738385">保存到相册</a>

</p>

</div>
<div class="tip_horn"></div>
</div>

</ignore_js_op>

## 四、显示文字“中文”

1. lvgl的中文有常用的几千字，但需要开启宏，对于没有的字，需要自己增加字库

```c
 // 用于显示中文的宏
 #define LV_FONT_DEJAVU_16_PERSIAN_HEBREW 1/*Hebrew, Arabic, Persian letters and all their forms*/
 #define LV_FONT_SIMSUN_16_CJK   1/*1000 most common CJK radicals*/
 #define LV_USE_BIDI 1
 ```

2. 使用官方demo演示

```c
 lv_obj_t * cz_label = lv_label_create(lv_scr_act());
 lv_label_set_text(cz_label,
       "嵌入式系统（Embedded System），\n是一种嵌入机械或电气系统内部、具有专一功能和实时计算性能的计算机系统。");
 lv_obj_set_style_text_font(cz_label, &lv_font_simsun_16_cjk, 0);
 lv_obj_set_width(cz_label, 310);
 lv_obj_align(cz_label, LV_ALIGN_BOTTOM_LEFT, 5, -5);
 ```

<ignore_js_op>

<div class="tip tip_4 aimg_tip" id="aimg_738383_menu" style="position: absolute; display: none" disautofocus="true">
<div class="xs0">
<p><strong>Untitled 1.png</strong> <em class="xg1">(346.91 KB, 下载次数: 0)</em></p>
<p>
<a href="javascript:;" class="loginf" >下载附件</a>

<a href="javascript:;" onclick="showWindow(this.id, this.getAttribute('url'), 'get', 0);" id="savephoto_738383" url="home.php?mod=spacecp&ac=album&op=saveforumphoto&aid=738383&handlekey=savephoto_738383">保存到相册</a>

</p>

</div>
<div class="tip_horn"></div>
</div>

</ignore_js_op>

## 五、显示图片

1. **转换图片为C数组**

使用LVGL的在线图片转换工具将你的PNG图片转换为C数组。这个工具可以在这里找到：[LVGL Image converter](https://lvgl.io/tools/imageconverter) 转换后，你会得到一个 .c 文件，并存在项目里。

2. **初始化PNG解码器**

为了能够解码PNG格式的图片，你需要初始化PNG解码器。确保你的LVGL配置中已经启用了PNG解码器。

```c
 #include "lv_png.h"
 lv_png_init();
 ```

3. 显示图片

```c
 #include "my_image.c"
 
 static void my_lvgl_demo()
 {
 #if LV_USE_LABEL && LV_BUILD_EXAMPLES && LV_FONT_DEJAVU_16_PERSIAN_HEBREW && LV_FONT_SIMSUN_16_CJK && LV_USE_BIDI
   // 创建图片对象
   lv_obj_t * img_bg = lv_img_create(lv_scr_act());
   lv_img_set_src(img_bg, &my_image);// 使用转换后的图片名
   lv_obj_align(img_bg, NULL, LV_ALIGN_CENTER, 0, 0);// 将图片居中对齐
 
   cz_label = lv_label_create(lv_scr_act());
   lv_label_set_text(cz_label, "Loading...");
   lv_obj_set_style_text_font(cz_label, &lv_font_simsun_16_cjk, 0);
   lv_obj_set_width(cz_label, 240);
   lv_obj_align(cz_label, LV_ALIGN_CENTER, 5, -5);
 
 #endif
 }
 ```

<ignore_js_op>

<div class="tip tip_4 aimg_tip" id="aimg_738384_menu" style="position: absolute; display: none" disautofocus="true">
<div class="xs0">
<p><strong>Untitled 2.png</strong> <em class="xg1">(336.03 KB, 下载次数: 0)</em></p>
<p>
<a href="javascript:;" class="loginf" >下载附件</a>

<a href="javascript:;" onclick="showWindow(this.id, this.getAttribute('url'), 'get', 0);" id="savephoto_738384" url="home.php?mod=spacecp&ac=album&op=saveforumphoto&aid=738384&handlekey=savephoto_738384">保存到相册</a>

</p>

</div>
<div class="tip_horn"></div>
</div>

</ignore_js_op>

## 六、这里面的遇到的坑啊啊啊啊

尝试过Adafruit家的lvgl库，但只能点亮屏幕，编译成功之后，就运行不了，卡了2天

【得捷电子Follow me第2期】ESP32-S3之LVGL适配和显示中文（Arduino） [复制链接]

浏览过的版块