Pular para o conteúdo principal

Display de ePaper da reTerminal E Série funcionando com ESPHome para Home Assistant


Adquira o seu agora 🖱️

Introdução ao Home Assistant​

Home Assistant é uma poderosa plataforma de automação residencial de código aberto que permite controlar e monitorar seus dispositivos de casa inteligente a partir de uma interface única e unificada. Ele atua como o hub central da sua casa inteligente, permitindo automatizar rotinas, monitorar sensores e criar um ambiente doméstico mais inteligente.

Por que Home Assistant?​

  • Controle local: Diferente de muitas soluções baseadas em nuvem, o Home Assistant roda localmente na sua rede, garantindo que seus dados permaneçam privados e que suas automações funcionem mesmo sem acesso à internet.

  • Amplo suporte a dispositivos: O Home Assistant se integra a milhares de diferentes dispositivos e serviços de casa inteligente, tornando-o altamente versátil e preparado para o futuro.

  • Automação poderosa: Crie regras de automação sofisticadas que podem responder a vários gatilhos, como horário, estados de dispositivos, leituras de sensores e muito mais.

  • Dashboard personalizável: Projete sua própria interface de usuário para exibir as informações que mais importam para você.

Saiba mais 🖱️

Por que usar o Display de ePaper da reTerminal E Série com Home Assistant?​

O Display de ePaper da reTerminal E Série é um excelente companheiro para o Home Assistant por vários motivos:

  1. Eficiência energética: O display de e-paper só consome energia ao atualizar o conteúdo, tornando-o perfeito para exibir informações persistentes como previsões do tempo, eventos de calendário ou status do sistema.

  2. Visibilidade clara: Diferente das telas LCD, os displays de e-paper são facilmente legíveis em qualquer condição de iluminação, incluindo luz solar direta, o que os torna ideais para painéis de controle de parede.

  3. Longa duração de bateria: Combinado com o modo de sono profundo, o display pode operar por meses com uma única carga de bateria, ainda fornecendo informações valiosas de relance.

  4. Integração flexível: Por meio do ESPHome, o display se integra perfeitamente ao Home Assistant, permitindo mostrar qualquer dado do seu sistema de casa inteligente em um formato elegante e sempre visível.

Essas vantagens tornam o Display de ePaper da reTerminal E Série uma escolha ideal para criar um display de informações sempre ligado e eficiente em energia para a sua configuração de Home Assistant.

Integração com ESPHome​

ESPHome é uma ferramenta de criação de firmware de código aberto projetada especificamente para dispositivos ESP8266/ESP32. Ela permite criar firmware personalizado usando arquivos de configuração YAML simples, que podem então ser gravados no seu dispositivo. Para a reTerminal E Série, o ESPHome atua como middleware essencial que possibilita a comunicação entre o dispositivo e o Home Assistant.

O sistema funciona convertendo sua configuração YAML em um firmware completo que roda no seu dispositivo ESP. Esse firmware lida com todas as tarefas complexas de conexão à sua rede, comunicação com o Home Assistant e controle do display de ePaper. Quando combinado com o Home Assistant, o ESPHome oferece uma plataforma robusta para criar displays e controles de automação residencial sofisticados.

Vamos explorar como configurá-lo e tirar o máximo proveito desse display versátil.

Primeiros Passos​

Antes de iniciar o conteúdo do tutorial deste artigo, você pode precisar ter o seguinte hardware preparado.

Materiais necessários​

reTerminal E1001reTerminal E1002Home Assistant Green
Adquira o seu agora 🖱️
Adquira o seu agora 🖱️
Adquira o seu agora 🖱️

Home Assistant Green é a maneira mais fácil e focada em privacidade de automatizar sua casa. Ele oferece uma configuração simples e permite controlar todos os dispositivos inteligentes com apenas um sistema, onde todos os dados são armazenados localmente por padrão. Esta placa se beneficia do próspero ecossistema do Home Assistant e será aprimorada todos os meses pelo código aberto.

