Saltar al contenido principal

Recetario de ESPHome: TRMNL 7.5" (OG) DIY Kit

Lee primero la guía principal de ESPHome

Esta página es el recetario de ESPHome específico para el TRMNL DIY Kit. El contenido común — elegir un método de flasheo, el esqueleto YAML genérico, la conexión con Home Assistant — se encuentra en Work with ESPHome. Échale un vistazo primero si eres nuevo en ESPHome en las pantallas de papel electrónico de Seeed. ¿Buscas en cambio el flujo de trabajo del panel en la nube de TRMNL (sin YAML, basado en complementos)? Consulta Work with TRMNL.


Consigue uno ahora 🖱️

Introducción a Home Assistant​

Home Assistant es una potente plataforma de automatización del hogar de código abierto que te permite controlar y supervisar tus dispositivos domésticos inteligentes desde una única interfaz unificada. Actúa como el concentrador central de tu hogar inteligente, lo que te permite automatizar rutinas, monitorizar sensores y crear un espacio vital más inteligente.

¿Por qué Home Assistant?​

  • Control local: A diferencia de muchas soluciones basadas en la nube, Home Assistant se ejecuta localmente en tu red, lo que garantiza que tus datos permanezcan privados y que tus automatizaciones funcionen incluso sin acceso a Internet.

  • Amplia compatibilidad de dispositivos: Home Assistant se integra con miles de dispositivos y servicios de hogar inteligente diferentes, lo que lo hace muy versátil y preparado para el futuro.

  • Automatización potente: Crea reglas de automatización sofisticadas que puedan responder a diversos desencadenantes como la hora, estados de dispositivos, lecturas de sensores y más.

  • Panel personalizable: Diseña tu propia interfaz de usuario para mostrar la información que más te importa.

Más información 🖱️

¿Por qué el TRMNL 7.5inch(OG) DIY Kit con Home Assistant?​

El TRMNL 7.5inch(OG) DIY Kit es un excelente compañero para Home Assistant por varias razones:

  1. Eficiencia energética: La pantalla de papel electrónico solo consume energía al actualizar el contenido, lo que la hace perfecta para mostrar información persistente como pronósticos del tiempo, eventos de calendario o el estado del sistema.

  2. Visibilidad clara: A diferencia de las pantallas LCD, las pantallas de papel electrónico se leen fácilmente en cualquier condición de iluminación, incluida la luz solar directa, lo que las hace ideales para paneles de control domésticos montados en la pared.

  3. Larga duración de la batería: Combinada con el modo de sueño profundo, la pantalla puede funcionar durante meses con una sola carga de batería y seguir proporcionando información valiosa de un vistazo.

  4. Integración flexible: A través de ESPHome, la pantalla se integra perfectamente con Home Assistant, lo que te permite mostrar cualquier dato de tu sistema de hogar inteligente en un formato elegante y siempre visible.

Estas ventajas hacen que el TRMNL 7.5inch(OG) DIY Kit sea una opción ideal para crear una pantalla de información siempre encendida y de bajo consumo para tu configuración de Home Assistant.

Integración con ESPHome​

ESPHome es una herramienta de creación de firmware de código abierto diseñada específicamente para dispositivos ESP8266/ESP32. Te permite crear firmware personalizado usando sencillos archivos de configuración YAML, que luego pueden flashearse en tu dispositivo. Para el TRMNL 7.5inch(OG) DIY Kit, ESPHome actúa como el middleware esencial que habilita la comunicación entre el dispositivo y Home Assistant.

El sistema funciona convirtiendo tu configuración YAML en un firmware totalmente funcional que se ejecuta en tu dispositivo ESP. Este firmware se encarga de todas las tareas complejas de conectarse a tu red, comunicarse con Home Assistant y controlar la pantalla de papel electrónico. Combinado con Home Assistant, ESPHome proporciona una plataforma robusta para crear pantallas y controles sofisticados de automatización del hogar.

Veamos cómo configurarlo y sacar el máximo partido de esta pantalla versátil.

Primeros pasos​

Antes de comenzar con el contenido del tutorial de este artículo, es posible que necesites tener listo el siguiente hardware.

Materiales necesarios​

TRMNL 7.5inch(OG) DIY KitHome Assistant Green
Consigue uno ahora 🖱️
Consigue uno ahora 🖱️

