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

Home Assistant 用 ESPHome で動作する reTerminal E シリーズ ePaper ディスプレイ


今すぐ入手 🖱️

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 ホストを使用することもできます。

install Home Assistant

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

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

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

注記

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

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

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

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

ヒント

アドオンストアで ESPHome が見つからない場合は、アドオンをサポートする Home Assistant インストール（Home Assistant OS や supervised インストールなど）を使用していることを確認してください。Home Assistant Container など他のインストールタイプでは、Docker を使用して ESPHome Device Builder を独立して実行する必要がある場合があります。詳細については 公式 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 つの長方形（位置 (10, 10)、サイズ 100x50 と、位置 (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 インテグレーションのインストール​

ステップ 1. Home Assistant ダッシュボードを開き、Settings → Devices & Services に移動します。

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

ステップ 3. 「Open-Meteo」を検索し、リストから選択します。

ステップ 4. 設定ウィザードに従って、場所と希望する単位を設定します。

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

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

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

ステップ 1. Home Assistant ダッシュボードで Developer Tools → States に移動します。

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

ステップ 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 に追加する​

ステップ 1. デバイスへの書き込みが完了したら、Home Assistant に戻り、Settings → Devices & Services に移動します。

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

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

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

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

注記

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

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

TrueType フォントの描画​

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

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

ステップ 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 つのフォントサイズを定義し、ディスプレイを設定して天気アイコンを表示します。

# 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

そして、ディスプレイの 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 シリーズ上にリッチで情報量の多いダッシュボードを作成できます。

続きを読む​

紙面の都合上、本記事ではデバイスの基本的なユースケースと描画例のみを扱いました。ESPHome 上での reTerminal のハードウェアの使用方法については、Advanced ESPHome Usage of reTerminal E Series ePaper Display in Home Assistant の Wiki でより詳しく説明しますので、そちらもお読みください。

FAQ​

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

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

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

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

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

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

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

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

Loading Comments...