Recomendamos usar o Home Assistant Green como o host do Home Assistant para este tutorial, ou você pode usar qualquer host do Home Assistant com Supervisor.

install Home Assistant

Também escrevemos como instalar o Home Assistant para alguns produtos da Seeed Studio, consulte-os.

Se você não estiver usando um produto da Seeed Studio, também pode verificar e aprender como instalar o Home Assistant para outros produtos no site oficial do Home Assistant.

Etapa 1. Instalar o ESPHome​

nota

Se você já instalou o ESPHome, pode pular esta etapa.

Vá para Settings -> Add-ons -> ADD-ON STORE

Digite o termo de pesquisa ESPHome.

Clique em INSTALL e START.

dica

Se você não conseguir encontrar o ESPHome na loja de complementos, certifique-se de que está usando uma instalação do Home Assistant que oferece suporte a complementos (como Home Assistant OS ou instalações supervisionadas). Para outros tipos de instalação (como Home Assistant Container), talvez seja necessário executar o ESPHome Device Builder de forma independente usando Docker. Consulte a documentação oficial do ESPHome para mais detalhes.

Etapa 2. Adicionar um novo dispositivo​

Vá para o ESPHome e clique em NEW DEVICE.

Dê ao dispositivo um nome de sua preferência e selecione ESP32-S3 para o tipo de chip, depois clique em SKIP.

Depois de criar um novo dispositivo, clique em EDIT.

Etapa 3. Instalar o firmware​

Este é um exemplo bem básico e mostrará "Hello World!" no display.

O principal objetivo é mostrar diferentes maneiras de instalar o firmware no dispositivo.

Você pode usar este exemplo copiando o código abaixo e colando-o após a linha de código captive_portal no seu arquivo Yaml.

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

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

display:
  - platform: waveshare_epaper
    id: epaper_display
    model: 7.50inv2 # You can use 7.50inv2alt when you draw complex info and it display not good.
    cs_pin: GPIO10
    dc_pin: GPIO11
    reset_pin:
      number: GPIO12
      inverted: false
    busy_pin:
      number: GPIO13
      inverted: true
    update_interval: 300s
    lambda: |-
      it.print(0, 0, id(myFont), "Hello World!");

Clique em INSTALL para instalar o código no dispositivo e você verá a imagem a seguir.

dica

Se o seu Home Assistant Host (Raspberry PI/Green/Yellow etc.) estiver longe de você, recomendamos usar este método. Você pode instalá-lo com o computador que tiver em mãos.

Primeiro, você precisa clicar em Manual download para baixar o firmware compilado.

Abra este site onde vamos enviar o firmware para o painel ePaper.

Volte para o ESPHome para baixar o firmware.

Selecione Factory format.

Use um cabo USB para conectar o painel ePaper ao seu computador e clique em CONNECT.

Selecione usbmodemxxx (no Windows é COMxxx) e clique em connect. Encontrou um problema? Clique aqui.

Clique em INSTALL e selecione o firmware que você acabou de baixar.

Aguarde um momento e você verá 'Hello world!' no display ～

Noções básicas para desenho no ESPHome​

Desenhando gráficos simples​

Este exemplo de código YAML configura a interface SPI e o reTerminal E Série ePaper Display para um projeto ESPHome. A seção lambda contém comandos de desenho que renderizam formas simples na tela:

  • Dois retângulos (um na posição (10, 10) com tamanho 100x50, e outro em (150, 10) com tamanho 50x50)
  • Um círculo em (250, 35) com raio de 25
  • Dois retângulos preenchidos (em (10, 80) e (150, 80))
  • Um círculo preenchido em (250, 105) com raio de 25

Você pode usar este exemplo copiando o código abaixo e colando-o após a linha de código captive_portal no seu arquivo Yaml.

spi:
  clk_pin: GPIO7
  mosi_pin: GPIO9