Home Assistant Green es la forma más sencilla y centrada en la privacidad de automatizar tu hogar. Ofrece una configuración sin esfuerzo y te permite controlar todos los dispositivos inteligentes con un solo sistema, donde todos los datos se almacenan localmente de forma predeterminada. Esta placa se beneficia del próspero ecosistema de Home Assistant y se mejorará cada mes gracias al código abierto.

Recomendamos usar Home Assistant Green como el host de Home Assistant para este tutorial, o puedes usar cualquier host de Home Assistant con Supervisor.

instala Home Assistant

También hemos escrito cómo instalar Home Assistant para algunos productos de Seeed Studio, por favor consúltalos.

Si no estás usando un producto de Seeed Studio, también puedes consultar y aprender cómo instalar Home Assistant para otros productos en el sitio web oficial de Home Assistant.

Instalación del equipo​

Paso 1. Conectar la pantalla a la placa controladora
Alinea el cable FPC con el conector en la XIAO ePaper Display Board y luego asegura la pestaña para garantizar una conexión firme.

tip

El lado metálico del cable FPC debe mirar hacia arriba; de lo contrario, no se mostrará ningún contenido.

Sigue el siguiente tutorial de instalación, muchas personas lo hacen mal.

Paso 2. Conectar la batería
Conecta el cable de la batería al conector JST de la placa controladora, asegurando la polaridad correcta (cable rojo a +, negro a -).

Paso 3. Montaje de la carcasa (opcional)

tip

Ten en cuenta que el cable flexible de la pantalla es muy frágil. Ten cuidado al manipularlo. Si se daña, toda la pantalla dejará de funcionar.

Imprime las piezas de la carcasa de código abierto desde Resource part y ensambla los componentes en su interior.

Primero, ensambla la placa controladora y la batería.

Prueba el kit TRMNL para comprobar que funciona bien.

Introduce la pantalla en la carcasa y deja salir el FPC.

Conecta el cable de extensión FPC y ensambla toda la carcasa.

La carcasa en forma de L es muy similar.

tip

Si tu kit TRMNL está lejos de tu router, puedes mover la antena fuera de la carcasa. Tendrá un mejor rendimiento.

Paso 1. Instalar ESPHome​

Si ya has instalado ESPHome, puedes omitir este paso.

Ve a Settings -> Add-ons -> ADD-ON STORE

Busca ESPHome y haz clic en él. Haz clic en INSTALL y START.

tip

Si no puedes encontrar ESPHome en la tienda de complementos, asegúrate de que estás usando una instalación de Home Assistant que admita complementos (como Home Assistant OS o instalaciones supervisadas). Para otros tipos de instalación (como Home Assistant Container), es posible que necesites ejecutar ESPHome Device Builder de forma independiente usando Docker. Consulta la documentación oficial de ESPHome para más detalles.

Después de eso, ESPHome Builder aparecerá en la barra lateral.

Paso 2. Añadir un nuevo dispositivo​

Ve a ESPHome y haz clic en NEW DEVICE.

Ponle al dispositivo el nombre que quieras y selecciona ESP32-S3 como tipo de chip, luego haz clic en SKIP.

Después de crear un nuevo dispositivo, haz clic en EDIT.

Dentro del código generado por defecto, el framework de esp32 puede ser esp-idf, que necesitamos cambiar a arduino.

Paso 3. Instalar firmware​

Este es un ejemplo muy básico y mostrará "Hello World!" en la pantalla.

El objetivo principal es mostrarte diferentes formas de instalar firmware en el dispositivo.

Ahora puedes copiar el siguiente código y pegarlo después de captive_portal como se muestra a continuación.

# define font to display words
font:
  - file: "gfonts://Inter@700"
    id: font1
    size: 24

# define SPI interface
spi:
  clk_pin: GPIO7
  mosi_pin: GPIO9

display:
  - platform: waveshare_epaper
    model: 7.50inv2
    cs_pin: GPIO44
    dc_pin: GPIO10
    reset_pin: GPIO38
    busy_pin: 
      number: GPIO4
      inverted: true
    update_interval: 30s
    lambda: |-
      it.print(0, 0, id(font1), "Hello World!");

Haz clic en INSTALL para instalar el código en el dispositivo y verás la siguiente imagen.

tip

Si tu Home Assistant Host (Raspberry PI/Green/Yellow, etc.) está lejos de ti, recomendamos usar este método. Puedes instalarlo con el ordenador que tengas a mano.

