Home Assistantを使って、様々な情報を表示する『スマートホーム情報パネル』を作ってみた（温度・湿度、電力、NW、カメラ映像）

はじめに

我が家では家の中のIoT機器のデータを集中管理したり、各種スイッチ類をまとめるためにHome Assistantを利用しています。Home Assistantを用いることで、かなり便利になったのですが、Home Assistantの画面は殺風景なので、リビングに置くにはイマイチです😂

そこで、デジタルフォトフレームにHome Assitantの画面を組み込み、リビングに置くスマートホーム情報パネルを作ってみました。

作成したスマートホーム情報パネル（動画）

普段は、時計や天気予報と共に美しい写真をスライドショー表示しています。ここで、画面を上にスワイプ（動画では14秒の位置）するとHome Assistantの画面が表示されます。

Home Assistantの画面では、スマートリモコンに紐づけたスイッチ類、各階の気温や湿度・電力・ネットワーク通信量などの各種情報、玄関の防犯カメラの映像などが確認できるものを作りました。

ちなみに、温度・湿度・照度の情報はスマートリモコンsRemo、電力の消費・ソーラの発電量はHEMS、ネットワーク通信量はルータ、防犯カメラの映像はRaspberry Piで作った防犯カメラから取得しています。

今回は、sRemoから取得できる情報を中心に書きますので、電力の情報の取得方法、NW通信量の取得方法などは、別途ご紹介させていただきます。

用意するもの

タブレット端末

まずは、スマートホーム情報パネルの画面を表示するタブレット端末が必要です。今なら、Amazonの新しいFireHDタブレット（８インチ）が安くて（9,980円）おすすめです‼️

スマートリモコン

家の中の家電を操作するためのスマートリモコンです。スマートリモコンは様々なものが販売されていますが、リモコン機能に加え、温度・湿度・照度センサーが付いていて、しかもWebAPIが使えるsRemo-Rを利用しました。

フォトフレームアプリ

Android用のデジタルフォトフレームアプリである「タブレットdeフォトフレーム」を利用します。このアプリは、スライドショー中にスワイプで特定のWebサイトが表示できるので、Home Assitantの画面を簡単に呼び出すことができます。

設定手順

Home Assistantの設定

まずは、Home Assistantのインストールとセンサー＆スイッチの設定が必要です。Home Assistantのインストール＆設定は、以下の記事で書いていますので、この記事の第１回〜第４回の記事を参考に、sRemoの温度・湿度・照度センサーやリモコンボタンをHome Assistantに設定して下さい。

情報パネル画面の設定

次に、スマートホーム情報パネルの画面を作成していきます。

①タブの追加

Home Assistantの画面で、タブ追加の「＋」のボタンをクリックして、新しいタブを追加します。「＋」ボタンは、画面右上の点々ボタンをクリックすると出てきます。

カードの追加画面が表示されたら、適当にTitleを入力して「SAVE」ボタンをクリックします。

②Vertical Stack Cardの追加

次にタブにカードを追加していきます。ただし、Cardを画面の幅いっぱいに表示させるためには、タブをPanel modeにする必要があります。しかし、タブをPanel modeにすると、Cardは１つしか表示できません。そこで、Vertical Stack Cardを１つ追加して、このカードを親カードにします。そして、親カードに様々なボタンなどを配置していきます。

カードを追加するためには、画面右上の「＋」ボタンをクリックします。

カードの一覧が表示されたら「Vertical Stack」を選択します。

③Cardの設定

Vertical Stackカードを設定します。Vertical Stackカードは、GUIによる設定ができないので、yaml形式での設定になります。この辺りが、Home Assistantはまだまだかなーと思うところですね。

以下に私が設定した内容を参考までに載せておきます。entity名などは自分の環境に合わせて変更しないといけないので、Vartical Cardの書き方ぐらいしか参考にならないと思いますが・・・・💦

cards:
  - columns: 3
    entities:
      - entity: switch.switch_light_1f
      - entity: switch.switch_air_1f
      - entity: switch.switch_air
      - entity: switch.switch_light
      - entity: switch.switch_tv
    show_state: false
    title: スイッチ
    type: glance
  - columns: 3
    entities:
      - entity: sensor.1f_temperature
      - entity: sensor.1f_humidity
      - entity: sensor.1f_illuminance
      - entity: sensor.2f_temperature
      - entity: sensor.2f_humidity
      - entity: sensor.2f_illuminance
      - entity: sensor.3f_temperature
      - entity: sensor.3f_humidity
      - entity: sensor.3f_pressure
    show_state: true
    theme: default
    type: glance
  - entities:
      - sensor.power_use
      - sensor.power_make
    type: history-graph
  - entities:
      - sensor.net_all
      - sensor.net_allv6
      - sensor.net_haru
      - sensor.net_misaki
      - sensor.net_lgtv
    type: history-graph
  - aspect_ratio: 60%
    entity: camera.entrance_camera
    image: 'https://www.home-assistant.io/images/merchandise/shirt-frontpage.png'
    name: 玄関カメラ
    type: picture-entity
type: vertical-stack

カードを設定すると、以下のようにスイッチや情報が並んだCardが表示されます。

④パネルモードの設定

このままではカードの横幅が狭いので、タブ名の横の鉛筆アイコンをクリックしてタブの設定画面を表示させ、Panel modeをOnにします。

するとCardが画面いっぱいに広がります。

これで、Home Assistantの設定は完了です。

アプリのインストール

次に、タブレットにデジタルフォトフレームアプリをインストールします。

①Playストアを開く

ホーム画面から「Playストア」アプリを開きます。

FireHDタブレットの場合は、Amazon App Storeからダウンロードして下さい。

②”タブレットdeフォトフレーム”で検索

普通に検索すると出てこないので、検索欄に「”タブレットdeフォトフレーム”」とダブルコーテーションで囲って検索します。

③アプリの選択

検索結果に出てきた「タブレットdeフォトフレーム」をタップします。 

④アプリのインストール

「インストール」ボタンをタップします。 

⑤アプリを開く

インストールが完了したら「開く」ボタンをタップします。

アプリの設定

①設定メニューを開く

「タブレットdeフォトフレーム」が起動したら、画面右上の歯車アイコンをクリックして「設定」メニューを表示します。

②スマートホームモードの設定

設定画面の「スライドショー設定」に「スマートホームモード」の設定があるので、これをOnに設定します。

③Home AssistantのURLの入力

URLの入力蘭が表示されるので、ここにHome AssistantのURLを入力します。

④設定の完了

URLを入力したら、「写真データ設定」で表示したい写真を選択して、「戻る」ボタンを選択をタップします。

⑤動作確認

それでは、再生ボタンをタップしてスライドショーを開始しましょう。スライドショーが開始したら、画面を上にスワイプしてみてください。Home Assistatの画面が表示されるはずです。初回のみ、ログインが必要ですのでログインしてくださいね。

Home Assistantのスイッチ類をクリックすると動作します。また、スライドショーの画面に戻るには、時計部分をタップするかそのまま30秒程度放置してください。

おわりに

今回は、Home Assistantの画面をデジタルフォトフレームに組み込んで、スマートホーム情報パネルを作ってみました。リビングのカウンターの上に置いて、①デジタルフォトフレーム、②卓上カレンダー、③天気予報、④時計、⑤スマートホーム情報パネルの１台５役として利用するのもいいのではないでしょうか？

関連記事