この投稿では、家の計画を立ててホームアシスタントに統合する方法を説明します, Hassioにすでにあるデバイスを統合し、飛行機に命を吹き込むことを意図しています. それは非常に魅力的で、何よりも視覚的なものです, それは彼らが家で感謝するものです, 画像を使用すると、家の状態を確認でき、追加するデバイスと対話できるためです.

これは、投稿で行う例です, 私たちはリアルタイムの情報で私たちの家の地図を持っています, ライトが点灯します, 彼らの影とともに, テレビで見るもの, 関心のある任意のメトリックの値… そして、私たちはそれぞれと対話することさえできます, スピーカーをミュート, ブラインドを上げたり下げたりします, 防犯カメラを見る, 私たちの工場の状態, 温度, ダンプ, 消費, 私たちが自分自身を置くならば、人々は…

最初です, あなたが始める前に、それは最も面倒なものになります, 私たちは私たちの家の計画を立てなければならないでしょう, 世界で最も簡単なことは、Sweet Home 3Dのようなツールを使用することです, この投稿では使用について説明しない、無料で非常に直感的なツール, と 5 あなたがそれに捧げる分、私はあなたがそれをどのように使用するかを知っていると確信しています、そしてあなたはあなたの計画を立てることができるでしょう, それでは、美しくするには時間がかかります, しかし、これは私たち一人一人が望む詳細のレベルに依存します. まず、壁を描きます, 次に、できるだけ現実に近づける必要があるオブジェクトを追加します.

助けとして、私はあなたにのウェブサイトを残します 3D倉庫de Sketchup インポート可能な画像のバンクとして, 私たちが持っている家具を探すのは良い考えです, オブジェクト, ソファ, ランプ… また、同じままにしたい薄さにもよりますが、よりリアルにするためにテクスチャをインポートする必要があります, このために私は使用するために書き留めました アーカイブテクスチャ. 上のビューで作業し、下のビューでは、3Dで見える結果を確認します, という考え方です, できるだけ家の近くに置いてください. 計画がほぼ完成したとき, アイデアは、見たいもののさまざまな航空写真を撮らなければならないということです, 個人的には、異なる時間にいくつかの写真を撮ることをお勧めします, それ以来、それらをホームアシスタントに入れることができ、一般的なショットは時間に応じて太陽の影を変えることができます, または、一日の終わりに夜が来る, さて、家は暗くしましょう. 本当に簡単です, ほんとですか, それに数分を費やすと、あなたはそれを吸い込まれるでしょう. もう一つのヒント, 可能な限り最高の品質で画像を作成します, 私の場合、1920を使用しています×1080 ピクセル解像度 (ドキュメント/図面プロパティの両方, 写真を撮るときのように).

あとで, PhotoShopタイプのエディターで, 又は インクスケープ (オープンソース) 私たちは家に必要なすべての画像を作成する必要があります. 私の例を説明します, 有る 3 飛行機全体の画像, 朝の光と一つ, 午後にもう1回、夜にもう1回, 写真は正午12時に撮影, 17それぞれ h と 22h. 夜の写真に加えて、別の写真を撮る必要があります, しかし、今回はすべてのライトが点灯しています, 私は次のようなものを持っています:

• planta_baja_manana.png 01/08/2020 正午12時
• planta_baja_tarde.png 01/08/2020 午後5時
• planta_baja_noche.png 01/08/2020 で 21:27h
• planta_baja_noche_luz.png 01/08/2020 で 21:27h

そして、光のある夜をイメージして, これらのエディターで光で領域を切り抜く必要があります, たとえば、キッチン, ザ・ホール, 通路, 客室… ランプの場合や、キャビンに複数のライトがある場合は、勾配を付ける必要がある場合があります… 次の画像が残ります (繰り返す, 彼は私の模範です) OHPフィルム付きのPNG形式:

• hall_luz.png
• lampara_sala_luz.png
• sala_luz.png
• cocina_luz.png
• comedor_luz.png

