一、項(xiàng)目概述

本文介紹如何使用ESP32微控制器驅(qū)動(dòng)ST7789 TFT液晶屏和XPT2046觸摸芯片，通過(guò)LVGL圖形庫(kù)實(shí)現(xiàn)主題切換功能，并開(kāi)發(fā)一個(gè)實(shí)用的觸摸屏示波器應(yīng)用。項(xiàng)目包含兩大核心功能：

LVGL多主題切換：支持8種不同風(fēng)格的UI主題

示波器功能：
模擬/數(shù)字信號(hào)采集、觸摸控制面板、光標(biāo)測(cè)量系統(tǒng)、自動(dòng)頻率檢測(cè)

二、硬件準(zhǔn)備

接線圖

三、環(huán)境搭建

1. 安裝庫(kù)

lv_arduino v3.0.1

TFT_eSPI

XPT2046_Touchscreen

2. TFT_eSPI配置（User_Setup.h）：

?
?#define ST7789_DRIVER      // Full configuration option, define additional parameters below for this display

#define TFT_WIDTH  240 // ST7789 240 x 240
#define TFT_HEIGHT 320 // ST7789 240 x 320

#define TFT_MISO 19
#define TFT_MOSI 23   
#define TFT_SCLK 18
#define TFT_CS   15  Chip select control pin
#define TFT_DC   2   Data Command control pin
#define TFT_RST  4   Reset pin (could connect to RST pin)

四、核心代碼解析

4.1 LVGL主題設(shè)置

?
// 主題初始化
void setup() {
    lv_test_theme(); // 默認(rèn)主題
    // 可選主題：
    // lv_test_theme_1(lv_theme_night_init(210, NULL));
    // lv_test_theme_1(lv_theme_material_init(210, NULL));
}

// 顯示驅(qū)動(dòng)回調(diào)
void my_disp_flush(lv_disp_drv_t *disp, const lv_area_t *area, lv_color_t *color_p) {
    tft.setAddrWindow(area->x1, area->y1, area->x2, area->y2);
    for(int y=area->y1; y<=area-?>y2; y++){
        for(int x=area->x1; x<=area-?>x2; x++){
            tft.writeColor(color_p->full, 1);
            color_p++;
        }
    }
    lv_disp_flush_ready(disp);
}

4.2 觸摸驅(qū)動(dòng)（帶消抖）

?
bool my_touchpad_read(lv_indev_drv_t *indev, lv_indev_data_t *data) {
    static lv_coord_t last_x = 0, last_y = 0;
    bool is_touched = ts.touched();
    
    if(is_touched){
        TS_Point p = ts.getPoint();
        // 坐標(biāo)轉(zhuǎn)換與校準(zhǔn)
        last_x = map(p.x, cal_x_min, cal_x_max, 0, 320);
        last_y = map(p.y, cal_y_max, cal_y_min, 0, 240);
        
        // 滑動(dòng)檢測(cè)
        if(abs(last_x - prev_x) >5 || abs(last_y - prev_y) >5){
            is_sliding = true;
        }
        
        // 消抖處理
        if(!is_sliding && (millis()-last_touch_time)>CLICK_DEBOUNCE_MS){
            last_touch_time = millis();
        }
    }
    data->point.x = last_x;
    data->point.y = last_y;
    return false;
}

4.3 簡(jiǎn)易示波器核心邏輯

波形采樣：

?
void takeSample() {
    if(!digitalMode){ // 模擬模式
        uint16_t raw = analogRead(ADC_PIN);
        samplesBuffer[sampleIndex] = raw * amplitudeScale;
    }else{ // 數(shù)字模式
        bool state = digitalRead(DIGITAL_PIN);
        samplesBuffer[sampleIndex] = state ? 4095 : 0;
    }
    sampleIndex = (sampleIndex+1) % MAX_SAMPLES;
}

波形繪制：

