【Home Assistant(Hass.io)】
おうち情報KIOSKの構築！
「Home Assistant(Hass.io)でホームオートメーション 再起動！」シリーズです。
以前「おうちダッシュボード」と言ってLovelaceのpicture element cardを使って間取り図で情報を一覧できるようにしました。そもそもダッシュボードとは計器盤のことで「複数の情報源からデータを集め、まとめて一覧表示する画面」のことです。
せっかく一覧表示できるなら、いつでもささっと見られるようにしたいではありませんか。ということで、今回は制御盤というかコントローラーというか情報KIOSKというか、そんなものを作ってみたいと思います。
（2024/03/03: Inkspaceを使って、開・閉でサイズが同じイメージの作り方を追記）
いつもの通り、できるだけ安価に、できるだけ家を改造しないで取り組みたいと思います。
- 【Home Assistant(Hass.io)】 おうち情報KIOSKの構築！
- 1. 準備
- 2. タブレットを情報KIOSKに
- 3. Home Assistant UIの調整
- 4. 壁にタブレットを取付
- 5. おわりに
| この記事の前提条件 | |
|---|---|
| Home Assistant core | 2021.12.5 |
| Home Assistant OS | 7.0 |
| Server | Raspberry Pi 4(2GB) |
上記バージョンを前提とした手順です。 （最新版では動かないこともあるかもしれませんが、私が使っている限り、備忘録を兼ねて最新化してゆきたいとは思っています）
1. 準備
Amazon FireHD 10
単身赴任中の妻の新聞読み用に買ったものですが、帰ってきたので用済みに。（本当はこの箱ちがう。これはもう一つ買ったオリーブ色のやつ、うちにタブレットいくつあるのでしょうか…*1）
価格：セール中なら1万円ちょいぐらいです。
Micro USBケーブル 3m
タブレットまで途中キッチン収納の扉があったりするので、きしめんのような、ややフラットなケーブルを選択。タイラップやら壁に留めるピンがあったり、おまけも充実。
価格：2本で1,530円。
USB電源アダプタ
たぶん純正だと思うAmazon印のUSB電源アダプタ。
マグネット用取付プレート／両面テープS
マグネットにくっつくようにする4cm角のステンレスのプレート。キャンドゥにも入荷。あといつもの3M製の両面テープ（コマンドタブ）。
価格：プレート2セット、両面テープ8個1セットを百均で計330円。
ネオジム超強力磁石
（写真にはないが）直径13mm磁石で設計するも数が半分足りず、買いに行くも品切れ。仕方なく直径16mmで再設計。ダイソーにて。
価格：16mm3個を2セット。13mm5個を2セット。計440円。
ウォールフック（とそのピンを押し込むやつ）
3本の細いピンを使って石膏ボード（家の壁）に強力に固定。Jフックとかとも呼ばれてます。必要なのはピンが刺さっているパーツだけですが、買おうと思うとフックとセットになっちゃう。
価格：フックとセットで10個で1000円ぐらい。高い… 安いの探しても大体1個70円。
2. タブレットを情報KIOSKに
タブレットを情報KIOSK端末にするのには、Fully Kiosk Android Appあたりを入れて、メニューバーなしのブラウザにして、うんぬん、というのがよくある手です。
今回は、Naka-Kazzさんの「タブレットdeフォトフレーム」を使います。Amazon Fireのアプリストアにもあるので、Google Playを入れていないFireタブレットでも使えるのが良いですね。
下記の本家Naka-Kazzさんの記事で『スマートホーム情報パネル』は出来上がります。すばらしい。 dream-soft.mydns.jp
はい！おしまい！
というのはあれなので、一応、自分用にメモ。インストールして起動させたら、右上の歯車マークから設定画面に入って下記設定を。
- 「スライドショー設定」⇒スマートホームモード：On、その下にURLを記述。
（私は1Fというビューを作ったので、https://<My home assistant URL>/lovelace/1fと記載） - 「写真データ設定」⇒好きなのを選んでください*2。
- 「天気予報設定」⇒Fire HD10にはGPSが無いので、力技で地図上で近い所を選択するのですが、Amazonアプリ版は地図がしょぼいので、本当に近所なのか？確証ありません。
課金しないと1日1回広告バナーが出ますが、まあ、そのぐらいなので、気にしない方向で。また20日広告をクリックすると広告バナーが出なくなるとのことですが、それは検証できていません。
3. Home Assistant UIの調整
ダッシュボードの内容は下記の記事の通りで問題ありませんが、今回はタブレット横向きで使いたいと思うので、いろいろと調整した専用のビューを作ります。
maky-ba.hatenablog.com
3.1. ベースを横長に
以前のダッシュボードはスマホで確認用だった（とは一度もいっていないけど）ので縦長でしたが、今回はぐるっと全体を右90°回転させて、横長として使います。さあ画像回転。
Picture element cardの設定は、コピペして、style:のtop:とleft:をちみちみ修正して位置調整をします。ビジュアルエディタが出来るといいのですが…。
3.2. 開閉イメージの調整
基本的には、窓とかドアとかの開閉のイメージ図も前回の記事でつくったものの流用（回転）でいけるのですが、どうやらPicture element cardの画像エレメント(image element)は画像の幅を基準に調整をかけている様子。窓の開いたときの状況と閉じたときの状況の「幅」が同じである必要があります。前回もちらっとそれに触れていたかと思いますが、その時は画像を回転する日がくるとは思っていなかったので、縦幅（回転した時の横幅）が結構まちまちでしたので作り直す羽目に。次からは縦横同サイズの開閉画像を準備しよう。
Inkspaceで開閉イメージの縦横を同じにするには（2024/03/03追記）
(1) 開、閉、それぞれを違うレイヤーに記述
私は、開いているドアや窓には二つレイヤーを使っています。空いている窓やドアを水色の実線で「WindowDoor_open」というレイヤー書いています。あと目立つようにドアは開いている扇型のところ、窓は周囲に楕円で、ぼんやりと水色で明るくしています。これを「WindowDoor_open_effect」というレイヤーに記述しています。
閉じているドアは黒やグレーで記述し、窓は水色で記述しています。これを「WindowDoor_close」というレイヤーに書いています。
(2) 開閉両方が含まれるサイズを測る
まず「レイヤー」画面で、開閉両方のレイヤーを見えるように（目のアイコンが開いているように）します。そのうえで、開と閉両方の図を選択します。上の図の場合、開（３オブジェクト：開いたドア＋開く扇型＋水色エフェクト）、閉（２オブジェクト：閉じたドア＋開く扇型（点線））の計５オブジェクトを選択した状態になっています。
次に、「PNG画像にエクスポート」画面で、「選択領域」をクリックします。すると下のx0(X)やy0(Y)等の座標や幅、高さなどが設定されます。下の方で、自分が選択した個数のオブジェクトが間違いなく表示されていることを確認してください。
(3) 取得したサイズを固定する
そのまま「PNG画像にエクスポート」画面で、「カスタム」をクリックすると先ほど選択領域として設定した範囲が固定されます。念のため下の座標等が表示されているところで「幅」「高さ」はどこかにメモっておいてください。
(4) 開の画像をエクスポート
まず「レイヤー」画面で、開のレイヤーが見えるように（目のアイコンが開いているように）します。開の３つのオブジェクト（開いたドア＋開く扇型＋水色エフェクト）を選択し直します。
「PNG画像にエクスポート」画面に移って「カスタム」が選択されたままであることを確認し、一応、下の「幅」「高さ」に変化が無いことも確認し、さらに選択したオブジェクト数であることを確認します。「選択以外すべて非表示」のチェックボックスにチェックをいれます。
「エクスポート先…」をクリックし、エクスポートするフォルダ、ファイル名を指定して、PNGファイルをエクスポートします。
(5) 閉の画像をエクスポート
開の画像作成と同じです。
まず「レイヤー」画面で閉のレイヤーが見えるように（目のアイコンが開いているように）します。閉の２つのオブジェクト（閉じたドア＋開く扇型（点線））を選択し直します。
「PNG画像にエクスポート」画面に移って「カスタム」が選択されたままであること等を確認して、「エクスポート先…」をクリックし、エクスポートするフォルダ、ファイル名を指定して、PNGファイルをエクスポートします。
(6) 出来上がり
上記のようにつくると、開のイメージも閉のイメージも同じサイズ（幅58、高さ53）になります。
（2024/03/03：追記ここまで）
3.3. 状態を示すアイコンを大きくする
画像(Image element)はスケールするのですが、アイコンとかラベルは固定サイズなので、ターゲット（今回は「Fire HD10」+「タブレットdeフォトフレーム」）に合わせて大きさを調整する必要あります。
まずは状態アイコン(state-icon)の調整から。よほど小さな画面でないかぎり、たいてい小さく見えます。クリッカブルにしている場合は微妙なタッチが求められるのでちょっとストレスフルに。下記の様にtransform: translate(-50%, -50%) scale(2, 2)という呪文をstyle:に記載すると、アイコンの中心は変わらないでサイズが縦横2倍になります。
（前略）
- type: state-icon
title: 勉強部屋シーリングライト
tap_action:
action: toggle
entity: light.ceilinglight_studyroom
style:
top: 35%
left: 31%
transform: translate(-50%, -50%) scale(2, 2)
（後略）
3.4. 文字を大きくする
文字(state-label)もちっこくて読みにくい（老眼だからか…）ときは、下記の様にfont-size: 150%という呪文をstyle:に記載すると、これは予想通り単純に1.5倍に拡大してくれます。
（前略）
- type: state-label
entity: sensor.mh_z19_co2_value
title: 勉強部屋CO2
style:
top: 22%
left: 43%
font-size: 150%
（後略）
3.5. 他のビューへ遷移
1Fと2Fを別のビューで作った場合とか、上の細いメニューバーで選択できると思いますが、それはダッシュボードっぽくないので、下記の様にaction: navigateを記載してイメージをクリックしただけでビューが切り替えられるようにしました。
（前略）
- type: image
title: 2Fを表示
image: /local/floorplan/icons/stairs_1Fto2F.png
style:
top: 20%
left: 80%
width: 8%
tap_action:
action: navigate
navigation_path: /lovelace/2f
（後略）
3.6. kiosk表示用ユーザ作成
kioskで表示するときには、あまり色々なビューが見えない方が良いでしょう。うっかり触って縦長画面出たりしても興ざめでしょうし。Home Assistantで新規ユーザを作ってパスワードを設定します。
ビューとしては横長表示用のビューのみを表示できるようにしましょう。
- 左のメニューの「オーバービュー」で表示されたページの右上の縦三つ点より「ダッシュボードを編集」に入る
- ビューの隣にある鉛筆マークをクリックしビュー設定画面を表示する
- 「可視性」タブに「ナビゲーションでこのビューを表示するユーザーを選択します」とありユーザの一覧が表示されるので、先ほどつくったKioskユーザは必要なビュー以外はoffにしておきます。
4. 壁にタブレットを取付
賃貸でもないくせに「壁に大穴を開けない」を基本路線としておりますので、ローインパクトな取付方法を考えてみます。今回は、マグネットをピンで壁に留めて、タブレットをべちっとくっつける方式に取り組んでみます。
4.1. 3Dプリンターでマグネットホルダー作成
一つのマグネットフォルダーに3つの百均のネオジム磁石を仕込めるように設計してみました。真ん中の穴が、石膏ボード用の固定具を入れるところ。ホルダのサイズは同じく百均で買ったステンレスプレートのサイズに合わせて4cm四方とします。
よく見ると上のホルダと下のホルダでネオジム磁石のサイズが違っています。直径13mm（上のやつ）が途中で足りなくなって、仕方なくダイソーに買いに出かけたのですが、13mm5個入りがなく、泣く泣く16mm3個入りを買ってきました。
しかしまあ、Fusion360で設計しているので磁石の変更（直径の変更）も簡単です。直径の変更＋位置の微調整で設計は完了。あとはstlファイルに吐き出して、スライスし直せばおしまい！
参考までにThingiverseに置いておきます。
www.thingiverse.com
（ああ…13mmの方、角を丸め忘れてる…）
4.2. タブレットに取り付けるプレートの加工
まあ、加工というか、というレベルですが。
まずはステンレスプレートの裏の両面テープを取り去り（ダイソーのと違ってキャンドゥのやつは裏の両面テープが非常に強力で剝がすのに四苦八苦）、はがせる両面テープ（3Mの例のやつ）を代わりに貼ります。滑り止めの為にビニールテープでステンレスプレートを覆います。
タブレット(Amazon Fire HD10)の裏に貼り付けます
（本当は、次のステップでマグネットホルダーを壁につけてから、そこにステンレスプレートをくっつけて、タブレットを押し付けるのがぴったり貼れて良いかな）。
4.3. 設置
タブレットを固定したいところに四辺垂直になるように枠紙とか作ってマグネットホルダーを固定してゆきます（写真ではまだ回転止めのホチキスはしていません）。
中心を中ピンでとめているだけなので、くるくる回る可能あります。ステンレス針のステープラーでバチンと壁に固定しておきます。
Fire HD10を貼り付けて、はい！できあがり。
ちょっと明るすぎますね。常設するなら少しブライトネス調整をしないと…
5. おわりに
画面を下から上にスワイプするとHome Assistantの「1F」ビューが表示されます。これでおうちの状況が、いつでも！一目で！わかるようになりました。やった！
（ちなみに、何かしても、何もしなくても30秒ぐらいたつと元のフォトフレーム画面に戻ります。「タブレットdeフォトフレーム」のここだけがちょっと気いらないのですが。触っている間は戻らないでほしい。ま、小さなところですが。）
