前言

我們在上篇中已經(jīng)實現(xiàn)了模擬器環(huán)境下可變字體字重的設(shè)置.

是時候掏出你吃灰已久的ESP32了.

本文會使用PlatformIO創(chuàng)建一個全新的項目,直到顯示出現(xiàn)上篇文章末尾的動圖為止.
如遇到問題,可參考'常見問題'內(nèi)解答.

準備工作

軟件準備

為了后續(xù)內(nèi)容順利進行下去,這里需要你安裝好VSCode,并在VSCode上安裝PlatformIO插件.

硬件準備

創(chuàng)建項目

使用PlatformIO創(chuàng)建一個名為lvgl_with_freetype的項目

create project

創(chuàng)建完畢后目錄結(jié)構(gòu)如下:

.
├── include
│   └── README
├── lib
│   └── README
├── platformio.ini
├── src
│   └── main.cpp
└── test
    └── README

點亮屏幕

由于已經(jīng)寫過一篇點亮屏幕的文章,故本文不做過多贅述,只說明一下區(qū)別.

之前的屏幕分辨率是135x240,這次的屏幕分辨率是240x240.

所以需要使用TFT_eSPI里面的Setup24_ST7789.h

同時接線變更為

對應(yīng)Setup24_ST7789.h里面內(nèi)容

#define TFT_MISO    19#define TFT_MOSI    23#define TFT_SCLK    18#define TFT_CS      -1#define TFT_DC      2#define TFT_RST     4

隨便寫點內(nèi)容.測試下屏幕的點亮.

#include #include // Hardware-specific library#include TFT_eSPI tft = TFT_eSPI(); // Invoke custom libraryvoid setup() {

  Serial.begin(115200); // Set to a high rate for fast image transfer to a PC

  tft.init();

  tft.setRotation(0);

  tft.fillScreen(TFT_BLACK);}void loop() {

  tft.print('Ready Perfectly');}

lcd_ready_perfect

移植LVGL

屏幕點亮以后,就可以開始移植LVGL了.

當(dāng)前時間為2021.12.19,GitHub上LVGL最新版本是8.1.1-dev

使用命令

git clone https://github.com/lvgl/lvgl.git

獲取LVGL后將其復(fù)制到lib文件夾下.此時文件目錄為

.
├── include
│   └── README
├── lib
│   └── README
│   └── lvgl
│   └── TFT_eSPI
├── platformio.ini
├── src
│   └── main.cpp
└── test
    └── README

platformio.ini文件內(nèi)容

[env:pico32]
platform = espressif32
board = pico32
framework = arduino
monitor_speed = 115200
lib_extra_dirs = 
                lib/TFT_eSPI
                lib/lvgl

修改LVGL配置文件

創(chuàng)建LVGL的配置文件,找到lvgl文件夾內(nèi)的lv_conf_templat.h,復(fù)制一份lv_conf_templat.h并重命名為lv_conf.h,然后打開lv_conf.h

為了使配置文件內(nèi)容生效,找到第15行(其他版本的lvgl行數(shù)可能不在這里,需要自行尋找)

#if 0 /*Set it to '1' to enable content*/

改為

#if 1 /*Set it to '1' to enable content*/

找到第30行,修改顏色順序

#define LV_COLOR_16_SWAP 0

改為

#define LV_COLOR_16_SWAP 1

找到第49行,啟用自定義內(nèi)存管理

#define LV_MEM_CUSTOM 0

修改為

#define LV_MEM_CUSTOM 1

找到第88行,設(shè)置自定義周期函數(shù)

#define LV_TICK_CUSTOM 0

修改為

#define LV_TICK_CUSTOM 1

找到第174行,啟用LVGL日志功能

#define LV_USE_LOG 1

修改為

#define LV_USE_LOG 1

對接LVGL和TFT_eSPI

按照目錄

.
├── include
│   └── README
├── lib
│   └── README
│   └── lvgl
│   └── TFT_eSPI
├── platformio.ini
├── src
│   └── main.cpp
│   └── Port
│       └── lv_port_disp.cpp
│       └── lv_port_disp.h
└── test
    └── README

創(chuàng)建lv_port_disp.cpp和lv_port_disp.h

