ESP8266接入OLED显示屏并显示HA传感器数值

第一次在这个论坛发帖子,这篇帖子是很久在隔壁论坛发的了,请各位大神多多指教 :grinning:
原帖:https://bbs.hassbian.com/thread-8505-1-1.html
ESPHome的优点反正就一个字稳并且也能和HA实时同步数据,发现之前没买的SSD1306 OLED的显示屏一直在盒子里没有用,翻了一下ESPHome的文档发现可以接入这块屏幕,于是试了一下效果还可以。
首先看一下效果!

硬件准备:
ESP8266开发板
SSD1306 128x64(四针和七针的显示屏都一样可以)

软件:
ESPHome
一、ESPHome的安装我就不过多描述了请参照官方的教程进行安装,也可以参考下面这两篇教程
ESPHome 介绍及安装教程
ESPHome刷机教程
二、接线
GND->GND
VCC->VCC
SAD->D1
SCL->D2
三、SSD1306部分的配置:

time: #时间
  - platform: homeassistant
    timezone: Asia/Shanghai
    id: time1

font:  #字体
  - file: 'font.ttf'
    id: font1 
    size: 18   #字体大小
    glyphs: 信息余额温度湿时间电费水卡室内状态元显示器!"%()+,-_.:°0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz
    
  - file: 'font.ttf'
    id: font2
    size: 47
    
  - file: 'font.ttf'
    id: font3
    size: 30
    glyphs: 工作中已关闭打开启
  
  - file: 'font.ttf'
    id: font4
    size: 20
    glyphs: 你坏
    
image: #图片
  - file: "1.jpg"
    id: jpg
    resize: 54x46

i2c:  #i2c总线
  sda: D1
  scl: D2
  scan: False


display:
  - platform: ssd1306_i2c
    model: "SSD1306 128x64"
    address: 0x3C
    id: my_display
    pages:
      - id: page1 #第一页(显示余额)
        lambda: |-
          it.printf(64, 0, id(font1), TextAlign::TOP_CENTER, "信息");
          if (id(dianfei).has_state()) {
            it.printf(0, 20, id(font1), TextAlign::TOP_LEFT, "电费余额: %.1f", id(dianfei).state);
          }
          if (id(zk).has_state()) {
            it.printf(0, 60, id(font1), TextAlign::BASELINE_LEFT, "水卡余额: %.2f", id(zk).state);
          }
          
          
      - id: page2 #第二页(显示温湿度)
        lambda: |-
          it.printf(64, 0, id(font1), TextAlign::TOP_CENTER, "信息");
          if (id(wendu).has_state()) {
            it.printf(0, 20, id(font1), TextAlign::TOP_LEFT, "室内温度: %.0f°C", id(wendu).state);
          }
          if (id(shidu).has_state()) {
            it.printf(0, 60, id(font1), TextAlign::BASELINE_LEFT, "室内湿度: %.0f%%", id(shidu).state);
          }
          
          
      - id: page3 #第三页(显示时间)
        lambda: |-
          it.printf(64, 0, id(font1), TextAlign::TOP_CENTER, "时间");
          it.strftime(64, 15, id(font2), TextAlign::CENTER_HORIZONTAL, "%H:%M", id(time1).now());


      - id: page4 #第四页(显示显示器状态)
        lambda: |-
         it.printf(64, 0, id(font1), TextAlign::TOP_CENTER, "显示器状态");
         if (id(statetest).has_state()) {
            it.printf(64, 30, id(font3), TextAlign::CENTER_HORIZONTAL, "%s", id(statetest).state.c_str());
          }
            it.rectangle(15, 29, 97, 35);  #画矩形
      
      - id: page5 #第五页
        lambda: |-
          it.printf(35, 30, id(font4), TextAlign::CENTER_HORIZONTAL, "你坏坏");
          it.image(70, 22, id(jpg));  #显示图片

          
interval:
  - interval: 30s      #每30秒循环翻页
    then:
      - display.page.show_next: my_display
      - component.update: my_display
      
sensor:    #从使用的HA实例中导入状态传感器
  - platform: homeassistant
    id: dianfei
    entity_id: sensor.balance
    internal: true

  - platform: homeassistant
    id: zk
    entity_id: sensor.zk
    internal: true
    
  - platform: homeassistant
    id: wendu
    entity_id: sensor.tem
    internal: true
    
  - platform: homeassistant
    id: shidu
    entity_id: sensor.hum
    internal: true
    
text_sensor: #从使用的HA实例中导入文本传感器
  - platform: homeassistant
    id: statetest
    entity_id: sensor.computer_state
    internal: true
    on_value: #自动化,当有新的新值时触发时显示第四页
      then:
        - display.page.show: page4 #显示指定页

复制代码

字体文件和图片文件必须放在.yaml所在目录,导入HA传感器到ESPHome必须改成自己HA里面的传感器,其实接入这边并不困难,主要是显示渲染这块,我一开始用官方的实例直接来接入显示渲染,结果过发现并不能显示,于是我仔细看了一下文档发现是它其实是通过坐标的形式顶点的,x始终代表横坐标轴(宽度),y始终代表纵坐标(高度),默认情况下ESPHome会将文本左上方对齐,比如说上面第一页中的:

it.printf(64,0,id(font1),TextAlign::TOP_CENTER, “信息”);

这个64, 0,这个点就在横坐标64纵坐标0的位置开始显示(我的屏幕是128x64的,也就是顶部居中的位置),

id(font1)

这是调用上面font字体的id编号(包括字体的大小和内容),

TextAlign::TOP_CENTER

这是文本对齐方式(顶部居中),

“信息”

这是需要显示的内容,这里需要注意的是如果你要显示中文的话你必须在上面的字体设置glyphs:中加入你需要显示的中文,否者是无法显示中文的,一直开始没有仔细看文档还以为不支持显示中文,后来才知道是可以的,只不过之前没有定义glyphs:

关于%7.2f的解释:
% -启动格式
7 -表示该数字将右对齐,并且如果结果少于7个字符,则在左侧用空格填充
.2-将小数点四舍五入到小数点2后的数字
f -告诉printf参数的数据类型的说明符

画形状:
it.rectangle(15, 29, 97, 35); 这是画一个矩形
在(15,29)的位置画一个宽97高35的矩形
其他形状参考官方例子

所需字体文件(论坛限制了文件大小,只能转载了)
https://bbs.hassbian.com/forum.php?mod=attachment&aid=MTkwNzF8N2YwNjU1MzJ8MTYwMTg5MTU2Mnw2ODM5fDg1MDU%3D