メインコンテンツまでスキップ

ESPHome クックブック - ディスプレイ基礎: reTerminal E シリーズ

まずメインの ESPHome ガイドを読んでください

このページは reTerminal E シリーズ専用の ESPHome ディスプレイ・クックブックです。共通のボイラープレート — 書き込み方法の選択、汎用 YAML スケルトン、Home Assistant への接続 — は ESPHome を使う にまとめてあります。Seeed の ePaper で ESPHome を使うのが初めての場合は、まずそちらに目を通してください。ボタン、ブザー、LED、バッテリー、SHT4x、ディープスリープについては I/O・バッテリー・低消費電力クックブック を参照してください。RTC、microSD カード検出、マイクのセットアップについては RTC・SD カード・マイククックブック を参照してください。

開発環境を用意せずにデモを試す

開発環境を構築する前に、プロジェクトの結果をすばやくプレビューしたり、基本的なデモファームウェアを試したい場合は、reTerminal E-Series Firmware Hub を開いてください。対応する reTerminal E シリーズデバイスを選択し、ブラウザから直接デモファームウェアを書き込むことができます。



Home Assistant の概要

Home Assistant は、スマートホームデバイスを 1 つの統合インターフェースから制御・監視できる強力なオープンソースのホームオートメーションプラットフォームです。スマートホームの中枢ハブとして機能し、ルーチンの自動化、センサーの監視、よりインテリジェントな生活空間の構築を可能にします。

なぜ Home Assistant なのか?

  • ローカル制御: 多くのクラウドベースのソリューションとは異なり、Home Assistant はネットワーク上でローカルに動作するため、データはプライベートに保たれ、インターネット接続がなくても自動化が機能します。

  • 幅広いデバイス対応: Home Assistant は何千もの異なるスマートホームデバイスやサービスと連携できるため、非常に汎用性が高く、将来性があります。

  • 強力な自動化機能: 時刻、デバイスの状態、センサーの値など、さまざまなトリガーに反応する高度な自動化ルールを作成できます。

  • カスタマイズ可能なダッシュボード: 自分にとって重要な情報を表示するユーザーインターフェースを自由に設計できます。

なぜ Home Assistant と reTerminal E シリーズ ePaper ディスプレイなのか?

reTerminal E シリーズ ePaper ディスプレイは、次のような理由から Home Assistant の優れた相棒となります。

  1. 省エネルギー: ePaper ディスプレイはコンテンツを更新するときにのみ電力を消費するため、天気予報、カレンダーイベント、システムステータスなどの常時表示したい情報に最適です。

  2. 高い視認性: LCD 画面とは異なり、ePaper ディスプレイは直射日光下を含むあらゆる照明条件で読みやすく、壁掛けのホームコントロールパネルに理想的です。

  3. 長いバッテリー寿命: ディープスリープモードと組み合わせることで、バッテリー 1 回の充電で数か月間動作しつつ、一目で分かる有用な情報を提供できます。

  4. 柔軟な統合: ESPHome を介してディスプレイは Home Assistant とシームレスに統合され、スマートホームシステムのあらゆるデータを、常に表示されるエレガントな形式で表示できます。

これらの利点により、reTerminal E シリーズ ePaper ディスプレイは、Home Assistant 環境向けの省エネルギーで常時オンの情報ディスプレイを構築するための理想的な選択肢となります。

ESPHome との連携

ESPHome は、ESP8266/ESP32 デバイス向けに特化したオープンソースのファームウェア作成ツールです。シンプルな YAML 設定ファイルを使ってカスタムファームウェアを作成し、それをデバイスに書き込むことができます。reTerminal E シリーズにおいて ESPHome は、デバイスと Home Assistant 間の通信を可能にする重要なミドルウェアとして機能します。

このシステムは、YAML 設定を ESP デバイス上で動作するフル機能のファームウェアに変換することで動作します。このファームウェアが、ネットワークへの接続、Home Assistant との通信、ePaper ディスプレイの制御といった複雑な処理をすべて担当します。Home Assistant と組み合わせることで、ESPHome は高度なホームオートメーション用ディスプレイやコントローラを構築するための堅牢なプラットフォームを提供します。

それでは、セットアップ方法と、この多用途なディスプレイを最大限に活用する方法を見ていきましょう。

はじめに

この記事のチュートリアル内容に入る前に、以下のハードウェアを用意しておく必要があります。

必要なもの

reTerminal E1001reTerminal E1002Home Assistant Green

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

このチュートリアルでは、Home Assistant ホストとして Home Assistant Green を使用することを推奨しますが、Supervisor を備えた任意の Home Assistant ホストを使用することもできます。

Home Assistant をインストールする

Seeed Studio 製品のいくつかについては、Home Assistant のインストール方法も記載していますので、そちらも参照してください。

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

ステップ 1. ESPHome をインストールする

注記

すでに ESPHome をインストールしている場合は、このステップをスキップできます。

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

