Skip to main content

Kit DIY TRMNL 7.5inch(OG) Funciona con ESPHome


Obtener Uno Ahora 🖱️

Introducción a Home Assistant​

Home Assistant es una poderosa plataforma de automatización del hogar de código abierto que te permite controlar y monitorear tus dispositivos domésticos inteligentes desde una interfaz única y unificada. Actúa como el centro de control de tu hogar inteligente, permitiéndote automatizar rutinas, monitorear sensores y crear un espacio de vida 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, asegurando que tus datos permanezcan privados y que tus automatizaciones funcionen incluso sin acceso a internet.

  • Amplio Soporte de Dispositivos: Home Assistant se integra con miles de diferentes dispositivos y servicios domésticos inteligentes, haciéndolo altamente versátil y preparado para el futuro.

  • Automatización Poderosa: Crea reglas de automatización sofisticadas que pueden responder a varios disparadores como tiempo, estados de dispositivos, lecturas de sensores y más.

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

Aprender Más 🖱️

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

El Kit DIY TRMNL 7.5inch(OG) 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 contenido, haciéndola perfecta para mostrar información persistente como pronósticos del tiempo, eventos del calendario o estado del sistema.

  2. Visibilidad Clara: A diferencia de las pantallas LCD, las pantallas de papel electrónico son fácilmente legibles en cualquier condición de iluminación, incluyendo luz solar directa, haciéndolas ideales para paneles de control doméstico montados en la pared.

  3. Larga Duración de Batería: Combinada con el modo de sueño profundo, la pantalla puede operar durante meses con una sola carga de batería mientras sigue proporcionando información valiosa de un vistazo.

  4. Integración Flexible: A través de ESPHome, la pantalla se integra perfectamente con Home Assistant, permitiéndote mostrar cualquier dato de tu sistema doméstico inteligente en un formato elegante y siempre visible.

Estas ventajas hacen del Kit DIY TRMNL 7.5inch(OG) una opción ideal para crear una pantalla de información energéticamente eficiente y siempre encendida para tu configuración de Home Assistant.

Integración con ESPHome​

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

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

Exploremos cómo configurarlo y aprovechar al máximo esta pantalla versátil.

Comenzando​

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

Materiales Requeridos​

TRMNL 7.5inch(OG) DIY KitHome Assistant Green
Get One Now 🖱️
Get One Now 🖱️

Home Assistant Green es la forma más fácil 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 por defecto. Esta placa se beneficia del próspero ecosistema de Home Assistant y será mejorada cada mes por 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 un Supervisor.

instalar 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.

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 estar usando una instalación de Home Assistant que soporte complementos (como Home Assistant OS o instalaciones supervisadas). Para otros tipos de instalación (como Home Assistant Container), es posible que necesites ejecutar el Constructor de Dispositivos ESPHome de forma independiente usando Docker. Consulta la documentación oficial de ESPHome para más detalles.

Y luego, el Constructor ESPHome aparecerá en la barra lateral.

Paso 2. Agregar un nuevo dispositivo​

Ve a ESPHome y haz clic en NEW DEVICE.

Dale al dispositivo un nombre que te guste y selecciona ESP32-S3 para el 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 propósito principal es mostrarte diferentes formas de instalar firmware en el dispositivo.

Ahora puedes copiar el código de abajo 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 INSTALAR para instalar el código en el dispositivo y verás la siguiente imagen.

tip

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

Primero, necesitas hacer clic en Descarga manual para descargar el firmware compilado.

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

Regresa a ESPHome para descargar el firmware.

Selecciona formato Factory.

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

Selecciona usbmodemxxx (Windows es COMxxx) y haz clic en conectar. ¿Encontraste un problema? Haz clic aquí.

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

Espera un momento y verás '¡Hola mundo!' en la pantalla ～

Usos básicos​

1. Mostrar formas​

Este ejemplo mostrará formas en la pantalla.

