Skip to main content

XIAO ePaper Display Board(ESP32-S3) - EE04 ePaper Display Work with ESPHome

ESPHomeとは？​

ESPHomeは、人気のあるWiFi対応マイクロコントローラー用のカスタムファームウェア作成プロセスを簡素化するオープンソースファームウェアフレームワークです。ESPHomeを使用すると、以下のことができます：

  • シンプルなYAML設定ファイルを使用してカスタムスマートホームデバイスを作成
  • Home Assistantとシームレスに統合して統一されたスマートホーム体験を実現
  • 複数のインターフェース（Web、API、MQTT）を通じてデバイスを制御・監視
  • 強力なオンデバイス自動化でホームを自動化
  • 物理的なアクセスなしに「Over The Air」（OTA）アップデートでデバイスをワイヤレス更新

入門ガイド​

ハードウェア概要​

XIAO ePaper Display Board(ESP32-S3) - EE04Home Assistant Green
今すぐ入手 🖱️
今すぐ入手 🖱️

Home Assistant Greenは、ホームを自動化する最も簡単でプライバシーに配慮した方法です。簡単なセットアップを提供し、すべてのスマートデバイスを1つのシステムで制御でき、すべてのデータはデフォルトでローカルに保存されます。このボードは活発なHome Assistantエコシステムの恩恵を受け、オープンソースによって毎月改善されています。

また、Seeed Studioの一部製品にHome Assistantをインストールする方法についても記載していますので、参考にしてください。

Home Assistantのインストール

Seeed Studio製品を使用していない場合でも、Home Assistant公式ウェブサイトで他の製品にHome Assistantをインストールする方法を確認・学習できます。

ステップ1. ESPHomeのインストール​

Settings -> Add-ons -> ADD-ON STOREに移動します

検索語としてESPHomeを入力します。

INSTALLとSTARTをクリックします。

tip

アドオンストアでESPHomeが見つからない場合は、アドオンをサポートするHome Assistantインストール（Home Assistant OSまたは監視付きインストールなど）を使用していることを確認してください。他のインストールタイプ（Home Assistant Containerなど）の場合、DockerでESPHome Device Builderを独立して実行する必要がある場合があります。詳細については、公式ESPHomeドキュメントを参照してください。

ステップ2. 新しいデバイスの追加​

ESPHomeに移動し、NEW DEVICEをクリックします。

XIAO ePaper Display Board(ESP32-S3) - EE04に好きな名前を付け、チップタイプにESP32-S3を選択し、SKIPをクリックします。

新しいデバイスを作成した後、EDITをクリックします。


ステップ3. ファームウェアのインストール​

これは基本的な例で、ディスプレイに「Hello World!」を表示します。

主な目的は、デバイスにファームウェアをインストールするさまざまな方法を示すことです。

以下のコードをコピーして、YAMLファイルのcaptive_portalコード行の後に貼り付けることで、この例を使用できます。

note
  • 以下のルーチンはファームウェアをダウンロードする前にフォントが必要なため、このリンクをクリックして設定を完了してください。
  • ssid:、password: ここにはネットワーク名とパスワードを追加する必要があります。
  • Quadruple Color 2.13とQuadruple Color 2.9は外部ライブラリを使用するため、ESPHomeで使用されるboard名が異なります。

以下は24ピンコネクタスクリーンタイプです：

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!");

以下は50ピンコネクタ画面タイプです：

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:

spi:
  clk_pin: GPIO7
  mosi_pin: GPIO9

display:
  - platform: epaper_spi
    id: my_display
    model: 7.3in-spectra-e6
    cs_pin: GPIO44
    dc_pin: GPIO10
    busy_pin: GPIO4
    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!");

INSTALLをクリックしてコードをデバイスにインストールすると、以下の画像が表示されます。


tip

Home Assistantホスト（Raspberry PI/Green/Yellowなど）が遠くにある場合は、この方法をお勧めします。手元にあるコンピュータでインストールできます。

まず、Manual downloadをクリックしてコンパイル済みファームウェアをダウンロードする必要があります。

