イラストレーターに家を描いてもらった。それが私のHome Assistantダッシュボードになった

自宅の暖炉はちらつき、庭の照明は輝き、寝室のエアコンは静かに風を送っている――これらは私の家の中だけでなく、手描きの絵の中でもあるのだ。 これが私のHome Assistantダッシュボードであり、初めて家族全員が実際に楽しんで使ってくれるものになった。 この1年間、私はオープンソースのスマートホームプラットフォームであるHome Assistantを使って自宅を自動化してきた。 できる限り多くのことを自動化しようとしたので、何も触らなくても物事がうまく機能するようになった。 全員が外出すると、すべてのエアコンがオフになる。 庭の散水タイマーは天気予報に基づいて実行時間を計算する：暑い日には長く、雨の日は完全にスキップされる。 読んでくれてありがとう！新しい投稿を受け取り、私の活動をサポートするために無料で購読してください。 購読する しかし、まだ人間が必要なこともいくつかある。 庭の照明がその最良の例だ。 これらは、メーカーのアプリかHome Assistantのアプリのいずれかからしかオンにできない。 そして、私は自分で状況を悪化させた：Home Assistantのタイマーが、しばらくすると庭の照明を自動的にオフにするのだ。 それが切れそうになると、照明が点滅し始め、まだ点灯している間にアプリを開いて延長する時間を与える。 問題は？世帯の他の誰もHome Assistantアプリを使いたがらず、私が当時持っていたダッシュボードも使いたがらなかったことだ。 元のダッシュボード 物理的なスイッチを取り付けることもできたが、それではタイマーの問題は解決しない。 そして、一部のデバイスはアプリから制御する方が明らかに簡単だ。 ユニット自体のボタンで散水機を起動し、ずぶ濡れになる前に庭から駆け出すことを想像してみてほしい。 そこで私は考えた：誰もが使いたくなるような、クールなダッシュボードを作れないだろうか？ 多くのダッシュボードを調べ、間取り図のアイデアに惹かれた：実際の家を反映した、インタラクティブな家の地図だ。 私が発見したほとんどのものは3Dで、Home Assistantのカスタムカードまたはサードパーティのモデリングソフトウェアで構築されていた。また、ピクセルアートの間取り図に関する記事も見つけた。 3Dとピクセルアートの間取り図スタイル（この記事のために生成されたイラスト） 3Dプランは私にはあまり響かなかった。 私が目にしたほとんどのものは、モデル自体が静止画であり、インタラクティブなものはすべてその上に重ねられたアイコンのレイヤーだった。 ピクセルアートのアプローチは魅力的だったが、すべてを自分で描くか、グラフィカルエディタでライブラリスプライトを一つずつ配置する必要があった。 アーティストを見つける ピクセルアートのアイデアに惹かれてアーティストを探し始めたが、良いアーティストを見つけて予約するのが思ったより難しいことにすぐに気づいた。 アーティストは専門分野を持っており、それぞれ独自のスタイルがある。 人気のアーティストは見つけやすいが、おそらく数ヶ月前から予約が入っており、たとえ空いていても、作品自体は数週間から数ヶ月かかるだろう。 それに加えて、ダッシュボードは珍しい依頼だ：アーティストは、それが何であるか、そして技術的に何が必要かを理解する必要があり、単に美しい絵を描くだけではない。 幸いなことに、私は素晴らしい環境アーティストを推薦された。そのポートフォリオはすでに美しく描かれた空間でいっぱいだった。 私はそのスタイルを気に入り、数回のメッセージのやり取りの後、最終目標について同じ考えを持っていることを確信した。 ピクセルアートのアイデアは自然に消滅した：私はさらに魅力的なスタイルを持つ誰かを見つけ、すでに部屋の描き方を知っている人だった。 始めるために、私はアーティストにパッケージを用意した： 家の簡単な建築図面。家具は描かれていなかったので、自分で書き込んだ。 実際にそこにあるものを参照するための、部屋の写真。 スタイルと色の参照として、オンラインで見つけたイラスト。 最終結果がどのようなものになるかアーティストが見られるように、他のダッシュボードの例。 必要ファイルとフォーマット、そして上記の各リソースが何のためにあるのかを説明する注記を含む、短い技術仕様。 最後の改修で使ったペンキの色コード。あると嬉しいが必須ではない、なぜなら写真は色を合わせることができるからだ。 技術的な部分についてもう少し詳しく説明したい。なぜなら、この記事の残りはそれに依拠しているからだ。 透明度付きのPNG（アニメーションの場合はWebP）、各フロアの日中版と夜間版、そして各デバイスを個別のレイヤーで要求する：オフの状態の静止画、オンの状態の短いフレームループ（8フレームで十分）、日中と夜間の両方の照明で。 最も重要なのは、すべてのファイルが同じサイズの共有キャンバスにエクスポートされ、各ピースが家の中の本来の位置に正確に配置され、切り取られていないことだ。 その一つのルールは、後で調整するのに数日かかる作業を省いてくれる。これは苦労して学んだことだ。 私自身のビルドからのいくつかの注意点。 庭については、最終的に3つのバージョンになった：日中、夜間、そして照明がオンの夜間。 そして、当初はアニメーションをPNGスプライトシートとして要求したが、最終的に自分でフレームをアニメーションWebPに変換した。 だから、最初からアーティストにWebPを要求しても良いかもしれない。 アーティストを見つけ、ダッシュボードに必要なものを理解し、すべてのドキュメントを準備することが、おそらくこのプロジェクトの作業の大部分だった。 それは全く理にかなっている。なぜなら、アートワークこそがプロジェクトなのだから！ ダッシュボードがイラストであり、状態がアニメーションで表示され、UIが数個のアイコンとセンサーの読み取り値に削減されている場合、設計またはコーディングするべきことはほとんど残っていない。 仕組み イラストが準備できたら、それを機能させる時だ。 幸いなことに、Home Assistantはこれをかなり簡単にしてくれる：内部的には、標準カードといくつかのトリックだ。 カードはpicture-elementsだ。 イラストがその背景（image:）となり、変化するすべてのもの、つまりデバイスと状態の読み取り値は、要素（elements:）としてその上に配置される。各要素は固有の位置を持つ。 サポートされている要素タイプのうち、私は主にデバイスにimage、状態の読み取り値にiconとstate-label、そして状態に応じて要素を表示または非表示にするためにconditionalを使用した。 デバイスが生き生きとする最初のトリックは、image要素がデバイスの状態（state_image）で画像を変更できることだ。 ACがオフのときは静止フレームを表示し、オンのときはアニメーションWebPを表示する。 ブラウザは単にアニメーションを再生するので、カスタムコードは関与しない。 type: picture-elements image: /local/floorplan/ground/ground_day.webp elements: - type: conditional conditions: - entity: input_boolean.dashboard_night state: 'on' elements: - type: image image: /local/floorplan/ground/ground_night.webp - type: conditional conditions: - entity: input_boolean.dashboard_night state: 'off' elements: - type: image entity: climate.main_room_ac image: /local/floorplan/ground/ac_living_off.webp state_image: cool: /local/floorplan/ground/ac_living_on.webp heat: /local/floorplan/ground/ac_living_on.webp heat_cool: /local/floorplan/ground/ac_living_on.webp auto: /local/floorplan/ground/ac_living_on.webp dry: /local/floorplan/ground/ac_living_on.webp fan_only: /local/floorplan/ground/ac_living_on.webp tap_action: action: more-info 日中と夜間の切り替えの2番目のトリックだ。 日中と夜間モードを切り替えるヘルパーを作成し、日の入りと日の出に合わせてそれを切り替える自動化を設定した。 設定は簡単で、手動で切り替えられるのはテスト中に非常に便利だ。 夜間イラストは条件付き要素として日中イラストの上に重ねられ、各デバイスは同様の方法で日中版と夜間版を持つ。 ACのようなインタラクティブなデバイスをタップすると、Home Assistant独自の制御ダイアログが開く（tap_actionがmore-infoに設定されている）。 これは最も簡単なオプションだった。なぜなら、設計するダイアログがなかったからだ。 唯一の例外は庭の灌漑だ。 ダッシュボード上の単一のアイコンだが、その背後にはスマート灌漑機を構成する複数の独立したバルブとタイマーがある。 それらすべてに対応する単一の画面はないため、デフォルトのダイアログを開くことはできない。 Browser Modを使ってカスタムダイアログを作成した。これはHACSからインストールされるカスタム統合で、特にHome Assistantページで独自のポップアップダイアログを開くことができる。 画像プロパティは画像を指します