コモノポリタン

コモノ、デジモノが好きなKomonopolitan住民 （はてなダイアリーからの引っ越しです）

【Home AssistantでDIY Smart Home】おうちダッシュボード：家の状況を一覧する（再整理）

SmartHome

【Home Assistant(Hass.io)】
picture-elementsで家の状況を一覧表示する

「Home Assistant(Hass.io)でホームオートメーション　再起動！」シリーズです。

　以前にも「おうちダッシュボード」という記事を書きましたが、いろいろとその後追記したので、備忘を兼ねてまとめ直しました。

　家の見取り図をHome Assistantで扱う方法としては、ベクターイメージ(.svgファイル)を扱うFloorplanという仕組み*1があり、こちらの方が歴史が長く、多分、今はFloorplan for Home Assistantてな感じでHACSになったりしています。が、やはり標準のダッシュボードのカードだけで出来た方が楽・安心ですね。

　ということで、以前の記事と同じ、標準ダッシュボードの「picture-elementsカード」という仕組みで家の見取り図（Floor Plan）「おうちダッシュボード」を実現する方法を再整理してまとめます！

この記事の前提条件
Home Assistant 2024.5.2
HassOS 12.3
Server Raspberry Pi 4(2GB)

　上記バージョンを前提とした手順です。 （最新版では動かないこともあるかもしれませんが、私が使っている限り、備忘録を兼ねて最新化してゆきたいとは思っています）

0. 過去記事へのリンク

「おうちダッシュボード」「コンソール」の初回の記事はこちら。
maky-ba.hatenablog.com

でもって「おうち情報KIOSK」「スマートホーム制御盤」はこちら。
maky-ba.hatenablog.com

1. 「おうちダッシュボード」って何？

　家の平面図上に様々なセンサーの状態やスイッチなどを表示して、UIで把握・制御できるようにするものをイメージしています。Googleで"Home Assistant" floorplanをキーワードに画像を検索すると素敵なおうちダッシュボードが沢山見つかります*2
　私の家のダッシュボードも家のスマートホームデバイスの拡充にともない、だいぶ充実しつつあります。
　状態の表示：

  • ドア・窓の開閉、鍵の状態
  • 部屋の二酸化炭素量
  • 外部/部屋の温度・湿度
  • 外部の明るさ
  • 降雨センサー/雨量計
  • 外部のカメラ画像

　操作：

  • 部屋の明かりのOn/Off
  • ルンバのOn/Off
  • クリスマスツリーのOn/Off

こんな感じです。

あと雨戸の開閉とエアコンの操作ぐらいはしたいですね*3。

2. 下準備

2.1. wwwフォルダの準備

　画像ファイルとかを表示するためには、Home Assistantサーバ上にwwwフォルダが必要です。以前、RFIDタグを使うときにすでに作りましたが、まだならfile editorなどでconfigフォルダの下にwwwというフォルダを作成して再起動すれば大丈夫です。

2.2. floorplan用フォルダ、iconフォルダの作成

　今回はwwwフォルダの下に、floorplan用のフォルダをいくつか掘りました。

フォルダ URL 用途
config\www\floorplan [base URL]/local/floorplan/ 間取り図
config\www\floorplan\icons [base URL]/local/floorplan/room/ 部屋
config\www\floorplan\icons [base URL]/local/floorplan/icon/ アイコン
config\www\floorplan\windows [base URL]/local/floorplan/window/ 窓部品
config\www\floorplan\doors [base URL]/local/floorplan/door/ ドア部品
config\www\floorplan\misc [base URL]/local/floorplan/misc/ その他部品
（今回未使用）

3. 間取り図を描く

3.1. ツール（Inkscape）

　間取り図がなければ始まりません。lovelace UIのpicture-elementでは画像（.jpeg, .pngなど）であれば扱えそうなので、どんなツールを使っても描いてもかまいません。Windows標準の「ペイント」でもいいですし、きっとパワーポイントあたりでも大丈夫でしょう。
　私は、(1)家の図面を下書きにして書きたい、(2)以前トライしていたFloorPlanがベクター画像の.svg形式しか受けつけなかった、という理由でフリーのsvgイメージエディタのInkscapeを使っています。まあレイヤーが使えるお絵描きソフトならなんでも大丈夫そうですが。
inkscape.org