display:
  - platform: waveshare_epaper
    id: epaper_display
    model: 7.50inv2 # You can use 7.50inv2alt when you draw complex info and it display not good.
    cs_pin: GPIO10
    dc_pin: GPIO11
    reset_pin:
      number: GPIO12
      inverted: false
    busy_pin:
      number: GPIO13
      inverted: true
    update_interval: 300s
    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);

Quando você vir o retorno como na imagem a seguir, significa que o código está sendo executado com sucesso.

Devido a limitações de espaço, não vamos detalhar muito os métodos de desenho e princípios de outros padrões; se necessário, recomenda-se ao leitor consultar ESPHome nesta parte dos exemplos detalhados.

Obtendo valores do Home Assistant para exibição​

Para exibir dados meteorológicos no seu dispositivo reTerminal E Série ePaper Display, você precisará acessar dados de temperatura, condições climáticas e velocidade do vento do Home Assistant. A integração Open-Meteo fornece dados meteorológicos confiáveis que podem ser acessados por meio das Developer Tools.

Instalando a integração Open-Meteo​

Passo 1. Abra o painel do Home Assistant e navegue até Settings → Devices & Services.

Passo 2. Clique no botão Add Integration no canto inferior direito.

Passo 3. Pesquise por "Open-Meteo" e selecione-o na lista.

Passo 4. Siga o assistente de configuração para definir sua localização e unidades preferidas.

Passo 5. Depois de instalada, a integração Open-Meteo criará várias entidades relacionadas ao clima na sua instância do Home Assistant.

Acessando dados meteorológicos em Developer Tools​

Depois de instalar a integração Open-Meteo, você pode acessar os dados meteorológicos por meio de Developer Tools:

Passo 1. No painel do Home Assistant, navegue até Developer Tools → States.

Passo 2. Na caixa de filtro, digite weather para encontrar a entidade principal de clima.

Passo 3. Clique na entidade para ver todos os atributos disponíveis. Os principais atributos de clima incluem:

  • temperature: Temperatura atual (nas unidades configuradas)
  • wind_bearing: Direção do vento
  • wind_speed: Velocidade do vento

Usando dados meteorológicos no ESPHome​

Para usar esses dados meteorológicos na sua configuração ESPHome para o reTerminal E Série, você precisará configurar uma conexão de API do Home Assistant no seu arquivo YAML do ESPHome:

# Example ESPHome configuration to retrieve weather data
# Get info from HA, as string format
text_sensor:
  - platform: homeassistant
    entity_id: weather.home
    id: myWeather
    internal: true
  - platform: homeassistant
    entity_id: weather.home
    id: myTemperature
    attribute: "temperature"
    internal: true

# Get info from HA, as float format
sensor:
  - platform: homeassistant
    entity_id: weather.home
    id: myWindBearing
    attribute: "wind_bearing"
    internal: true

Essa configuração cria entidades de sensor no seu dispositivo ESPHome que obtêm dados da integração de clima do Home Assistant. Você pode então usar esses sensores para atualizar o display ePaper do reTerminal E Série com as informações meteorológicas atuais.

dica

Para dados de previsão, você precisará usar as entidades weather.open_meteo_forecast, que contêm valores previstos para os próximos dias.

Por fim, adicione o código para a seção de display para usar esses valores acima. O código completo é o seguinte:

# Example ESPHome configuration to retrieve weather data
# Get info from HA, as string format
text_sensor:
  - platform: homeassistant
    entity_id: weather.home
    id: myWeather
    internal: true
  - platform: homeassistant
    entity_id: weather.home
    id: myTemperature
    attribute: "temperature"
    internal: true

# Get info from HA, as float format
sensor:
  - platform: homeassistant
    entity_id: weather.home
    id: myWindBearing
    attribute: "wind_bearing"
    internal: true

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

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

