本帖最后由 了了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添加显示面板,快捷方便进行设备控制和参数显示,开发过程较为详细。但是缺少显示效果,代码展示较差,望以后改进。