Primero, necesitas hacer clic en Manual download para descargar el firmware compilado.

Abre este sitio web donde subiremos el firmware al panel ePaper.

Vuelve a ESPHome para descargar el firmware.

Selecciona el formato Factory.

Usa un cable USB para conectar el panel ePaper a tu ordenador y haz clic en CONNECT.

Selecciona usbmodemxxx (en Windows es COMxxx) y haz clic en connect. ¿Has encontrado un problema? Haz clic aquí.

Haz clic en INSTALL y selecciona el firmware que acabas de descargar.

Espera un momento y verás 'Hello world!' en la pantalla ～

Usos básicos​

1. Mostrar forma​

Este ejemplo mostrará una forma en la pantalla.

Puedes copiar el código de abajo y pegarlo en la parte de captive_portal como en la siguiente imagen.

spi:
  clk_pin: GPIO7
  mosi_pin: GPIO9

display:
  - platform: waveshare_epaper
    model: 7.50inv2
    cs_pin: GPIO44
    dc_pin: GPIO10
    reset_pin: GPIO38
    busy_pin: 
      number: GPIO4
      inverted: true
    update_interval: 5min
    lambda: |-
      it.rectangle(10, 10, 100, 50);
      it.rectangle(150, 10, 50, 50);
      it.circle(250, 35, 25);

      it.filled_rectangle(10, 80, 100, 50);
      it.filled_rectangle(150, 80, 50, 50);
      it.filled_circle(250, 105, 25);

Cuando veas un mensaje como en la siguiente imagen, significa que el código se está ejecutando correctamente.

También puedes hacer clic aquí para ver más usos.

2. Mostrar información en HA​

Este ejemplo mostrará en la pantalla la información de HA.

Antes que nada, necesitas añadir este dispositivo a HA. De lo contrario, no podrás obtener la información de HA.

Si HA no muestra el dispositivo, deberías ejecutar primero la demo anterior. Después de ejecutar la demo anterior, podrás ver el dispositivo en HA.

Y luego, haz clic en SUBMIT y FINISH.

Después de instalar ESPHome y añadir un nuevo dispositivo, puedes copiar el siguiente código y pegarlo después de captive_portal como se muestra a continuación.

# Define font to show info
font:
  - file: "gfonts://Inter@700"
    id: myFont
    size: 24

# Get info from HA, as string format
text_sensor:
  - platform: homeassistant
    entity_id: weather.forecast_home
    id: myWeather
    internal: true
  - platform: homeassistant
    entity_id: weather.forecast_home
    id: myTemperature
    attribute: "temperature"
    internal: true

# Get info from HA, as float format
sensor:
  - platform: homeassistant
    entity_id: weather.forecast_home
    id: myPressure
    attribute: "pressure"
    internal: true

# Display info via SPI
spi:
  clk_pin: GPIO7
  mosi_pin: GPIO9

display:
  - platform: waveshare_epaper
    model: 7.50inv2
    cs_pin: GPIO44
    dc_pin: GPIO10
    reset_pin: GPIO38
    busy_pin: 
      number: GPIO4
      inverted: true
    update_interval: 30s
    lambda: |-
      //print info in log
      ESP_LOGD("epaper", "weather: %s", id(myWeather).state.c_str());
      ESP_LOGD("epaper", "temperature: %s", id(myTemperature).state.c_str());
      ESP_LOGD("epaper", "pressure: %.1f", id(myPressure).state);
      //display info in epaper screen
      it.printf(100, 100, id(myFont), "%s", id(myWeather).state.c_str());
      it.printf(100, 150, id(myFont), "%s", id(myTemperature).state.c_str());
      it.printf(100, 200, id(myFont), "%.1f", id(myPressure).state);

Instala ese código en tu dispositivo.

La función del código es obtener clima, temperatura y presión desde HA y mostrarlos en la pantalla.

tip

Si descubres que tu Home Assistant no tiene un componente relacionado con el clima, puedes descargar una integración llamada Open-Meteo desde la sección de integraciones.

Cuando veas una respuesta como en la siguiente imagen, significa que el código se está ejecutando correctamente.

3. Mostrar icono​

Este ejemplo mostrará un icono en la pantalla.

Primero, necesitamos instalar un complemento de editor de archivos. Busca Studio Code Server y haz clic en él. Haz clic en INSTALL y START.

