Pular para o conteúdo principal

XIAO ePaper Display Board(ESP32-S3) - EE04 ePaper Display funcionando com ESPHome

O que é ESPHome?

ESPHome é um framework de firmware de código aberto que simplifica o processo de criação de firmware personalizado para microcontroladores populares habilitados para WiFi. Com o ESPHome, você pode:

  • Criar dispositivos de casa inteligente personalizados usando arquivos de configuração YAML simples
  • Integrar-se perfeitamente ao Home Assistant para uma experiência unificada de casa inteligente
  • Controlar e monitorar seus dispositivos por meio de múltiplas interfaces (web, API, MQTT)
  • Automatizar sua casa com automações poderosas no próprio dispositivo
  • Atualizar seus dispositivos sem fio com atualizações “Over The Air” (OTA) sem acesso físico

Primeiros Passos

Visão geral do hardware

XIAO ePaper Display Board(ESP32-S3) - EE04Home Assistant Green

Home Assistant Green é a forma mais fácil e com maior foco 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.

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

instalar Home Assistant

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 ESPHome

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 estar usando uma instalação do Home Assistant que ofereça 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 ESPHome e clique em NEW DEVICE.

Dê à XIAO ePaper Display Board(ESP32-S3) - EE04 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 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.

nota
  • Como a rotina a seguir requer fontes antes de baixar o firmware, clique neste link para concluir a configuração.
  • ssid:,password: Aqui você precisa adicionar o nome e a senha da rede.
  • As Quadruple Color 2.13 e Quadruple Color 2.9 usam bibliotecas externas, portanto os nomes de board usados no ESPHome são diferentes.

A seguir estão os tipos de tela com conector de 24 pinos:

esphome:
name: ee04
friendly_name: EE04

esp32:
board: esp32-s3-devkitc-1
framework:
type: esp-idf

# Enable logging
logger:

# Enable Home Assistant API
api:
encryption:
key: "b0AIbJ+kbeMayi1PgSGXtiD1yQCapUBF4A/7v7btys0="

ota:
- platform: esphome
password: "5d7cca6f4b3f38aba559ab0d6aaf5926"

wifi:
ssid:
password:

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

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

captive_portal:

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

display:
- platform: waveshare_epaper
id: epaper_display
model: 1.54inv2
cs_pin: GPIO44
dc_pin: GPIO10
busy_pin: GPIO4
reset_pin: GPIO38
rotation: 0
update_interval: 300s
lambda: |-
it.print(0, 0, id(myFont), "Hello World!");

A seguir estão os tipos de tela com conector de 50 pinos:

esphome:
name: ee04
friendly_name: EE04

esp32:
board: esp32-s3-devkitc-1
framework:
type: esp-idf

# Enable logging
logger:

# Enable Home Assistant API
api:
encryption:
key: "b0AIbJ+kbeMayi1PgSGXtiD1yQCapUBF4A/7v7btys0="

ota:
- platform: esphome
password: "5d7cca6f4b3f38aba559ab0d6aaf5926"

wifi:
ssid:
password:

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

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

captive_portal:

external_components:
- source:
type: git
url: https://github.com/esphome/esphome/
ref: 2025.10.5
components: [ epaper_spi, display ]

spi:
clk_pin: GPIO7
mosi_pin: GPIO9

display:
- platform: epaper_spi
id: my_display
model: 7.3in-Spectra-E6
cs_pin: GPIO44
dc_pin:
number: GPIO10
inverted: false
busy_pin:
number: GPIO4
inverted: true
reset_pin: GPIO38
rotation: 0
update_interval: 30s
lambda: |-
const auto BLACK = Color(0, 0, 0, 0);
const auto RED = Color(255, 0, 0, 0);
const auto BLUE = Color(0, 0, 255, 0);
const auto GREEN = Color(0, 255, 0, 0);
const auto YELLOW = Color(255, 255, 0, 0);
const auto WHITE = Color(255, 255, 255, 0);

it.fill(WHITE);
it.print(0, 0, id(font1), BLACK, "Hello World in BLACK!");
it.print(0, 30, id(font1), RED, "Hello World in RED!");
it.print(0, 60, id(font1), YELLOW, "Hello World in YELLOW!");
it.print(0, 90, id(font1), GREEN, "Hello World in GREEN!");
it.print(0, 120, id(font1), BLUE, "Hello World in BLUE!");

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.

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 de desenho no ESPHome

Desenhando gráficos simples

Este exemplo de código YAML configura a interface SPI e a XIAO ePaper Display Board(ESP32-S3) - EE04 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.

esphome:
name: ee04
friendly_name: EE04

esp32:
board: esp32-s3-devkitc-1
framework:
type: esp-idf

# Enable logging
logger:

