本帖最后由 了了2 于 2024-11-25 15:47 编辑
#有奖活动# #申请原创# @21小跑堂
一.本文目标：本文介绍esp8285开发板的简易控制面板的开发过程。通过控制面板，可以直接在屏幕上设置esp8285的各项参数，提供简单 桌面化显示 二.环境配置开发环境：1.操作系统：windows 2.开发工具 Arduino lDE 2.3.2 硬件： 1.mcu+wifi：esp8285 2.显示屏：ST7735 软件：LVGL 应用程序：TFT_eSPI库+c语言 三.架构设计规划1.开发环境构建：windows+Arduino lDE 2.3.2 2.硬件： A. esp8285
B.显示屏ST7735 引脚连接：
ST7735的引脚 -> ESP8285开发板的引脚 VCC -> 3.3V GND -> GND SCL (SCK) -> D5 SDA (MOSI) -> D7 RES (RESET) -> D0 DC (A0) -> D6 CS -> D8
3.LVGL版本：v9.1 4.TFT_eSPI库版本：2.5.43 四.理论装备4.1 esp8285控制面板：对esp8285进行配置的界面，由于esp8285可以对外提供服务，可以是网页形式 4.2 控制面板的显示：在对应的显示屏ST7735上。也可以通过网页，在浏览器上 4.3 LVGL：是一个开源项目，专门针对比较局限的设备进行ui显示的，具体请参考附录 4.4 TFT_eSPI：是Arduino lDE 2.3.2提供的一个插件，通过该插件可以提供LVGL的库接口，有了该库接口，就可以编写代码调用接口，实现界面的功能
五.制作esp8285简易控制面板的过程所需硬件- 安装有 Arduino lDE 2.3.2的windows电脑
- ESP8285 开发板：本文使用NodeMCU的开发板。
- ST7735 显示屏：通常是1.8英寸或2.0英寸的SPI接口显示屏。
- 电源和连接线：用于连接ESP8285和显示屏。
5.1 开发环境设置请参考本专栏《Esp8285开发环境搭建 - 21ic电子网》文章
5.2 然后在“板管理器”中安装ESP8266的支持包。5.3 安装 LVGL插件库TFT_eSPI库
安装成功界面：
5.4 硬件连接A.将esp8285通过usb接口连接到开发电脑上 B.将ST7735的引脚连接到ESP8285开发板： - VCC -> 3.3V
- GND -> GND
- SCL (SCK) -> D5
- SDA (MOSI) -> D7
- RES (RESET) -> D0
- DC (A0) -> D6
- CS -> D8
5.5 配置TFT_eSPI库按照下面步骤操作： 修改： 用nodepad++打开，修改
查看修改结果： 在Arduino库目录中找到TFT_eSPI库的User_Setup.h文件并修改，以支持ST7735显示屏和ESP8285引脚配置： 点开之后右击 跳出文件
修改代码，添加下面代码：#define ST7735_DRIVER#define TFT_WIDTH 128#define TFT_HEIGHT 160#define TFT_CS D8 // Chip select control pin#define TFT_DC D6 // Data Command control pin#define TFT_RST D0 // Reset pin (could connect to NodeMCU RST, see next line)#define TFT_MOSI D7#define TFT_SCLK D5#define LOAD_GLCD // Font 1. Original Adafruit 8 pixel font needs ~1820 bytes in FLASH#define LOAD_FONT2 // Font 2. Small 16 pixel high font, needs ~3534 bytes in FLASH, 96 characters#define LOAD_FONT4 // Font 4. Medium 26 pixel high font, needs ~5848 bytes in FLASH, 96 characters#define LOAD_FONT6 // Font 6. Large 48 pixel font, needs ~2666 bytes in FLASH, 96 characters#define LOAD_FONT7 // Font 7. 7 segment 48 pixel font, needs ~2438 bytes in FLASH, 96 characters#define LOAD_FONT8 // Font 8. Large 75 pixel font needs ~3256 bytes in FLASH, only characters 1234567890:-.apm
5.6 编写Arduino代码基于LVGL和TFT_eSPI库，编写Arduino代码来创建一个简单的控制面板UI： #include #include TFT_eSPI tft = TFT_eSPI();static void lvgl_driver_flush(lv_disp_drv_t *disp, const lv_area_t *area, lv_color_t *color_p) { int32_t x, y; tft.startWrite(); tft.setAddrWindow(area->x1, area->y1, area->x2, area->y2); for (y = area->y1; y <= area->y2; y++) { for (x = area->x1; x <= area->x2; x++) { tft.pushColor(color_p->full); color_p++; } } tft.endWrite(); lv_disp_flush_ready(disp);}void setup() { Serial.begin(115200); lv_init(); tft.begin(); tft.setRotation(1); static lv_disp_buf_t disp_buf; static lv_color_t buf[LV_HOR_RES_MAX * 10]; lv_disp_buf_init(&disp_buf, buf, NULL, LV_HOR_RES_MAX * 10); lv_disp_drv_t disp_drv; lv_disp_drv_init(&disp_drv); disp_drv.flush_cb = lvgl_driver_flush; disp_drv.buffer = &disp_buf; lv_disp_drv_register(&disp_drv); // 创建一个简单的控制面板 lv_obj_t *label = lv_label_create(lv_scr_act(), NULL); lv_label_set_text(label, "ESP8285 Control Panel"); lv_obj_align(label, NULL, LV_ALIGN_CENTER, 0, 0);}void loop() { lv_task_handler(); delay(5);}
5.7 调试和优化在ide中点击部署，发布项目到esp8285中，并通过触摸屏显示界面，并操作配置 六.烧录与部署将esp8285连接到开发电脑上，显示屏连接到esp8285上之后，将上面的代码进行烧录，部署，完成后在显示屏上查看到控制面板的样子，显示屏是触摸屏，可以在触摸屏上进行各种设置
附录：
1.lvgl官网地址：欢迎阅读LVGL中文开发手册！ — LVGL 文档 简介： LVGL（Light and Versatile Graphics Library）是一个用于嵌入式系统的开源图形库。它旨在为资源受限的设备（如微控制器和小型显示屏）提供丰富的图形用户界面（GUI）功能。
| 
楼主
标题置顶
标题高亮
为ESP8266添加显示面板，快捷方便进行设备控制和参数显示，开发过程较为详细。但是缺少显示效果，代码展示较差，望以后改进。