Y luego, crea una nueva carpeta llamada fonts y descarga este archivo y ponlo en la carpeta fonts.

Puedes copiar el siguiente código y pegarlo después de captive_portal como se muestra a continuación.

font:
  - file: 'fonts/materialdesignicons-webfont.ttf'  #here is the directory to save ttf file
    id: font_mdi_large
    size: 200        # big size icon
    glyphs: &mdi-weather-glyphs
      - "\U000F0595" # weather cloudy
      - "\U000F0592" # weather hail
  - file: 'fonts/materialdesignicons-webfont.ttf'
    id: font_mdi_medium   # small size icon
    size: 40
    glyphs: *mdi-weather-glyphs

spi:
  clk_pin: GPIO7
  mosi_pin: GPIO9

display:
  - platform: waveshare_epaper
    model: 7.50inv2
    cs_pin: GPIO44
    dc_pin: GPIO10
    reset_pin: GPIO38
    busy_pin: 
      number: GPIO4
      inverted: true
    update_interval: 30s
    lambda: |-
      it.printf(100, 200, id(font_mdi_medium), TextAlign::CENTER, "\U000F0595");
      it.printf(400, 200, id(font_mdi_large), TextAlign::CENTER, "\U000F0592");

Cuando veas una respuesta como en la siguiente imagen, significa que el código se está ejecutando correctamente.

Si quieres usar otros iconos, puedes hacer clic en el botón de abajo para explorar más.

Selecciona el icono que quieras.

Copia el código y pégalo en la parte de captive_portal como en la siguiente imagen.

4. Mostrar imagen​

Este ejemplo mostrará en la pantalla cualquier imagen que te guste.

Como en el ejemplo anterior, necesitamos instalar Studio Code Server y crear una nueva carpeta llamada image para guardar la imagen.

Luego pon una imagen en la carpeta image. Puedes hacer clic en el botón de abajo para descargar una imagen y hacer la prueba.

Puedes copiar el siguiente código y pegarlo después de captive_portal como se muestra a continuación.

image:
  - file: /config/esphome/image/wifi.jpg    # the path where you save the image, png or jpg format
    id: myImage
    type: BINARY
    resize: 800x480    # how big you want to show, the biggest size should be as same as ePaper Penal pixel(800x480)
    invert_alpha: true   # invert color

spi:
  clk_pin: GPIO7
  mosi_pin: GPIO9

display:
  - platform: waveshare_epaper
    model: 7.50inv2
    cs_pin: GPIO44
    dc_pin: GPIO10
    reset_pin: GPIO38
    busy_pin: 
      number: GPIO4
      inverted: true
    update_interval: 30s
    lambda: |-
      it.image(0, 0, id(myImage));

Cuando veas una respuesta como en la siguiente imagen, significa que el código se está ejecutando correctamente.

Demo 1. Tomar el panel de Home Assistant como una captura de pantalla​

Este ejemplo mostrará en la pantalla la captura de pantalla de HA.

Primero, necesitas instalar un complemento de captura de pantalla Puppet, haz clic aquí para instalarlo.

Ten en cuenta que la versión debe ser igual o superior a 1.11.4. Después de la instalación, ve a la página de configuración. Necesitamos crear un access_token para este complemento.

Consulta el siguiente paso para crear un token y pegarlo aquí.

Ve al final de la página Security y crea un token, luego cópialo y pégalo en el complemento Puppet.

Recuerda reiniciar el complemento Puppet.

Al iniciar el complemento se lanzará un nuevo servidor en el puerto 10000. Cualquier ruta que solicites devolverá una captura de pantalla de esa página. Necesitarás especificar el tamaño de la ventana gráfica que deseas.

Por ejemplo, para obtener una captura de pantalla de 1000px x 1000px de tu panel predeterminado, solicita:

# http://192.168.1.191:10000/lovelace/0?viewport=1000x1000(My address)

http://homeassistant.local:10000/lovelace/0?viewport=1000x1000

Para reducir la paleta de colores para pantallas E Ink®, puedes añadir el parámetro eink. El valor representa el número de colores (incluido el negro) que se usarán. Por ejemplo, para una pantalla E Ink® de 2 colores:

http://homeassistant.local:10000/lovelace/0?viewport=1000x1000&eink=2

Si estás usando eink=2, también puedes invertir los colores añadiendo el parámetro invert:

