Tab5 Home Assistant HMI ケース

本章では、Tab5 を Home Assistant のヒューマンマシンインターフェース（HMI）デバイスとして活用するための実装方法と設定詳細について説明します。

このケースでは、Home Assistant のいくつかのエンティティを使用します。主に温湿度センサー（Unit ENV-Pro）、RGB ライト（Unit NeoHEX）、および赤外線リモートエアコンエンティティです。本ケースでは Atom EchoS3R をプラットフォームとして使用し、温湿度、照明、赤外線コンポーネントを統合します。

必要なもの

Home Assistant ホスト 1 台。
ESPHome Builder アドオンのインストールと有効化。
温湿度センサー（Unit ENV-Pro）、RGB ライト（Unit NeoHEX）、赤外線リモートエアコンエンティティが Home Assistant に統合済みであること。
参考ドキュメント：

ご注意

本ケースは ESPHome 2025.10.3 でコンパイルされています。コンパイルやアップロードに問題が発生した場合は、ESPHome をこのバージョンに切り替えることをご検討ください。
本ケースはデモンストレーション用であり、設定ファイルの内容は変更される場合があります。2025 年 10 月 14 日以降に製造された製品では、LCD / タッチスクリーンの IC が ST723 に変更されており、現在の設定ではこの IC をサポートしていません。ドライバーサポートについては継続的に改善を進めてまいります。

デバイスの追加

Home Assistant で ESPHome Builder を開き、空の設定ファイルを作成します。
- 右下の NEW DEVICE ボタンをクリックします。
- ダイアログで CONTINUE をクリックします。
- Empty Configuration を選択します。
- ファイル名を入力します（任意）。
- 新しく作成された設定ファイルの EDIT をクリックします。
tab5-ha-hmi.yaml の内容を設定ファイルにコピーします。
必要に応じてネットワーク設定や API 情報を変更します。たとえば、認証用の API Encryption Key を作成する場合は以下のように設定します：
yaml
1 2 3
```
api:
  encryption:
    key: "Your_Encryption_Key"
```
ヒント

Key が必要な場合は、native api にアクセスして生成できます（encryption セクションを参照）。
右上の SAVE と INSTALL を順にクリックし、Manual download を選択します。
コードが生成され、プロジェクトのコンパイルが開始されます。

ヒント

初回コンパイル時は、Home Assistant ホストの性能やネットワーク環境によっては、完了までに時間がかかる場合があります。

コンパイルが完了したら、Factory format を選択してファームウェアをダウンロードします。

ファームウェアのダウンロードと書き込み

ファームウェアのダウンロード：ESPHome Builder の Manual download を使用して Factory Format のファームウェアをダウンロードします。
Web ツールを使用してファームウェアを書き込みます：
- ブラウザを開き、ESPHome Web にアクセスしてファームウェアをアップロードします。
- USB-C ケーブルで Tab5 をホストに接続し、CONNECT をクリックしてデバイスを選択します。
- INSTALL をクリックし、先ほどダウンロードしたファームウェアを選択してアップロードし、再度 INSTALL をクリックしてファームウェアをデバイスに書き込みます。
- 書き込みが完了すると、デバイスは自動的にリセットされます。

使い方

HMI 統合

デバイスが再起動すると、設定済みのネットワークに自動接続します。通常は Settings -> Devices & services でデバイスが検出されます。
Add をクリックして Tab5 を Home Assistant に統合します。事前に API Encryption Key を設定した場合は、ここで入力して認証を行う必要があります。
Tab5 の Dashboard サンプル：

Tab5 による Home Assistant アクションの許可

重要

この機能を有効にしないと、Tab5 は Home Assistant 上のエンティティを制御できません。

デバイスの追加が完了したら、Home Assistant の Settings を開くと、対処が必要な問題が表示されます。
詳細を確認します：

この問題は、Tab5 が Home Assistant に統合されたエンティティへのアクセスおよび属性の変更を試みているものの、デフォルトでは Home Assistant がデバイスによる操作を許可していないことを示しています。

解決方法：
- Settings -> Device & services -> ESPHome を開き、Tab5 デバイスを見つけます。
- 右上の設定アイコンをクリックし、Allow the device to perform Home Assistant actions にチェックを入れます。
- Submit をクリックします。これにより、Tab5 は設定済みの Home Assistant エンティティを制御できるようになります。

HMI の使用方法

UI は主にページ（Pages）ごとに分割されており、現在 3 つのページがあります。左側のサイドバーでナビゲーションできます。Dashboard ページでは基本的な情報が表示され、ライトページでは特定の照明エンティティを操作でき、Climate ページでは特定のエアコンを制御できます。
UI のデザインとインタラクションは Home Assistant dashboard を参考にしており、組み込みデバイス上で LVGL を使用して実装するには相応の時間が必要です。

