Tab5 Home Assistant HMI デモ

このチュートリアルでは、Tab5 を簡易的な Home Assistant の HMI（Human Machine Interface）にする方法を示します。

このデモでは主に次のエンティティを使用します：温湿度センサ（Unit ENV-Pro）、RGB ライト（Unit NeoHEX）、および IR リモート空調エンティティ。

ESPHome の基本設定（追加のマイコンが必要になる場合があります。本例では Atom EchoS3R をホストとして使用して、センサ・ライト・IR リモート climate を統合しています）:

注意

1. デモは ESPHome 2025.10.3 でコンパイル／アップロードしています。ビルドやアップロードで問題が発生した場合は ESPHome のバージョンをこのリリースに切り替えることを検討してください。
2. これはデモ用の構成です。設定内容は変更される可能性があります。2025年10月14日以降に製造された製品では LCD/タッチスクリーンの駆動 IC が ST7123 に変更されており、現行の設定では動作しない場合があります。ESPHome 側でのドライバ対応は随時改善予定です。

準備

Home Assistant を稼働させるホスト
Home Assistant に ESPHome Builder アドオンをインストールして有効化
上記で使うエンティティ（ENV-Pro, NeoHEX, IR Climate など）が Home Assistant に登録されていることを確認

Home Assistant の ESPHome Builder を開き、空の構成ファイルを作成します。

右下の NEW DEVICE ボタンをクリック
ポップアップで CONTINUE をクリック

Empty Configuration を選択

（任意で）名前を入力

新規作成された構成ファイルの EDIT をクリック

その後、tab5-ha-hmi.yamlの内容を構成ファイルにコピーします。

必要に応じてネットワークや API 情報を変更します。例えば API Encryption Key を生成して認証に使うことができます：

yaml 
api:
  encryption:
    key: "Your_Encryption_Key"

ヒント

Key が必要な場合は native api で生成できます（encryption 配下）。

右上の SAVE と INSTALL を順にクリックし、Manual download を選択します。

この操作によりコードが生成され、プロジェクトのコンパイルが開始されます。

ヒント

初回のコンパイルは時間がかかることがあります（Home Assistant ホストの性能やネットワークに依存）。

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

ファームウェアのアップロード

ブラウザで ESPHome Web を開き、ファームウェアをアップロードします。

USB-C ケーブルで Tab5 をホストに接続し、CONNECT をクリックしてデバイスを選択します。

その後 INSTALL をクリックして、先ほどダウンロードしたファームウェアを選択し、再度 INSTALL を押すとファームウェアが書き込まれます。

書き込みが成功すると、デバイスは自動的にリセットされて起動します。

HMI の Home Assistant への統合

デバイスが起動すると、設定した Wi‑Fi に接続し、Settings -> Devices & services でデバイスを検出できます。

Add をクリックして Tab5 を Home Assistant に追加します。API Encryption Key を設定している場合はここで入力が必要になることがあります。

Tab5 のダッシュボードの例

Tab5 に Home Assistant のアクション実行を許可する

重要

この許可を付与しないと、Tab5 は 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 はページ単位で構成されており、現時点で 3 ページあります。左側のサイドバーでページを切り替えます。Dashboard ページは簡単な情報表示、Light ページは特定ライトの操作、Climate ページは空調の操作を行います。

UI デザインと操作は Home Assistant dashboard を参照しており、組み込みデバイス上で LVGL を使って同様の UI を実現しています（組み込み環境では更なる調整が必要になる場合があります）。

左サイドバーの Light ボタンをクリックすると、デモのライトが表示されます。

カード内のアイコンボタンをタップするとライトを ON/OFF できます。

カードの空白部分をタップすると、明るさや RGB カラーを調整するモーダルが開きます。

ヒント

RGB 色の設定は Home Assistant の Script を利用して実現しています。詳細は下の「設定の調整」セクションを参照してください。

左の Climate ボタンをクリックすると、デモの空調カードが表示されます。

Spinbox の + / - を操作すると目標温度を上下できます（ただし動作モードの変更や自動／冷房／暖房といった状態の切替は行いません）。

カードの空白部をタップするとモーダルが開き、モード、風量、温度などを調整できます。

設定の調整

このセクションでは設定の変更方法を解説します。自分のライトや空調エンティティを Tab5 に組み込むことが可能です。本節は ESPHome の利用経験がある方を対象としています。事前に以下の ESPHome のガイドを参照してください：

Remote light button — LVGL のボタンでリモートライトを操作する方法
Toggle state icon button — 状態に応じて UI を変化させる応用例
Light brightness slider — LVGL スライダとライトの明るさ連携
Native API Component — homeassistant.action を使って Home Assistant を操作する方法（RGB 色制御の例あり）
Climate control — LVGL Spinbox を使って climate を制御する方法
Home Assistant Text Sensor — Home Assistant のエンティティの状態や属性値を取得するための特殊な Text Sensor
Home Assistant Binary Sensor — Binary Sensor の読み値を取得する
Home Assistant Sensor — Sensor の読み値を取得する

上記を理解したら、概略的なアーキテクチャは以下のようになります。

ライト

ここではライトを例に挙げます。

LVGL（tab5-lvgl.yaml に主要定義があります）では、Icon Button、Slider、カスタム Color Palette などのウィジェットを描画しています。事前にライトが 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 は Home Assistant から新しい値が来たときに呼ばれる Automation で、その中で LVGL のアクションを呼び出して UI を更新できます。

ヒント

ライトの属性はライトの種類や構成によって異なります。Home Assistant の Developer tools -> States で属性を確認してください。

LVGL のコンポーネントイベントは homeassistant.action を使ってライトを制御できます：

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 のウィジェットはトリガーの種類が異なるため、詳細は ESPHome - LVGL Widgets を参照してください。

ヒント

すべての属性が data 内で直接変更可能なわけではありません。どのアクションがトリガできるかは Home Assistant の Developer tools -> Actions で確認できます。RGB 色の変更は Home Assistant のスクリプトで実現している例があります。

画像：

上記を踏まえ、独自のライトを使う場合は：

text_sensor に対象の entity_id と必要なら attribute を追加／修正
LVGL のイベント内の homeassistant.action -> data にある entity_id を適切なものに修正し、アクションが存在することを確認

センサー

センサー（Sensor）エンティティは主に数値を公開します（文字列や ON/OFF 状態もあり得ます）。Home Assistant 上のセンサー値を取得するには entity_id を指定します。

yaml 
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 を変更してください。

ヒント

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"
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 と関連属性を変更してください。

Next Overview

Overview

Home Assistant OS

CM4Stack HAOS

Voice Assistant

CoreS3 Voice Assistant

Atom Echo Voice Assistant

Atom EchoS3R Voice Assistant

Tab5 Home Assistant HMI 範例

Kit

Air Quality V1.1 キット

PM2.5 Air Quality キット (SHT30)

Unit PoE Cam W v1.1 キット

Sensor

Unit ENV-IV

Unit ENV-Pro

Unit DLight

Unit MQ

Unit AMeter

Unit VMeter

Unit KMeter-ISO

Light

Atom-Lite RGB Light

Unit NeoHEX