自宅のイラストを「エアコンや照明を操作できる絵」に改造してスマートホーム化を進めた記録

家電をまとめて管理・自動操作できるオープンソースの「Home Assistant」で自宅のスマートホーム化を進めていたアントン・フロロフ氏は、家族が操作用アプリを使いたがらないことに悩んでいました。同氏はイラストレーターに自宅の絵を描いてもらい、絵の中の家電から実際の家電を操作できる画面を作った経緯をSubstackに記しています。

I hired an illustrator to draw my house. Now it's my Home Assistant dashboard.
https://antonfrolov.substack.com/p/i-hired-an-illustrator-to-draw-my

フロロフ氏は約1年間にわたりHome Assistantで自宅の機器を自動化していました。家族全員が外出するとすべてのエアコンが切れるようにしていたほか、庭のスプリンクラーは天候に応じて散水時間を調整し、暑い日は長く、雨の日は散水を見送るようにしていたそうです。

しかし、庭の照明は自動化できておらず、照明をつけるにはアプリで操作する必要がありました。また、「一定時間がたつと照明が自動で消える」「消灯前に点滅して知らせるタイマーを設定」「照明をつけ続けたい場合は消える前にアプリでタイマーを延長する」という仕様にしていたところ、家族はHome Assistantのアプリも、フロロフ氏が当初使用していた以下の操作画面も使いたがらなかったとのこと。

物理スイッチを追加してもタイマーの延長は必要になるため、フロロフ氏は家族が使いたくなる操作画面を作ろうと考えました。自宅の間取りを再現する方法を調べたところ、3Dの作例は静止画像に操作用アイコンを重ねるものが多く、ピクセルアートでは自分で描くか素材を並べる必要があったとのこと。左上が3D風、右下がピクセルアート風の間取りのイメージです。

最終的にフロロフ氏は、背景や空間のイラストを手がけるOwen Yeconiel氏の画風を気に入り、制作を依頼。家具の配置を書き込んだ間取り図や室内写真を参考資料として渡し、各階の昼用・夜用の絵に加え、機器ごとに電源オフの静止画と動作中の短いアニメーションを用意してもらいました。機器の画像は背景を透過させ、重ねたときに位置が合うように余白を切り取らず家全体と同じ大きさのキャンバスで書き出してもらったそうです。

操作画面にはHome Assistant標準の「picture-elements」が使われており、自宅の絵に機器の画像や温湿度の表示を重ね、エアコンが停止中なら静止画、稼働中ならアニメーションを表示する仕組み。絵の中のエアコンをタップすると、Home Assistantの標準の操作画面が開くようになっています。

また、フロロフ氏は日の出と日没に合わせて昼用の絵と夜用の絵が自動で切り替わるようにしました。以下の画像をクリックすると、スイッチを手動で操作して昼夜の表示を変える様子を確認できます。

フロロフ氏は1階・2階・庭を個別に表示する画面と、家全体を見渡せる画面を用意しました。各階の画面はスマートフォンでも使いやすい一方、家全体の画面を表示するにはノートPC以上の画面サイズが必要だそうです。家全体を表示した画面は以下。画像をクリックするとエアコンの風や暖炉の火が動く様子を確認できます。

また、フロロフ氏はHome Assistantを動かす機器をテレビへHDMIで接続し、入力を切り替えるだけで家全体の画面を映せるようにしました。完成した画面を初めてテレビに映した際、家族は実際の部屋と絵を見比べたり、機器の電源を切り替えて絵の反応を試したりして盛り上がったそうです。

ただし、テレビのリモコンからは家電を操作できず、テレビは家の状態を眺めるためだけの画面になってしまいました。それでも、絵の中の家電を操作したくなった家族はスマートフォンにHome Assistantのアプリを入れたり、PCで画面をブックマークしたりするようになったとフロロフ氏は述べています。