ファームウェアをePaperパネルにアップロードするこのウェブサイトを開きます。

ESPHomeに戻ってファームウェアをダウンロードします。

Factory formatを選択します。

USBケーブルを使用してePaperパネルをコンピュータに接続し、CONNECTをクリックします。

usbmodemxxx（WindowsではCOMxxx）を選択し、connectをクリックします。

INSTALLをクリックし、先ほどダウンロードしたファームウェアを選択します。

しばらく待つと、ディスプレイに「Hello world!」が表示されます～

ESPHomeでの描画の基本​

簡単なグラフィックの描画​

このYAMLコード例は、ESPHomeプロジェクト用にSPIインターフェースとXIAO ePaper Display Board(ESP32-S3) - EE04を設定します。lambdaセクションには、画面上に簡単な図形を描画する描画コマンドが含まれています：

  • 2つの長方形（1つは位置(10, 10)でサイズ100x50、もう1つは(150, 10)でサイズ50x50）
  • 1つの円（位置(250, 35)で半径25）
  • 2つの塗りつぶし長方形（位置(10, 80)と(150, 80)）
  • 1つの塗りつぶし円（位置(250, 105)で半径25）

この例は、以下のコードをコピーしてYAMLファイルのcaptive_portalコード行の後に貼り付けることで使用できます。

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:

spi:
  clk_pin: GPIO7
  mosi_pin: GPIO9

display:
  - platform: epaper_spi
    id: my_display
    model: 7.3in-spectra-e6
    cs_pin: GPIO44
    dc_pin: GPIO10
    busy_pin: GPIO4
    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);

以下の画像のようなフィードバックが表示されれば、コードが正常に実行されていることを意味します。


スペースの制約により、他のパターンの描画方法と原理については詳しく説明しませんが、必要に応じてESPHomeのこの部分の詳細な例を読むことをお勧めします。

TrueTypeフォントの描画​

この例では、TrueTypeフォントを使用してXIAO ePaper Display Board(ESP32-S3) - EE04にカスタムアイコンを表示する方法を説明します。Material Design Iconsは、ePaperディスプレイに最適な幅広いスケーラブルシンボルを提供します。

必要なツールのインストール​

ステップ1. まず、ファイルを管理するためにStudio Code Serverアドオンをインストールする必要があります。Home AssistantのAdd-onsストアに移動し、Studio Code Serverを検索してクリックします。

ステップ2. INSTALLをクリックし、インストールが完了するまで待ちます。インストールが完了したら、STARTをクリックしてエディタを起動します。

アイコンフォントの設定​

ステップ3. ESPHome設定ディレクトリにfontsという新しいフォルダを作成します。このフォルダには、アイコンを表示するために必要なTrueTypeフォントファイルが保存されます。

ステップ4. 下のボタンをクリックしてMaterial Design Iconsフォントファイルをダウンロードし、内容を展開します。

ステップ5. ダウンロードしたフォントファイル（materialdesignicons-webfont.ttf）を、先ほど作成したfontsフォルダにアップロードします。

アイコン用のESPHome設定​

ステップ6. captive_portalセクションの後に、以下のコードをESPHome設定ファイルに追加します。このコードは、アイコン用の2つのフォントサイズを定義し、天気アイコンを表示するようにディスプレイを設定します。

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:

# 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.3in-spectra-e6
    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");

note

  1. glyphs セクションは、フォントファイルから読み込むアイコンを定義します。必要なアイコンのみを読み込むことで、デバイスのメモリを節約できます。

  2. プログラムは書き込み完了から最終表示まで2〜3分かかる場合があります。

ステップ 7. 設定を保存し、XIAO ePaper Display Board(ESP32-S3) - EE04 にアップロードします。以下の画像のようなフィードバックが表示されれば、コードが正常に動作していることを意味します。


異なるアイコンでのカスタマイズ​

Material Design Icons ライブラリには、プロジェクトで使用できる数千のアイコンが含まれています。異なるアイコンを見つけて使用する方法は以下の通りです：

ステップ 1. 下のボタンをクリックして Material Design Icons ウェブサイトにアクセスします。