http://homeassistant.local:10000/lovelace/0?viewport=1000x1000&eink=2&invert

Además, también puedes hacer una captura de pantalla de otra página, por ejemplo la página de To-do lists en HA:

http://192.168.1.191:10000/todo?viewport=800x480&eink=2&invert

Puedes echar un vistazo al efecto de la captura de pantalla introduciendo este enlace en tu navegador.

Copia el siguiente código y pégalo después de esp32:

# Enable PSRAM support since online_image requires more than the available RAM capacity
psram:
  mode: octal
  speed: 80MHz

Puedes copiar el código siguiente y pegarlo después de captive_portal como se muestra a continuación.

http_request:
  verify_ssl: false
  timeout: 10s
  watchdog_timeout: 15s

online_image:
  - id: dashboard_image
    format: PNG
    type: BINARY
    buffer_size: 30000
    url: http://192.168.1.191:10000/todo?viewport=800x480&eink=2&invert #change this link to your screenshot link
    update_interval: 30s
    on_download_finished:
      - delay: 0ms
      - component.update: main_display

spi:
  clk_pin: GPIO7
  mosi_pin: GPIO9

display:
  - platform: waveshare_epaper
    id: main_display
    model: 7.50inv2
    cs_pin: GPIO44
    dc_pin: GPIO10
    reset_pin: GPIO38
    busy_pin: 
      number: GPIO4
      inverted: true
    update_interval: never
    lambda: |-
      it.image(0, 0, id(dashboard_image));

Cuando veas una respuesta como en la siguiente imagen, significa que el código se está ejecutando correctamente.

Demo2. Modo de sueño profundo​

tip

Durante el modo de sueño profundo, no puedes subir código al dispositivo directamente. Necesitas entrar en el modo de descarga. Haz clic aquí para saltar a la P3.

Este ejemplo mostrará cómo usar el modo de sueño profundo para ahorrar energía. Actualiza la información cada 6 horas.

Puedes copiar el código siguiente y pegarlo después de captive_portal como se muestra a continuación.

globals:
  - id: sleep_counter
    type: int
    restore_value: yes  # key parameter, to use RTC storage
    initial_value: '0'

# Here is deep sleep part
deep_sleep:
  id: deep_sleep_1
  run_duration: 30s  # Device wake up and run 30s (enough to display)
  sleep_duration: 3min  # deep sleep for 3min

interval:
  - interval: 29s  # run this command before the end of run_duration
    then:
      - logger.log: "Entering deep sleep now..."

font:
  - file: "gfonts://Inter@700"
    id: font1
    size: 24

spi:
  clk_pin: GPIO7
  mosi_pin: GPIO9

display:
  - platform: waveshare_epaper
    model: 7.50inv2
    cs_pin: GPIO44
    dc_pin: GPIO10
    reset_pin: GPIO38
    busy_pin: 
      number: GPIO4
      inverted: true
    update_interval: 3min
    lambda: |-
      id(sleep_counter) += 1;
      ESP_LOGD("main", "Wakeup count: %d", id(sleep_counter));
      it.printf(100, 100, id(font1), "Wakeup count: %d", id(sleep_counter));

Verás un contador. Se incrementará en uno cada vez que se despierte.

Demo 3. Ejemplo integral​

tip

Para que lo entiendas mejor, te recomendamos encarecidamente que primero ejecutes los usos básicos anteriores.

Este ejemplo demuestra una configuración integral de ESPHome para el kit TRMNL de papel electrónico de 7,5 pulgadas para bricolaje. El código YAML integra múltiples funciones para crear un panel de visualización inteligente e interactivo que funciona a la perfección con Home Assistant.

Propósito y funcionalidad:

  • La configuración permite que el dispositivo se conecte a Wi-Fi y a Home Assistant, admitiendo tanto API como actualizaciones OTA para una gestión sencilla.

  • Configura la pantalla de papel electrónico para mostrar diferentes tipos de información en dos páginas conmutables, controladas por botones físicos.

  • El dispositivo lee el voltaje de la batería, calcula el porcentaje de batería y muestra un icono y un valor de batería correspondientes.

  • Las condiciones meteorológicas y la temperatura se obtienen de Home Assistant y se muestran con los iconos y unidades apropiados.

  • También se muestran la hora y la fecha actuales, sincronizadas con Home Assistant.