　Inkscapeの画面はこんな感じです。とりあえず使いそうなツールは「レイヤー」と「PNGエクスポート」でしょうか。

　とりあえず用紙はA4タテとしておきます。

3.2. 下書きをもとに描く

　Inkscapeではレイヤーを分けて重ねて表示したりできるので、部屋の図面をスキャナで取り込んで下書きとして使うことができます。まずは最初のレイヤーに[ファイル]-[インポート]で画像を選択して図面を読みます。目のアイコンの横にある鍵のアイコンをクリックして書き込み禁止にしておきます。そうしないスキャナ画像に色々書き込んでしまったりします。ポカヨケ。

　次に直線がきれいに書けるように、グリッドとスナップの設定をします。
メニューの「表示」⇒「ページ・グリッド」を選択するとグリッド線が表示されます。またメニューの「ファイル」⇒「ドキュメントのプロパティ」⇒「みえているグリッドラインのみにスナップする」にチェックすることで、グリッド線の交点に自動的に線分の端点をくっつけるスナップ機能が有効になります。

　レイヤー・ダイアログで「＋」で見取り図を描くレイヤーを追加します。名前は適宜変えましょう。見取り図レイヤーが選択されていることを確認して、左でペンツールを選択してちみちみ線をなぞって壁を描いていきます。線種を変えたり、塗りつぶしをしたりは「フィル/ストローク」のタブ（もしくはメニューの「オブジェクト」⇒「フィル/ストローク」）で指定します。

3.2.1 背景（壁、床）を書く

　新しいレイヤー「1F_background_frame」を作って、そこに「壁」を書いていきます。壁は黒く塗りつぶしました。

　つぎに、別のレイヤー「1F_background_floor」を作り、外周の壁のちょっと内側の大きさの「床」を白で書いていきます。

　目的は後述しますが、透明な図（何も置かれていない）をつくりたいので、何も書かないレイヤー「1F_Transparent」も作っておきます。

3.2.2. 部屋の図の切り抜き用マスクを書く

　部屋毎に明かりが点いているか等の状態で明るさを変えて表示するために、部屋毎に別のPNGファイルにする必要があります。部屋を切り抜くためのマスクを記述します。判り易いように色分けしておきます。「地図の隣り合った領域が同じ色にならないように塗り分けるには何色必要か？」なので、これは俗にいう「四色問題」ですね。ということで、四色あれば塗分けられます。

3.2.3. 窓やドアをを書く

　窓やドアは、センサーの状態（state）にしたがって異なるイメージで表示したいので、開いているのと、閉じているのを別レイヤーで書いておきます。

  • レイヤー1F_DoorsWindows_closed：閉じているドアや窓を記述
    窓やドアは実線・白塗りつぶしで、開く領域は点線で書く。黒単色で。
  • レイヤー1F_DoorsWindows_opened：開いているドアや窓を記述
    開いている窓は水色で塗りつぶす。
  • レイヤー1F_DoorsWindows_opened_effects：開いているドアや窓を強調するための色を付けます（水色のふちがボンヤリ）。

　窓やドアはこんな感じにしてみました。（上側が窓、下側がドア）
　閉まっているドアを先に書いて、その後それを基に開いている窓・ドアの図や水色エフェクトを別レイヤーに書いていきます。
　
　

　出来上がりは、こんな感じ。左側が窓・ドアが閉まっているレイヤー「1F_DoorsWindows_closed」です。右側が開いている窓・ドアのレイヤー２つ「1F_DoorsWindows_opened」「1F_DoorsWindows_opened_effects」です。
　

　ちなみに我が家には動かない窓（？）や当面センサーをつける予定のない窓・ドアがありますので、それは別のレイヤー「1F_DoorsWindows_ToBe」に記述しています。