display:
  - platform: waveshare_epaper
    id: epaper_display
    model: 7.50inv2 # You can use 7.50inv2alt when you draw complex info and it display not good.
    cs_pin: GPIO10
    dc_pin: GPIO11
    reset_pin:
      number: GPIO12
      inverted: false
    busy_pin:
      number: GPIO13
      inverted: true
    update_interval: 300s
    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(myWindBearing).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(myWindBearing).state);

Depois de compilar o código acima e fazer o upload para o seu dispositivo, você pode primeiro ver NaN exibido na tela, por favor não se preocupe, isso é normal. Isso se deve ao fato de que o dispositivo ainda não foi adicionado ao ambiente do Home Assistant, portanto o reTerminal ainda não pôde obter dados do Home Assistant. Só precisamos seguir os passos abaixo para adicionar o dispositivo.

Adicionando o display ePaper do reTerminal E Série ao Home Assistant​

Passo 1. Depois de gravar o seu dispositivo, volte ao Home Assistant e navegue até Settings → Devices & Services.

Passo 3. O Home Assistant deve detectar automaticamente o dispositivo reTerminal E Série ePaper via mDNS. Se ele aparecer na seção de dispositivos descobertos, clique em Configure para adicioná-lo.

Passo 4. Se o dispositivo não for detectado automaticamente, clique em Add Integration e procure por "ESPHome".

Passo 5. Insira o endereço IP do dispositivo reTerminal E Série ePaper e a chave de criptografia da API, se você tiver definido uma.

Passo 6. Depois que a conexão for estabelecida, o display ePaper do reTerminal E Série aparecerá como um dispositivo no Home Assistant com todos os seus sensores e componentes disponíveis.

nota

O programa pode levar de 2 a 3 minutos desde a conclusão da gravação até a exibição final.

Aqui está o conteúdo aprimorado da Demo 3 com formatação melhorada, posicionamento de imagens e descrições adicionais:

Desenhando fontes TrueType​

Este exemplo demonstra como exibir ícones personalizados no display ePaper do reTerminal E Série usando fontes TrueType. Os Material Design Icons fornecem uma ampla variedade de símbolos escalonáveis perfeitos para displays de papel eletrônico.

Instalando as ferramentas necessárias​

Passo 1. Primeiro, precisamos instalar o complemento Studio Code Server para gerenciar arquivos. Navegue até a loja de Add-ons do Home Assistant, procure por Studio Code Server e clique nele.

Passo 2. Clique em INSTALL e aguarde a conclusão da instalação. Depois de instalado, clique em START para iniciar o editor.

Configurando fontes de ícones​

Passo 3. Crie uma nova pasta chamada fonts no diretório de configuração do ESPHome. Esta pasta armazenará os arquivos de fonte TrueType necessários para exibir ícones.

Passo 4. Baixe o arquivo de fonte Material Design Icons clicando no botão abaixo e extraia o conteúdo.

Passo 5. Faça o upload do arquivo de fonte baixado (materialdesignicons-webfont.ttf) para a pasta fonts que você criou anteriormente.

Configurando o ESPHome para ícones​

Passo 6. Adicione o seguinte código ao seu arquivo de configuração ESPHome após a seção captive_portal. Este código define dois tamanhos de fonte para ícones e configura o display para mostrar ícones de clima.

# define font to display words
font:
  - file: 'fonts/materialdesignicons-webfont.ttf'  # Path to the font file
    id: font_mdi_large
    size: 200        # Large icon size
    glyphs: &mdi-weather-glyphs
      - "\U000F0595" # weather-cloudy icon
      - "\U000F0592" # weather-hail icon
  - file: 'fonts/materialdesignicons-webfont.ttf'
    id: font_mdi_medium   # Medium icon size
    size: 40
    glyphs: *mdi-weather-glyphs

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