検索欄に ESPHome と入力します。

INSTALLSTART をクリックします。

ヒント

アドオンストアで ESPHome が見つからない場合は、アドオンをサポートする Home Assistant インストール(Home Assistant OS や supervised インストールなど)を使用していることを確認してください。Home Assistant Container など他のインストール形式では、ESPHome Device Builder を Docker を使って独立して実行する必要がある場合があります。詳しくは 公式 ESPHome ドキュメント を参照してください。

ステップ 2. 新しいデバイスを追加する

ESPHome を開き、NEW DEVICE をクリックします。

デバイスに好きな名前を付け、チップタイプとして ESP32-S3 を選択し、SKIP をクリックします。

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

ステップ 3. ファームウェアをインストールする

これはとても基本的なサンプルで、ディスプレイに "Hello World!" を表示します。

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

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

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

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

ヒント

Home Assistant ホスト(Raspberry PI/Green/Yellow など)が手元から離れた場所にある場合は、この方法を推奨します。手元のコンピュータを使ってインストールできます。

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

この Web サイトを開き、ここからファームウェアを ePaper パネルにアップロードします。

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

Factory format を選択します。

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

usbmodemxxx(Windows では COMxxx)を選択して connect をクリックします。問題が発生しましたか?ここをクリック。

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

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

ESPHome で描画するための基礎

シンプルなグラフィックの描画

このサンプル YAML コードは、ESPHome プロジェクト用に SPI インターフェースと reTerminal E シリーズ ePaper ディスプレイを設定します。lambda セクションには、画面にシンプルな図形を描画するコマンドが含まれています:

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

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

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

次の画像のようなフィードバックが表示されたら、コードが正常に動作していることを意味します。

紙面の都合上、他のパターンの描画方法や原理については詳しく説明しません。必要に応じて、読者には ESPHome のこの部分の詳細なサンプル を読むことをお勧めします。

Home Assistant から値を取得して表示する

reTerminal E シリーズ ePaper ディスプレイ デバイスに天気データを表示するには、Home Assistant から気温、天気状況、風速データにアクセスする必要があります。Open-Meteo 連携機能は、Developer Tools を通じてアクセスできる信頼性の高い天気データを提供します。

Open-Meteo インテグレーションのインストール

Step 1. Home Assistant のダッシュボードを開き、SettingsDevices & Services に移動します。

Step 2. 右下の Add Integration ボタンをクリックします。

Step 3. 「Open-Meteo」を検索し、一覧から選択します。

Step 4. 設定ウィザードに従って、位置情報と希望する単位を設定します。

Step 5. インストールが完了すると、Open-Meteo インテグレーションは Home Assistant インスタンス内に複数の天気関連エンティティを作成します。

Developer Tools で天気データにアクセスする

Open-Meteo インテグレーションをインストールした後、Developer Tools を通じて天気データにアクセスできます:

Step 1. Home Assistant のダッシュボードで Developer ToolsStates に移動します。

Step 2. フィルタボックスに weather と入力して、メインの天気エンティティを探します。

Step 3. エンティティをクリックして、利用可能なすべての属性を表示します。主な天気属性には次のものが含まれます:

  • temperature: 現在の気温(設定した単位)
  • wind_bearing: 風向
  • wind_speed: 風速

ESPHome で天気データを使用する

reTerminal E シリーズ向けの ESPHome 設定でこの天気データを使用するには、ESPHome の YAML 設定内で Home Assistant API 接続を設定する必要があります:

# 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

この設定により、ESPHome デバイス内に Home Assistant の天気インテグレーションからデータを取得するセンサーエンティティが作成されます。これらのセンサーを使用して、reTerminal E シリーズ ePaper Display に現在の天気情報を表示できます。

ヒント

予報データについては、将来の日付の予測値を含む weather.open_meteo_forecast エンティティを使用する必要があります。

最後に、上記の値を使用するためのディスプレイセクションのコードを追加します。完成したコードは次のとおりです:

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

上記のコードをコンパイルしてデバイスに書き込んだ後、最初は画面に NaN が表示される場合がありますが、心配はいりません。これは正常な動作です。これは、デバイスがまだ Home Assistant 環境に追加されておらず、reTerminal が Home Assistant のデータを取得できていないためです。以下の手順に従ってデバイスを追加するだけで問題ありません。

reTerminal E シリーズ ePaper Display を Home Assistant に追加する

Step 1. デバイスのフラッシュが完了したら、Home Assistant に戻り、Settings → Devices & Services に移動します。

Step 3. Home Assistant は mDNS を介して reTerminal E シリーズ ePaper Display デバイスを自動的に検出するはずです。検出されたデバイスのセクションに表示されたら、Configure をクリックして追加します。

Step 4. デバイスが自動検出されない場合は、Add Integration をクリックし、「ESPHome」を検索します。