3.3. PNG画像の準備

　実際にPicture-elementsで使うのは画像ファイルなので、Inkscapeで画像書き出し（PNGファイル書き出し）をしていきます。

3.3.1. 背景画像の準備

　「壁」と「床」と「固定窓・ドア」の３つのレイヤーだけを選択した状態で、メニューの「編集」⇒「全レイヤーの全オブジェクトを選択」（「全レイヤー」ってどこまで？ってドキドキするけど、結局「選択している全レイヤー」なのでダイジョブです）し、「PNG画像にエクスポート」で「ページ」を選択してエクスポートする。書き出し先は、「2.1. wwwフォルダの準備」で準備したfloorplanフォルダ直下に置きましょう。出来上がりのPNGは右側。

　「透明な図（何も書かれていない）」も書き出しておきます。書き出し方は上と同じです。

3.3.2. 部屋画像の準備

　間取り図から、それぞれの部屋を切り抜いてPNGファイル化していきます。

  1. 切り抜き用に間取り図のコピー
    「壁」「床」「固定窓・ドア」の3つのレイヤを表示してすべてを選択してコピー（Ctrl-c）します（「すべてを選択」は、「マウス左ボタンドラッグで全オブジェクトを選択」するか「編集」>「全レイヤーの全オブジェクトを選択」です）。
    切り抜かれ用のテンポラリー・レイヤー「1F_temp_background_for_room」に貼り付けます。その時、間取り図の狙ったところに重なるようにメニュー「編集」⇒「同じ場所に貼り付ける」で貼り付けるのを忘れずに。

  2. 部屋マスクのコピー
    部屋マスク「1F_background_room_masks」から切り抜きたい部屋（例えば、右下のリビング）の図をコピーして、一番上のレイヤ「1F_PNG_temp」に貼り付けます。ここでも、間取り図の狙ったところに重なるようにメニュー「編集」⇒「同じ場所に貼り付ける」で貼り付けるのを忘れずに。

  3. 部屋の切り抜き
    切り抜かれ用の間取り図全体（「1F_temp_background_for_room」レイヤ上）と部屋の図形（「1F_PNG_temp」レイヤ上）の両方を選択しておいて、メニュー「オブジェクト」⇒「クリップ」⇒「設定」でクリップ（切り抜く）。一番上のレイヤーの図形の形に切り抜くことが出来ます。

  4. 画像(PNG)ファイルの書き出し
    切り抜いたら地の用紙のサイズ（＝ページ）でPNGとして書き出します。
    　

  5. 後始末
    テンポラリー・レイヤに残っている画像を消しておく。

　これを繰り返して部屋すべてを別々のPNGファイルにします。

3.3.3. 窓・ドアの画像の準備