Este ejemplo muestra cómo combinar lecturas de sensores, datos de Home Assistant y entrada del usuario para crear una pantalla inteligente siempre encendida y rica en funciones usando ESPHome y el kit TRMNL de papel electrónico de 7,5 pulgadas.

Haz clic aquí para previsualizar el código completo
esphome:
  name: obdy
  friendly_name: obdy
  on_boot:
    priority: 600
    then:
      - output.turn_on: bsp_battery_enable
      - delay: 200ms
      - component.update: battery_voltage
      - component.update: battery_level

esp32:
  board: esp32-s3-devkitc-1
  framework:
    type: arduino

# Enable PSRAM support since online_image requires more than the available RAM capacity
psram:
  mode: octal
  speed: 80MHz

# Enable logging
logger:

# Enable Home Assistant API
api:
  encryption:
    key: "j0V30kuJ6Zdij9SU6Ee+7ruwid+7SQOxtinjld2PRc0="

ota:
  - platform: esphome
    password: "db786195ae6f9748f5b57ea9bd1d4161"

wifi:
  ssid: !secret wifi_ssid
  password: !secret wifi_password

  # Enable fallback hotspot (captive portal) in case wifi connection fails
  ap:
    ssid: "Obdy Fallback Hotspot"
    password: "IOfapF7hXq55"

captive_portal:

# Deep-sleep, wake by GPIO4
# deep_sleep:
#   id: deep_sleep_1
#   run_duration: 1min
#   sleep_duration: 60min
#   wakeup_pin: GPIO4
#   wakeup_pin_mode: INVERT_WAKEUP

spi:
  clk_pin: GPIO7
  mosi_pin: GPIO9

# Fonts
font:
  - file: "gfonts://Inter@700"
    id: small_font
    size: 24
  - file: "gfonts://Inter@700"
    id: mid_font
    size: 36
  - file: "gfonts://Inter@700"
    id: big_font
    size: 180
  - file: "gfonts://Inter@700"
    id: time_font
    size: 96      # for the big time display
  - file: 'fonts/materialdesignicons-webfont.ttf'
    id: font_bat_icon
    size: 24
    glyphs:
      - "\U000F007A"  # mdi-battery-10
      - "\U000F007B"  # mdi-battery-20
      - "\U000F007C"  # mdi-battery-30
      - "\U000F007D"  # mdi-battery-40
      - "\U000F007E"  # mdi-battery-50
      - "\U000F007F"  # mdi-battery-60
      - "\U000F0080"  # mdi-battery-70
      - "\U000F0081"  # mdi-battery-80
      - "\U000F0082"  # mdi-battery-90
      - "\U000F0079"  # mdi-battery
  - file: "fonts/materialdesignicons-webfont.ttf" # <-- 替换成你的字体文件路径
    id: weather_icon_font
    size: 100
    glyphs:
      - "\U000F0599" # weather-sunny
      - "\U000F0595" # weather-partly-cloudy
      - "\U000F0F2F" # weather-cloudy
      - "\U000F0597" # weather-rainy
      - "\U000F0598" # weather-snowy
      - "\U000F059B" # weather-windy
      - "\U000F0594" # weather-fog
      - "\U000F0596" # weather-lightning

globals:
  - id: page_index
    type: int
    restore_value: true
    initial_value: '0'
  - id: battery_glyph
    type: std::string
    restore_value: no
    initial_value: "\"\\U000F0079\""   # default full battery

sensor:
  - platform: adc
    pin: GPIO1
    name: "Battery Voltage"
    id: battery_voltage
    update_interval: 60s
    attenuation: 12db
    filters:
      - multiply: 2.0
  - platform: template
    name: "Battery Level"
    id: battery_level
    unit_of_measurement: "%"
    icon: "mdi:battery"
    device_class: battery
    state_class: measurement
    lambda: 'return id(battery_voltage).state;'
    update_interval: 60s
    on_value:
      then:
        - lambda: |-
            int pct = int(x);
            if (pct <= 10)      id(battery_glyph) = "\U000F007A";
            else if (pct <= 20) id(battery_glyph) = "\U000F007B";
            else if (pct <= 30) id(battery_glyph) = "\U000F007C";
            else if (pct <= 40) id(battery_glyph) = "\U000F007D";
            else if (pct <= 50) id(battery_glyph) = "\U000F007E";
            else if (pct <= 60) id(battery_glyph) = "\U000F007F";
            else if (pct <= 70) id(battery_glyph) = "\U000F0080";
            else if (pct <= 80) id(battery_glyph) = "\U000F0081";
            else if (pct <= 90) id(battery_glyph) = "\U000F0082";
            else                id(battery_glyph) = "\U000F0079";
    filters:
      - calibrate_linear:
          - 4.15 -> 100.0
          - 3.96 -> 90.0
          - 3.91 -> 80.0
          - 3.85 -> 70.0
          - 3.80 -> 60.0
          - 3.75 -> 50.0
          - 3.68 -> 40.0
          - 3.58 -> 30.0
          - 3.49 -> 20.0
          - 3.41 -> 10.0
          - 3.30 -> 5.0
          - 3.27 -> 0.0
      - clamp:
          min_value: 0
          max_value: 100