# Enable Home Assistant API
api:
encryption:
key: "b0AIbJ+kbeMayi1PgSGXtiD1yQCapUBF4A/7v7btys0="

ota:
- platform: esphome
password: "5d7cca6f4b3f38aba559ab0d6aaf5926"

wifi:
ssid:
password:

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

captive_portal:

spi:
clk_pin: GPIO7
mosi_pin: GPIO9

display:
- platform: waveshare_epaper
id: epaper_display
model: 1.54inv2
cs_pin: GPIO44
dc_pin: GPIO10
busy_pin: GPIO4
reset_pin: GPIO38
rotation: 0
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);
esphome:
name: ee04
friendly_name: EE04

esp32:
board: esp32-s3-devkitc-1
framework:
type: esp-idf

# Enable logging
logger:

# Enable Home Assistant API
api:
encryption:
key: "b0AIbJ+kbeMayi1PgSGXtiD1yQCapUBF4A/7v7btys0="

ota:
- platform: esphome
password: "5d7cca6f4b3f38aba559ab0d6aaf5926"

wifi:
ssid:
password:

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

captive_portal:

external_components:
- source:
type: git
url: https://github.com/esphome/esphome/
ref: 2025.10.5
components: [ epaper_spi, display ]

spi:
clk_pin: GPIO7
mosi_pin: GPIO9

display:
- platform: epaper_spi
id: my_display
model: 7.3in-Spectra-E6
cs_pin: GPIO44
dc_pin:
number: GPIO10
inverted: false
busy_pin:
number: GPIO4
inverted: true
reset_pin: GPIO38
rotation: 0
update_interval: 30s
lambda: |-
const auto BLACK = Color(0, 0, 0, 0);
const auto RED = Color(255, 0, 0, 0);
const auto BLUE = Color(0, 0, 255, 0);
const auto GREEN = Color(0, 255, 0, 0);
const auto YELLOW = Color(255, 255, 0, 0);
const auto WHITE = Color(255, 255, 255, 0);

it.rectangle(10, 10, 100, 50,BLACK);
it.rectangle(150, 10, 50, 50,RED);
it.circle(250, 35, 25,BLUE);
it.filled_rectangle(10, 80, 100, 50,GREEN);
it.filled_rectangle(150, 80, 50, 50,YELLOW);
it.filled_circle(250, 105, 25,WHITE);

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


Devido a limitações de espaço, não iremos detalhar muito os métodos de desenho e os princípios de outros padrões; se necessário, recomenda-se que o leitor consulte esta parte de exemplos detalhados do ESPHome.

Desenhando fontes TrueType

Este exemplo demonstra como exibir ícones personalizados na sua XIAO ePaper Display Board(ESP32-S3) - EE04 usando fontes TrueType. Os Material Design Icons fornecem uma ampla variedade de símbolos escalonáveis perfeitos para telas de papel eletrônico.

Instalando as ferramentas necessárias

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

Passo 2. Clique em INSTALL e aguarde a conclusão da instalação. Assim que estiver 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. Essa 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. Envie o 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 do ESPHome após a seção captive_portal. Este código define dois tamanhos de fonte para ícones e configura a tela para mostrar ícones de clima.

esphome:
name: ee04
friendly_name: EE04

esp32:
board: esp32-s3-devkitc-1
framework:
type: esp-idf

# Enable logging
logger:

# Enable Home Assistant API
api:
encryption:
key: "b0AIbJ+kbeMayi1PgSGXtiD1yQCapUBF4A/7v7btys0="

ota:
- platform: esphome
password: "5d7cca6f4b3f38aba559ab0d6aaf5926"

wifi:
ssid:
password:

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

captive_portal:

# 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: 1.54inv2
cs_pin: GPIO44
dc_pin: GPIO10
reset_pin:
number: GPIO38
inverted: false
busy_pin:
number: GPIO4
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");

esphome:
name: ee04
friendly_name: EE04

esp32:
board: esp32-s3-devkitc-1
framework:
type: esp-idf

# Enable logging
logger:

# Enable Home Assistant API
api:
encryption:
key: "b0AIbJ+kbeMayi1PgSGXtiD1yQCapUBF4A/7v7btys0="

ota:
- platform: esphome
password: "5d7cca6f4b3f38aba559ab0d6aaf5926"

wifi:
ssid:
password:

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

captive_portal:

external_components:
- source:
type: git
url: https://github.com/esphome/esphome/
ref: 2025.10.5
components: [ epaper_spi, display ]

# 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: epaper_spi
id: my_display
model: 7.3in-Spectra-E6
cs_pin: GPIO44
dc_pin:
number: GPIO10
inverted: false
busy_pin:
number: GPIO4
inverted: true
reset_pin: GPIO38
rotation: 0
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");

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.