　窓・ドアは「開」と「閉」の状態で違う画像を表示させます。その時、開閉で画像のズレをなくすためには縦横が同じサイズの画像とする必要があります。以下に、開と閉で同じサイズにする方法を記載します。

  1. 開閉両方が含まれるサイズを測る
    　まず「レイヤー」画面で、開閉両方のレイヤーを見えるように（目のアイコンが開いているように）します。そのうえで、開と閉両方の図を選択します。下の図の例では「開（4オブジェクト：開いた窓＋開く扇型（点線）＋水色エフェクト＋開く前の窓（点線））」、「閉（2オブジェクト：閉じた窓＋開く扇型（点線））」の計6オブジェクトを選択した状態になっています。

    　次に、「PNG画像にエクスポート」画面で、「選択領域」をクリックします。すると選択範囲のx0(X)やy0(Y)等の座標や幅、高さなどが設定されます。下の方で、自分が選択した個数のオブジェクトが間違いなく表示されていることを確認してください。この場合、6オブジェクトです。

  2. 取得したサイズを固定する
    　そのまま「PNG画像にエクスポート」画面で、「カスタム」をクリックすると先ほど選択領域として設定した範囲が固定されます。念のため下の座標等が表示されているところで「幅」「高さ」はどこかにメモっておいてください。

  3. 開の画像をエクスポート
    　まず「レイヤー」画面で、開の２つのレイヤーが見えるように（目のアイコンが開いているように）します。開の4オブジェクト「開いた窓＋開く扇型（点線）＋水色エフェクト＋開く前の窓（点線））」を選択し直します。
    　「PNG画像にエクスポート」画面に移って「カスタム」が選択されたままであることを確認し、一応、下の「幅」「高さ」に変化が無いことも確認し、さらに選択したオブジェクト数であることを確認します。「選択以外すべて非表示」のチェックボックスにチェックをいれます。「エクスポート先…」をクリックし、エクスポートするフォルダ、ファイル名を指定して、PNGファイルをエクスポートします。

  4. 閉の画像をエクスポート
    　開の画像作成と同じです。
    　まず「レイヤー」画面で閉のレイヤーが見えるように（目のアイコンが開いているように）します。閉の２つのオブジェクト（閉じた窓＋開く扇型（点線））を選択し直します。
    　「PNG画像にエクスポート」画面に移って「カスタム」が選択されたままであること等を確認して、「エクスポート先…」をクリックし、エクスポートするフォルダ、ファイル名を指定して、PNGファイルをエクスポートします。

  5. 出来上がり
    　上記のようにつくると、開のイメージも閉のイメージも同じサイズ（幅36、高さ34）になります。

　同じように、窓やドアをどんどん作ってゆきます。

3.3.4. アイコンの準備

　picture-elementカードでは、アイコンを設定することは可能です（type: iconを利用）。使いたいアイコンをmdi:xxxxxで指定してあげれば問題ありません。アイコンを探すにはMaterial Design Iconsで検索して名前を調べておけばOKです。
　ところがアイコンそのものを状態によって変えようとするとちょっと困ります*4。窓の鍵が閉まっている時と開いている時で、表示するアイコンを変えたい、という時とかです。状態によってアイコンの色を変えたりすることは普通に出来ます（これはHome Assistantの普通の機能）。
　画像を状態(State)によって切り替えることはできる（type: imageを利用）ので、Material Design Iconsで検索して、ダウンロードしておきます。mdi: lockとmdi: lock-open-variantぐらいかな。

4. picture-elementsの設定

4.1. ビューとカードの設定

　まずはビューを作って名前を設定して、「パネル(1枚)」にチェックを入れます。こうするとこのビューではpicture-elementsカード「だけ」が表示されるようになります。

　次に画面右下の「＋カードを追加」から「ピクチャーエレメント」カード（picture-elements）を追加します。picture-elementsは自由度が高いのでlovelace UIのCard編集画面でも「ビジュアルエディタは使えないよん」と言われます。

　だだし、設定している画像は同じウィンドウに表示されるので（微妙なところまでの確認は無理ですが）大まかな状況は確認可能です。

4.2. picture-elementsの基本設定

　まずはPNGエクスポートしておいた間取り図の枠部分（ここでは1F_background.pngとします）を背景として設定します。picture-elementsのエディタ画面でまずは下記のように始めます。
.pngの後ろの「?v=0.50」はちょっとした小技用。本来はバージョンを示すのですが、PNGファイルを少しだけ更新したときに「1F_Background.png」ファイルを同じ名で置き換えたりすると読込んでくれない時があります。そんな時は、バージョンをちょびっと上げて「?v=0.51」なんかにすると読み直してくれます。本当に小技ですね。 

type: picture-elements
image: /local/floorplan/1F_Background.png?v=0.50
dark_mode_filter: invert(50%)
elements:
（この後ろに設定を記述してゆきます）

この背景画像の上に、次から紹介する'type: xxxxxx'でいろいろな部品を載せていくイメージです。

4.3. エレメント

4.3.1 部屋（シーリングライト付き）

　背景の次に手前に置くのは「部屋」です。

設定は下記の通り。