display:
  - platform: waveshare_epaper
    id: epaper_display
    model: 7.50inv2 # You can use 7.50inv2alt when you draw complex info and it display not good.
    cs_pin: GPIO10
    dc_pin: GPIO11
    reset_pin:
      number: GPIO12
      inverted: false
    busy_pin:
      number: GPIO13
      inverted: true
    update_interval: 300s
    lambda: |-
      it.printf(100, 200, id(font_mdi_medium), TextAlign::CENTER, "\U000F0595");
      it.printf(400, 200, id(font_mdi_large), TextAlign::CENTER, "\U000F0592");
nota

  1. A seção glyphs define quais ícones serão carregados do arquivo de fonte. Carregar apenas os ícones necessários economiza memória no seu dispositivo.

  2. O programa pode levar de 2 a 3 minutos desde a conclusão da gravação até a exibição final.

Passo 7. Salve sua configuração e envie-a para o seu reTerminal E Série. Quando você vir um retorno como na imagem a seguir, isso significa que o código está sendo executado com sucesso.

Personalizando com Diferentes Ícones​

A biblioteca Material Design Icons contém milhares de ícones que você pode usar em seus projetos. Veja como encontrar e usar diferentes ícones:

Passo 1. Acesse o site do Material Design Icons clicando no botão abaixo.

Passo 2. Procure um ícone que você queira usar em seu projeto. Você pode navegar por categoria ou usar a função de busca.

Passo 3. Quando encontrar um ícone de que gostar, clique nele para ver os detalhes. Procure o valor Unicode, que estará no formato F0595.

Passo 4. Adicione o valor Unicode à sua configuração ESPHome:

  • Adicionando-o à lista glyphs na sua configuração de fonte
  • Atualizando o código de exibição para usar o novo ícone

Por exemplo, para usar um novo ícone com Unicode F0123:

glyphs:
  - "\U000F0595" # weather-cloudy icon
  - "\U000F0592" # weather-hail icon
  - "\U000F0123" # your new icon

E no lambda de exibição:

lambda: |-
  it.printf(100, 200, id(font_mdi_medium), TextAlign::CENTER, "\U000F0123");

Passo 5. Salve sua configuração atualizada e envie-a para o seu dispositivo para ver o novo ícone.

dica

Para dashboards de clima, considere usar ícones como F0590 (ensolarado), F0591 (parcialmente nublado), F0593 (chuvoso) e F059E (ventoso).

Ao combinar esses ícones com os dados de clima do Home Assistant que configuramos anteriormente, você pode criar uma tela de clima dinâmica que mostra as condições atuais usando ícones apropriados.

Exibindo Imagens Personalizadas​

Este exemplo demonstra como exibir imagens personalizadas na sua reTerminal E Série ePaper Display. Você pode usar esse recurso para mostrar logotipos, ícones ou qualquer gráfico que melhore a experiência do seu dashboard.

Preparação​

Passo 1. Certifique-se de que o add-on Studio Code Server esteja instalado no Home Assistant. Se ainda não o instalou, siga as instruções do exemplo anterior.

Passo 2. Crie uma nova pasta chamada image no diretório de configuração ESPHome. Esta pasta armazenará os arquivos de imagem que você deseja exibir.

config/
└── esphome/
    ├── your_device.yaml
    └── image/         <- Create this folder

Adicionando Imagens​

Passo 3. Baixe uma imagem de exemplo para testar a funcionalidade. Você pode usar o ícone de WiFi fornecido abaixo ou usar sua própria imagem.

Passo 4. Envie a imagem baixada para a pasta image que você criou anteriormente usando o gerenciador de arquivos do Studio Code Server.

dica

Se você quiser exibir imagens de paisagem complexas e bonitas, é melhor realizar a dithering da imagem com antecedência em nosso site para obter um efeito melhor. Os formatos JPG e PNG são suportados.

Configurando o ESPHome para Exibição de Imagens​

Passo 5. Adicione o código a seguir ao seu arquivo de configuração ESPHome após a seção captive_portal. Este código define o recurso de imagem e configura a tela para exibi-la.

