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タブレット(8インチ)が安くて(9,980円)おすすめです‼️

スマートリモコン

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

フォトフレームアプリ

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

設定手順

Home Assistantの設定

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

情報パネル画面の設定

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

①タブの追加

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

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

②Vertical Stack Cardの追加

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

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

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

③Cardの設定

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

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

カードを設定すると、以下のようにスイッチや情報が並んだ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の画面をデジタルフォトフレームに組み込んで、スマートホーム情報パネルを作ってみました。リビングのカウンターの上に置いて、①デジタルフォトフレーム、②卓上カレンダー、③天気予報、④時計、⑤スマートホーム情報パネルの1台5役として利用するのもいいのではないでしょうか?

関連記事

記事が参考になったら、ブログランキングに協力(クリック)して貰えると嬉しいです。

昼間はIT企業に勤めてますが、プライベートでは「育児×家事×IoT」をテーマに家のスマートホーム化に取り組んでいます。Androidアプリも作っているので使って下さい。質問・コメントは、↓のコメント蘭でもFacebookメッセンジャーでもどちらでも大丈夫です。
E-mail:naka.kazz.d@gmail.com

naka-kazzをフォローする
スマートホーム開発者向け
スポンサーリンク
naka-kazzをフォローする
スマートホーム×DIY

コメント

  1. I am sure this post has touched all the internet viewers,
    its really really pleasant piece of writing on building up new blog.

    Its such as you read my mind! You seem to understand
    so much about this, such as you wrote the ebook in it or something.

    I think that you simply could do with some percent to power the message house a little
    bit, however other than that, this is excellent blog.
    An excellent read. I will certainly be back. I couldn’t refrain from
    commenting. Well written!

  2. Amazing! This blog looks exactly like my old one! It’s on a completely different topic but it
    has pretty much the same page layout and design. Excellent choice
    of colors! I will right away snatch your rss feed as I can’t to find your e-mail subscription hyperlink or newsletter service.
    Do you’ve any? Kindly permit me recognize so that I may subscribe.
    Thanks. Thank you for the good writeup. It in fact was a
    amusement account it. Look advanced to more added agreeable
    from you! By the way, how could we communicate?

    • Thank you for visiting and reading my blog. My blog is developed by Cocoon on WordPress. So it’s similar to your blog. And, thank you for your advice, I will show my profile page with e-mail.

  3. I wanted to thank you for this excellent read!! I definitely enjoyed every little
    bit of it. I’ve got you bookmarked to check out new
    things you post…

  4. I like the helpful information you supply
    to your articles. I’ll bookmark your blog and check again right
    here frequently. I am slightly sure I’ll be informed many new stuff
    proper right here! Best of luck for the next!

  5. It’s actually a great and helpful piece of info. I am happy that you shared this useful information with us.
    Please keep us informed like this. Thank you for
    sharing.

タイトルとURLをコピーしました