Puedes copiar el código de abajo y pegarlo en la parte captive_portal como se muestra 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 la retroalimentación como la siguiente imagen, significa que el código se está ejecutando exitosamente.

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

2. Mostrar información en HA​

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

En primer lugar, necesitas agregar este dispositivo a HA. De lo contrario, no puedes obtener la información de HA.

Si HA no muestra el dispositivo, deberías ejecutar la demostración anterior primero. Después de ejecutar la demostración anterior, puedes ver el dispositivo en HA.

Y luego, haz clic en SUBMIT y FINISH.

Después de instalar ESPHome y agregar un nuevo dispositivo, puedes copiar el código a continuación 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 esos códigos en tu dispositivo.

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

tip

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

Cuando veas la retroalimentación como la siguiente imagen, significa que el código se está ejecutando exitosamente.

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 código de abajo 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 la retroalimentación como la siguiente imagen, significa que el código se está ejecutando exitosamente.

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

Selecciona un icono que desees.

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

4. Mostrar imagen​

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

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

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

Puedes copiar el código de abajo 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 la retroalimentación como la siguiente imagen, significa que el código se está ejecutando exitosamente.

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

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

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

Ten en cuenta que la versión debe ser superior o igual 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.

Ve al siguiente paso para crear un token y pegarlo aquí.

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

Recuerda reiniciar el complemento Puppet.

Iniciar el complemento 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 ventana gráfica que desees.

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 (incluyendo el negro) a usar. 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 capturar pantalla de otras páginas, por ejemplo la página de Listas de tareas en HA:

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

Puedes ver el efecto de la captura de pantalla ingresando este enlace en tu navegador.

Puedes copiar el código a continuación 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
    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 la retroalimentación como la siguiente imagen, significa que el código se está ejecutando exitosamente.

Demo2. Modo de sueño profundo​

tip

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

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

Puedes copiar el código a continuación 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 entiendas mejor, te recomendamos encarecidamente que ejecutes primero los usos básicos anteriores.

Este ejemplo demuestra una configuración integral de ESPHome para el kit DIY de papel electrónico TRMNL de 7.5 pulgadas. El código YAML integra múltiples características para crear un panel de visualización inteligente e interactivo que funciona perfectamente con Home Assistant.

Propósito y Funcionalidad:

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

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

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

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

  • La hora y fecha actuales también se muestran, sincronizadas con Home Assistant.

Este ejemplo muestra cómo combinar lecturas de sensores, datos de Home Assistant, y entrada del usuario para construir una pantalla inteligente rica en características y siempre encendida usando ESPHome y el kit de papel electrónico TRMNL 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 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 la retroalimentación como la siguiente imagen, significa que el código se está ejecutando exitosamente.

FAQ​

P1: ¿Por qué no hay datos?​

En este caso, debes ir a Configuración -> Dispositivos y Servicios -> Integraciones para RECONFIGURAR el dispositivo. ¿No encuentras tu Panel ePaper? Intenta reiniciar HA.

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

En este caso, debes ir a Configuración -> Dispositivos y Servicios -> Integraciones para AÑADIR tu dispositivo a HA.

P3: ¿Cómo puedo cargar un nuevo programa cuando el dispositivo está en modo de sueño profundo?​

Cuando el dispositivo está en modo de sueño profundo, 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, 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 DIY TRMNL 7.5inch(OG) no se puede conectar a tu computadora?​

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

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

En este caso, tu panel epaper está desconectado o en modo de sueño profundo. Por favor, ponlo en línea o despiértalo.

Soporte Técnico y Discusión de Productos​

¡Gracias por elegir nuestros productos! Estamos aquí para brindarte diferentes tipos de soporte para asegurar que tu experiencia con nuestros productos sea lo más fluida posible. Ofrecemos varios canales de comunicación para satisfacer diferentes preferencias y necesidades.

Loading Comments...