output:
  - platform: gpio
    pin: GPIO6
    id: bsp_battery_enable

binary_sensor:
  - platform: gpio    # Next page KEY1
    pin:
      number: GPIO2
      mode: INPUT_PULLUP
      inverted: true
    id: key1
    name: "Key1"
    on_press:
      then:
        - lambda: |-
            id(page_index) = (id(page_index) + 1) % 2;
            id(epaper_display).update();

  - platform: gpio     # Prev page KEY2
    pin:
      number: GPIO3
      mode: INPUT_PULLUP
      inverted: true
    id: key2
    name: "Key2"
    on_press:
      then:
        - lambda: |-
            id(page_index) = (id(page_index) - 1 + 2) % 2;
            id(epaper_display).update();

  # - platform: gpio
  #   pin:
  #     number: GPIO5       # KEY3
  #     mode: INPUT_PULLUP
  #     inverted: true
  #   id: key2
  #   name: "Key2"
  #   on_press:
  #     then:

# Home Assistant time
time:
  - platform: homeassistant
    id: ha_time

text_sensor:
  - platform: homeassistant
    entity_id: weather.home
    id: myWeather
  - platform: homeassistant
    entity_id: weather.home
    id: temp
    attribute: "temperature"

display:
  - platform: waveshare_epaper
    id: epaper_display
    model: 7.50inv2
    cs_pin: GPIO44
    dc_pin: GPIO10
    reset_pin: GPIO38
    busy_pin: 
      number: GPIO4
      inverted: true
    update_interval: never
    lambda: |-
      // ----------  PAGE 0  ----------
      if (id(page_index) == 0) {
        // Screen dimension constants for easy adjustment
        const int scr_w = 800;
        const int scr_h = 480;
        const int center_x = scr_w / 2; // Center X-coordinate of the screen (400)

        // --- Top-right: Battery Info ---
        // Display the battery icon using an icon font
        it.printf(scr_w - 130, 13, id(font_bat_icon), "%s", id(battery_glyph).c_str());
        // Display the battery percentage text
        it.printf(scr_w - 100, 10, id(small_font), "%.0f%%", id(battery_level).state);

        // --- Draw the vertical separator line ---
        // Draw a vertical line in the middle to separate left and right areas
        it.filled_rectangle(center_x, 100, 2, 280);

        // ==================================================
        //                    LEFT AREA: WEATHER INFO
        // ==================================================
        // Calculate the center X-coordinate of the left area for alignment
        const int left_center_x = center_x / 2; // 200

        // 1. Display the title "Weather" at the top of the left area
        it.printf(left_center_x, 110, id(mid_font), TextAlign::TOP_CENTER, "Weather");

        // 2. Get the weather condition and select the corresponding icon
        std::string weather_condition = id(myWeather).state;
        std::string weather_icon = "\U000F0599"; // Default icon (sunny), as a fallback for unknown states

        if (weather_condition == "partlycloudy") {
          weather_icon = "\U000F0595"; // weather-partly-cloudy
        } else if (weather_condition == "cloudy") {
          weather_icon = "\U000F0F2F"; // weather-cloudy
        } else if (weather_condition == "rainy") {
          weather_icon = "\U000F0597"; // weather-rainy
        } else if (weather_condition == "snowy") {
          weather_icon = "\U000F0598"; // weather-snowy
        } else if (weather_condition == "windy") {
          weather_icon = "\U000F059B"; // weather-windy
        } else if (weather_condition == "fog") {
          weather_icon = "\U000F0594"; // weather-fog
        } else if (weather_condition == "lightning") {
          weather_icon = "\U000F0596"; // weather-lightning
        }
        // Display the weather icon in the center of the left area
        it.printf(left_center_x, 240, id(weather_icon_font), TextAlign::CENTER, "%s", weather_icon.c_str());

        // 3. Display the weather condition text below the icon
        it.printf(left_center_x, 400, id(mid_font), TextAlign::BOTTOM_CENTER, "%s", weather_condition.c_str());


        // ==================================================
        //                    RIGHT AREA: TEMPERATURE INFO
        // ==================================================
        // Calculate the center X-coordinate of the right area for alignment
        const int right_center_x = center_x + (center_x / 2); // 600

        // 1. Display the title "Temperature" at the top of the right area
        it.printf(right_center_x, 110, id(mid_font), TextAlign::TOP_CENTER, "Temperature");

        // 3. Display the temperature reading below the icon, with one decimal place
        float temp_c = stof(id(temp).state);
        double temp_f = temp_c * 9.0 / 5.0 + 32.0;
        it.printf(right_center_x, 250, id(mid_font), TextAlign::CENTER, "%.0f°F", temp_f);
        it.printf(right_center_x, 380, id(mid_font), TextAlign::CENTER, "%.1f°C", temp_c);
      }
      // ----------  PAGE 1  ----------
      else{
        // Battery top-right
        it.printf(670, 13, id(font_bat_icon), "%s", id(battery_glyph).c_str());
        it.printf(700, 10, id(small_font), "%.0f%%", id(battery_level).state);

        auto now = id(ha_time).now();
        struct tm timeinfo = now.to_c_tm();

        // centering time HH:MM
        char timeStr[6];
        strftime(timeStr, sizeof(timeStr), "%H:%M", &timeinfo);
        it.printf(400, 180, id(time_font), TextAlign::CENTER, timeStr);

        // Date: Day of week
        const char *weekday[] = {"Sun","Mon","Tue","Wed","Thu","Fri","Sat"};
        const char *wday = weekday[timeinfo.tm_wday];

        // Date: month - day
        char dateStr[12];
        strftime(dateStr, sizeof(dateStr), "%b %d", &timeinfo);  // e.g. Jun 15

        // Day of the week + date below the time
        it.printf(400, 280, id(mid_font), TextAlign::CENTER, "%s, %s", wday, dateStr);
      }