Step 5. reTerminal E シリーズ ePaper Display デバイスの IP アドレスと、設定している場合は API 暗号化キーを入力します。

Step 6. 接続が完了すると、reTerminal E シリーズ ePaper Display は Home Assistant 上のデバイスとして表示され、すべてのセンサーとコンポーネントが利用可能になります。

注記

書き込み完了から最終的な表示が行われるまで、プログラムの実行には 2~3 分かかる場合があります。

ここでは、フォーマット、画像配置、および説明を改善した拡張版 Demo 3 の内容を紹介します:

TrueType フォントの描画

この例では、TrueType フォントを使用して reTerminal E シリーズ ePaper Display にカスタムアイコンを表示する方法を示します。Material Design Icons は、電子ペーパーディスプレイに最適な、拡大縮小可能な豊富なシンボルを提供します。

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

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

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

アイコンフォントの設定

Step 3. ESPHome の設定ディレクトリ内に fonts という新しいフォルダを作成します。このフォルダには、アイコン表示に必要な TrueType フォントファイルを保存します。

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

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

アイコン用に ESPHome を設定する

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

# 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");
注記
  1. glyphs セクションは、フォントファイルからどのアイコンを読み込むかを定義します。必要なアイコンだけを読み込むことで、デバイスのメモリを節約できます。

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

ステップ 7. 設定を保存し、reTerminal E シリーズにアップロードします。次の画像のようなフィードバックが表示されたら、コードが正常に実行されていることを意味します。

別のアイコンでカスタマイズする

Material Design Icons ライブラリには、プロジェクトで使用できる何千ものアイコンが含まれています。ここでは、別のアイコンを見つけて使用する方法を説明します。

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

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

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

ステップ 4. 次のようにして、その Unicode 値を ESPHome の設定に追加します。

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

例えば、Unicode F0123 の新しいアイコンを使用するには:

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

そして、display lambda 内では次のようにします。

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

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

ヒント

天気ダッシュボードには、F0590(晴れ)、F0591(一部曇り)、F0593(雨)、F059E(風)などのアイコンを使用することを検討してください。

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

カスタム画像の表示

この例では、reTerminal E シリーズ ePaper Display 電子ペーパーディスプレイにカスタム画像を表示する方法を示します。この機能を使用して、ロゴやアイコン、ダッシュボード体験を向上させる任意のグラフィックを表示できます。

準備

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

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

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

画像の追加

ステップ 3. 機能をテストするためにサンプル画像をダウンロードします。以下で提供されている WiFi アイコンを使用するか、自分の画像を使用することもできます。

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

ヒント

複雑で美しい風景画像などを表示したい場合は、事前に当社の Web サイトでディザ処理を行うと、より良い効果が得られます。JPG と PNG の両方の形式がサポートされています。

画像表示用に ESPHome を設定する

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

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)

ステップ 6. 設定を保存し、reTerminal E シリーズにアップロードします。更新が完了すると、電子ペーパーディスプレイに画像が表示されます。

高度な画像テクニック

次のような追加テクニックを使って、画像表示をさらに強化できます。

画像の位置調整

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

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));
注意

電子ペーパーディスプレイにはリフレッシュレートに制限があることを忘れないでください。update_interval: 300s の設定は、ディスプレイが 5 分ごとにしか更新されないことを意味します。この値はニーズに応じて調整できますが、更新頻度を上げすぎると電子ペーパーディスプレイの寿命が短くなる可能性があります。

ここまでの例で扱ったテキストやその他の表示要素と画像を組み合わせることで、reTerminal E シリーズ上にリッチで情報量の多いダッシュボードを作成できます。

続けて読む

この記事では、ディスプレイの接続と ePaper 画面へのコンテンツ描画に焦点を当てました。オンボードハードウェアの残りを使用したい場合は、次の ESPHome クックブックを続けてお読みください。

FAQ

Q1: データが表示されないのはなぜですか?

この場合、Settings -> Devices & Services -> Integrations に移動してデバイスを RECONGFIGURE する必要があります。reTerminal が見つからない場合は、Home Assistant を再起動してみてください。

Q2: なぜ Home Assistant でこれらのデータを取得できないのですか?

この場合、Settings -> Devices & Services -> Integrations に移動して、デバイスを HA に追加する必要があります。

Q3: reTerminal E シリーズ ePaper Display がコンピュータに接続できませんか?

何度か抜き差ししてみるか、表示される指示に従ってドライバをインストールしてください。

Q4: なぜ USB 経由でシリアルログが出力されないのですか?

reTerminal E シリーズは、UART0 上で CH340K USB-UART ブリッジを使用しています。YAML では次の logger 設定を維持してください:

logger:
hardware_uart: UART0

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

弊社製品をお選びいただきありがとうございます。私たちは、製品をできるだけスムーズにご利用いただけるよう、さまざまなサポートを提供しています。お好みやニーズに応じて選べる、複数のコミュニケーションチャネルをご用意しています。

Loading Comments...