ステップ 2. プロジェクトで使用したいアイコンを検索します。カテゴリ別に閲覧するか、検索機能を使用できます。

ステップ 3. 気に入ったアイコンが見つかったら、それをクリックして詳細を表示します。F0595 の形式の Unicode 値を探します。

ステップ 4. 以下の方法で Unicode 値を ESPHome 設定に追加します：

  • フォント設定の glyphs リストに追加する
  • 新しいアイコンを使用するようにディスプレイコードを更新する

例えば、Unicode F0123 の新しいアイコンを使用する場合：

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

そして、ディスプレイ lambda で：

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

ステップ 5. 更新した設定を保存し、デバイスにアップロードして新しいアイコンを確認します。

tip

天気ダッシュボードには、F0590（晴れ）、F0591（部分的に曇り）、F0593（雨）、F059E（風）などのアイコンの使用を検討してください。

これらのアイコンを、先ほど設定した Home Assistant からの天気データと組み合わせることで、適切なアイコンを使用して現在の状況を表示する動的な天気ディスプレイを作成できます。

カスタム画像の表示​

この例では、XIAO ePaper Display Board(ESP32-S3) - EE04 にカスタム画像を表示する方法を説明します。この機能を使用して、ダッシュボード体験を向上させるロゴ、アイコン、またはグラフィックを表示できます。

準備​

ステップ 1. Home Assistant に Studio Code Server アドオンがインストールされていることを確認します。まだインストールしていない場合は、前の例の手順に従ってください。

ステップ 2. ESPHome 設定ディレクトリに image という新しいフォルダを作成します。このフォルダには、表示したい画像ファイルを保存します。

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

画像の追加​

ステップ 3. 機能をテストするためのサンプル画像をダウンロードします。下記の WiFi アイコンを使用するか、独自の画像を使用できます。

ステップ 4. Studio Code Server ファイルマネージャーを使用して、ダウンロードした画像を先ほど作成した image フォルダにアップロードします。

tip

ePaper ディスプレイで最良の結果を得るには、明確な黒と白の領域を持つ高コントラストの画像を使用してください。JPG と PNG の両方の形式がサポートされています。

画像表示のための ESPHome 設定​

ステップ 5. captive_portal セクションの後に、以下のコードを ESPHome 設定ファイルに追加します。このコードは画像リソースを定義し、それを表示するようにディスプレイを設定します。

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:

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: GPIO10
    busy_pin: GPIO4
    reset_pin:  GPIO38
    rotation: 0
    update_interval: 30s
    lambda: |-
      it.image(0, 0, id(myImage));          # Display image at position (0,0)

ステップ6. 設定を保存し、XIAO ePaper Display Board(ESP32-S3) - EE04にアップロードします。更新が完了すると、ePaperディスプレイに画像が表示されます。


高度な画像技術​

これらの追加技術で画像表示を向上させることができます：

画像の位置指定

画像を画面上の特定の座標に配置するには：

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

画像とテキストの組み合わせ

同じ画面に画像とテキストの両方を表示できます：

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");

複数画像の使用

同じ画面に複数の画像を表示するには、設定で各画像を定義します：

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));
caution

ePaperディスプレイのリフレッシュレートは制限されていることを覚えておいてください。update_interval: 300s設定は、ディスプレイが5分ごとにのみリフレッシュされることを意味します。必要に応じてこの値を調整してください。ただし、頻繁なリフレッシュはePaperディスプレイの寿命を短縮する可能性があることに注意してください。

画像を前の例で説明したテキストやその他の表示要素と組み合わせることで、XIAO ePaper Display Board(ESP32-S3) - EE04で豊富で情報量の多いダッシュボードを作成できます。

リファレンス & リソース​

技術サポート & 製品ディスカッション​

弊社製品をお選びいただき、ありがとうございます！お客様の製品体験を可能な限りスムーズにするため、さまざまなサポートを提供いたします。異なる好みやニーズに対応するため、複数のコミュニケーションチャンネルをご用意しています。

Loading Comments...