image:
  - file: /config/esphome/image/wifi.jpg    # Path to your image file (JPG or PNG)
    id: myImage
    type: BINARY                            # Binary works for monochrome, RGB565 works for colorful eink
    resize: 800x480                         # Resize to match display resolution
    invert_alpha: true                      # Invert colors is needed

spi:
  clk_pin: GPIO7
  mosi_pin: GPIO9

display:
  - platform: waveshare_epaper
    id: epaper_display
    model: 7.50inv2 # You can use 7.50inv2alt when you draw complex info and it display not good.
    cs_pin: GPIO10
    dc_pin: GPIO11
    reset_pin:
      number: GPIO12
      inverted: false
    busy_pin:
      number: GPIO13
      inverted: true
    update_interval: 300s
    lambda: |-
      it.image(0, 0, id(myImage));          # Display image at position (0,0)

Passo 6. Salve sua configuração e envie-a para o seu reTerminal E Série. Quando a atualização for concluída, sua tela de e-paper exibirá a imagem.

Técnicas Avançadas de Imagem​

Você pode aprimorar a exibição de imagens com estas técnicas adicionais:

Posicionando Imagens

Para posicionar sua imagem em coordenadas específicas na tela:

lambda: |-
  // Display image at position (100,50)
  it.image(100, 50, id(myImage));

Combinando Imagens com Texto

Você pode exibir imagens e texto na mesma tela:

lambda: |-
  // Display image
  it.image(0, 0, id(myImage));

  // Add text below or beside the image
  it.printf(400, 400, id(myFont), TextAlign::CENTER, "WiFi Connected");

Usando Múltiplas Imagens

Para exibir várias imagens na mesma tela, defina cada imagem na sua configuração:

image:
  - file: /config/esphome/image/wifi.jpg
    id: wifiImage
    type: BINARY
    resize: 200x200

  - file: /config/esphome/image/temperature.png
    id: tempImage
    type: BINARY
    resize: 200x200

# In the display lambda:
lambda: |-
  it.image(50, 50, id(wifiImage));
  it.image(300, 50, id(tempImage));
cuidado

Lembre-se de que telas de e-paper têm taxas de atualização limitadas. A configuração update_interval: 300s significa que sua tela será atualizada apenas a cada 5 minutos. Ajuste esse valor de acordo com suas necessidades, mas esteja ciente de que atualizações frequentes podem reduzir a vida útil das telas de e-paper.

Ao combinar imagens com texto e outros elementos de exibição abordados em exemplos anteriores, você pode criar dashboards ricos e informativos no seu reTerminal E Série.

Continue Lendo​

Devido a limitações de espaço, este artigo aborda apenas alguns casos de uso básicos e exemplos de desenho do dispositivo. Abordaremos o uso do hardware do reTerminal no ESPHome com mais detalhes na Wiki Advanced ESPHome Usage of reTerminal E Series ePaper Display in Home Assistant, que você pode continuar lendo.

FAQ​

P1: Por que não há dados?​

Nesse caso, você deve ir em Settings -> Devices & Services -> Integrations para RECONGFIGURE o dispositivo. Não encontrou seu reTerminal? Tente reiniciar o Home Assistant.

P2: Por que não consigo obter esses dados no Home Assistant?​

Nesse caso, você deve ir em Settings -> Devices & Services -> Integrations para ADD seu dispositivo ao HA.

P3: reTerminal E Series ePaper Display não consegue se conectar ao seu computador?​

Tente desconectar e reconectar várias vezes, ou simplesmente instalar o driver de acordo com os avisos.

Suporte Técnico e Discussão de Produto​

Obrigado por escolher nossos produtos! Estamos aqui para lhe fornecer diferentes tipos de suporte para garantir que sua experiência com nossos produtos seja a mais tranquila possível. Oferecemos vários canais de comunicação para atender a diferentes preferências e necessidades.

Loading Comments...