照明制御：
- サイドバーの Light ボタンをクリックすると、サンプルの照明が表示されます。
- 内部の Icon Button をクリックすると、照明のオン / オフを切り替えられます。
- カードの空白エリアをクリックすると、照明の輝度と RGB カラーを調整するためのモーダルダイアログが表示されます。
  
  ヒント
  
  RGB ライトのカラー設定には Home Assistant の Script が必要です。詳細は後述の「設定のカスタマイズ」セクションを参照してください。
エアコン制御：
- 左側の Climate ボタンをクリックすると、サンプルのエアコンが表示されます。
- Spinbox 両側の + と - をクリックすると、エアコンの目標温度を調整できます（自動 / 冷房 / 暖房などのエアコン状態の設定はできません）。
- カードの空白エリアをクリックするとモーダルダイアログが開き、モード、風速、温度などを調整できます。

設定のカスタマイズ

このセクションでは、設定の変更方法を説明します。独自の照明やエアコンなどのコンポーネントを Tab5 に設定することができます。このセクションは ESPHome の使用経験がある方を対象としています。事前に ESPHome が提供する統合方法を参照することをお勧めします：

Remote light button：LVGL の照明ボタンを追加し、照明エンティティをリモート制御する方法を説明しています。
Toggle state icon button：Remote light の応用版で、照明のオン / オフ状態に応じて LVGL UI を更新する方法を説明しています。
Light brightness slider：LVGL Slider を描画して照明の輝度にバインドする方法を説明しています。
Native API Component：homeassistant.action を使用して Home Assistant を呼び出す方法を説明しており、RGB ライトのカラー設定例も含まれています。
Climate control：LVGL Spinbox を作成してエアコンやヒーターなどのエンティティを制御する方法を説明しています。
Home Assistant Text Sensor：Home Assistant 上のエンティティの状態値と属性値を取得するための特殊な Text Sensor タイプです。
Home Assistant Binary Sensor：Home Assistant 上の Binary Sensor の読み取り値を取得するための特殊な Binary Sensor タイプです。
Home Assistant Sensor：Home Assistant 上の Sensor エンティティの読み取り値を取得するための特殊な Sensor タイプです。

上記のケースを理解すると、現在のアーキテクチャの概要を把握できます。

照明

以下では、照明コンポーネントを例として説明します。 LVGL（主に tab5-lvgl.yaml ファイルで定義）では、Icon Button、Slider、カスタムの Color Palette（カラーピッカー）などのコンポーネントを描画しています。これに先立ち、照明コンポーネントが Home Assistant に統合されていること（Home Assistant 上で照明を操作できること）を確認してください。設定ファイルには text_sensor が定義されています：

YAML 
text_sensor:
  - platform: homeassistant
    id: demo_light
    entity_id: light.unit_neo_hex_unit_neohex
    on_value:
      then:
        - lvgl.widget.update:
            id: xxx
            ...

        - lvgl.label.update:
            id: xxx
            ...

  - platform: homeassistant
    id: demo_light_brightness
    entity_id: light.unit_neo_hex_unit_neohex
    attribute: brightness
    on_value:
      - lvgl.slider.update:
          id: xxx
          ...

      - lvgl.label.update:
          id: xxx
          ...

  - platform: homeassistant
    id: demo_light_color
    entity_id: light.unit_neo_hex_unit_neohex
    attribute: rgb_color
    on_value:
      ...
  ...

on_value プロパティはオートメーション（Automation）のコールバックとして機能し、Home Assistant から更新データを受信した際に、lvgl 関連のアクション（actions）を呼び出して UI コンテンツを更新できます。

ヒント

照明エンティティの属性は、照明の種類や設定によって異なります。Home Assistant の Developer tools -> States で関連属性を検索できます（例：light と入力して検索）。

LVGL コンポーネントのイベントトリガー（trigger）は、homeassistant.action API を通じて照明を制御できます：

yaml 
# Use a icon button to toggle the light
  ...
- button:
    styles: card_sm_icon_btn
    id: demo_light_btn
    ...
    widgets:
      - label:
          id: demo_light_label
          ...
          text: "\U000F18DE"
          align: CENTER
    on_short_click:
      - homeassistant.action:
          action: light.toggle
          data:
            entity_id: light.unit_neo_hex_unit_neohex
  ...
# Use a slider to control light brightness
- slider:
    min_value: 0
    max_value: 255
    id: light_slider
    ...
    on_release:
      - homeassistant.action:
          action: light.turn_on
          data:
            entity_id: light.unit_neo_hex_unit_neohex
            brightness: !lambda return int(x);
    ...

LVGL の各コンポーネントにはそれぞれ異なるトリガー方式（Triggers）があります。詳細は ESPHome - LVGL Widgets を参照してください。

ヒント

すべてのエンティティ属性が data 内で entity_id と属性名を直接指定して変更できるわけではありません。Home Assistant は無効な属性変更を拒否します。トリガー可能なアクションを確認するには、Home Assistant の Developer tools -> Actions を参照してください。たとえば照明のアクションを検索する場合、RGB カラー変更は Home Assistant スクリプトによってトリガーされます。スクリプトとオートメーションの詳細については、以下を参照してください：

