EEPW论坛

M5Paper 是基于 ESP32 的低功耗电子墨水屏开发板，搭载 960×540 分辨率 IT8951E 控制器墨水屏，内置 GT911 电容式触控面板，支持两点触控与手势操作。

上一篇，我已通过外部模块的方式适配了 IT8951E 控制器墨水屏。接下来，继续配置触摸屏、RTC 时钟、温湿度传感器，实现一个简单的菜单栏切换显示不同信息。

1、相关模块官方文档

• 触摸模块（GT911）：gt911 Touch Screen Controller - ESPHome - Smart Home Made Simple

• RTC 时钟模块（BM8563）：BM8563 Time Source - ESPHome - Smart Home Made Simple

• 温湿度模块（SHT30）：SHT3X-D Temperature+Humidity Sensor - ESPHome - Smart Home Made Simple

2、编写ESPHOME配置文件

编写基础触摸测试配置文件，实现触摸屏基础功能测试，同时显示温湿度与时间，配置分为以下几个部分：

① 触摸组件（GT911）：

# 触摸屏：GT911 电容触摸芯片
touchscreen:
  - platform: gt911
    display: m5paper_display      # 关联到显示屏
    id: gt911_touchscreen         # 触摸屏 ID
    transform:
      swap_xy: true
      mirror_x: false
      mirror_y: true
    on_touch:
      then:
        # 触摸测试
        - lambda: |-
            // 获取触摸坐标（已变换）
            int x = touch.x;
            int y = touch.y;

            const int menu_width = 180;

            // 只响应左侧菜单区域
            if (x < menu_width) {
              if (y >= 80 && y <= 160) {
                // 点击“欢迎”区域
                id(current_page) = 0;
              } else if (y >= 180 && y <= 260) {
                // 点击“环境”区域
                id(current_page) = 1;
              }

              // 触发屏幕刷新
              id(m5paper_display)->update();
            }

PS:触摸显示角度来屏幕的角度不一样，需要做个翻转。

② 时间组件（BM8563）：

# 时间同步配置
time:
  - platform: homeassistant       # 从 Home Assistant 获取网络时间
    id: homeassistant_time
    timezone: Asia/Shanghai        # 时区设置
    on_time_sync:
      - bm8563.write_time         # 时间同步成功后，写入 RTC （BM8563）
  - platform: bm8563              # 使用 BM8563 实时时钟（I2C 接口）
    id: rtc_time
    on_time:
      - seconds: 0                # 每整分钟（秒=0）触发
        then:
          - component.update: m5paper_display   # 刷新屏幕显示新时间

③ 温湿度组件（SHT3XD）：

sensor:
  # SHT30温湿度传感器（I2C 地址 0x44）
  - platform: sht3xd
    temperature:
      name: ${device_name} temperature
      id: m5paper_temperature
      device_class: "temperature"
      state_class: "measurement"
      icon: mdi:thermometer
    humidity:
      name: ${device_name} humidity
      id: m5paper_humidity
      device_class: "humidity"
      state_class: "measurement"
      icon: mdi:water-percent
    address: 0x44
    update_interval: 10s

④ 屏幕页面配置：

# 显示屏：M5Paper ePaper（基于 IT8951 驱动芯片）
display:
  - platform: it8951e
    id: m5paper_display
    model: M5EPD
    cs_pin: GPIO15                # 片选引脚
    reset_pin: GPIO23             # 复位引脚
    busy_pin: GPIO27              # 忙信号引脚
    rotation: 0                   # 屏幕旋转角度，0是横向
    reversed: False               # 不反转颜色
    update_interval: never        # 不自动刷新，仅手动更新
    # 在屏幕上绘制内容
    lambda: |-
      const int menu_width = 180;  // 左侧菜单宽度
      const int content_x = menu_width + 10;
      const int content_width = it.get_width() - menu_width - 20;

      // === 绘制边框 ===
      it.rectangle(5, 5, it.get_width() - 10, it.get_height() - 10);

      // === 左侧菜单 ===
      it.rectangle(0, 0, menu_width, it.get_height()); // 背景色区分
      it.print(menu_width / 2, 100, id(cn_font), TextAlign::CENTER, "欢迎");
      it.print(menu_width / 2, 200, id(cn_font), TextAlign::CENTER, "环境");

      // === 右侧内容区 ===
      int page = id(current_page);
      if (page == 0) {
        // ===== 页面1：欢迎 =====
        it.print(content_x + content_width / 2, 50, id(big_font), TextAlign::TOP_CENTER, "你好，M5Paper！");
        
        // 电量
        float v_bat = id(m5paper_battery_voltage).state;
        if (!isnan(v_bat)) {
          constexpr float min_v = 3.52f, max_v = 4.15f;
          float pct = (v_bat - min_v) / (max_v - min_v) * 100.0f;
          pct = clamp(pct, 0.0f, 100.0f);
          it.printf(content_x + content_width / 2, 150, id(cn_font), TextAlign::TOP_CENTER, "电量：%.0f%%", pct);
        } else {
          it.print(content_x + content_width / 2, 150, id(cn_font), TextAlign::TOP_CENTER, "电量：--%");
        }

        // 时间
        it.strftime(content_x + content_width / 2, 220, id(cn_font), TextAlign::TOP_CENTER, "%Y-%m-%d %H:%M", id(rtc_time).now());

      } else if (page == 1) {
        // ===== 页面2：环境 =====
        it.print(content_x + content_width / 2, 80, id(big_font), TextAlign::TOP_CENTER, "环境信息");

        // 本机温湿度
        if (!isnan(id(m5paper_temperature).state) && !isnan(id(m5paper_humidity).state)) {
          it.printf(content_x + content_width / 2, 180, id(cn_font), TextAlign::TOP_CENTER, 
                    "温度：%.1f℃  湿度：%.1f%%", 
                    id(m5paper_temperature).state, id(m5paper_humidity).state);
        } else {
          it.print(content_x + content_width / 2, 180, id(cn_font), TextAlign::TOP_CENTER, "温湿度：--");
        }
      }

3、编译与烧录

参考上一篇《【M5PaperESP32E-Ink】ESPHOME适配M5Paper(IT8951E)电子墨水屏驱动-电子产品世界论坛》

4、触摸效果

点击左侧菜单栏的「欢迎」「环境」选项，即可切换查看对应页面信息。