悪くありません, このパーツの準備ができたら, ホームアシスタントから始めることができます, プランを作成し、生成したすべての画像を徐々に追加する必要があります. 最初です, 最初にセンサーの領域で作成するもの (センサー:), それは太陽の高度が私たちに教えてくれるものです, そのため、後で開始するときに使用でき、朝の場合はショットの背景が変わります, 正午, 午後または夜間, そしてこれにより、さまざまな背景と対応する太陽の影を配置します, そして、夜が来ると画像がさらに暗くなります. センサーを作成します, 私は彼をbrillo_solと呼んだ, configuration.yamlに入れるコードはそのままにしておきます:

センサー:
...
  - プラットホーム: テンプレートセンサー:
      brillo_sol:
        friendly_name: "陽光"
        value_template: >-
          {% もしstate_attr('sun.sun', 'elevation') > 20  %}
            明るい
          {% エリフ・state_attr('sun.sun', 'elevation') > 9 %}
            半ば
          {% エリフ・state_attr('sun.sun', 'elevation') > -3 %}
            暗い
          {% 然も無くば %}
            黒い
          {% エンディフ %}
...

Home Assistantを再起動して、挿入したばかりの変更を再充電することを忘れないでください (設定ファイルをタップするたびに, ご存知のとおり). 最終的に, 地図から始めることができます! 開始!!! Lovelace UIでは、手動カードを作成できるようになります. 私はあなたにそれが何をするかが言われたことであるという例としてあなたに以下のコードを残します, センサー「サンシャイン」から読み取ります’ あなたの状態とそれはあなたが持っている状態に依存します, それは1つの背景画像または別の画像を置くからです. 最初のカードの例:

元素:
  - 実体: sensor.brillo_sol画像: /ローカル/planta_baja/planta_baja_negro.png state_image:
      黒い: /ローカル/planta_baja/planta_baja_noche.png 明るい: /ローカル/planta_baja/planta_baja_mediodia.pngダーク: /ローカル/planta_baja/planta_baja_tarde.png ミッド: /ローカル/planta_baja/planta_baja_manana.pngスタイル:
      左: 50%
      ページのトップへ: 50%
      幅: 100%
    tap_action:
      アクション: none タイプ: 画像画像: /ローカル/planta_baja/planta_baja_tarde.pngタイプ: 画像要素

結果に疑問がある人がいる場合, ここでは、その内容をご紹介します, (私の場合は) アール 4 画像, 次の, そして、影が変化するのがわかります, 昼間と夜の最後. ご覧の通り, Hassioマシンで作成したディレクトリに各PNG画像を保存する必要があります, 私の場合、Dockerコンテナに入れています, そしてその中にフォルダを作成し、たとえばWinSCPでそこに画像をコピーしました.

悪くありません, ここからどこへ向かうのか? 電球を追加しますか?? 押すと、対応するライトも点灯します, いいえ? 行きましょう!!! ここは そして ここは 私たちに大きな助けとなる2つの画像があります, 私たちが興味を持っているところにそれらを置くという考えです, この例では、それらをホールの中央に配置します, 前のLovelaceカードに追加する次のコードで、それを手に入れることができます, もちろんです, それぞれがそれを移動し、好みに合わせてサイズを変更する必要があります, そしてもちろん、ホールの光の中で対応するアイデンティティを選択します:

- 実体: light.luz_hall state_image:
    'off': /local/planta_baja/liteoff.png
    'on': /ローカル/planta_baja/lite.pngスタイル:
    左: 45%
    ページのトップへ: 65%
    幅: 10%
  tap_action:
    アクション: トグルタイプ: 画像

そして、それが結果になるでしょう, 電球を見ればホールにもあるでしょう, オフになっている場合は赤い点です, そして、それをクリックすると、光が差し込み、ドットが緑に変わり、周囲に美しい白がぼやけます. 用意? 私たち!

キャビンをライトアップしよう, この場合、ホール, そして、電球がオンのとき, 会場のイメージを変えてライトアップされて出てくる. また、ランプが劣化した画像を光で照らす限り使用するのもクールです… これを行うには、, まず、次のことを行う必要があります このファイルをダウンロード そしてそれを私たちのフォルダ '/config/www/js/ に保存します。’ そして、追加する必要があります “構成” > “Lovelaceコントロールパネル” > ” リソース”:

関連URL: /ローカル/js/color-lite-card.jsタイプ: JSの[/ソースコード]