（前略）
elements:
  - type: image
    title: 勉強部屋
    image: /local/floorplan/room/1F_StudyRoom.png?v=0.5
    entity: light.ceilinglight_studyroom
    state_filter:
      'on': brightness(100%)
      'off': brightness(50%)
    style:
      top: 50%
      left: 50%
      width: 100%

（部屋の設定を続ける）
（後略）

　type: imageは、image:に指定した図を表示する部品(elements)の設定です。

  • title:はラベル表示の上にマウスを持って行ったときに表示されるtipの設定ですが、部屋に関しては後で透明画像で上を覆うのでtip表示は無効になります。が、表示部品が何だったかをこの設定エディタで分かりやすくするために部屋名を設定しておきましょう。
  • image:には部屋の図（PNGファイル）を指定、場所はwwwからのURLで指定します。
  • entity:シーリングライトがある部屋は明かりがついていると明るく、そうでないと暗く表示するように設定したいので、シーリングライトをentity:に設定します。
  • state_filter:明るさは中に記述するbrightness(n %)で画像（ここでは部屋の形）全体の明るさ・暗さを表現できます。
  • sytle:　部屋の画像は背景と同じA4サイズになっているので、きっちり重なるようにstyle:の中は次にように記載します。
    top:50%
    left:50%
    width:100%
    こうしておけば中心が「真ん中」、大きさは「もとのまま（A4）」となって背景ときっちり重なります。

4.3.2 部屋（シーリングライト無し）

　シーリングライトをHome Automationに組み込んでいない部屋、もしくは部屋の明るさセンサーが無い部屋、のelements設定は簡単です。

（注：以降「（前略）」、「elements:」、「（中略）」「後略」は面倒になったので省略。elements:の中に記載する（インデントする）ものだと思ってください。）

  - type: image
    title: キッチン
    image: /local/floorplan/room/1F_Kitchen.png?v=0.5
    filter: brightness(85%)
    style:
      top: 50%
      left: 50%
      width: 100%

type: imageは、image:に指定した図を表示する部品(elements)の設定です。

  • title:には部屋名を。
  • image:には部屋の図（PNGファイル）を指定します。
  • filter: デフォルトの部屋の明るさ（不変）をbrightness(n %)で指定します。明るくもなく暗くもなく、で85%としています。

4.3.3. tapアクションやtips表示の抑制処置

　今回は部屋の図を全画面（A4サイズ）重ねてゆきました。何もエレメントが配置されていない部分をタップしたり、マウスオーバーすると一番表に置かれた部屋の情報やtap_actionが実施されてしまいます。
　部屋にtitle:を書かない（こうするとマウスオーバー時にtipsが表示されない）とか、tap_action: noneと書く（こうすれば無関係の所をタップしたときに「エンティティないよん」と言われない）ことで回避できます。
　しかし、まあ、面倒なので、一番手前の部屋の画像のさらに手前に「透明な図」を配置して、下記の様に記載してきます。

 - type: image
    title: ' '
    image: /local/floorplan/1F_transparent.png
    tap_action: none
    style:
      top: 50%
      left: 50%
      width: 100%

4.3.4. 区切り

　picture-elementsカードの設定には、コメント記述がなさそう （あったら教えてください）なので、type:imageのtitle:を流用して区切りっぽく「■■■…■■■」で目立つように記述。

  - type: image
    title: ■■■「リビング」設定ココから■■■

4.3.5. 状態(State)を表示＜室温等＞

　まずはセンサーの値等の状態(State)を表示します。

  - type: state-label
    title: 室温（勉強部屋）
    entity: sensor.xiaomi_lywsdcgq_temperature
    style:
      top: 67%
      left: 24%
      font-size: 125%

　type: state-labelは、entity:で指定した状態をラベルで（文字列で）表示するという部品の設定です。

  • title:はラベル表示の上にマウスを持って行ったときに表示されるtipの設定です。それよりこの表示部品が何だったかをこの設定エディタで分かりやすくするために必ずつけておきましょう。
  • style:で表示スタイルをCSSで設定できます。top: left:はラベルの表示位置を左上からの％位置で指定します。とりあえず設定してみて、表示させながら微調整します。元のファイルをSVGイメージエディタで表示して座標から%座標に変換しても良いのですが、まあ見ながら調整でも十分できると思います。
    文字を大きく(小さく)したい時には
    　デフォルトでは結構文字が小さくて読みにくいのでstyle:に、font-size: 125%と指定してちょびっと大きくしました。このようにfont-size: xxx%に標準の文字の大きさからの相対値（％）を指定してあげると、フォントの大きさを大きく/小さくすることができます。

