Arduino應(yīng)用開發(fā)——使用GUI-Guider制作LVGL UI并導(dǎo)入ESP32運(yùn)行
前言
GUI Guider是一個(gè)專門針對(duì)LVGL開發(fā)了一個(gè)上位機(jī)GUI設(shè)計(jì)工具，可以通過拖放控件的方式設(shè)計(jì)LVGL GUI頁面，加速GUI的設(shè)計(jì)。設(shè)計(jì)完成的UI頁面可以在PC上仿真運(yùn)行，確認(rèn)設(shè)計(jì)完畢之后可以生成C代碼，再整合到MCU項(xiàng)目中。
1 使用GUI-Guider設(shè)計(jì)UI
1.1 創(chuàng)建工程
打開GUI-Guider，選擇自己要使用的LVGL版本，V7或者V8，兩個(gè)版本差別較大，有些控件不兼容，這點(diǎn)需要注意。
注：我使用的GUI-Guider版本是1.6.1。其他版本應(yīng)該是基本一樣的。
設(shè)備模板選擇空白，因?yàn)镋SP32并不包含在這個(gè)軟件的模板里面。
應(yīng)用模板可以根據(jù)自己的需要選擇空白模板或者測(cè)試demo。
項(xiàng)目配置根據(jù)自己的情況設(shè)置。
注：如果你屏幕的尺寸跟測(cè)試demo的尺寸不一致，里面的布局可能會(huì)被打亂，素材可能也會(huì)被拉伸。
空白模板如下：
測(cè)試demo如下：
1.2 設(shè)計(jì)UI
創(chuàng)建項(xiàng)目之后就可以開始設(shè)計(jì)自己的UI了。
空白模板如下：
測(cè)試demo如下：
UI設(shè)計(jì)好以后，點(diǎn)擊C編譯。編譯成功后會(huì)在PC上仿真運(yùn)行。
仿真結(jié)果如下：
2 ESP工程導(dǎo)入U(xiǎn)I
2.1 移植LVGL
關(guān)于這個(gè)，我之前發(fā)過博客，不懂的同學(xué)可以先看下。
Arduino應(yīng)用開發(fā)——esp32 lvgl v8.3環(huán)境搭建
2.2 移植UI文件
打開上面GUI-Guider的工程目錄，custom和generated文件夾里面全部都是UI相關(guān)的文件，我們把這些文件移植到ESP32的工程里面即可。
在ESP32工程的src文件夾（也就是main.cpp所在目錄），新建一個(gè)文件夾用來存放UI文件，名字隨意（我這里命名為lvgl_ui）。
把上面說的custom和generated文件夾里面的文件全部放到ESP32工程這個(gè)新建的文件夾（lvgl_ui）里面。
拷貝完成后，用VScode打開ESP32的工程，編譯。
注意幾個(gè)容易出錯(cuò)的點(diǎn)：
1、根據(jù)設(shè)計(jì)UI的不同，有些文件需要進(jìn)行修改才能編譯通過，比如一些圖像素材文件，需要將#include "lvgl/lvgl.h"改成#include "lvgl.h"?？梢韵染幾g一下，看看有沒有報(bào)錯(cuò)。
2、制作UI時(shí)用到的控件，需要在ESP32工程的lv_conf.h里面打開相應(yīng)的宏。
3、有些控件在GUI-Guider上面有，但是ESP32工程上移植的LVGL可能沒有，如果出現(xiàn)這種情況，可以把GUI-Guider工程上面對(duì)應(yīng)控件的幾個(gè)文件也移植到ESP32工程對(duì)應(yīng)的位置即可。
如果報(bào)錯(cuò)如下：
將#include "lvgl/lvgl.h"改成#include "lvgl.h"，然后重新編譯即可。
2.3 調(diào)用UI文件
1）添加頭文件
在main.cpp里面把前面加的UI文件包含進(jìn)去。
// 前面的lvgl_ui是文件夾名稱，根據(jù)自己的文件夾修改
#include "lvgl_ui\events_init.h"
#include "lvgl_ui\gui_guider.h"
#include "lvgl_ui\custom.h"
2）創(chuàng)建一個(gè)UI
lv_ui guider_ui;
3）初始化UI
setup_ui(&guider_ui);
events_init(&guider_ui);
custom_init(&guider_ui);
完整的示例代碼如下：
#include <Arduino.h>
#include <SPI.h>
#include <TFT_eSPI.h>
#include "lvgl.h"
#include "lvgl_ui\events_init.h"
#include "lvgl_ui\gui_guider.h"
#include "lvgl_ui\custom.h"
lv_ui guider_ui;
TFT_eSPI tft = TFT_eSPI();
static lv_disp_draw_buf_t draw_buf;
/* Display flushing */
void my_disp_flush(lv_disp_drv_t *disp_drv, const lv_area_t *area, lv_color_t *color_p)
{
uint32_t w = ( area->x2 - area->x1 + 1 );
uint32_t h = ( area->y2 - area->y1 + 1 );
tft.startWrite();
tft.setAddrWindow( area->x1, area->y1, w, h );
tft.pushColors( ( uint16_t * )&color_p->full, w * h, true );
tft.endWrite();
lv_disp_flush_ready( disp_drv );
}
/*Read the touchpad*/
void my_touchpad_read( lv_indev_drv_t * indev_drv, lv_indev_data_t * data )
{
}
void lvgl_user_init(void)
{
lv_init();
/*Set the touchscreen calibration data,
the actual data for your display can be acquired using
the Generic -> Touch_calibrate example from the TFT_eSPI library*/
// uint16_t calData[5] = { 275, 3620, 264, 3532, 1 };
// tft.setTouch( calData );
lv_color_t* buf1 = (lv_color_t*) heap_caps_malloc(240 * 240, MALLOC_CAP_SPIRAM);
// lv_color_t* buf2 = (lv_color_t*) heap_caps_malloc(240 * 240, MALLOC_CAP_SPIRAM);
lv_disp_draw_buf_init( &draw_buf, buf1, NULL, 240 * 240);
/*Initialize the display*/
static lv_disp_drv_t disp_drv;
lv_disp_drv_init( &disp_drv );
/*Change the following line to your display resolution*/
disp_drv.hor_res = 240;
disp_drv.ver_res = 240;
disp_drv.flush_cb = my_disp_flush;
disp_drv.full_refresh = 1;
disp_drv.draw_buf = &draw_buf;
lv_disp_drv_register(&disp_drv);
/*Initialize the (dummy) input device driver*/
static lv_indev_drv_t indev_drv;
lv_indev_drv_init(&indev_drv);
indev_drv.type = LV_INDEV_TYPE_POINTER;
indev_drv.read_cb = my_touchpad_read;
lv_indev_drv_register(&indev_drv);
setup_ui(&guider_ui);
events_init(&guider_ui);
custom_init(&guider_ui);
}
void setup()
{
Serial.begin(115200);
tft.begin();
tft.setRotation(0);
tft.fillScreen(TFT_BLACK);
lvgl_user_init();
}
void loop()
{
lv_timer_handler(); /* let the GUI do its work */
delay(5);
}
2.4 燒錄測(cè)試
運(yùn)行結(jié)果如下，手機(jī)拍照有失真，將就著看吧。
結(jié)束語
關(guān)于使用GUI-Guider工程導(dǎo)入esp32運(yùn)行就講到這里，我這里只是簡(jiǎn)單介紹了一下整個(gè)移植的流程，具體的一些細(xì)節(jié)和問題，還需要根據(jù)實(shí)際情況處理，有什么問題的歡迎評(píng)論區(qū)留言。
想了解更多Arduino的內(nèi)容，可以關(guān)注一下博主，后續(xù)我還會(huì)繼續(xù)分享更多的經(jīng)驗(yàn)給大家。
Arduino的開發(fā)教程匯總:
https://blog.csdn.net/ShenZhen_zixian/article/details/121659482文章來源：http://www.zghlxwxcb.cn/news/detail-841489.html
如果這篇文章能夠幫到你，就…你懂得。
文章來源地址http://www.zghlxwxcb.cn/news/detail-841489.html
到了這里，關(guān)于Arduino應(yīng)用開發(fā)——使用GUI-Guider制作LVGL UI并導(dǎo)入ESP32運(yùn)行的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