?
void updateWaveform() {
    waveSprite.fillSprite(BG_COLOR);
    // 繪制網(wǎng)格
    for(int x=0; x

	

	五、觸摸控制面板實(shí)現(xiàn)

	
?
void create_ui(){
    // 創(chuàng)建選項(xiàng)卡式控制面板
    lv_obj_t *tabview = lv_tabview_create(rightPanel, NULL);
    lv_obj_t *timeTab = lv_tabview_add_tab(tabview, "時(shí)基");
    
    // 時(shí)基選擇滾輪
    lv_obj_t *timebaseRoller = lv_roller_create(timeTab);
    lv_roller_set_options(timebaseRoller, "0.5msn1.0msn2.0ms", LV_ROLLER_MODE_NORMAL);
    
    // 幅度控制滑塊
    lv_obj_t *ampSlider = lv_slider_create(ampTab);
    lv_slider_set_range(ampSlider, 0, 400);
    
    // 模式切換開(kāi)關(guān)
    modeSwitch = lv_switch_create(controlPanel);
    lv_obj_set_event_cb(modeSwitch, mode_switch_event_cb);
}

	

	六、性能優(yōu)化技巧

	雙緩沖機(jī)制：使用TFT_eSPI的Sprite功能減少閃爍

	異步采樣：在loop()中分離采樣和顯示邏輯

	動(dòng)態(tài)刷新：根據(jù)時(shí)基自動(dòng)調(diào)整刷新率

	內(nèi)存管理：

	
?
static lv_color_t buf[LV_HOR_RES_MAX * 10]; // LVGL緩沖區(qū)
TFT_eSprite waveSprite = TFT_eSprite(&tft); // 波形緩沖

	

	七、實(shí)測(cè)效果

	7.1 LVGL不同主題切換

	

	演示視頻:

	https://www.bilibili.com/video/BV1CwjAziEKj/?spm_id_from=888.80997.embed_other.whitelist&bvid=BV1CwjAziEKj&vd_source=a31e3d8d8ce008260eee442534c2f63d

	7.2示波器觸控界面效果

	

	演示視頻：

	https://www.bilibili.com/video/BV1FxjwzwEyF/?spm_id_from=888.80997.embed_other.whitelist&bvid=BV1FxjwzwEyF&vd_source=a31e3d8d8ce008260eee442534c2f63d

	八、常見(jiàn)問(wèn)題解決

	觸摸校準(zhǔn)異常

	修改cal_x_min/max和cal_y_min/max值

	使用校準(zhǔn)例程獲取實(shí)際參數(shù)

	LVGL內(nèi)存不足

	
?// 修改lv_conf.h配置
#define LV_MEM_SIZE (48*1024)
#define LV_DISP_DEF_REFR_PERIOD 30

	

	完整代碼獲取：

	Github倉(cāng)庫(kù)：https://github.com/Leeri1y/esp32-st7789

	百度網(wǎng)盤(pán)：https://pan.baidu.com/s/19TVS2PBJpYqExxsannnH3w?pwd=epyd 提取碼: epyd

	互動(dòng)交流：歡迎在評(píng)論區(qū)留言討論，遇到問(wèn)題可提交Issues

	附錄：關(guān)鍵函數(shù)速查表

				函數(shù)
			

				功能
			

				調(diào)用示例
		

				lv_btn_create()
			

				創(chuàng)建按鈕
			

				lv_obj_t * btn = lv_btn_create(parent, NULL);
		

				lv_sw_get_state()
			

				獲取開(kāi)關(guān)狀態(tài)
			

				bool state = lv_sw_get_state(sw);
		

				lv_roller_set_options()
			

				設(shè)置滾輪選項(xiàng)
			

				lv_roller_set_options(roller, "1n2n3", true);
		

				waveSprite.pushSprite()
			

				刷新顯示
			

				waveSprite.pushSprite(0, 0);
		

				ts.touched()
			

				檢測(cè)觸摸
			

				if(ts.touched()) { ... }
		

	?動(dòng)手實(shí)踐建議

	先運(yùn)行基礎(chǔ)顯示示例驗(yàn)證硬件連接

	逐步添加功能模塊（先顯示后觸摸）

	使用串口監(jiān)視器調(diào)試輸出

	保存不同版本的代碼備份


	審核編輯 黃宇