　仕上がりはこんな感じです。

4.3.6. 状態をアイコンで表示＜ライトなど＞

　次は状態に応じたアイコンが表示できて、クリック（タップ）して操作もできる部品を設定します。

  - type: state-icon
    title: シーリングライト（勉強部屋）
    entity: light.ceilinglight_studyroom
    tap_action:
      action: toggle
    style:
      top: 67%
      left: 35%
      transform: translate(-50%, -50%) scale(1.75, 1.75)

　type: state-iconは、entity:で指定した状態を、そのentityに設定されているアイコンで表示する部品（elements）です。

  • entity: アイコンで表示して操作したいエンティティを記述します。ここでは天井の電灯をオンオフしたいのでlightのエンティティを指定。
  • tap_action:はクリック（タップ）したときの動作を記述します。ここではライトのオンオフを指示するためにaction: toggleと設定しました。
  • style: ではライトのアイコンが小さくて操作しにくいので、sytle:にtransform: translate(-50%, -50%) scale(1.75, 1.75)と記述して少し大きくします。
    アイコンの表示を大きく(小さく)したい時には
    　このようにアイコンが小さく/大きくて、少し大きく/小さくしたいときには、sytle:にtransform: translate(-50%, -50%) scale(n, ,m)と記述すると同じ場所でサイズが、x軸方向にn倍、y軸方向にm倍になります。
    　scale( n, m)はscale＝比率なので何となくわかるかと思いますが、その前に書くtranslate(-50%, -50%) がオマジナイで、こうとすることで拡大縮小（scale）や回転（rotate）の中心・軸がアイコンの中心になるのでズレずに扱えます。

　全体の仕上がりはこんな感じ。シーリングライトのオンオフでのアイコンの違いは既定値（デフォルト）でHome Assistantにお任せです。

4.3.7. 状態によって画像を変える＜窓・ドアなど＞

　次は窓が開いているか閉まっているかを見た目で分かるようにしましょう。

  - type: image
    title: 窓（勉強部屋南窓）
    entity: binary_sensor.xiaomi_door_window_01_contact
    tap_action:
      action: more-info
    image: /local/floorplan/window/1w02_1FStudyRoomSouthWindow_close.png
    state_image:
      'on': /local/floorplan/window/1w02_1FStudyRoomSouthWindow_open.png
    style:
      top: 82.93%
      left: 30.86%
      width: 18.80%

　type: imageは、画像ファイルを表示する部品です。

  • entity:には窓の開閉センサーを指定します。
  • tap_action:のaction: more-infoはタップ/クリックすると詳細表示画面を表示するモノ。
  • image:には「閉」の画像（PNGファイル）を指定。
  • state_image:は条件で表示するファイルを変えたいときに指定するので、ここでは'on': 「開の画像ファイル」とします。
  • style:の中にwidth:があります。窓枠（壁の隙間）にぴったりはまるように幅を相対（％）で指定します。これをしておかないとpicture-elementsカードの表示を拡大・縮小した時に窓はみ出たりします。width, top, leftの計算方法はのちほど。

　「state_image:にon/off両方記述すれば良いじゃないか」という声が聞こえてきますが、まあ、それでも動きます。というかそれが正しい使い方ですね。
　たまたま上記の様に記述すると、closeの時の画像が強制的にグレー（不活性）に変更されてちょうど良いかな、と思ってこうしています。

　さてstylle:のwidth, top, leftを計算で出してみます。まずはInkscapeで対象となる窓やドアを選択します。これはPNGファイルを作った時と同じで「開」「閉」の両方の図を選択します。

