今天我們來試試看使用Lovelace吧，它是可塑性相當高的面板，我們一樣可以透過UI設定，但yaml一樣可以有更全面的功能。這次想嘗試如果加上了平面圖，簡單把一些裝置加上去並且透過增加entity去直接控制它們。

在總覽我們會看到平常預設的面板，這時候我們進入編輯模式

在上面HOME的右邊加號新增另一面版避免影響到原本的，命名為TEST，新增後就會長得像下圖一樣空白。

因為一般的功能比較直觀易懂，我們直接進入如何加入floor plan並進行一些簡單的設定吧。

首先把平面圖儲存，我是直接上傳到網路獲得路徑，但也可以儲存在HA的local然後設定路徑即可。
接下來新增想要的面板，加入平面圖要選擇「圖片要素面板」，這樣就可以在選定的圖片上疊加自己想要的entity並設定想要的狀態。

我設置了三樣，我自己的狀態、感測器溫度以及智慧燈泡的狀態。他們各自都還可以在設定更詳細的內容，然後提一下智慧燈泡的state icon，他本來就預設tap_action 為toggle，所以不用特別設置。只要我們點它，就可以直接控制燈泡的狀態了。

這是可以使用的type:

• State Badge
• State Icon
• State Label
• Service Call Button
• Icon
• Image
• Conditional
• Custom

以下是我簡易設定範例

type: picture-elements
image: https://i.imgur.com/wNEWWV8.png
elements:
  - type: state-badge
    entity: person.dogdog
    style:
      top: 40%
      left: 30%
  - type: state-badge
    entity: sensor.dht_sensor_temperature
    style:
      top: 30%
      left: 10%
      color: black
  - type: state-icon
    entity: light.305
    tap_action:
      action: toggle
    style:
      top: 50%
      left: 55%

我的最終目標是希望可以完成3D floor plan，畫面整體看起來會更有趣。
這是預計要使用的工具http://www.sweethome3d.com/download.jsp