ESP32智能电子画板-可能是最简单的RGB屏幕开发板

项目简介

基于立创官方ESP32 S3模块，绘制的最简单RGB屏幕开发板。并且能够通过WiFi连接控制主副多个画板，实现无纸化绘画创作和远程分享功能，支持实时协作和教学应用，拓展用户的绘画体验和创作空间。
效果演示：BILIBILI链接

外壳采用3D打印，保留两个TYPEC口

项目功能

各位爱好者，想必spi小尺寸屏幕已经熟练使用。在追求更高分辨率或者更大尺寸的时候，就会遇到RGB接口。与传统TFT-SPI驱动不一样，RGB驱动通常不带有缓存，因此需要实时传输数据，维持图像的显示。（具体原理可以看我B站视频）同时更多的数据线也需要专门的模块来驱动，在ESP32S3中就有RGB驱动模块，因此我们可以使用立创的ESP32S3模块来制作一个最简单的RGB屏幕开发板。

项目参数

1.使用立创ESP32-S3-R8N8模块制作开发板，方便复刻。
2.屏幕使用通用类型屏幕省去初始化步骤，方便初学者使用（屏幕链接）需要注意分辨率，鉴于ESP32S3性能较弱，推荐低分辨率屏幕。
3.为了支持便携使用，使用了IP5306+IP3005做电源管理和电池保护。单节18650足够。

原理解析

1.屏幕驱动：ESP32的大部分IO口都用于RGB驱动了，需要16个DATA线和4个控制线，得益于ESP32的输出矩阵，连接端口可随意调换，只需要在程序内部设置。屏幕背光使用MT9284升压驱动，PWM波形输出可以调节屏幕亮度。

2.触摸：屏幕自带了GT911,使用I2C与esp32连接，获取触摸信息

3.电池电压检测：esp32的ADC2与WIFI不可同时开启，所以电压检测使用了ADC0的0通道。

4.IP5306：IP5306在小电流下会自动休眠，因此需要定时输出信号给wake引脚，防止自动关机。或者可以购买CK后缀的芯片，CK后缀为常开芯片。

功耗分析

最低亮度	最高亮度

大部分功耗全用来给屏幕背光了，可通过调整背光来控制亮度，降低功耗.程序内也实现了60秒无操作，自动降低亮度。

程序结构

ui界面使用squareline辅助设计，先绘制大体框架，然后手动修改事件和元素。

WIFI连接

扫描	连接

WiFi连接放弃传统配网方式，直接将扫描到的SSID排列在页面上，选择之后跳转到密码输入界面，进行配网连接。

画板界面

颜色设置	线条粗细

画板中需要设置画笔的颜色和粗细，这边使用了百问网的画板示例，使用LVGL的canvas进行图案绘制。由于canvas绘制的时候需要实时刷新界面，导致帧率下降。在绘制的过程中会实时保存触摸坐标，以此来进行绘画数据的分享。

网络设置

为了使绘画内容能够分享，需要借助MQTT转发。在网络设置界面，提供了服务器，端口号的设置。并且连接成功之后可以进行主机从机设置。由于屏幕分辨率太低，就没有绘制用户名和密码的输入框，默认无验证登录。

设备信息

设备信息界面中可以设置画板名称，并发送至"paint_devInfo"主题，方便进行多设备识别。同时也可以显示电池电压和调节屏幕亮度。

程序结构

使用思维导图将设备主要任务列出。

本地MQTT服务器搭建

1.下载MQTT服务端

新版本的EMQX已经不提供windows平台，所以我们需要老版本的，点击这里下载，选择emqx-windows-4.3.6.zip这个文件。

2.cmd命令操作

将下载的文件解压。打开命令提示行，进入mqtt文件夹内，如图步骤1 cd C:\Users\ycqia\Desktop\emqx\bin（根据自己的文件位置修改）,接着运行命令emqx.cmd start如图步骤2.防火墙询问时全部选择允许。这样MQTT服务端就已经运行。

3.MQTT服务器配置

浏览器打开http://127.0.0.1:18083/#/，进入EMQX的网页设置界面

按照上图可在设置中切换中文界面

客户端处可显示当前连接的用户

4.MQTTX软件测试

推荐使用MQTTX软件来测试自己服务器有没有创建成功，下载链接

如图，服务器地址为主机IP地址，端口号为1883，然后链接测试

如果连接成功，则表示mqtt服务器创建成功

ESP32开发RGB流程

1.初始化背光

ledc_timer_config_t ledc_timer_ls = {
    .duty_resolution = LEDC_TIMER_13_BIT, // 设置分辨率,最大为2^13-1
    .freq_hz = 2000,                      // PWM信号频率
    .speed_mode = LEDC_LOW_SPEED_MODE,           // 定时器模式（“高速”或“低速”）
    .timer_num = LEDC_TIMER_0,           // 设置定时器源（0-3）
    .clk_cfg = LEDC_AUTO_CLK,             // 配置LEDC时钟源（这里是自动选择）
};
ledc_timer_config(&ledc_timer_ls);
ledc_channel_config_t ledc_channel = {
    .channel = 0, // 通道0
    .duty = 0,
    .gpio_num = EXAMPLE_PIN_NUM_BK_LIGHT,
    .speed_mode = LEDC_LOW_SPEED_MODE, 
    .hpoint = 0,
    .timer_sel = LEDC_TIMER_0,      // 定时器0
    .intr_type = LEDC_INTR_DISABLE, // 不使用中断
    .flags.output_invert = 0        // 输出不反转
};
ledc_channel_config(&ledc_channel);

