度條實(shí)戰(zhàn)：從環(huán)境搭建到動(dòng)畫聯(lián)動(dòng))
在實(shí)際嵌入式項(xiàng)目中LVGL 的價(jià)值不只是把屏幕點(diǎn)亮而是讓 MCU 也能擁有接近手機(jī) App 的交互界面。尤其在做設(shè)備狀態(tài)展示、數(shù)據(jù)監(jiān)控和簡單的控制面板時(shí)儀表盤和進(jìn)度條是復(fù)用率最高的兩種控件組合。這篇文章圍繞 ESP32 和 LVGL從圖形庫工作機(jī)制、環(huán)境搭建、儀表盤與進(jìn)度條的實(shí)現(xiàn)代碼到坐標(biāo)換算、動(dòng)畫聯(lián)動(dòng)、生產(chǎn)環(huán)境注意事項(xiàng)完整梳理一條可復(fù)現(xiàn)的開發(fā)路徑。1. 為什么嵌入式界面會選 LVGL 儀表盤和進(jìn)度條LVGLLight and Versatile Graphics Library是一個(gè)專為嵌入式系統(tǒng)設(shè)計(jì)的開源圖形庫。它不需要運(yùn)行完整的操作系統(tǒng)界面框架也能在有限的 RAM 和 Flash 上渲染按鈕、標(biāo)簽、圖表、儀表盤、進(jìn)度條等常見控件。ESP32 之所以經(jīng)常和 LVGL 搭配出現(xiàn)是因?yàn)?ESP32 的 SRAM 通常在 320 KB 到 520 KB 之間Flash 通常在 4 MB 以上滿足 LVGL 在中等分辨率屏幕上的運(yùn)行要求。儀表盤的核心用途是顯示一個(gè)范圍內(nèi)的當(dāng)前值典型場景包括溫控器顯示當(dāng)前溫度、電機(jī)控制器顯示轉(zhuǎn)速、電源設(shè)備顯示輸出電壓、空氣檢測儀顯示 PM2.5 濃度。儀表盤的視覺重點(diǎn)是通過角度和弧形刻度讓用戶一屏之內(nèi)判斷當(dāng)前值是處于安全區(qū)、警戒區(qū)還是危險(xiǎn)區(qū)。進(jìn)度條的核心用途是反饋任務(wù)的完成比例。嵌入式設(shè)備里的進(jìn)度條不只是在做固件升級時(shí)出現(xiàn)還常見于充電狀態(tài)顯示、數(shù)據(jù)采集進(jìn)度、文件寫入進(jìn)度、定時(shí)任務(wù)倒計(jì)時(shí)。LVGL 的進(jìn)度條控件支持水平、垂直和圓弧三種方向可以設(shè)置動(dòng)畫、自定義指示器樣式甚至與定時(shí)器聯(lián)動(dòng)實(shí)時(shí)刷新數(shù)值。選擇用 LVGL 實(shí)現(xiàn)這兩類控件有一個(gè)非常實(shí)際的理由LVGL 提供對象樹、樣式系統(tǒng)、事件回調(diào)、動(dòng)畫框架和內(nèi)存管理。開發(fā)者不需要從底層逐個(gè)畫像素而是創(chuàng)建lv_gauge、lv_bar這類對象然后調(diào)整坐標(biāo)、尺寸、樣式和數(shù)值即可。這和直接在 TFT 上調(diào)用畫線函數(shù)相比效率和可維護(hù)性都要高很多。2. 理解 LVGL 中儀表盤與進(jìn)度條的工作機(jī)制2.1 LVGL 對象、樣式和事件三者的關(guān)系LVGL 的界面由對象Object組成。每個(gè)對象在內(nèi)存中是一個(gè)結(jié)構(gòu)體保存位置、尺寸、父對象、樣式、事件回調(diào)、用戶數(shù)據(jù)等信息。儀表盤是lv_gauge對象進(jìn)度條是lv_bar對象它們都屬于 LVGL 內(nèi)置控件。樣式Style負(fù)責(zé)外觀。LVGL 8.x 之后使用全新的樣式系統(tǒng)樣式屬性包括背景顏色、邊框、圓角、文本顏色、線寬、弧線寬度、指示器顏色等。樣式可以共享多個(gè)對象可以引用同一個(gè)樣式對象這樣能減少內(nèi)存占用。事件Event負(fù)責(zé)交互。LVGL 支持點(diǎn)擊、長按、釋放、值變化、繪制完成等事件。儀表盤和進(jìn)度條本身不一定需要事件回調(diào)但在實(shí)際項(xiàng)目中開發(fā)者為頁面添加觸摸滑動(dòng)、點(diǎn)擊切換、值變化回調(diào)可以讓控件和業(yè)務(wù)邏輯聯(lián)動(dòng)。儀表盤的內(nèi)部結(jié)構(gòu)可以這樣理解它實(shí)際上是由刻度線、刻度數(shù)字和指針三部分組成的復(fù)合對象。lv_gauge通過lv_gauge_set_value設(shè)置指針位置通過lv_gauge_set_needle_count設(shè)置指針數(shù)量。刻度線范圍由最小值、最大值和起始角度、結(jié)束角度決定。進(jìn)度條在 LVGL 中分為背景軌道和指示器兩部分。調(diào)用lv_bar_set_value會改變指示器的長度或高度。LVGL 內(nèi)部會對lv_bar的當(dāng)前值做范圍裁剪如果在創(chuàng)建對象時(shí)開啟了LV_BAR_MODE_RANGE則顯示范圍可以更靈活地表示區(qū)間。2.2 儀表盤角度換算與坐標(biāo)映射LVGL 的lv_gauge控件在繪制刻度線時(shí)會按照角度從起始角到結(jié)束角分布刻度。默認(rèn)情況下0 度在對象中心的正右方角度按逆時(shí)針方向增加。實(shí)際項(xiàng)目里開發(fā)者需要根據(jù)需求調(diào)整lv_gauge_set_angle_offset。當(dāng)需要自己畫弧形漸變或復(fù)雜背景時(shí)還會需要角度到坐標(biāo)的換算函數(shù)。假設(shè)圓心坐標(biāo)為(cx, cy)半徑為r角度為angle那么刻度線終點(diǎn)的標(biāo)準(zhǔn)公式為radian angle * PI / 180 x cx r * cos(radian) y cy r * sin(radian)這個(gè)公式在繪制自定義儀表盤背景時(shí)非常重要。LVGL 內(nèi)置的lv_gauge提供常規(guī)儀表盤能力但如果你需要漸變色弧、不等間距刻度、彩色區(qū)域標(biāo)記就必須自己計(jì)算點(diǎn)坐標(biāo)然后調(diào)用lv_canvas或lv_draw_arc完成繪制。2.3 進(jìn)度條動(dòng)畫背后的異步刷新機(jī)制LVGL 中觸發(fā)界面刷新不是直接調(diào)用畫布更新而是通過lv_obj_invalidate將對象所在區(qū)域標(biāo)記為“需要重繪”。刷新任務(wù)由 LVGL 的lv_timer_handler在循環(huán)中執(zhí)行。因此在代碼中修改進(jìn)度條的value后畫面會在下一個(gè)定時(shí)器周期內(nèi)更新不需要開發(fā)者手動(dòng)調(diào)用重繪函數(shù)。動(dòng)畫又是另一層機(jī)制。lv_anim系列函數(shù)可以在一段時(shí)間內(nèi)線性或非線性地改變一個(gè)變量的值。對進(jìn)度條來說常見寫法是創(chuàng)建一個(gè)lv_anim目標(biāo)地址指向進(jìn)度條的值變量執(zhí)行完成后自動(dòng)賦值給控件。理解這個(gè)機(jī)制對排查“界面卡住”和“進(jìn)度條不刷新”非常有幫助。如果主循環(huán)被阻塞比如在一個(gè)while(1)里等待傳感器讀數(shù)LVGL 的定時(shí)器就得不到執(zhí)行機(jī)會界面自然不會更新。正確做法是讓耗時(shí)操作分段執(zhí)行或者放到獨(dú)立任務(wù)中。3. 搭建 ESP32 LVGL 開發(fā)環(huán)境3.1 硬件選型與準(zhǔn)備實(shí)現(xiàn)本文示例需要準(zhǔn)備以下硬件部件推薦型號說明主控ESP32 DevKitC、ESP32-WROOM-32使用 ESP-IDF 或 PlatformIO 均可屏幕1.8 寸 ST7735、2.4 寸 ILI9341、3.5 寸 ILI9488分辨率建議 240x320 或 320x480觸摸XPT2046 電阻觸摸可選如果不做交互可以不接接線杜邦線若干注意 SPI 通信線和電源線LVGL 對屏幕驅(qū)動(dòng)本身沒有強(qiáng)綁定。它只負(fù)責(zé)生成顏色緩沖區(qū)中的像素?cái)?shù)據(jù)。真正把像素發(fā)給屏幕的是底層驅(qū)動(dòng)比如 TFT_eSPI、Arduino_GFX、LovyanGFX或者 ESP-IDF 下的 ESP32-LCD 驅(qū)動(dòng)庫。為了讓文章聚焦主題這里使用 Arduino TFT_eSPI 作為示例環(huán)境因?yàn)樗渲煤唵闻芡ㄋ俣茸羁臁?.2 軟件環(huán)境與依賴庫推薦使用 PlatformIO 創(chuàng)建 Arduino 框架的 ESP32 項(xiàng)目也可以使用 Arduino IDE。兩者的核心區(qū)別是 PlatformIO 對庫版本管理和多環(huán)境編譯支持更好。需要的庫包括lvgl圖形庫本體。TFT_eSPI屏幕驅(qū)動(dòng)同時(shí)為 LVGL 提供顯示回調(diào)。Arduino框架提供setup()和loop()入口。在 PlatformIO 的platformio.ini中可以這樣配置[env:esp32dev] platform espressif32 board esp32dev framework arduino monitor_speed 115200 lib_deps lvgl/lvgl^8.4.0 bodmer/TFT_eSPI^2.5.0如果使用 Arduino IDE則在庫管理器中搜索并安裝LVGL和TFT_eSPI。需要留意的是LVGL 的版本差異比較大7.x、8.x、9.x 的 API 不完全兼容。本文示例基于 LVGL 8.4 編寫。3.3 配置 LVGL 核心參數(shù)lv_conf.hLVGL 使用lv_conf.h控制編譯特性。這個(gè)文件需要從 LVGL 庫目錄復(fù)制到項(xiàng)目根目錄的include或src目錄下并開啟#if 1宏。重點(diǎn)配置項(xiàng)如下配置項(xiàng)推薦值說明LV_COLOR_DEPTH16RGB565適配常見 SPI 屏幕LV_MEM_CUSTOM0使用 LVGL 內(nèi)置內(nèi)存分配LV_MEM_SIZE32 * 1024圖形對象和緩沖區(qū)分配的內(nèi)存池LV_TICK_CUSTOM1使用 Arduino 的millis()提供時(shí)間基準(zhǔn)LV_FONT_MONTSERRAT_141開啟默認(rèn)數(shù)字字體LV_USE_GAUGE1開啟儀表盤控件LV_USE_BAR1開啟進(jìn)度條控件LV_USE_ANIM1開啟動(dòng)畫功能如果不開啟LV_USE_GAUGE和LV_USE_BAR編譯時(shí)控件代碼不會被包含調(diào)用lv_gauge_create會直接編譯報(bào)錯(cuò)。這里特別強(qiáng)調(diào)的原因是很多新手在移植 LVGL 后找不到儀表盤控件絕大多數(shù)是配置宏沒有開啟。LV_TICK_CUSTOM配置在 Arduino 環(huán)境下要設(shè)置為 1并確保測試代碼中調(diào)用lv_tick_inc(millis() - last_tick)LVGL 才能獲得正確的系統(tǒng)時(shí)間用于動(dòng)畫計(jì)算。3.4 驗(yàn)證顯示鏈路點(diǎn)亮屏幕并輸出顏色在創(chuàng)建儀表盤之前先做一個(gè)最基礎(chǔ)的顯示驗(yàn)證確保屏幕驅(qū)動(dòng)和 LVGL 已經(jīng)打通。下面這段代碼在屏幕中央繪制一個(gè)紅色矩形#include lvgl.h #include TFT_eSPI.h TFT_eSPI tft TFT_eSPI(); static lv_disp_draw_buf_t draw_buf; static lv_color_t buf[TFT_WIDTH * 10]; void my_disp_flush(lv_disp_drv_t *disp, 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); } void setup() { Serial.begin(115200); lv_init(); tft.begin(); tft.setRotation(1); lv_disp_draw_buf_init(draw_buf, buf, NULL, TFT_WIDTH * 10); static lv_disp_drv_t disp_drv; lv_disp_drv_init(disp_drv); disp_drv.hor_res TFT_WIDTH; disp_drv.ver_res TFT_HEIGHT; disp_drv.flush_cb my_disp_flush; lv_disp_drv_register(disp_drv); } void loop() { lv_timer_handler(); delay(5); }這段代碼的重點(diǎn)是my_disp_flush。LVGL 每次刷新都會把一塊矩形區(qū)域的顏色數(shù)據(jù)交給這個(gè)回調(diào)函數(shù)?；卣{(diào)里調(diào)用 TFT_eSPI 的pushColors把顏色數(shù)據(jù)寫入屏幕對應(yīng)的地址窗口。如果這里寫錯(cuò)界面會出現(xiàn)花屏、偏移或撕裂。4. 從零實(shí)現(xiàn) LVGL 儀表盤4.1 創(chuàng)建儀表盤對象并配置刻度范圍LVGL 的儀表盤控件創(chuàng)建函數(shù)是lv_gauge_create。通過以下代碼可以創(chuàng)建一個(gè) 320x240 屏幕上的儀表盤lv_obj_t *gauge lv_gauge_create(lv_scr_act()); lv_obj_set_size(gauge, 220, 220); lv_obj_center(gauge); lv_gauge_set_range(gauge, 0, 100); lv_gauge_set_angle_offset(gauge, 135); lv_gauge_set_needle_count(gauge, 1, NULL);lv_gauge_set_range設(shè)置最小值和最大值。lv_gauge_set_angle_offset設(shè)置起始角度偏移量。默認(rèn)儀表盤從 -90 度位置開始也就是表盤頂部。偏移 135 度會讓表盤范圍變成底部開口的標(biāo)準(zhǔn) 270 度儀表盤。刻度數(shù)量和刻度線長度不是通過獨(dú)立 API 配置的而是通過樣式控制。儀表盤的背景線、刻度線、指針分別使用不同的樣式屬性lv_gauge_set_needle_count(gauge, 1, lv_palette_main(LV_PALETTE_RED));第二個(gè)參數(shù)是指針數(shù)量。一個(gè)表盤可以有多根指針比如時(shí)鐘里的時(shí)針和分針。第三個(gè)參數(shù)可以傳一個(gè)顏色數(shù)組用于給每根指針設(shè)置顏色。4.2 控制指針位置設(shè)置值和動(dòng)畫當(dāng)需要讓指針指向 80 時(shí)調(diào)用lv_gauge_set_value(gauge, 0, 80);第二個(gè)參數(shù)是指針?biāo)饕Ｒ驗(yàn)樯厦嬖O(shè)置了一根指針?biāo)运饕?0。該調(diào)用會立即更新指針位置。如果希望指針平滑轉(zhuǎn)動(dòng)可以配合動(dòng)畫變量static int16_t current_value 0; void set_gauge_value_anim(int16_t target) { lv_anim_t a; lv_anim_init(a); lv_anim_set_var(a, current_value); lv_anim_set_exec_cb(a, gauge_value_anim_cb); lv_anim_set_values(a, current_value, target); lv_anim_set_time(a, 800); lv_anim_set_path_cb(a, lv_anim_path_ease_out); lv_anim_start(a); } void gauge_value_anim_cb(void *var, int32_t value) { current_value value; lv_gauge_set_value(gauge, 0, current_value); }lv_anim_set_exec_cb里注冊的是每次動(dòng)畫更新時(shí)執(zhí)行的回調(diào)。LVGL 根據(jù)設(shè)定的總時(shí)長和路徑函數(shù)在一段時(shí)間內(nèi)反復(fù)調(diào)用這個(gè)回調(diào)參數(shù)value從起點(diǎn)逐步變化到終點(diǎn)。lv_anim_path_ease_out會讓指針先快后慢視覺上更自然。4.3 繪制自定義弧形刻度區(qū)域內(nèi)置lv_gauge的刻度樣式相對固定。如果你需要把 0 到 100 分成三段分別顯示綠色、黃色、紅色推薦使用lv_canvas繪制自定義背景。思路是先創(chuàng)建一塊畫布設(shè)置背景透明然后在畫布上畫三條弧形線段lv_obj_t *canvas lv_canvas_create(lv_scr_act()); lv_canvas_set_buffer(canvas, cbuf, 240, 240, LV_IMG_CF_TRUE_COLOR); lv_obj_center(canvas); lv_canvas_fill_bg(canvas, lv_color_black(), LV_OPA_TRANSP); lv_draw_arc_dsc_t arc_dsc; lv_draw_arc_dsc_init(arc_dsc); arc_dsc.width 12; arc_dsc.color lv_palette_main(LV_PALETTE_GREEN); arc_dsc.opa LV_OPA_COVER; lv_canvas_draw_arc(canvas, 120, 120, 100, 135, 45, arc_dsc); arc_dsc.color lv_palette_main(LV_PALETTE_YELLOW); lv_canvas_draw_arc(canvas, 120, 120, 100, 45, 90, arc_dsc); arc_dsc.color lv_palette_main(LV_PALETTE_RED); lv_canvas_draw_arc(canvas, 120, 120, 100, 90, 135, arc_dsc);lv_canvas_draw_arc的參數(shù)分別為畫布對象、圓心 x、圓心 y、半徑、起始角度、結(jié)束角度和線段樣式。角度單位的含義和前面介紹的一致0 度在正右方逆時(shí)針增加。這里的 135 到 45 度是底部開口的標(biāo)準(zhǔn)儀表盤分布。值得說明的是這種自定義弧形背景需要自己控制刻度線。對于刻度線可以寫一個(gè)循環(huán)從 135 度開始按步長計(jì)算每個(gè)刻度線的起點(diǎn)和終點(diǎn)然后調(diào)用lv_canvas_draw_line。角度到坐標(biāo)的換算使用前面給出的正弦余弦公式。4.4 儀表盤實(shí)戰(zhàn)溫控器界面將上面的能力組合起來可以做出一個(gè)簡易溫控器界面溫度范圍 0 到 100 攝氏度中心位置顯示當(dāng)前溫度儀表盤指針實(shí)時(shí)指示溫度值。關(guān)鍵代碼結(jié)構(gòu)如下lv_obj_t *ui_gauge; lv_obj_t *ui_temp_label; void ui_create() { ui_gauge lv_gauge_create(lv_scr_act()); lv_obj_set_size(ui_gauge, 240, 240); lv_obj_align(ui_gauge, LV_ALIGN_CENTER, 0, 0); lv_gauge_set_range(ui_gauge, 0, 100); lv_gauge_set_angle_offset(ui_gauge, 135); lv_gauge_set_needle_count(ui_gauge, 1, NULL); ui_temp_label lv_label_create(lv_scr_act()); lv_obj_align(ui_temp_label, LV_ALIGN_CENTER, 0, 40); lv_label_set_text(ui_temp_label, -- C); lv_obj_set_style_text_font(ui_temp_label, lv_font_montserrat_24, 0); } void update_temperature(int16_t temp) { lv_gauge_set_value(ui_gauge, 0, temp); lv_label_set_text_fmt(ui_temp_label, %d C, temp); }注意這里lv_label_set_text_fmt會格式化字符串比先調(diào)用snprintf再set_text更簡潔但每次刷新都會做一次格式化所以刷新頻率不要太高。對于 1 秒一次的溫度刷新這樣寫沒有問題。5. 實(shí)現(xiàn) LVGL 進(jìn)度條與動(dòng)態(tài)聯(lián)動(dòng)5.1 創(chuàng)建普通水平進(jìn)度條進(jìn)度條在 LVGL 中最簡單的創(chuàng)建方式如下lv_obj_t *bar lv_bar_create(lv_scr_act()); lv_obj_set_size(bar, 200, 20); lv_obj_align(bar, LV_ALIGN_BOTTOM_MID, 0, -30); lv_bar_set_range(bar, 0, 100); lv_bar_set_value(bar, 30, LV_ANIM_ON);lv_bar_set_value的第三個(gè)參數(shù)若傳入LV_ANIM_ON進(jìn)度條會從當(dāng)前值動(dòng)畫過渡到目標(biāo)值。LV_ANIM_OFF則直接跳變。對于充電進(jìn)度、升級進(jìn)度這類場景開啟動(dòng)畫會讓界面觀感更友好。自定義樣式的常用寫法是為背景和指示器分別設(shè)置樣式static lv_style_t style_bg; static lv_style_t style_indicator; lv_style_init(style_bg); lv_style_set_bg_color(style_bg, lv_color_hex(0x333333)); lv_style_set_bg_opa(style_bg, LV_OPA_COVER); lv_style_set_radius(style_bg, 10); lv_style_init(style_indicator); lv_style_set_bg_color(style_indicator, lv_palette_main(LV_PALETTE_BLUE)); lv_style_set_bg_opa(style_indicator, LV_OPA_COVER); lv_style_set_radius(style_indicator, 10); lv_obj_add_style(bar, style_bg, 0); lv_obj_add_style(bar, style_indicator, LV_PART_INDICATOR);LV_PART_INDICATOR指向進(jìn)度條的指示器部分也就是實(shí)際顯示值的矩形。背景軌道的樣式通過0這個(gè)默認(rèn)狀態(tài)設(shè)置。如果你不設(shè)置指示器圓角進(jìn)度條會顯示為方形視覺效果不夠柔和。5.2 制作圓環(huán)進(jìn)度條lv_bar支持圓弧模式。設(shè)置圓弧模式后進(jìn)度條的指示器會沿圓弧繪制常用于電池電量或倒計(jì)時(shí)顯示。lv_obj_t *arc_bar lv_bar_create(lv_scr_act()); lv_obj_set_size(arc_bar, 200, 200); lv_obj_align(arc_bar, LV_ALIGN_CENTER, 0, 0); lv_bar_set_mode(arc_bar, LV_BAR_MODE_NORMAL);圓弧進(jìn)度條默認(rèn)方向?yàn)轫槙r(shí)針。需要修改起始角度時(shí)使用樣式中的transform_angle屬性lv_obj_set_style_transform_angle(arc_bar, 1350, 0);LVGL 的角度單位是 0.1 度所以 1350 表示 135.0 度。這樣圓弧會從底部左側(cè)開始沿順時(shí)針走到右側(cè)形成 270 度的圓環(huán)。圓弧進(jìn)度條還常用LV_PART_INDICATOR的弧線屬性替代矩形背景。在樣式里設(shè)置arc_width、arc_color和arc_roundedlv_style_set_arc_color(style_indicator, lv_palette_main(LV_PALETTE_CYAN)); lv_style_set_arc_width(style_indicator, 10); lv_style_set_arc_rounded(style_indicator, true);5.3 用定時(shí)器模擬數(shù)據(jù)更新為了讓進(jìn)度條動(dòng)起來可以創(chuàng)建一個(gè) LVGL 定時(shí)器。LVGL 定時(shí)器會在lv_timer_handler執(zhí)行時(shí)被檢查并調(diào)用回調(diào)。注意它和millis()這種普通時(shí)間戳不同它屬于 LVGL 內(nèi)部的任務(wù)調(diào)度機(jī)制。lv_timer_t *timer lv_timer_create(progress_timer_cb, 100, NULL); void progress_timer_cb(lv_timer_t *timer) { static int16_t value 0; value 5; if (value 100) { value 0; } lv_bar_set_value(arc_bar, value, LV_ANIM_ON); }在這個(gè)回調(diào)里設(shè)置進(jìn)度條的值UI 會在每次lv_timer_handler執(zhí)行時(shí)刷新。100 毫秒的間隔表示每秒刷新 10 次。對于進(jìn)度條動(dòng)畫來說10 到 20 毫秒是流暢的100 毫秒會看到明顯的跳動(dòng)。5.4 儀表盤與進(jìn)度條聯(lián)動(dòng)實(shí)例把儀表盤和進(jìn)度條放在同一個(gè)頁面中可以讓整個(gè)界面更有“系統(tǒng)感”。下面這個(gè)例子是一個(gè)數(shù)據(jù)采集系統(tǒng)的狀態(tài)頁儀表盤顯示傳感器當(dāng)前值進(jìn)度條顯示本次采集任務(wù)的完成度兩者由同一個(gè)定時(shí)器驅(qū)動(dòng)。void system_timer_cb(lv_timer_t *timer) { static int16_t progress 0; int16_t sensor_value read_sensor_value(); progress 2; if (progress 100) { progress 0; } lv_gauge_set_value(gauge, 0, sensor_value); lv_bar_set_value(bar, progress, LV_ANIM_ON); lv_label_set_text_fmt(status_label, 采集進(jìn)度: %d%%, progress); }read_sensor_value假設(shè)會返回 0 到 100 之間的數(shù)值。實(shí)際項(xiàng)目中傳感器原始值可能需要?dú)w一化例如溫度傳感器讀取到 0 到 4095 的 ADC 原始值要映射到 0 到 100 度后才能傳給儀表盤。映射代碼很簡單int16_t normalized (adc_value * 100) / 4095;但要小心順序問題。先乘 100 再除 4095在 32 位 MCU 上不會溢出。如果數(shù)據(jù)范圍較大建議使用map函數(shù)或浮點(diǎn)數(shù)臨時(shí)變量避免整數(shù)溢出導(dǎo)致儀表盤指針亂跳。6. 參數(shù)配置與代碼調(diào)試要點(diǎn)6.1 關(guān)鍵 API 和參數(shù)的速查表API / 參數(shù)功能注意事項(xiàng)lv_gauge_create(parent)創(chuàng)建儀表盤對象父對象不能為 NULL通常為lv_scr_act()lv_gauge_set_range(obj, min, max)設(shè)置刻度范圍范圍值映射到指針角度lv_gauge_set_angle_offset(obj, offset)設(shè)置起始角度偏移單位是度常用 180 或 135lv_gauge_set_needle_count(obj, num, colors)設(shè)置指針數(shù)量和顏色多指針時(shí)索引從 0 開始lv_gauge_set_value(obj, needle_idx, value)設(shè)置指針值值超出范圍會被裁剪lv_bar_create(parent)創(chuàng)建進(jìn)度條對象默認(rèn)水平模式lv_bar_set_range(obj, min, max)設(shè)置進(jìn)度條范圍最小值不必為 0lv_bar_set_mode(obj, mode)設(shè)置模式LV_BAR_MODE_RANGE用于區(qū)間顯示lv_bar_set_value(obj, value, anim)設(shè)置進(jìn)度值LV_ANIM_ON啟用過渡動(dòng)畫lv_anim_start(anim)啟動(dòng)動(dòng)畫需要提前初始化動(dòng)畫結(jié)構(gòu)體lv_timer_create(cb, period, user_data)創(chuàng)建周期任務(wù)回調(diào)在lv_timer_handler中執(zhí)行l(wèi)v_obj_set_style_transform_angle(obj, angle, part)設(shè)置旋轉(zhuǎn)角度單位是 0.1 度6.2 顏色格式與屏幕色深的坑ESP32 常見的 SPI 屏幕使用 RGB565 顏色格式也就是 16 位色深。LVGL 的LV_COLOR_DEPTH需要和屏幕匹配。如果 LVGL 配置色深為 24 位而屏幕是 RGB565顏色會出現(xiàn)明顯偏差表現(xiàn)為紅色和藍(lán)色對調(diào)或者顏色分層。檢查方法很簡單Serial.printf(LV_COLOR_DEPTH %d\n, LV_COLOR_DEPTH); tft.pushColors((uint16_t *)color_p-full, w * h, true);pushColors的第四個(gè)參數(shù)如果為trueTFT_eSPI 會做一次字節(jié)序交換。不同屏幕的字節(jié)序要求不同。出現(xiàn)顏色偏色或漸變異常時(shí)優(yōu)先嘗試切換這個(gè)值。6.3 緩沖區(qū)大小對刷屏速度的影響LVGL 的繪制緩沖區(qū)越大每次局部刷新覆蓋的面積越大刷屏速度越快但內(nèi)存占用也越高。前面示例中static lv_color_t buf[TFT_WIDTH * 10];以 240x320 屏幕為例lv_color_t在 RGB565 下占用 2 字節(jié)所以這個(gè)緩沖區(qū)大小是240 * 10 * 2 4800字節(jié)。LVGL 也支持雙緩沖區(qū)static lv_color_t buf1[TFT_WIDTH * 10]; static lv_color_t buf2[TFT_WIDTH * 10]; lv_disp_draw_buf_init(draw_buf, buf1, buf2, TFT_WIDTH * 10);雙緩沖區(qū)允許 LVGL 在一個(gè)緩沖區(qū)被發(fā)送到屏幕時(shí)同時(shí)向另一個(gè)緩沖區(qū)寫入數(shù)據(jù)能減少刷屏等待時(shí)間。缺點(diǎn)是內(nèi)存翻倍。ESP32 的 RAM 通常夠用建議學(xué)習(xí)階段直接用雙緩沖區(qū)。6.4 LVGL 內(nèi)存不足的典型表現(xiàn)當(dāng) LVGL 內(nèi)部內(nèi)存池不足以創(chuàng)建對象或樣式時(shí)通常不會直接崩潰而是出現(xiàn)以下現(xiàn)象lv_gauge_create返回 NULL。界面部分控件缺失。刷新時(shí)控件顏色異常?？刂婆_輸出lv_mem相關(guān)錯(cuò)誤日志。定位方法是調(diào)用lv_mem_monitor_t mem_monitor; lv_mem_monitor(mem_monitor); Serial.printf(used: %d, free: %d, frag: %d%%\n, mem_monitor.used, mem_monitor.free, mem_monitor.frag_pct);如果free很小或者frag_pct很高考慮增大LV_MEM_SIZE或者檢查代碼中是否有大量未被刪除的對象。在開發(fā)階段不要反復(fù)創(chuàng)建和刪除相同對象這會積累內(nèi)存碎片。7. 常見問題排查與性能優(yōu)化7.1 屏幕只顯示黑色或白屏現(xiàn)象程序上傳后屏幕無圖像或只顯示純色。排查順序檢查 TFT_eSPI 的引腳配置是否正確尤其是TFT_MISO、TFT_MOSI、TFT_SCLK、TFT_CS、TFT_DC、TFT_RST。檢查lv_disp_flush_ready是否在 flush 回調(diào)中被調(diào)用。缺少這一行LVGL 會等待刷新完成界面永遠(yuǎn)停在初始狀態(tài)。用最簡單的 TFT_eSPI 測試代碼先不初始化 LVGL直接tft.fillScreen(TFT_RED)。如果屏幕變紅說明屏幕驅(qū)動(dòng)正常問題在 LVGL 配置。確認(rèn)lv_init()在tft.begin()之前調(diào)用。部分情況下 LVGL 初始化順序錯(cuò)誤會導(dǎo)致后續(xù)注冊對象失敗。7.2 儀表盤指針角度錯(cuò)位現(xiàn)象設(shè)置值為 50 時(shí)指針不在表盤正中間位置。原因起始角度偏移計(jì)算錯(cuò)誤。LVGL 默認(rèn)表盤起點(diǎn)并非垂直向上。使用lv_gauge_set_angle_offset(gauge, 135)后表盤從 135 度方向開始到 315 度方向結(jié)束覆蓋的是底部開口的標(biāo)準(zhǔn) 270 度區(qū)域。如果你的表盤范圍設(shè)計(jì)不同需要按以下公式調(diào)整實(shí)際角度 起始角 (當(dāng)前值 - 最小值) * (結(jié)束角 - 起始角) / (最大值 - 最小值)如果還是偏移先打印出lv_gauge_get_value的值確認(rèn)引腳和數(shù)據(jù)讀取是否正常。如果傳感器數(shù)值本身有波動(dòng)指針看起來就會“不在正確位置”。7.3 進(jìn)度條動(dòng)畫卡頓或跳變現(xiàn)象設(shè)置LV_ANIM_ON后進(jìn)度條直接從 0 跳到 100或動(dòng)畫中間有明顯卡頓。原因通常有四個(gè)lv_timer_handler調(diào)用間隔不穩(wěn)定。使用delay(5)的時(shí)候整體周期應(yīng)該是穩(wěn)定在幾毫秒到十幾毫秒。如果主循環(huán)中有delay(1000)這樣的長延時(shí)動(dòng)畫會嚴(yán)重卡頓。動(dòng)畫時(shí)間太短。lv_anim_set_time設(shè)成了 100 毫秒在低幀率屏幕上看起來就是跳變。目標(biāo)值修改過于頻繁。如果每 10 毫秒就修改一次目標(biāo)值動(dòng)畫還沒走到一半又改變方向視覺上就會抖。使用的是硬件 SPI 屏幕但刷屏區(qū)域過大Flash 寫入速度不足。這時(shí)可以減小緩沖區(qū)或者改用LV_COLOR_DEPTH 16減少數(shù)據(jù)量。7.4 中文標(biāo)簽顯示為方塊LVGL 內(nèi)置字體默認(rèn)只包含 ASCII 字符。要顯示中文需要將中文字體轉(zhuǎn)換為 LVGL 字體文件。常用工具是 LVGL 官方的字體轉(zhuǎn)換器把 TTF 字體按需要的字符子集生成 C 數(shù)組。示例LV_FONT_DECLARE(my_font_cn); lv_obj_set_style_text_font(label, my_font_cn, 0);生成字體時(shí)不要包含全部漢字。全量中文字體文件可以達(dá)到幾百 KB會占用大量 Flash。只需包含界面中用到的字符溫度、濕度、進(jìn)度、狀態(tài)、正常、告警等。生成工具會輸出glyph數(shù)組和查找表放入項(xiàng)目源碼目錄后聲明使用即可。7.5 MCU 主循環(huán)阻塞導(dǎo)致界面凍結(jié)LVGL 界面刷新依賴lv_timer_handler被周期性調(diào)用。如果主循環(huán)中加入了傳感器讀取、SD 卡寫入等耗時(shí)操作界面會暫停更新。推薦使用 RTOS 或分時(shí)處理。在 ESP32 Arduino 框架下可以把 LVGL 刷新放到一個(gè)獨(dú)立任務(wù)中void lvgl_task(void *arg) { while (1) { lv_timer_handler(); vTaskDelay(pdMS_TO_TICKS(5)); } } void setup() { xTaskCreatePinnedToCore(lvgl_task, lvgl, 8192, NULL, 1, NULL, 1); }這樣即使主循環(huán)處理其他事務(wù)LVGL 界面刷新也不會被完全阻塞。前提是 LVGL 相關(guān)操作只在同一個(gè)任務(wù)中調(diào)用避免多個(gè)任務(wù)同時(shí)修改 UI 對象導(dǎo)致競態(tài)條件。7.6 性能優(yōu)化方向歸納優(yōu)化手段適用場景效果開啟雙緩沖區(qū)普通頁面加載減少刷屏等待減小繪制區(qū)域只有局部變化降低 SPI 傳輸量使用lv_obj_set_style_pad_all統(tǒng)一內(nèi)邊距減少樣式差異減少編譯和渲染開銷避免頻繁創(chuàng)建銷毀對象長時(shí)間運(yùn)行設(shè)備減少內(nèi)存碎片使用單色圖標(biāo)字體替代 PNG圖標(biāo)密集界面減少內(nèi)存和 Flash 占用使用 PSRAM 存儲圖片大尺寸圖片背景釋放內(nèi)部 RAM降低刷新率靜態(tài)數(shù)據(jù)界面減少功耗8. 彩蛋C 語言面向?qū)ο箫L(fēng)格封裝控件模塊對于工具人階段的學(xué)習(xí)者建議把儀表盤和進(jìn)度條封裝成獨(dú)立模塊。嵌入式工程師寫代碼時(shí)最頭疼的就是把所有 UI 邏輯堆在setup()和loop()中。當(dāng)界面元素增多后這種寫法幾乎無法維護(hù)?？梢允褂?C 語言面向?qū)ο箫L(fēng)格用結(jié)構(gòu)體和函數(shù)指針模擬簡單類typedef struct { lv_obj_t *gauge; int16_t min_value; int16_t max_value; int16_t current_value; void (*on_value_changed)(int16_t old_value, int16_t new_value); } ui_gauge_t; void ui_gauge_init(ui_gauge_t *gauge, lv_obj_t *parent, int16_t min, int16_t max) { gauge-gauge lv_gauge_create(parent); gauge-min_value min; gauge-max_value max; gauge-current_value min; lv_gauge_set_range(gauge-gauge, min, max); lv_gauge_set_angle_offset(gauge-gauge, 135); } void ui_gauge_update(ui_gauge_t *gauge, int16_t value) { if (value gauge-min_value) { value gauge-min_value; } if (value gauge-max_value) { value gauge-max_value; } if (value ! gauge-current_value gauge-on_value_changed ! NULL) { gauge-on_value_changed(gauge-current_value, value); } gauge-current_value value; lv_gauge_set_value(gauge-gauge, 0, value); }這個(gè)封裝把儀表盤的范圍檢查、值變化回調(diào)、LVGL API 調(diào)用整合到一起。實(shí)際項(xiàng)目中可以在此基礎(chǔ)上增加報(bào)警閾值、狀態(tài)顏色切換和歷史值記錄讓 UI 組件真正融入業(yè)務(wù)邏輯。9. 從界面原型到可量產(chǎn)界面的建議9.1 學(xué)習(xí)階段如何快速驗(yàn)證效果如果手邊沒有 ESP32 開發(fā)板也可以先在 PC 上使用 LVGL 模擬器。LVGL 官方提供了模擬器項(xiàng)目支持 Visual Studio、Eclipse 或 VS Code。模擬環(huán)境下可以使用鼠標(biāo)模擬觸摸直接調(diào)試儀表盤和進(jìn)度條的布局、顏色、動(dòng)畫效果。待界面效果確認(rèn)后再移植到 ESP32可節(jié)省大量燒錄和看屏幕的時(shí)間。在 PC 模擬器上調(diào)試時(shí)多注意樣式的視覺差異。PC 屏幕和 SPI 小屏的色域、亮度、DPI 不同。確認(rèn)效果時(shí)不要只看顏色更要確認(rèn)控件布局是否超出屏幕邊界字體大小在低分辨率屏上是否足夠清晰。9.2 生產(chǎn)環(huán)境必需的穩(wěn)定性考慮從原型進(jìn)入實(shí)際產(chǎn)品時(shí)需要額外關(guān)注以下內(nèi)容進(jìn)度條和儀表盤的刷新頻率要有上限。傳感器每秒刷新 1 次即可不需要 100 毫秒刷新一次。高頻刷新會占用 CPU 和 SPI 帶寬影響其他任務(wù)。使用lv_obj_clean清理頁面時(shí)要確認(rèn)定時(shí)器和動(dòng)畫資源也已停止。如果一個(gè)頁面被刪除但它的動(dòng)畫定時(shí)器仍然在運(yùn)行LVGL 可能訪問已經(jīng)釋放的對象導(dǎo)致重啟或內(nèi)核 panic。長時(shí)間運(yùn)行的設(shè)備要在空閑狀態(tài)減少 LVGL 工作負(fù)載。如果頁面是靜態(tài)顯示可以考慮降低lv_timer_handler的執(zhí)行頻率達(dá)到省電目的。生產(chǎn)環(huán)境應(yīng)記錄 LVGL 內(nèi)存使用情況。通過lv_mem_monitor定期把內(nèi)存水位上傳到日志系統(tǒng)可以從數(shù)據(jù)上判斷是否存在內(nèi)存泄漏。9.3 可復(fù)用的 UI 設(shè)計(jì)方案下表列出一套適用于 ESP32 LVGL 設(shè)備界面的基礎(chǔ)配色與參數(shù)方案作為實(shí)際項(xiàng)目參考作用推薦顏色說明背景0x1A1A2E深色背景降低屏幕功耗突出前景安全區(qū)間0x2ECC71綠色指示正常警戒區(qū)間0xF1C40F黃色指示注意危險(xiǎn)區(qū)間0xE74C3C紅色指示告警主按鈕0x3498DB藍(lán)色表示可交互文本主色0xFFFFFF白色保證對比度文本次級0x95A5A6灰色用于輔助信息進(jìn)度條背景0x2C3E50暗色背景適配設(shè)備配色會直接影響用戶對部件狀態(tài)的判斷速度。紅色不意味著一定危險(xiǎn)但盡量不要用高飽和紅色顯示正常狀態(tài)。安全區(qū)間用綠色、警戒區(qū)間用黃色、危險(xiǎn)區(qū)間用紅色這是嵌入式設(shè)備長期沿用的約定不要輕易顛覆。10. 進(jìn)一步的擴(kuò)展方向儀表盤和進(jìn)度條只是 LVGL 控件樹的開始。當(dāng)這兩塊功能跑通后你可以繼續(xù)向以下方向擴(kuò)展讓整個(gè)設(shè)備界面更完整使用lv_chart繪制傳感器歷史數(shù)據(jù)折線圖把儀表盤的實(shí)時(shí)值擴(kuò)展為趨勢分析。使用lv_msgbox實(shí)現(xiàn)告警彈窗當(dāng)儀表盤數(shù)值越過閾值時(shí)向用戶展示提醒。使用lv_tabview或lv_win組織多個(gè)功能頁面避免單一頁面內(nèi)容擁擠。使用lv_switch、lv_slider、lv_dropdown增加參數(shù)設(shè)置能力讓用戶直接通過屏幕調(diào)整設(shè)備運(yùn)行參數(shù)。將 LVGL 移植到 FreeRTOS讓 UI 任務(wù)、傳感器任務(wù)、通信任務(wù)各自獨(dú)立運(yùn)行提高系統(tǒng)實(shí)時(shí)性。使用 SquareLine Studio 或 GUI Guider 這類所見即所得工具設(shè)計(jì)界面然后導(dǎo)出 LVGL C 代碼。這種方式適合界面元素較多的項(xiàng)目但導(dǎo)出的代碼仍然需要根據(jù)業(yè)務(wù)邏輯進(jìn)行二次封裝。從嵌入式開發(fā)角度看儀表盤和進(jìn)度條是入門 LVGL 的極好起點(diǎn)。它們不難卻覆蓋了對象創(chuàng)建、樣式配置、值范圍映射、動(dòng)畫驅(qū)動(dòng)和定時(shí)器刷新這些核心知識。把這兩類控件的機(jī)制吃透再去看圖表、標(biāo)簽頁和容器會發(fā)現(xiàn) LVGL 的整體設(shè)計(jì)思路是統(tǒng)一的一切都是對象一切外觀都由樣式控制一切變化都發(fā)生在定時(shí)器驅(qū)動(dòng)的刷新循環(huán)里。 ESP32+LVGL儀表盤與進(jìn)度條實(shí)戰(zhàn)：從環(huán)境搭建到動(dòng)畫聯(lián)動(dòng)
在實(shí)際嵌入式項(xiàng)目中LVGL 的價(jià)值不只是把屏幕點(diǎn)亮而是讓 MCU 也能擁有接近手機(jī) App 的交互界面。尤其在做設(shè)備狀態(tài)展示、數(shù)據(jù)監(jiān)控和簡單的控制面板時(shí)儀表盤和進(jìn)度條是復(fù)用率最高的兩種控件組合。這篇文章圍繞 ESP32 和 LVGL從圖形庫工作機(jī)制、環(huán)境搭建、儀表盤與進(jìn)度條的實(shí)現(xiàn)代碼到坐標(biāo)換算、動(dòng)畫聯(lián)動(dòng)、生產(chǎn)環(huán)境注意事項(xiàng)完整梳理一條可復(fù)現(xiàn)的開發(fā)路徑。1. 為什么嵌入式界面會選 LVGL 儀表盤和進(jìn)度條LVGLLight and Versatile Graphics Library是一個(gè)專為嵌入式系統(tǒng)設(shè)計(jì)的開源圖形庫。它不需要運(yùn)行完整的操作系統(tǒng)界面框架也能在有限的 RAM 和 Flash 上渲染按鈕、標(biāo)簽、圖表、儀表盤、進(jìn)度條等常見控件。ESP32 之所以經(jīng)常和 LVGL 搭配出現(xiàn)是因?yàn)?ESP32 的 SRAM 通常在 320 KB 到 520 KB 之間Flash 通常在 4 MB 以上滿足 LVGL 在中等分辨率屏幕上的運(yùn)行要求。儀表盤的核心用途是顯示一個(gè)范圍內(nèi)的當(dāng)前值典型場景包括溫控器顯示當(dāng)前溫度、電機(jī)控制器顯示轉(zhuǎn)速、電源設(shè)備顯示輸出電壓、空氣檢測儀顯示 PM2.5 濃度。儀表盤的視覺重點(diǎn)是通過角度和弧形刻度讓用戶一屏之內(nèi)判斷當(dāng)前值是處于安全區(qū)、警戒區(qū)還是危險(xiǎn)區(qū)。進(jìn)度條的核心用途是反饋任務(wù)的完成比例。嵌入式設(shè)備里的進(jìn)度條不只是在做固件升級時(shí)出現(xiàn)還常見于充電狀態(tài)顯示、數(shù)據(jù)采集進(jìn)度、文件寫入進(jìn)度、定時(shí)任務(wù)倒計(jì)時(shí)。LVGL 的進(jìn)度條控件支持水平、垂直和圓弧三種方向可以設(shè)置動(dòng)畫、自定義指示器樣式甚至與定時(shí)器聯(lián)動(dòng)實(shí)時(shí)刷新數(shù)值。選擇用 LVGL 實(shí)現(xiàn)這兩類控件有一個(gè)非常實(shí)際的理由LVGL 提供對象樹、樣式系統(tǒng)、事件回調(diào)、動(dòng)畫框架和內(nèi)存管理。開發(fā)者不需要從底層逐個(gè)畫像素而是創(chuàng)建lv_gauge、lv_bar這類對象然后調(diào)整坐標(biāo)、尺寸、樣式和數(shù)值即可。這和直接在 TFT 上調(diào)用畫線函數(shù)相比效率和可維護(hù)性都要高很多。2. 理解 LVGL 中儀表盤與進(jìn)度條的工作機(jī)制2.1 LVGL 對象、樣式和事件三者的關(guān)系LVGL 的界面由對象Object組成。每個(gè)對象在內(nèi)存中是一個(gè)結(jié)構(gòu)體保存位置、尺寸、父對象、樣式、事件回調(diào)、用戶數(shù)據(jù)等信息。儀表盤是lv_gauge對象進(jìn)度條是lv_bar對象它們都屬于 LVGL 內(nèi)置控件。樣式Style負(fù)責(zé)外觀。LVGL 8.x 之后使用全新的樣式系統(tǒng)樣式屬性包括背景顏色、邊框、圓角、文本顏色、線寬、弧線寬度、指示器顏色等。樣式可以共享多個(gè)對象可以引用同一個(gè)樣式對象這樣能減少內(nèi)存占用。事件Event負(fù)責(zé)交互。LVGL 支持點(diǎn)擊、長按、釋放、值變化、繪制完成等事件。儀表盤和進(jìn)度條本身不一定需要事件回調(diào)但在實(shí)際項(xiàng)目中開發(fā)者為頁面添加觸摸滑動(dòng)、點(diǎn)擊切換、值變化回調(diào)可以讓控件和業(yè)務(wù)邏輯聯(lián)動(dòng)。儀表盤的內(nèi)部結(jié)構(gòu)可以這樣理解它實(shí)際上是由刻度線、刻度數(shù)字和指針三部分組成的復(fù)合對象。lv_gauge通過lv_gauge_set_value設(shè)置指針位置通過lv_gauge_set_needle_count設(shè)置指針數(shù)量。刻度線范圍由最小值、最大值和起始角度、結(jié)束角度決定。進(jìn)度條在 LVGL 中分為背景軌道和指示器兩部分。調(diào)用lv_bar_set_value會改變指示器的長度或高度。LVGL 內(nèi)部會對lv_bar的當(dāng)前值做范圍裁剪如果在創(chuàng)建對象時(shí)開啟了LV_BAR_MODE_RANGE則顯示范圍可以更靈活地表示區(qū)間。2.2 儀表盤角度換算與坐標(biāo)映射LVGL 的lv_gauge控件在繪制刻度線時(shí)會按照角度從起始角到結(jié)束角分布刻度。默認(rèn)情況下0 度在對象中心的正右方角度按逆時(shí)針方向增加。實(shí)際項(xiàng)目里開發(fā)者需要根據(jù)需求調(diào)整lv_gauge_set_angle_offset。當(dāng)需要自己畫弧形漸變或復(fù)雜背景時(shí)還會需要角度到坐標(biāo)的換算函數(shù)。假設(shè)圓心坐標(biāo)為(cx, cy)半徑為r角度為angle那么刻度線終點(diǎn)的標(biāo)準(zhǔn)公式為radian angle * PI / 180 x cx r * cos(radian) y cy r * sin(radian)這個(gè)公式在繪制自定義儀表盤背景時(shí)非常重要。LVGL 內(nèi)置的lv_gauge提供常規(guī)儀表盤能力但如果你需要漸變色弧、不等間距刻度、彩色區(qū)域標(biāo)記就必須自己計(jì)算點(diǎn)坐標(biāo)然后調(diào)用lv_canvas或lv_draw_arc完成繪制。2.3 進(jìn)度條動(dòng)畫背后的異步刷新機(jī)制LVGL 中觸發(fā)界面刷新不是直接調(diào)用畫布更新而是通過lv_obj_invalidate將對象所在區(qū)域標(biāo)記為“需要重繪”。刷新任務(wù)由 LVGL 的lv_timer_handler在循環(huán)中執(zhí)行。因此在代碼中修改進(jìn)度條的value后畫面會在下一個(gè)定時(shí)器周期內(nèi)更新不需要開發(fā)者手動(dòng)調(diào)用重繪函數(shù)。動(dòng)畫又是另一層機(jī)制。lv_anim系列函數(shù)可以在一段時(shí)間內(nèi)線性或非線性地改變一個(gè)變量的值。對進(jìn)度條來說常見寫法是創(chuàng)建一個(gè)lv_anim目標(biāo)地址指向進(jìn)度條的值變量執(zhí)行完成后自動(dòng)賦值給控件。理解這個(gè)機(jī)制對排查“界面卡住”和“進(jìn)度條不刷新”非常有幫助。如果主循環(huán)被阻塞比如在一個(gè)while(1)里等待傳感器讀數(shù)LVGL 的定時(shí)器就得不到執(zhí)行機(jī)會界面自然不會更新。正確做法是讓耗時(shí)操作分段執(zhí)行或者放到獨(dú)立任務(wù)中。3. 搭建 ESP32 LVGL 開發(fā)環(huán)境3.1 硬件選型與準(zhǔn)備實(shí)現(xiàn)本文示例需要準(zhǔn)備以下硬件部件推薦型號說明主控ESP32 DevKitC、ESP32-WROOM-32使用 ESP-IDF 或 PlatformIO 均可屏幕1.8 寸 ST7735、2.4 寸 ILI9341、3.5 寸 ILI9488分辨率建議 240x320 或 320x480觸摸XPT2046 電阻觸摸可選如果不做交互可以不接接線杜邦線若干注意 SPI 通信線和電源線LVGL 對屏幕驅(qū)動(dòng)本身沒有強(qiáng)綁定。它只負(fù)責(zé)生成顏色緩沖區(qū)中的像素?cái)?shù)據(jù)。真正把像素發(fā)給屏幕的是底層驅(qū)動(dòng)比如 TFT_eSPI、Arduino_GFX、LovyanGFX或者 ESP-IDF 下的 ESP32-LCD 驅(qū)動(dòng)庫。為了讓文章聚焦主題這里使用 Arduino TFT_eSPI 作為示例環(huán)境因?yàn)樗渲煤唵闻芡ㄋ俣茸羁臁?.2 軟件環(huán)境與依賴庫推薦使用 PlatformIO 創(chuàng)建 Arduino 框架的 ESP32 項(xiàng)目也可以使用 Arduino IDE。兩者的核心區(qū)別是 PlatformIO 對庫版本管理和多環(huán)境編譯支持更好。需要的庫包括lvgl圖形庫本體。TFT_eSPI屏幕驅(qū)動(dòng)同時(shí)為 LVGL 提供顯示回調(diào)。Arduino框架提供setup()和loop()入口。在 PlatformIO 的platformio.ini中可以這樣配置[env:esp32dev] platform espressif32 board esp32dev framework arduino monitor_speed 115200 lib_deps lvgl/lvgl^8.4.0 bodmer/TFT_eSPI^2.5.0如果使用 Arduino IDE則在庫管理器中搜索并安裝LVGL和TFT_eSPI。需要留意的是LVGL 的版本差異比較大7.x、8.x、9.x 的 API 不完全兼容。本文示例基于 LVGL 8.4 編寫。3.3 配置 LVGL 核心參數(shù)lv_conf.hLVGL 使用lv_conf.h控制編譯特性。這個(gè)文件需要從 LVGL 庫目錄復(fù)制到項(xiàng)目根目錄的include或src目錄下并開啟#if 1宏。重點(diǎn)配置項(xiàng)如下配置項(xiàng)推薦值說明LV_COLOR_DEPTH16RGB565適配常見 SPI 屏幕LV_MEM_CUSTOM0使用 LVGL 內(nèi)置內(nèi)存分配LV_MEM_SIZE32 * 1024圖形對象和緩沖區(qū)分配的內(nèi)存池LV_TICK_CUSTOM1使用 Arduino 的millis()提供時(shí)間基準(zhǔn)LV_FONT_MONTSERRAT_141開啟默認(rèn)數(shù)字字體LV_USE_GAUGE1開啟儀表盤控件LV_USE_BAR1開啟進(jìn)度條控件LV_USE_ANIM1開啟動(dòng)畫功能如果不開啟LV_USE_GAUGE和LV_USE_BAR編譯時(shí)控件代碼不會被包含調(diào)用lv_gauge_create會直接編譯報(bào)錯(cuò)。這里特別強(qiáng)調(diào)的原因是很多新手在移植 LVGL 后找不到儀表盤控件絕大多數(shù)是配置宏沒有開啟。LV_TICK_CUSTOM配置在 Arduino 環(huán)境下要設(shè)置為 1并確保測試代碼中調(diào)用lv_tick_inc(millis() - last_tick)LVGL 才能獲得正確的系統(tǒng)時(shí)間用于動(dòng)畫計(jì)算。3.4 驗(yàn)證顯示鏈路點(diǎn)亮屏幕并輸出顏色在創(chuàng)建儀表盤之前先做一個(gè)最基礎(chǔ)的顯示驗(yàn)證確保屏幕驅(qū)動(dòng)和 LVGL 已經(jīng)打通。下面這段代碼在屏幕中央繪制一個(gè)紅色矩形#include lvgl.h #include TFT_eSPI.h TFT_eSPI tft TFT_eSPI(); static lv_disp_draw_buf_t draw_buf; static lv_color_t buf[TFT_WIDTH * 10]; void my_disp_flush(lv_disp_drv_t *disp, 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); } void setup() { Serial.begin(115200); lv_init(); tft.begin(); tft.setRotation(1); lv_disp_draw_buf_init(draw_buf, buf, NULL, TFT_WIDTH * 10); static lv_disp_drv_t disp_drv; lv_disp_drv_init(disp_drv); disp_drv.hor_res TFT_WIDTH; disp_drv.ver_res TFT_HEIGHT; disp_drv.flush_cb my_disp_flush; lv_disp_drv_register(disp_drv); } void loop() { lv_timer_handler(); delay(5); }這段代碼的重點(diǎn)是my_disp_flush。LVGL 每次刷新都會把一塊矩形區(qū)域的顏色數(shù)據(jù)交給這個(gè)回調(diào)函數(shù)?；卣{(diào)里調(diào)用 TFT_eSPI 的pushColors把顏色數(shù)據(jù)寫入屏幕對應(yīng)的地址窗口。如果這里寫錯(cuò)界面會出現(xiàn)花屏、偏移或撕裂。4. 從零實(shí)現(xiàn) LVGL 儀表盤4.1 創(chuàng)建儀表盤對象并配置刻度范圍LVGL 的儀表盤控件創(chuàng)建函數(shù)是lv_gauge_create。通過以下代碼可以創(chuàng)建一個(gè) 320x240 屏幕上的儀表盤lv_obj_t *gauge lv_gauge_create(lv_scr_act()); lv_obj_set_size(gauge, 220, 220); lv_obj_center(gauge); lv_gauge_set_range(gauge, 0, 100); lv_gauge_set_angle_offset(gauge, 135); lv_gauge_set_needle_count(gauge, 1, NULL);lv_gauge_set_range設(shè)置最小值和最大值。lv_gauge_set_angle_offset設(shè)置起始角度偏移量。默認(rèn)儀表盤從 -90 度位置開始也就是表盤頂部。偏移 135 度會讓表盤范圍變成底部開口的標(biāo)準(zhǔn) 270 度儀表盤。刻度數(shù)量和刻度線長度不是通過獨(dú)立 API 配置的而是通過樣式控制。儀表盤的背景線、刻度線、指針分別使用不同的樣式屬性lv_gauge_set_needle_count(gauge, 1, lv_palette_main(LV_PALETTE_RED));第二個(gè)參數(shù)是指針數(shù)量。一個(gè)表盤可以有多根指針比如時(shí)鐘里的時(shí)針和分針。第三個(gè)參數(shù)可以傳一個(gè)顏色數(shù)組用于給每根指針設(shè)置顏色。4.2 控制指針位置設(shè)置值和動(dòng)畫當(dāng)需要讓指針指向 80 時(shí)調(diào)用lv_gauge_set_value(gauge, 0, 80);第二個(gè)參數(shù)是指針?biāo)饕Ｒ驗(yàn)樯厦嬖O(shè)置了一根指針?biāo)运饕?0。該調(diào)用會立即更新指針位置。如果希望指針平滑轉(zhuǎn)動(dòng)可以配合動(dòng)畫變量static int16_t current_value 0; void set_gauge_value_anim(int16_t target) { lv_anim_t a; lv_anim_init(a); lv_anim_set_var(a, current_value); lv_anim_set_exec_cb(a, gauge_value_anim_cb); lv_anim_set_values(a, current_value, target); lv_anim_set_time(a, 800); lv_anim_set_path_cb(a, lv_anim_path_ease_out); lv_anim_start(a); } void gauge_value_anim_cb(void *var, int32_t value) { current_value value; lv_gauge_set_value(gauge, 0, current_value); }lv_anim_set_exec_cb里注冊的是每次動(dòng)畫更新時(shí)執(zhí)行的回調(diào)。LVGL 根據(jù)設(shè)定的總時(shí)長和路徑函數(shù)在一段時(shí)間內(nèi)反復(fù)調(diào)用這個(gè)回調(diào)參數(shù)value從起點(diǎn)逐步變化到終點(diǎn)。lv_anim_path_ease_out會讓指針先快后慢視覺上更自然。4.3 繪制自定義弧形刻度區(qū)域內(nèi)置lv_gauge的刻度樣式相對固定。如果你需要把 0 到 100 分成三段分別顯示綠色、黃色、紅色推薦使用lv_canvas繪制自定義背景。思路是先創(chuàng)建一塊畫布設(shè)置背景透明然后在畫布上畫三條弧形線段lv_obj_t *canvas lv_canvas_create(lv_scr_act()); lv_canvas_set_buffer(canvas, cbuf, 240, 240, LV_IMG_CF_TRUE_COLOR); lv_obj_center(canvas); lv_canvas_fill_bg(canvas, lv_color_black(), LV_OPA_TRANSP); lv_draw_arc_dsc_t arc_dsc; lv_draw_arc_dsc_init(arc_dsc); arc_dsc.width 12; arc_dsc.color lv_palette_main(LV_PALETTE_GREEN); arc_dsc.opa LV_OPA_COVER; lv_canvas_draw_arc(canvas, 120, 120, 100, 135, 45, arc_dsc); arc_dsc.color lv_palette_main(LV_PALETTE_YELLOW); lv_canvas_draw_arc(canvas, 120, 120, 100, 45, 90, arc_dsc); arc_dsc.color lv_palette_main(LV_PALETTE_RED); lv_canvas_draw_arc(canvas, 120, 120, 100, 90, 135, arc_dsc);lv_canvas_draw_arc的參數(shù)分別為畫布對象、圓心 x、圓心 y、半徑、起始角度、結(jié)束角度和線段樣式。角度單位的含義和前面介紹的一致0 度在正右方逆時(shí)針增加。這里的 135 到 45 度是底部開口的標(biāo)準(zhǔn)儀表盤分布。值得說明的是這種自定義弧形背景需要自己控制刻度線。對于刻度線可以寫一個(gè)循環(huán)從 135 度開始按步長計(jì)算每個(gè)刻度線的起點(diǎn)和終點(diǎn)然后調(diào)用lv_canvas_draw_line。角度到坐標(biāo)的換算使用前面給出的正弦余弦公式。4.4 儀表盤實(shí)戰(zhàn)溫控器界面將上面的能力組合起來可以做出一個(gè)簡易溫控器界面溫度范圍 0 到 100 攝氏度中心位置顯示當(dāng)前溫度儀表盤指針實(shí)時(shí)指示溫度值。關(guān)鍵代碼結(jié)構(gòu)如下lv_obj_t *ui_gauge; lv_obj_t *ui_temp_label; void ui_create() { ui_gauge lv_gauge_create(lv_scr_act()); lv_obj_set_size(ui_gauge, 240, 240); lv_obj_align(ui_gauge, LV_ALIGN_CENTER, 0, 0); lv_gauge_set_range(ui_gauge, 0, 100); lv_gauge_set_angle_offset(ui_gauge, 135); lv_gauge_set_needle_count(ui_gauge, 1, NULL); ui_temp_label lv_label_create(lv_scr_act()); lv_obj_align(ui_temp_label, LV_ALIGN_CENTER, 0, 40); lv_label_set_text(ui_temp_label, -- C); lv_obj_set_style_text_font(ui_temp_label, lv_font_montserrat_24, 0); } void update_temperature(int16_t temp) { lv_gauge_set_value(ui_gauge, 0, temp); lv_label_set_text_fmt(ui_temp_label, %d C, temp); }注意這里lv_label_set_text_fmt會格式化字符串比先調(diào)用snprintf再set_text更簡潔但每次刷新都會做一次格式化所以刷新頻率不要太高。對于 1 秒一次的溫度刷新這樣寫沒有問題。5. 實(shí)現(xiàn) LVGL 進(jìn)度條與動(dòng)態(tài)聯(lián)動(dòng)5.1 創(chuàng)建普通水平進(jìn)度條進(jìn)度條在 LVGL 中最簡單的創(chuàng)建方式如下lv_obj_t *bar lv_bar_create(lv_scr_act()); lv_obj_set_size(bar, 200, 20); lv_obj_align(bar, LV_ALIGN_BOTTOM_MID, 0, -30); lv_bar_set_range(bar, 0, 100); lv_bar_set_value(bar, 30, LV_ANIM_ON);lv_bar_set_value的第三個(gè)參數(shù)若傳入LV_ANIM_ON進(jìn)度條會從當(dāng)前值動(dòng)畫過渡到目標(biāo)值。LV_ANIM_OFF則直接跳變。對于充電進(jìn)度、升級進(jìn)度這類場景開啟動(dòng)畫會讓界面觀感更友好。自定義樣式的常用寫法是為背景和指示器分別設(shè)置樣式static lv_style_t style_bg; static lv_style_t style_indicator; lv_style_init(style_bg); lv_style_set_bg_color(style_bg, lv_color_hex(0x333333)); lv_style_set_bg_opa(style_bg, LV_OPA_COVER); lv_style_set_radius(style_bg, 10); lv_style_init(style_indicator); lv_style_set_bg_color(style_indicator, lv_palette_main(LV_PALETTE_BLUE)); lv_style_set_bg_opa(style_indicator, LV_OPA_COVER); lv_style_set_radius(style_indicator, 10); lv_obj_add_style(bar, style_bg, 0); lv_obj_add_style(bar, style_indicator, LV_PART_INDICATOR);LV_PART_INDICATOR指向進(jìn)度條的指示器部分也就是實(shí)際顯示值的矩形。背景軌道的樣式通過0這個(gè)默認(rèn)狀態(tài)設(shè)置。如果你不設(shè)置指示器圓角進(jìn)度條會顯示為方形視覺效果不夠柔和。5.2 制作圓環(huán)進(jìn)度條lv_bar支持圓弧模式。設(shè)置圓弧模式后進(jìn)度條的指示器會沿圓弧繪制常用于電池電量或倒計(jì)時(shí)顯示。lv_obj_t *arc_bar lv_bar_create(lv_scr_act()); lv_obj_set_size(arc_bar, 200, 200); lv_obj_align(arc_bar, LV_ALIGN_CENTER, 0, 0); lv_bar_set_mode(arc_bar, LV_BAR_MODE_NORMAL);圓弧進(jìn)度條默認(rèn)方向?yàn)轫槙r(shí)針。需要修改起始角度時(shí)使用樣式中的transform_angle屬性lv_obj_set_style_transform_angle(arc_bar, 1350, 0);LVGL 的角度單位是 0.1 度所以 1350 表示 135.0 度。這樣圓弧會從底部左側(cè)開始沿順時(shí)針走到右側(cè)形成 270 度的圓環(huán)。圓弧進(jìn)度條還常用LV_PART_INDICATOR的弧線屬性替代矩形背景。在樣式里設(shè)置arc_width、arc_color和arc_roundedlv_style_set_arc_color(style_indicator, lv_palette_main(LV_PALETTE_CYAN)); lv_style_set_arc_width(style_indicator, 10); lv_style_set_arc_rounded(style_indicator, true);5.3 用定時(shí)器模擬數(shù)據(jù)更新為了讓進(jìn)度條動(dòng)起來可以創(chuàng)建一個(gè) LVGL 定時(shí)器。LVGL 定時(shí)器會在lv_timer_handler執(zhí)行時(shí)被檢查并調(diào)用回調(diào)。注意它和millis()這種普通時(shí)間戳不同它屬于 LVGL 內(nèi)部的任務(wù)調(diào)度機(jī)制。lv_timer_t *timer lv_timer_create(progress_timer_cb, 100, NULL); void progress_timer_cb(lv_timer_t *timer) { static int16_t value 0; value 5; if (value 100) { value 0; } lv_bar_set_value(arc_bar, value, LV_ANIM_ON); }在這個(gè)回調(diào)里設(shè)置進(jìn)度條的值UI 會在每次lv_timer_handler執(zhí)行時(shí)刷新。100 毫秒的間隔表示每秒刷新 10 次。對于進(jìn)度條動(dòng)畫來說10 到 20 毫秒是流暢的100 毫秒會看到明顯的跳動(dòng)。5.4 儀表盤與進(jìn)度條聯(lián)動(dòng)實(shí)例把儀表盤和進(jìn)度條放在同一個(gè)頁面中可以讓整個(gè)界面更有“系統(tǒng)感”。下面這個(gè)例子是一個(gè)數(shù)據(jù)采集系統(tǒng)的狀態(tài)頁儀表盤顯示傳感器當(dāng)前值進(jìn)度條顯示本次采集任務(wù)的完成度兩者由同一個(gè)定時(shí)器驅(qū)動(dòng)。void system_timer_cb(lv_timer_t *timer) { static int16_t progress 0; int16_t sensor_value read_sensor_value(); progress 2; if (progress 100) { progress 0; } lv_gauge_set_value(gauge, 0, sensor_value); lv_bar_set_value(bar, progress, LV_ANIM_ON); lv_label_set_text_fmt(status_label, 采集進(jìn)度: %d%%, progress); }read_sensor_value假設(shè)會返回 0 到 100 之間的數(shù)值。實(shí)際項(xiàng)目中傳感器原始值可能需要?dú)w一化例如溫度傳感器讀取到 0 到 4095 的 ADC 原始值要映射到 0 到 100 度后才能傳給儀表盤。映射代碼很簡單int16_t normalized (adc_value * 100) / 4095;但要小心順序問題。先乘 100 再除 4095在 32 位 MCU 上不會溢出。如果數(shù)據(jù)范圍較大建議使用map函數(shù)或浮點(diǎn)數(shù)臨時(shí)變量避免整數(shù)溢出導(dǎo)致儀表盤指針亂跳。6. 參數(shù)配置與代碼調(diào)試要點(diǎn)6.1 關(guān)鍵 API 和參數(shù)的速查表API / 參數(shù)功能注意事項(xiàng)lv_gauge_create(parent)創(chuàng)建儀表盤對象父對象不能為 NULL通常為lv_scr_act()lv_gauge_set_range(obj, min, max)設(shè)置刻度范圍范圍值映射到指針角度lv_gauge_set_angle_offset(obj, offset)設(shè)置起始角度偏移單位是度常用 180 或 135lv_gauge_set_needle_count(obj, num, colors)設(shè)置指針數(shù)量和顏色多指針時(shí)索引從 0 開始lv_gauge_set_value(obj, needle_idx, value)設(shè)置指針值值超出范圍會被裁剪lv_bar_create(parent)創(chuàng)建進(jìn)度條對象默認(rèn)水平模式lv_bar_set_range(obj, min, max)設(shè)置進(jìn)度條范圍最小值不必為 0lv_bar_set_mode(obj, mode)設(shè)置模式LV_BAR_MODE_RANGE用于區(qū)間顯示lv_bar_set_value(obj, value, anim)設(shè)置進(jìn)度值LV_ANIM_ON啟用過渡動(dòng)畫lv_anim_start(anim)啟動(dòng)動(dòng)畫需要提前初始化動(dòng)畫結(jié)構(gòu)體lv_timer_create(cb, period, user_data)創(chuàng)建周期任務(wù)回調(diào)在lv_timer_handler中執(zhí)行l(wèi)v_obj_set_style_transform_angle(obj, angle, part)設(shè)置旋轉(zhuǎn)角度單位是 0.1 度6.2 顏色格式與屏幕色深的坑ESP32 常見的 SPI 屏幕使用 RGB565 顏色格式也就是 16 位色深。LVGL 的LV_COLOR_DEPTH需要和屏幕匹配。如果 LVGL 配置色深為 24 位而屏幕是 RGB565顏色會出現(xiàn)明顯偏差表現(xiàn)為紅色和藍(lán)色對調(diào)或者顏色分層。檢查方法很簡單Serial.printf(LV_COLOR_DEPTH %d\n, LV_COLOR_DEPTH); tft.pushColors((uint16_t *)color_p-full, w * h, true);pushColors的第四個(gè)參數(shù)如果為trueTFT_eSPI 會做一次字節(jié)序交換。不同屏幕的字節(jié)序要求不同。出現(xiàn)顏色偏色或漸變異常時(shí)優(yōu)先嘗試切換這個(gè)值。6.3 緩沖區(qū)大小對刷屏速度的影響LVGL 的繪制緩沖區(qū)越大每次局部刷新覆蓋的面積越大刷屏速度越快但內(nèi)存占用也越高。前面示例中static lv_color_t buf[TFT_WIDTH * 10];以 240x320 屏幕為例lv_color_t在 RGB565 下占用 2 字節(jié)所以這個(gè)緩沖區(qū)大小是240 * 10 * 2 4800字節(jié)。LVGL 也支持雙緩沖區(qū)static lv_color_t buf1[TFT_WIDTH * 10]; static lv_color_t buf2[TFT_WIDTH * 10]; lv_disp_draw_buf_init(draw_buf, buf1, buf2, TFT_WIDTH * 10);雙緩沖區(qū)允許 LVGL 在一個(gè)緩沖區(qū)被發(fā)送到屏幕時(shí)同時(shí)向另一個(gè)緩沖區(qū)寫入數(shù)據(jù)能減少刷屏等待時(shí)間。缺點(diǎn)是內(nèi)存翻倍。ESP32 的 RAM 通常夠用建議學(xué)習(xí)階段直接用雙緩沖區(qū)。6.4 LVGL 內(nèi)存不足的典型表現(xiàn)當(dāng) LVGL 內(nèi)部內(nèi)存池不足以創(chuàng)建對象或樣式時(shí)通常不會直接崩潰而是出現(xiàn)以下現(xiàn)象lv_gauge_create返回 NULL。界面部分控件缺失。刷新時(shí)控件顏色異常?？刂婆_輸出lv_mem相關(guān)錯(cuò)誤日志。定位方法是調(diào)用lv_mem_monitor_t mem_monitor; lv_mem_monitor(mem_monitor); Serial.printf(used: %d, free: %d, frag: %d%%\n, mem_monitor.used, mem_monitor.free, mem_monitor.frag_pct);如果free很小或者frag_pct很高考慮增大LV_MEM_SIZE或者檢查代碼中是否有大量未被刪除的對象。在開發(fā)階段不要反復(fù)創(chuàng)建和刪除相同對象這會積累內(nèi)存碎片。7. 常見問題排查與性能優(yōu)化7.1 屏幕只顯示黑色或白屏現(xiàn)象程序上傳后屏幕無圖像或只顯示純色。排查順序檢查 TFT_eSPI 的引腳配置是否正確尤其是TFT_MISO、TFT_MOSI、TFT_SCLK、TFT_CS、TFT_DC、TFT_RST。檢查lv_disp_flush_ready是否在 flush 回調(diào)中被調(diào)用。缺少這一行LVGL 會等待刷新完成界面永遠(yuǎn)停在初始狀態(tài)。用最簡單的 TFT_eSPI 測試代碼先不初始化 LVGL直接tft.fillScreen(TFT_RED)。如果屏幕變紅說明屏幕驅(qū)動(dòng)正常問題在 LVGL 配置。確認(rèn)lv_init()在tft.begin()之前調(diào)用。部分情況下 LVGL 初始化順序錯(cuò)誤會導(dǎo)致后續(xù)注冊對象失敗。7.2 儀表盤指針角度錯(cuò)位現(xiàn)象設(shè)置值為 50 時(shí)指針不在表盤正中間位置。原因起始角度偏移計(jì)算錯(cuò)誤。LVGL 默認(rèn)表盤起點(diǎn)并非垂直向上。使用lv_gauge_set_angle_offset(gauge, 135)后表盤從 135 度方向開始到 315 度方向結(jié)束覆蓋的是底部開口的標(biāo)準(zhǔn) 270 度區(qū)域。如果你的表盤范圍設(shè)計(jì)不同需要按以下公式調(diào)整實(shí)際角度 起始角 (當(dāng)前值 - 最小值) * (結(jié)束角 - 起始角) / (最大值 - 最小值)如果還是偏移先打印出lv_gauge_get_value的值確認(rèn)引腳和數(shù)據(jù)讀取是否正常。如果傳感器數(shù)值本身有波動(dòng)指針看起來就會“不在正確位置”。7.3 進(jìn)度條動(dòng)畫卡頓或跳變現(xiàn)象設(shè)置LV_ANIM_ON后進(jìn)度條直接從 0 跳到 100或動(dòng)畫中間有明顯卡頓。原因通常有四個(gè)lv_timer_handler調(diào)用間隔不穩(wěn)定。使用delay(5)的時(shí)候整體周期應(yīng)該是穩(wěn)定在幾毫秒到十幾毫秒。如果主循環(huán)中有delay(1000)這樣的長延時(shí)動(dòng)畫會嚴(yán)重卡頓。動(dòng)畫時(shí)間太短。lv_anim_set_time設(shè)成了 100 毫秒在低幀率屏幕上看起來就是跳變。目標(biāo)值修改過于頻繁。如果每 10 毫秒就修改一次目標(biāo)值動(dòng)畫還沒走到一半又改變方向視覺上就會抖。使用的是硬件 SPI 屏幕但刷屏區(qū)域過大Flash 寫入速度不足。這時(shí)可以減小緩沖區(qū)或者改用LV_COLOR_DEPTH 16減少數(shù)據(jù)量。7.4 中文標(biāo)簽顯示為方塊LVGL 內(nèi)置字體默認(rèn)只包含 ASCII 字符。要顯示中文需要將中文字體轉(zhuǎn)換為 LVGL 字體文件。常用工具是 LVGL 官方的字體轉(zhuǎn)換器把 TTF 字體按需要的字符子集生成 C 數(shù)組。示例LV_FONT_DECLARE(my_font_cn); lv_obj_set_style_text_font(label, my_font_cn, 0);生成字體時(shí)不要包含全部漢字。全量中文字體文件可以達(dá)到幾百 KB會占用大量 Flash。只需包含界面中用到的字符溫度、濕度、進(jìn)度、狀態(tài)、正常、告警等。生成工具會輸出glyph數(shù)組和查找表放入項(xiàng)目源碼目錄后聲明使用即可。7.5 MCU 主循環(huán)阻塞導(dǎo)致界面凍結(jié)LVGL 界面刷新依賴lv_timer_handler被周期性調(diào)用。如果主循環(huán)中加入了傳感器讀取、SD 卡寫入等耗時(shí)操作界面會暫停更新。推薦使用 RTOS 或分時(shí)處理。在 ESP32 Arduino 框架下可以把 LVGL 刷新放到一個(gè)獨(dú)立任務(wù)中void lvgl_task(void *arg) { while (1) { lv_timer_handler(); vTaskDelay(pdMS_TO_TICKS(5)); } } void setup() { xTaskCreatePinnedToCore(lvgl_task, lvgl, 8192, NULL, 1, NULL, 1); }這樣即使主循環(huán)處理其他事務(wù)LVGL 界面刷新也不會被完全阻塞。前提是 LVGL 相關(guān)操作只在同一個(gè)任務(wù)中調(diào)用避免多個(gè)任務(wù)同時(shí)修改 UI 對象導(dǎo)致競態(tài)條件。7.6 性能優(yōu)化方向歸納優(yōu)化手段適用場景效果開啟雙緩沖區(qū)普通頁面加載減少刷屏等待減小繪制區(qū)域只有局部變化降低 SPI 傳輸量使用lv_obj_set_style_pad_all統(tǒng)一內(nèi)邊距減少樣式差異減少編譯和渲染開銷避免頻繁創(chuàng)建銷毀對象長時(shí)間運(yùn)行設(shè)備減少內(nèi)存碎片使用單色圖標(biāo)字體替代 PNG圖標(biāo)密集界面減少內(nèi)存和 Flash 占用使用 PSRAM 存儲圖片大尺寸圖片背景釋放內(nèi)部 RAM降低刷新率靜態(tài)數(shù)據(jù)界面減少功耗8. 彩蛋C 語言面向?qū)ο箫L(fēng)格封裝控件模塊對于工具人階段的學(xué)習(xí)者建議把儀表盤和進(jìn)度條封裝成獨(dú)立模塊。嵌入式工程師寫代碼時(shí)最頭疼的就是把所有 UI 邏輯堆在setup()和loop()中。當(dāng)界面元素增多后這種寫法幾乎無法維護(hù)?？梢允褂?C 語言面向?qū)ο箫L(fēng)格用結(jié)構(gòu)體和函數(shù)指針模擬簡單類typedef struct { lv_obj_t *gauge; int16_t min_value; int16_t max_value; int16_t current_value; void (*on_value_changed)(int16_t old_value, int16_t new_value); } ui_gauge_t; void ui_gauge_init(ui_gauge_t *gauge, lv_obj_t *parent, int16_t min, int16_t max) { gauge-gauge lv_gauge_create(parent); gauge-min_value min; gauge-max_value max; gauge-current_value min; lv_gauge_set_range(gauge-gauge, min, max); lv_gauge_set_angle_offset(gauge-gauge, 135); } void ui_gauge_update(ui_gauge_t *gauge, int16_t value) { if (value gauge-min_value) { value gauge-min_value; } if (value gauge-max_value) { value gauge-max_value; } if (value ! gauge-current_value gauge-on_value_changed ! NULL) { gauge-on_value_changed(gauge-current_value, value); } gauge-current_value value; lv_gauge_set_value(gauge-gauge, 0, value); }這個(gè)封裝把儀表盤的范圍檢查、值變化回調(diào)、LVGL API 調(diào)用整合到一起。實(shí)際項(xiàng)目中可以在此基礎(chǔ)上增加報(bào)警閾值、狀態(tài)顏色切換和歷史值記錄讓 UI 組件真正融入業(yè)務(wù)邏輯。9. 從界面原型到可量產(chǎn)界面的建議9.1 學(xué)習(xí)階段如何快速驗(yàn)證效果如果手邊沒有 ESP32 開發(fā)板也可以先在 PC 上使用 LVGL 模擬器。LVGL 官方提供了模擬器項(xiàng)目支持 Visual Studio、Eclipse 或 VS Code。模擬環(huán)境下可以使用鼠標(biāo)模擬觸摸直接調(diào)試儀表盤和進(jìn)度條的布局、顏色、動(dòng)畫效果。待界面效果確認(rèn)后再移植到 ESP32可節(jié)省大量燒錄和看屏幕的時(shí)間。在 PC 模擬器上調(diào)試時(shí)多注意樣式的視覺差異。PC 屏幕和 SPI 小屏的色域、亮度、DPI 不同。確認(rèn)效果時(shí)不要只看顏色更要確認(rèn)控件布局是否超出屏幕邊界字體大小在低分辨率屏上是否足夠清晰。9.2 生產(chǎn)環(huán)境必需的穩(wěn)定性考慮從原型進(jìn)入實(shí)際產(chǎn)品時(shí)需要額外關(guān)注以下內(nèi)容進(jìn)度條和儀表盤的刷新頻率要有上限。傳感器每秒刷新 1 次即可不需要 100 毫秒刷新一次。高頻刷新會占用 CPU 和 SPI 帶寬影響其他任務(wù)。使用lv_obj_clean清理頁面時(shí)要確認(rèn)定時(shí)器和動(dòng)畫資源也已停止。如果一個(gè)頁面被刪除但它的動(dòng)畫定時(shí)器仍然在運(yùn)行LVGL 可能訪問已經(jīng)釋放的對象導(dǎo)致重啟或內(nèi)核 panic。長時(shí)間運(yùn)行的設(shè)備要在空閑狀態(tài)減少 LVGL 工作負(fù)載。如果頁面是靜態(tài)顯示可以考慮降低lv_timer_handler的執(zhí)行頻率達(dá)到省電目的。生產(chǎn)環(huán)境應(yīng)記錄 LVGL 內(nèi)存使用情況。通過lv_mem_monitor定期把內(nèi)存水位上傳到日志系統(tǒng)可以從數(shù)據(jù)上判斷是否存在內(nèi)存泄漏。9.3 可復(fù)用的 UI 設(shè)計(jì)方案下表列出一套適用于 ESP32 LVGL 設(shè)備界面的基礎(chǔ)配色與參數(shù)方案作為實(shí)際項(xiàng)目參考作用推薦顏色說明背景0x1A1A2E深色背景降低屏幕功耗突出前景安全區(qū)間0x2ECC71綠色指示正常警戒區(qū)間0xF1C40F黃色指示注意危險(xiǎn)區(qū)間0xE74C3C紅色指示告警主按鈕0x3498DB藍(lán)色表示可交互文本主色0xFFFFFF白色保證對比度文本次級0x95A5A6灰色用于輔助信息進(jìn)度條背景0x2C3E50暗色背景適配設(shè)備配色會直接影響用戶對部件狀態(tài)的判斷速度。紅色不意味著一定危險(xiǎn)但盡量不要用高飽和紅色顯示正常狀態(tài)。安全區(qū)間用綠色、警戒區(qū)間用黃色、危險(xiǎn)區(qū)間用紅色這是嵌入式設(shè)備長期沿用的約定不要輕易顛覆。10. 進(jìn)一步的擴(kuò)展方向儀表盤和進(jìn)度條只是 LVGL 控件樹的開始。當(dāng)這兩塊功能跑通后你可以繼續(xù)向以下方向擴(kuò)展讓整個(gè)設(shè)備界面更完整使用lv_chart繪制傳感器歷史數(shù)據(jù)折線圖把儀表盤的實(shí)時(shí)值擴(kuò)展為趨勢分析。使用lv_msgbox實(shí)現(xiàn)告警彈窗當(dāng)儀表盤數(shù)值越過閾值時(shí)向用戶展示提醒。使用lv_tabview或lv_win組織多個(gè)功能頁面避免單一頁面內(nèi)容擁擠。使用lv_switch、lv_slider、lv_dropdown增加參數(shù)設(shè)置能力讓用戶直接通過屏幕調(diào)整設(shè)備運(yùn)行參數(shù)。將 LVGL 移植到 FreeRTOS讓 UI 任務(wù)、傳感器任務(wù)、通信任務(wù)各自獨(dú)立運(yùn)行提高系統(tǒng)實(shí)時(shí)性。使用 SquareLine Studio 或 GUI Guider 這類所見即所得工具設(shè)計(jì)界面然后導(dǎo)出 LVGL C 代碼。這種方式適合界面元素較多的項(xiàng)目但導(dǎo)出的代碼仍然需要根據(jù)業(yè)務(wù)邏輯進(jìn)行二次封裝。從嵌入式開發(fā)角度看儀表盤和進(jìn)度條是入門 LVGL 的極好起點(diǎn)。它們不難卻覆蓋了對象創(chuàng)建、樣式配置、值范圍映射、動(dòng)畫驅(qū)動(dòng)和定時(shí)器刷新這些核心知識。把這兩類控件的機(jī)制吃透再去看圖表、標(biāo)簽頁和容器會發(fā)現(xiàn) LVGL 的整體設(shè)計(jì)思路是統(tǒng)一的一切都是對象一切外觀都由樣式控制一切變化都發(fā)生在定時(shí)器驅(qū)動(dòng)的刷新循環(huán)里。