#ifndef LV_PORT_DISP_H_#define LV_PORT_DISP_H_#include 'TFT_eSPI.h'#include 'lvgl.h'#define DISP_HOR_RES 240#define DISP_VER_RES 240#define DISP_BUF_SIZE (DISP_HOR_RES*DISP_VER_RES/4)extern TaskHandle_t handleTaskLvgl;void Port_Init();void lv_port_disp_init(TFT_eSPI* scr);#endif{% endcodeblock %}{% codeblock 'lv_port_disp.cpp' lang:cpp%}#include 'lv_port_disp.h'// 用于初始化完畢后啟用LVGL顯示的TaskHandle_tTaskHandle_t handleTaskLvgl;// lvgl顯示驅(qū)動static lv_disp_drv_t disp_drv;// lvgl更新任務(wù)void TaskLvglUpdate(void* parameter) {

  // 阻塞在此處,直到xTaskNotifyGive

  ulTaskNotifyTake(pdTRUE, portMAX_DELAY);

  for (;;) {

    lv_task_handler();

    delay(5);

  }}/**

 * @brief  顯示初始化

 * @param  無

 * @retval 無

 */void Port_Init() {

  static TFT_eSPI screen;

  /* 屏幕初始化 */

  screen.begin();

  screen.initDMA(true);

  screen.setRotation(0);

  screen.fillScreen(TFT_BLACK);

  /* lvgl初始化 */

  lv_init();

  lv_port_disp_init(&screen);

  printf('lvInitDonen');

  // 在核心2上執(zhí)行LVGL

  xTaskCreatePinnedToCore(TaskLvglUpdate, 'LvglThread', 20480, nullptr,

                          configMAX_PRIORITIES, &handleTaskLvgl, 1);}/**

 * @brief  自定義打印函數(shù)

 * @param  無

 * @retval 無

 */void my_print(lv_log_level_t level, const char *file, uint32_t line,

              const char *fun, const char *dsc) {

  Serial.printf('%s@%d %s->%srn', file, line, fun, dsc);

  Serial.flush();}/**

 * @brief  屏幕刷新回調(diào)函數(shù)

 * @param  disp:屏幕驅(qū)動地址

 * @param  area:刷新區(qū)域

 * @param  color_p:刷新緩沖區(qū)地址

 * @retval 無

 */static void disp_flush_cb(lv_disp_drv_t *disp, const lv_area_t *area,

                          lv_color_t *color_p) {

  TFT_eSPI *screen = (TFT_eSPI *)disp->user_data;

  int32_t w = (area->x2 - area->x1 + 1);

  int32_t h = (area->y2 - area->y1 + 1);

  screen->startWrite();

  screen->setAddrWindow(area->x1, area->y1, w, h);

  screen->pushPixelsDMA((uint16_t *)(&color_p->full), w * h);

  screen->endWrite();

  lv_disp_flush_ready(disp);}/**

 * @brief  屏幕初始化

 * @param  無

 * @retval 無

 */void lv_port_disp_init(TFT_eSPI* scr) {

  lv_log_register_print_cb(reinterpret_cast(

      my_print)); /* register print function for debugging */

  DMA_ATTR static lv_color_t *lv_disp_buf =

      static_cast(heap_caps_malloc(

          DISP_BUF_SIZE * sizeof(lv_color_t), MALLOC_CAP_DMA));

  static lv_disp_draw_buf_t disp_buf;

  lv_disp_draw_buf_init(&disp_buf, lv_disp_buf, nullptr,

                        DISP_BUF_SIZE);

  /*Initialize the display*/

  lv_disp_drv_init(&disp_drv);

  disp_drv.hor_res = DISP_HOR_RES;

  disp_drv.ver_res = DISP_VER_RES;

  disp_drv.flush_cb = disp_flush_cb;

  disp_drv.draw_buf = &disp_buf;

  disp_drv.user_data = scr;

  lv_disp_drv_register(&disp_drv);}{% endcodeblock %}再寫個簡單例子測試下LVGL能不能運行{% codeblock 'main.cpp' lang:cpp%}#include #include './Port/lv_port_disp.h'void setup() {

  Serial.begin(115200); // Set to a high rate for fast image transfer to a PC

  Port_Init();

  lv_obj_t *label = lv_label_create(lv_scr_act());

  lv_label_set_text(label, 'Toou.nAnata wa watashi no masuta ka?');

  // 一切就緒, 啟動LVGL任務(wù)

  xTaskNotifyGive(handleTaskLvgl);}void loop() {}

Toou.Anata wa watashi no masuta ka?

lvgl_ready_perfect

施工中,待更新

常見問題

Q:點亮屏幕時候,編譯器報找不到TFT_eSPI

A:檢查TFT_eSPI是否集成

將TFT_eSPI放置在lib文件夾內(nèi),并向platformio.ini文件末尾添加

lib_extra_dirs =  lib/TFT_eSPI

Q:在移植LVGL時候,屏幕顏色異常

A:可能與lv_conf.h文件內(nèi)#define LV_COLOR_16_SWAP 0有關(guān)

可以嘗試將此處的0改成1,或1改回0

環(huán)境:

Espressif 32 (3.4.0) > ESP32 Pico Kit

framework-arduinoespressif32 3.10006.210326 (1.0.6)tool-esptoolpy 1.30100.210531 (3.1.0)toolchain-xtensa32 2.50200.97 (5.2.0) 8.1.1-dev

2.3.89

esptool.py v3.1

參考資料

https://github.com/lvgl/lvgl

https://github.com/peng-zhihui/Peak