今はい, カードに戻ることができます, そしてそれを養い続けます. 覚えているなら, ポストの冒頭で、各部屋に光をトリミングする必要があることを示しました, 次のコードでカードに追加します:

- 実体: light.luz_hall画像: /ローカル/planta_baja/hall_luz.pngスタイル:
    左: 50%
    ページのトップへ: 50%
    幅: 100%
  tap_action:
    アクション: none タイプ: 'custom:color-lite-card'

LEDストリップがある場合, 現在使用している色を表示できます, 私の場合、私はあなたに数え切れないほどの時間を思い出させたいと思います。 WLEDの それは素晴らしいです, 領域が照らされ、赤のみで変換された画像が必要になります, これをどうやって残しますか 私の例 _color に改名されました. そして、次のコードを使用して、フロアプランに統合されたLEDストリップの視覚化を開始できます.

- color_image: /ローカル/planta_baja/wled_cocina_color.pngエンティティ: light.wled_cocina画像: /ローカル/planta_baja/wled_cocina_normal.pngスタイル:
    左: 50%
    ページのトップへ: 50%
    幅: 100%
  種類: 'custom:color-lite-card'

他には? あなたはKodiを使ってテレビを見ます? まあ、プロジェクターがある場合は、テレビや壁に見ているものを追加できるのも便利です… だからそれはあなたが見🙂ているものを示します最初のものになります このファイルをダウンロード そして、以前と同じようにしておきます, '/config/www/js/' で. そして再び “構成” > “Lovelaceコントロールパネル” > ” リソース” 足す:

関連URL: /ローカル/js/now-playing-card.jsタイプ: JSの[/ソースコード]

わかりました, 今, テレビや壁のプロジェクションを形作ります, 台形を作る必要があります, もちろん、, 誰もが見たいものを大局的に把握できます, そして、それをよりリアルにするためには、Kodiで見ているものでフィギュアを作る必要があります. この目的のために、それは持っています デザインツール あなたは何を見るでしょう、それを使うのはたわごとです, ダウンロードするだけ, 表示されるWebサイトを開いてプレイします, 底を追加して、回転またはねじるために必要な測定値をすばやく引き出します. トータル, 私たちのカードにKodiエンティティを追加し、この素晴らしいツールの出力を生成したコードを配置します, 私たちは次のようなものになります:

- 実体: media_player.kodi_sala スタイル:
    左: 64%
    ページのトップへ: 11%
    変形する: >-
      回転(46.5度) 回転X(29度) 回転Y(-38度) スキューX(10度)
      スキューY(-30度)
    幅: 8%
  種類: 'custom:now-playing-poster'

そして、これは素晴らしい結果になるでしょう, もちろん、プロジェクターがあれば, 投影された場所にほこりをシミュレートするアニメーションGIFファイルを配置することもできます… 等, 等… あなたはクールなことができます. そしてもちろん、カードに追加する各オブジェクトのアクションを変更すると、それらと対話できるようになります.

まあ、そして最後に, しかし、できることは他にもたくさんあります, ねえ! 置く, ホームアシスタントでエンティティの値を見てみましょう, 例えば, 温度センサーがある場合, さて、何マーク, 私が行う学位, そして、それは私たちが温度計を持っているすべての部屋に置かれています… デバイスの消費量を測定している場合も同じことができます, そして、地図を見ると, リアルタイムで温度を確認できるからです, 湿度, 消費… 何と! 来る, これを作業中のカードに追加しました, それぞれが自分のエンティティを配置します, あなたの手紙の色…:

- 実体: センサー.0x00158d000444587d_temperatureスタイル:
    色: オレンジ色のフォントサイズ: 12px フォントの太さ: 太字の左: 54%
    ページのトップへ: 16%
  種類: 状態ラベル

まぁ, 想像力をかきたてる一つ一つ, これが、これらすべてがアニメーションでどのように見えるかのGIFです, それがあなたにインスピレーションを与え、助けてくれることを願っています, ホームアシスタントを可能にしているすべての人に感謝します, GitHubで作業を共有するすべての人 (とりわけ). ソーシャルメディアで共有していただきありがとうございます!!!