　Inkscapeの赤枠で囲った部分の数値を読み取ってメモっておきます。

勉強部屋の窓
画像位置 X 45.068 mm
画像位置 Y 240.777 mm
画像サイズ 幅 39.484mm
画像サイズ 高さ 11.066 mm

　見取り図全体のサイズは、A4(210 x 297 mm)に設定しています。

見取り図全体 (A4)
mmサイズ 横 210 mm
mmサイズ 縦 297 mm

　では計算です。基本は、「窓・ドア画像」/ 「全体」で割合が出ます。


で実際に計算すると勉強部屋の窓は下記の通り、となります。

style:
top = ( 240.777 + (11.066 / 2 ) ) / 297 = 82.93 %
left = ( 45.068 + ( 39.484 / 2 ) )/ 210 = 30.86 %
width = 39.484 / 210 = 18.80%

4.3.8. 状態によってアイコンを変える＜鍵＞

　窓の鍵が閉まっている時と開いている時で、表示するアイコンを変えたいのですが、ここで問題発生。type: imageにはstate_image:があり状態(State)によって画像が切り替えられました。じゃtype: iconで同じようなことが出来るか、というそんな機能はなく、単にicon:でアイコン(mdi:xxxxxなど)が設定できるだけなのですが。state_iconがあるといいのですけどね。
　そこでちょっと力技ですが、開と閉のアイコンを別々にダウンロードしておいて、それを「画像」として取り扱うことで疑似的にアイコンの切り替えを実現することに。

  - type: image
    title: 窓ロック（勉強部屋南窓）
    entity: binary_sensor.xiaomi_door_window_05_contact
    tap_action:
      action: more-info
    state_image:
      'on': /local/floorplan/icon/icon_lock-open.png
      'off': /local/floorplan/icon/icon_lock.png
    style:
      top: 80.5%
      left: 31%
      width: 4%
      transform: translate(-50%, -50%) scale(1.25, 1.25)

　ということで、ほとんど上の「状態によって画像を変える」と同じ話に。ここでの記述の様に、image:の記述をなくして、state_image:にonとoffのPNGファイルの記述をするのが正しいstate_image:の使い方でしょう。（ちなみにonやoffのどちらかの記述をなくすと、その状態のときはアイコンが表示されなくなります。）
　

4.3.9. カメラ画像を埋め込む

　画像（PNGファイル）を指定して画像を任意の場所に表示するのは、窓・ドア、鍵などでやりましたが、応用例としてcamera_image:にカメラのストリーム画像を指定すると、カメラの画像を小さく埋め込むこととが出来ます。

  - type: image
    title: 監視カメラ画像（庭西側）
    entity: camera.tapo_c520ws_1_sub
    camera_image: camera.tapo_c520ws_1_sub
    style:
      top: 87.5%
      left: 30%
      width: 10%


（画像がモノクロなのは、夜だからです…赤外線ライトで結構明るく見えますね）

5. おわりに

　縦長（Vertical、スマホ用）は出来ましたので、あとはキオスク用の横長（Horizontal）ですね。背景（枠、部屋）や窓などを、どんどん90°回転させて（ちょっと座標計算をやり直して）配置していくだけですね。頑張ろう！

maky-ba.hatenablog.com

*1:サイズを画面に合わせて縮小拡大するならベクターファイルの方が向いているとは思うのですが、今なら高解像度画像を無理矢理小さい画面で表示させればOKというリソース無駄遣いで問題無、なのでしょうね。

*2:英語の検索キーワードにしたfloorplanですが、そもそもfloorplanとは何でしょうか？floorplanは英語で「間取り図」のこと。検索結果を見ると、欧米の方の家は部屋数が多いですねぇ。ガレージもでかいし。改めて画像で検索してみると2D：3D＝1:3ぐらいですね。皆様頑張っている様子…

*3:なんて事を言っているうちに雨戸（電動シャッター）が壊れた…。スマートな電動シャッターってあるのか？

*4:私が知らないだけかも。cssとかで出来るのかな。