Etapa 7. Salve sua configuração e envie-a para a sua XIAO ePaper Display Board(ESP32-S3) - EE04. Quando você vir um retorno como na imagem a seguir, isso significa que o código está sendo executado com sucesso.


Personalizando com Ícones Diferentes

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

Etapa 1. Visite o site do Material Design Icons clicando no botão abaixo.

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

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

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

  • Adicionando-o à lista glyphs na sua configuração de fonte
  • Atualizando o código de display 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 display:

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

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

dica

Para painéis de clima, considere usar ícones como F0590 (ensolarado), F0591 (parcialmente nublado), F0593 (chuvoso) e F059E (ventando).

Ao combinar esses ícones com os dados meteorológicos do Home Assistant que configuramos anteriormente, você pode criar um display de clima dinâmico que mostra as condições atuais usando ícones apropriados.

Exibindo Imagens Personalizadas

Este exemplo demonstra como exibir imagens personalizadas na sua XIAO ePaper Display Board(ESP32-S3) - EE04. Você pode usar esse recurso para mostrar logotipos, ícones ou quaisquer gráficos que melhorem a experiência do seu painel.

Preparação

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

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

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

Adicionando Imagens

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

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

dica

Para obter os melhores resultados em displays ePaper, use imagens de alto contraste com áreas bem definidas em preto e branco. Os formatos JPG e PNG são ambos suportados.

Configurando o ESPHome para Exibir Imagens

Etapa 5. Adicione o código a seguir ao seu arquivo de configuração do ESPHome após a seção captive_portal. Esse código define o recurso de imagem e configura o display para exibi-lo.

esphome:
name: ee04
friendly_name: EE04

esp32:
board: esp32-s3-devkitc-1
framework:
type: esp-idf

# Enable logging
logger:

# Enable Home Assistant API
api:
encryption:
key: "b0AIbJ+kbeMayi1PgSGXtiD1yQCapUBF4A/7v7btys0="

ota:
- platform: esphome
password: "5d7cca6f4b3f38aba559ab0d6aaf5926"

wifi:
ssid:
password:

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

captive_portal:

image:
- file: /config/esphome/image/wifi.jpg # Path to your image file (JPG or PNG)
id: myImage
type: BINARY # Binary mode works best for e-paper
resize: 800x480 # Resize to match display resolution
invert_alpha: true # Invert colors if needed

spi:
clk_pin: GPIO7
mosi_pin: GPIO9

display:
- platform: waveshare_epaper
id: epaper_display
model: 1.54inv2
cs_pin: GPIO44
dc_pin: GPIO10
reset_pin:
number: GPIO38
inverted: false
busy_pin:
number: GPIO4
inverted: true
update_interval: 300s
lambda: |-
it.image(0, 0, id(myImage)); # Display image at position (0,0)
esphome:
name: ee04
friendly_name: EE04

esp32:
board: esp32-s3-devkitc-1
framework:
type: esp-idf

# Enable logging
logger:

# Enable Home Assistant API
api:
encryption:
key: "b0AIbJ+kbeMayi1PgSGXtiD1yQCapUBF4A/7v7btys0="

ota:
- platform: esphome
password: "5d7cca6f4b3f38aba559ab0d6aaf5926"

wifi:
ssid:
password:

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

captive_portal:

external_components:
- source:
type: git
url: https://github.com/esphome/esphome/
ref: 2025.10.5
components: [ epaper_spi, display ]

image:
- file: /config/esphome/image/wifi.jpg # Path to your image file (JPG or PNG)
id: myImage
type: BINARY # Binary mode works best for e-paper
resize: 800x480 # Resize to match display resolution
invert_alpha: true # Invert colors if needed

spi:
clk_pin: GPIO7
mosi_pin: GPIO9

display:
- platform: epaper_spi
id: my_display
model: 7.3in-Spectra-E6
cs_pin: GPIO44
dc_pin:
number: GPIO10
inverted: false
busy_pin:
number: GPIO4
inverted: true
reset_pin: GPIO38
rotation: 0
update_interval: 30s
lambda: |-
it.image(0, 0, id(myImage)); # Display image at position (0,0)

Etapa 6. Salve sua configuração e envie-a para sua XIAO ePaper Display Board(ESP32-S3) - EE04. Quando a atualização for concluída, seu display ePaper exibirá a imagem.


Técnicas Avançadas de Imagem

Você pode melhorar a exibição da sua imagem 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 múltiplas 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 os displays de ePaper têm taxas de atualização limitadas. A configuração update_interval: 300s significa que seu display será atualizado 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 dos displays de ePaper.

Ao combinar imagens com texto e outros elementos de exibição apresentados em exemplos anteriores, você pode criar painéis ricos e informativos na sua XIAO ePaper Display Board(ESP32-S3) - EE04.

Referência & Recursos

Suporte Técnico & Discussão de Produto

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

Loading Comments...