ESP32 開發筆記(四）LVGL控制元件學習 3 Button 按鈕控制元件

先看效果，最高33幀，第一個按鈕為果凍效果，第二個擴充套件，第三個擴散，第四個正常，第五個翻轉效果

123使用了效果風格，類似css，45是純按鈕成員函式實現

此文章為蓋樓文章，為組織目錄連結用，未寫教程，教程更新後會刪除此行

 

 

開發板購買連結https://item.taobao.com/item.htm?spm=a2oq0.12575281.0.0.50111deb2Ij1As&ft=t&id=626366733674

一、開發板簡介
二、開發環境搭建 windows

ESP32例程為C語言開發，並非Python/Arduino/AT指令開發，基於ESP-IDF_V4.2框架庫，採用純C語言開發，開發工具為Visual Studio Code
Android(安卓)例程全部為原生Android開發，例程全部支援到SDK版本29  Android 10.0(Q) 開發工具為Andirod Studio 4.0
PC原始碼例程為Visual Studio 2013開發，C++語言，基於MFC
送的MQTT賬號，僅用於同學們開發測試，大家不要用到實際產品上，不定期更換密碼，會在QQ群公佈
以下列出的例程原始碼均編寫完成（不斷增加中），開發教程正在編寫

三、基礎示例

    0_Hello Bug （ESP_LOGX與printf）    工程模板/列印除錯輸出
    1_LED                                                    LED亮滅控制       
    2_LED_Task                                          使用任務方式控制LED
    3_LEDC_PWM                                      使用LEDC來控制LED實現呼吸燈效果
    4_ADC_LightR                                      使用ADC讀取光敏電阻實現光照感測
    5_KEY_Short_Long                              按鈕長按短按實現
    6_TouchPad_Interrupt                          電容觸控中斷實現
    7_WS2812_RMT                                  使用RMT實現RGB_LED彩虹變色示例
    8_DHT11_RMT                                    使用RMT實現讀取DHT11溫溼度感測器
    9_SPI_SDCard                                    使用SPI匯流排實現TF卡檔案系統示例
    10_IIC_ADXL345                                使用IIC匯流排實現讀取ADXL345角度加速度感測器
    11_IIC_AT24C02                                 使用IIC匯流排實現小容量資料儲存測試
    12_IR_Rev_RMT                                使用RMT實現紅外遙控接收解碼（NEC編碼）
    13_IR_Send_RMT                              使用RMT實現紅外資料傳送（NEC編碼）
    14_WIFI_Scan                                    附近WIFI訊號掃描示例    
    15_WIFI_AP                                        建立軟AP示例
    16_WIFI_AP_TCP_Server                  在軟AP模式下實現TCP服務端
    17_WIFI_AP_TCP_Client                   在軟AP模式下實現TCP客戶端
    18_WIFI_AP_UDP                              在軟AP模式下實現UDP通訊
    19_WIFI_STA                                      建立STA站模連線路由器
    20_WIFI_STA_TCP_Server                在站模式STA下實現TCP服務端
    21_WIFI_STA_TCP_Client                 在站模式STA下實現TCP客戶端
    22_WIFI_STA_UDP                            在站模式STA下實現UDP通訊
    23_LCD_Test                                      LCD液晶觸控式螢幕顯示測試
    24_XPT2046_Touch_Test                   電阻觸控XPT2046驅動測試觸控校正

四、LVGL控制元件使用示例

    LVGL_Full_Test                                  LVGL官方例程（使用到了大分部控制元件）
    LVGL_Arc_Test                                  圓弧指示器通過觸控動態改變值
    LVGL_Bar_Test                                  通過動畫方式動態演示Bar進度條的使用方法
    LVGL_Button_Test                             通過5種不同動態效果的按鈕學習按鈕的建立與使用
    LVGL_ButtonMatrix_Test                   建立一個計算器佈局來演示矩陣按鈕控制元件的使用
    LVGL_Calendar_Test                         日曆控制元件的建立和使用
    LVGL_Canvas_Test                           透明畫布和畫一個圓角過渡色矩形並旋轉角度學習畫布的使用
    LVGL_Chart_Test                               通過建立三個不同風格的圖表來學習圖表控制元件的使用
    LVGL_Checkbox_Test                        學習核取方塊控制元件的建立和使用
    LVGL_ColorPicker_Test                     建立一個顏色選擇器並動態顯示當前顏色的RGB值
    LVGL_Container_Test                        在內容控制元件上動態建立三個文字標籤學習內容控制元件的自適應佈局
    LVGL_Drop_down_List_Test              建立三個不同型別的下拉選擇控制元件
    LVGL_Gauge_Test                             建立一個動態儀表和靜態多指標儀表
    LVGL_Image_Test                              通過四個滑動條控制元件控制圖片顏色的變化來學習影像控制元件的使用
    LVGL_ImageButton_Test                  建立一個圖片背景的影像按鈕
    LVGL_Keyboard_Test                       通過一個文字輸入框控制元件還學習鍵盤控制元件的呼叫關閉設定
    LVGL_Label_Test                              建立內容顏色可變，長文字滾動展示，帶陰影3D效果三個標籤控制元件
    LVGL_LED_Test                                建立三個LED，學習LED控制元件的調光，顏色，開關的設定
    LVGL_Line_Test                                通過二維陣列建立一段折線來演示線控制元件的使用
    LVGL_LineMeter_Test                      建立兩個不同的線段弧形指示器動態展示資料
    LVGL_List_Test                                 建立一個帶圖示的列表控制元件
    LVGL_MessageBox_Test                  建立一個帶按鈕的訊息框控制元件
    LVGL_ObjectMask_Test                    建立一個變幻色的文字學習蒙版遮罩效果
    LVGL_Page_Test                            學習頁面控制元件的使用
    LVGL_Roller_Test                           通過示例學習滑動列表選擇器控制元件
    LVGL_Slider_Test                           建立一個單向和一個雙向滑動條控制元件
    LVGL_Spinbox_Test                        學習微調控制元件的使用
    LVGL_Spinner_Test                        建立三個不同的環形載入器
    LVGL_Switch_Test                          建立兩個不同的開關控制元件
    LVGL_Table_Test                            建立一個簡單的表格
    LVGL_Tabview_Test                       實現三頁的頁面切換學習Tabview控制元件
    LVGL_Textarea_Test                       長按實現打字機效果的Textarea控制元件
    LVGL_Tileview_Test                        實現四面環形觸控切換的Tileview控制元件
    LVGL_Window_Test                        建立一個視窗，帶設定子視窗學習視窗控制元件的使用

ESP32應用例程
    Bluetooth_RGBLight                          Android手機通過藍芽控制RGB燈變色
    Bluetooth_Sensor                              Android手機通過藍芽讀取開發板姿態和溫度溼度引數
    Bluetooth_Test                                   Android手機通過藍芽與開發板通訊
    Encryption_MD5                                MD5加密
    Encryption_SHA1                              SHA1加密
    Encryption_SHA256                          SHA256加密
    EncryptionDecrypt_AES_CBC          AES_CBC加密
    EncryptionDecrypt_AES_ECB          AES_ECB加密
    ESP32_SmartConfig                         通過Android手機配置WIFI連網
    HTTP_GET_Request_Weather        HTTP Get請求天氣預報
    JSON_Package                                建立JSON資料包
    JSON_Parsing                                  解析JSON資料包
    LCD JPEG_Effect                             解碼JGEG圖片特效顯示
    MQTT                                                MQTT通訊測試
Android（安卓）工具原始碼
    ESP32_Bluetooth_Chat                   Android通過藍芽與開發板通訊測試
    ESP32_Bluetooth_RGBLight           Android通過藍芽控制開發板RGB燈
    ESP32_Bluetooth_Sensor               Android通過藍芽讀取開發板3D姿態和溫度溼度資料
    ESP32_SmartConfig                       Android手機配置WIFI配網
    MQTT_Test                                     Android與開發板通過MQTT協議通訊
    TCP_Client                                     Android作為TCP客戶端與開發板通訊 
    UDP_Client                                     Android通過UDP協議與開發板通訊
PC(Visual Studio 2013 C++ MFC)工具原始碼
    MQTT_除錯助手                                 PC通過MQTT與開發板通訊
    TCP 除錯助手                                     PC通過TCP伺服器/客戶端與開發板通訊
    UDP 除錯助手                                     PC通過UDP與開發板通訊