這裡先按照floorplan的例子來說明一下怎樣使用這個元件，首先要確認一下floorplan.js已經在resources裡。

確認floorplan.js在resources裡

建立一張卡片取名為FLOORPLAN，或者你喜歡的任意名字，

建立一張卡片取名為FLOORPLAN，或者你喜歡的任意名字

加入這段例子中的程式碼，我們事先可以把下載的例子整個目錄複製到樹莓派伺服器的目錄下（/home/homeassistant/.homeassistant/www/floorplan）。這樣我們就可以看到上圖home.svg出現在螢幕中。

加入這段程式碼

例子中的例項在我們的配置中是不存在的，沒有關係，我們可以找一個自己配置中的例項開關來試一試，體會一下怎樣學習例子的使用方法。

這裡把吊燈的例項加入，開關就可以控制自己室內的吊燈了。

非常簡單，把原來例子中的風扇更換成了我的吊燈例項，就可以在圖片上控制吊燈的開關了。

開關就可以控制我房間裡的吊燈了

這裡只是簡單地體會一下ha-floorplan這個元件的使用，我自己之前做的家庭實際圖片還沒有加上去。主要的原因是我在客廳用了the new iPad(非常古老的第二代iPad)作為中控面板，新的ha-floorplan的圖片不能夠在我的古老的iPad上顯示，我只能考慮使用原始的floorplan元件，裡面有舊的js可以支援以前的第二代iPad顯示圖片。

我之前使用的圖片還需要重新配置一下，畢竟是3年前做的，太古老了。

後面有時間試一試樹莓派HA2021上使用舊的floorplan元件，HA2021具體配置與之前的HA0.114版本會有些變化，所以使用這些自由軟體選擇適合的版本就可以了，不需要使用最新的，一旦更新很多配置可能都需要重新瞭解如何設定。

忘記給布偶貓擦眼屎了