Cuando veas una respuesta como en la siguiente imagen, significa que el código se está ejecutando correctamente.

Preguntas frecuentes​

P1: ¿Por qué no hay datos?​

En este caso, debes ir a Settings -> Devices & Services -> Integrations para RECONGFIGURE el dispositivo. ¿No has encontrado tu ePaper Penal? Intenta reiniciar HA.

P2: ¿Por qué no puedo obtener esos datos en Home Assistant?​

En este caso, debes ir a Settings -> Devices & Services -> Integrations para ADD tu dispositivo a HA.

P3: ¿Cómo puedo cargar un nuevo programa cuando el dispositivo está en modo de suspensión profunda?​

Cuando el dispositivo está en modo de suspensión profunda, no puedes cargar un nuevo programa directamente.

  1. Primero, asegúrate de que el dispositivo esté encendido. Luego, mantén presionado el botón Boot ubicado junto al puerto USB-C en el XIAO ESP32-S3 Plus.

  2. Mientras mantienes presionado el botón Boot, presiona el botón Reset una vez y luego suelta el botón Boot.

  3. Después de eso, apaga el interruptor de la batería y desconecta el cable de alimentación.

  4. Finalmente, vuelve a conectar el cable y carga un nuevo programa.

P4: ¿El kit TRMNL 7.5inch(OG) DIY no puede conectarse a tu ordenador?​

Intenta desconectarlo y volverlo a conectar varias veces, o simplemente instala el controlador según las indicaciones.

P5: ¿Falló la carga del programa por Wi‑Fi?​

En este caso, tu ePaper penal está sin conexión o en modo de suspensión profunda. Por favor, ponlo en línea o despiértalo.

Soporte técnico y debate sobre el producto​

Gracias por elegir nuestros productos. Estamos aquí para ofrecerte diferentes tipos de soporte y garantizar que tu experiencia con nuestros productos sea lo más fluida posible. Ofrecemos varios canales de comunicación para adaptarnos a diferentes preferencias y necesidades.

Loading Comments...