上記を理解した上で、独自の Light エンティティを使用する場合：
- text_sensor 内で更新したい entity_id と attribute を追加または変更します。LVGL UI を更新する必要がある場合は、更新アクションを記述します。
- 照明アクションをトリガーしたい LVGL コンポーネントのコールバック内で、homeassistant.action の data 以下にある entity_id を適切な ID に変更し、アクションが存在することを確認します。

センサー

センサー（Sensor）エンティティは主に数値（またテキスト、ON/OFF 状態なども）を発行します。Home Assistant 上の特定のセンサーの値を取得するには、同様に entity_id を指定するだけです。
yaml
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23
```
sensor:
  ...
- platform: homeassistant
    id: cur_temp
    entity_id: sensor.temperature
    on_value:
      - lvgl.label.update:
          id: xxx

  - platform: homeassistant
    id: cur_humi
    entity_id: sensor.env_iv_kit_humidity
    on_value:
      - lvgl.label.update:
          id: xxx

  - platform: homeassistant
    id: cur_co2
    entity_id: sensor.env_iv_kit_co2_equivalent
    on_value:
      - lvgl.label.update:
          id: xxx
  ...
```
これにより Tab5 は Home Assistant のセンサーデータを読み取り、on_value を通じて LVGL UI 画面に値を更新できます。
独自のセンサーを使用する場合は、entity_id を変更するだけです。LVGL UI を更新する場合は、対応するスクリプトも記述する必要があります。

ヒント

Home Assistant の Settings -> Devices & services 内の Entities で各種エンティティを確認できます。

Climate

設定ファイルには Climate エンティティに関するいくつかの属性が定義されています：

yaml 
# AC Information
  - platform: homeassistant
    id: ac_state
    entity_id: climate.unit_neo_hex_central_ac
    on_value:
      - lvgl.label.update:
          id: xxx

      - lvgl.dropdown.update:
          id: xxx
    ...
  - platform: homeassistant
    id: ac_fan_mode
    entity_id: climate.unit_neo_hex_central_ac
    attribute: fan_mode
    on_value:
      - lvgl.label.update:
          id: xxx
      - lvgl.dropdown.update:
          id: xxx
    ...

  - platform: homeassistant
    id: ac_temp
    entity_id: climate.unit_neo_hex_central_ac
    attribute: temperature
    on_value:
      - lvgl.spinbox.update:
          id: xxx
    ...

これらの属性を取得し、UI に反映させることができます。

LVGL UI で Climate コンポーネントを制御する：

yaml 
  ...
- arc:
  id: ac_arc
  adjustable: true
  ...
  # Prevent frequent use of 'on_value'
  # In case of performance issue
  on_release:
    - lambda: id(set_ac_temp)->execute(float(x) / 10.0f);
  ...

- dropdown:
id: ac_mode_dd
...
dir: TOP
selected_text: "Off"
options:
  - Heat_Cool
  - Heat
  - Cool
  - Dry
  - Only Fan
  - "Off" # In case conversions
on_change:
  ...
  - lambda: id(set_ac_state)->execute(x);

- dropdown:
  id: fan_mode_dd
  dir: TOP
  ...
  selected_text: "Auto"
  options:
    - High
    - Medium
    - Low
    - Auto
  on_change:
    ...
    - lambda: id(set_ac_fan_mode)->execute(x);

制御処理はスクリプトとしてカプセル化されており、tab5-scripts.yaml で確認できます。

yaml 
# This script was used on dropdown widget
# to set ac state (ON/OFF/COOL/HEAT, etc)
- id: set_ac_state
  parameters:
    ac_mode_idx: int
  then:
    - homeassistant.action:
        action: climate.set_hvac_mode
        data:
          entity_id: climate.unit_neo_hex_central_ac
          hvac_mode: !lambda return id(hvac_state_table)[ac_mode_idx];
- id: set_ac_fan_mode
  parameters:
    ac_fan_mode_idx: int
  then:
    - homeassistant.action:
        action: climate.set_fan_mode
        data:
          entity_id: climate.unit_neo_hex_central_ac
          fan_mode: !lambda return id(fan_modes_table)[ac_fan_mode_idx];
# This script was used on spinbox/arc widget
# to set the temperature to climate entity
# it doesn't turn on/off, use the dropdown instead
- id: set_ac_temp
  parameters:
    temp_value: float
  then:
    - homeassistant.action:
        action: climate.set_temperature
        data:
          entity_id: climate.unit_neo_hex_central_ac
          temperature: !lambda return temp_value;

同様に、独自の Climate コンポーネントに対応する場合は、entity_id と関連属性を変更してください。

Home Assistant OS

Voice Assistant

キット

センサー

スイッチ／リレー

照明

カメラ

Tab5 Home Assistant HMI ケース

必要なもの

ご注意

デバイスの追加

ファームウェアのダウンロードと書き込み

使い方

HMI 統合

Tab5 による Home Assistant アクションの許可

HMI の使用方法

設定のカスタマイズ

照明

センサー

Climate

関連動画

On This Page