ESP32的PWM为了支持更多功能，需要配置较多的参数，但其实需要关注的也就频率、分辨率、和IO口，其他照抄就可。

2.RGB参数配置

ESP_LOGI(TAG, "Install RGB LCD panel driver"); // esp32的RGB显示配置，根据硬件修改
esp_lcd_rgb_panel_config_t panel_config = {
    .data_width = 16, // RGB565 in parallel mode, thus 16bit in width
    .psram_trans_align = 64,
    .num_fbs = EXAMPLE_LCD_NUM_FB,
    .clk_src = LCD_CLK_SRC_DEFAULT,
    .disp_gpio_num = EXAMPLE_PIN_NUM_DISP_EN,
    .pclk_gpio_num = EXAMPLE_PIN_NUM_PCLK,
    .vsync_gpio_num = EXAMPLE_PIN_NUM_VSYNC,
    .hsync_gpio_num = EXAMPLE_PIN_NUM_HSYNC,
    .de_gpio_num = EXAMPLE_PIN_NUM_DE,
    .data_gpio_nums = {
        EXAMPLE_PIN_NUM_DATA0,
        EXAMPLE_PIN_NUM_DATA1,
        EXAMPLE_PIN_NUM_DATA2,
        EXAMPLE_PIN_NUM_DATA3,
        EXAMPLE_PIN_NUM_DATA4,
        EXAMPLE_PIN_NUM_DATA5,
        EXAMPLE_PIN_NUM_DATA6,
        EXAMPLE_PIN_NUM_DATA7,
        EXAMPLE_PIN_NUM_DATA8,
        EXAMPLE_PIN_NUM_DATA9,
        EXAMPLE_PIN_NUM_DATA10,
        EXAMPLE_PIN_NUM_DATA11,
        EXAMPLE_PIN_NUM_DATA12,
        EXAMPLE_PIN_NUM_DATA13,
        EXAMPLE_PIN_NUM_DATA14,
        EXAMPLE_PIN_NUM_DATA15,
    },
    .timings = {
        // 以下为 RGB 时序的相关参数，需根据 LCD 驱动 IC 的数据手册以及硬件的配置确定
        .pclk_hz = EXAMPLE_LCD_PIXEL_CLOCK_HZ,
        .h_res = EXAMPLE_LCD_H_RES,
        .v_res = EXAMPLE_LCD_V_RES,
        .hsync_back_porch = 20,  // 在 DE 模式下，HSYNC 和  VSYNC 的相关参数可以根据期望的刷新率进行调整
        .hsync_front_porch = 20, // 在 SYNC 模式下，HSYNC 和  VSYNC 的相关参数需要和软件初始化命令中的配置保持一致
        .hsync_pulse_width = 5,
        .vsync_back_porch = 20,
        .vsync_front_porch = 20,
        .vsync_pulse_width = 5,
        .flags = {
            // 由于一些 LCD 可以通过硬件引脚配置这些参数，需要确保它们与配置保持一致，但通常情况下均为 `0`
            .hsync_idle_low = 0,  // HSYNC 信号空闲时的电平，0：高电平，1：低电平
            .vsync_idle_low = 0,  // VSYNC 信号空闲时的电平，0 表示高电平，1：低电平
            .de_idle_high = 0,    // DE 信号空闲时的电平，0：高电平，1：低电平
            .pclk_active_neg = 1, // 时钟信号的有效边沿，0：上升沿有效，1：下降沿有效
            .pclk_idle_high = 0,  // PCLK 信号空闲时的电平，0：高电平，1：低电平
        },
    },
    .flags.fb_in_psram = true, // allocate frame buffer in PSRAM
};
ESP_ERROR_CHECK(esp_lcd_new_rgb_panel(&panel_config, &panel_handle));

在RGB驱动初始化中需要将硬件设计正确填写，得益于ESP32的输出矩阵，PCB的设计可以简单的多，但RGB线路最好遵循等长设计。ESP32RGB有个最大的缺点就是PSRAM和FLASH公用了一个SPI通道，如果长时间FLASH写入，会导致RGB图像的偏移。比如WIFI的连接、网络通讯。在这些操作之后需要重启RGB模块，恢复图像位置。

3.初始化、启动注册的RGB驱动

ESP_LOGI(TAG, "Initialize RGB LCD panel");
ESP_ERROR_CHECK(esp_lcd_panel_reset(panel_handle));
ESP_ERROR_CHECK(esp_lcd_panel_init(panel_handle));

4.打开背光

ESP_LOGI(TAG, "Turn on LCD backlight"); // 打开背光
ledc_set_duty(LEDC_LOW_SPEED_MODE, 0, 6000);
ledc_update_duty(LEDC_LOW_SPEED_MODE, 0);

在初始化的过程中，屏幕会有雪花图案，防止观感不好，通常在驱动注册完成之后在打开背光。

5.LVGL事件的注册
具体可以参考ESP-IDF中的lvgl例程

到这我们就可以轻松驱动一块RGB屏幕，开启大屏高分辨率的时代