作者：鄰家王老

前言：

近年疫情連連，由于工作性質，大部分時間居家辦公了。宅家無事就開始折騰一些簡單的智能家居。剛開始是因為換了個小米生態(tài)鏈的指紋鎖，送了個藍牙網關，于是后來就又添加了點單火開關、溫濕度計、小愛同學和一些智能插座。最早就用米家和小愛來控制，覺得也挺方便，折騰過幾天hass.io，裝完覺得挺雞肋，畢竟我都是小米全家桶，沒必要再用第三方控制，就刪了。直到有一天，家里的豬隊友拿回來個homepod mini，還說要用siri來控制開關，我就只能又走上折騰之路了。之前裝hass.io的是一臺蝸牛星際，性能略差，跑hass會影響上面的其他服務的性能。后來又買了臺j3455+8G內存的nas，這次也只裝了homeassistant，沒裝全套，對系統(tǒng)的性能影響就小的多了。初步調通后，功能基本實現了，就是感覺略丑。后來當我看到網上大神的作品后，被驚艷到了，于是就琢磨也整個差不多的3D Floorplan界面。

正題：

需求：在home assistant主界面中加入3D效果圖，并實時顯示當前開關狀態(tài)和光線渲染效果，并可通過點擊圖片上的icon直接進行操作。（復刻上圖效果）

準備素材：首先需要有3D房型效果圖，包括各個房間關燈狀態(tài)和開燈狀態(tài)的圖。

這里如果你當初裝修設計時，設計公司給過圖或者你和他們關系好能弄到，那是最好。沒有的話，可以去一些房產中介網站上找找同小區(qū)同樣房型的圖，說不定有。當然，有耐心的話就自己畫，現在有很多超簡單的軟件能實現這個需求，pc端，網頁端，平板端都有。我是用pc端的sweethome來畫的。至于這個軟件怎么用，不在本篇范圍內。

這里我拿臥室為例，臥室正中和靠窗處分別有一個可智能控制的燈。這里就需要生成3張圖，一張是燈全關狀態(tài)下的圖，作為底圖。然后再生成2張單個燈打開狀態(tài)的效果圖，這2張圖需要用ps處理成半透明的，等下需要在home assistant里疊在底圖上。

在home assistant中實現：Lovelace里添加一個圖片元素卡片。圖片元素卡片不同于其他類型的卡片，它并沒有可視化的編輯器可用，這里就需要純寫代碼了，不過代碼其實很簡單。

關于圖片元素卡片的幾個變量和參數：

首先介紹一下變量image，這就是卡片的底圖，我就用那張燈光全關的圖來做底圖，這樣，在燈打開后，疊一層開燈狀態(tài)的圖上去就可以了。這里填上圖片在服務器上的路徑，home assistant中的local目錄指的是homeassistant根目錄下的www目錄，圖片放到這里。

然后是變量elements，它下面有幾個參數，首先type代表元素的類型，這里用到了圖片元素和圖標元素，分別是image和state-icon。

-image: 圖片元素，由off和on參數來表示開光狀態(tài)下分別顯示哪張圖片。off狀態(tài)下，我就顯示一張完全透明的圖片，然后在on狀態(tài)下，顯示開燈的效果圖。位置居中擺放，entity指向對應的開關實例。

-state-icon：圖標元素，entity指向對應的開關實例，tap_action指按下后觸發(fā)的動作，既然是開關，那就選toggle。icon指使用系統(tǒng)內哪個圖標，這里是個燈，就使用燈泡的圖標：mdi:lightbulb。網上有home assistant所有圖標的索引，可以自己查找合適的圖標。（https://mdi.bessarabov.com/）style下面可以自己寫css樣式表，熟悉css的朋友可以自己玩出花來，普通用戶就寫些最基本的背景色、大小、邊框之類的吧，可以看我圖上的那些。css怎么寫，本篇也不累述。

圖片元素卡片中使用最多的就是這2個變量了，有多個開關或設備，就按對應添加多個元素，需要注意的是，每個元素的疊放是有上下順序的，寫在前面的元素會疊在最下方。我示例中，圖片元素-image寫在了圖標-state-icon前面，那它就會出現在按鈕的下面，如果寫反了的話，圖標就會被圖片擋住按不到了。

看一下預覽效果，保存后就完成了。

尾聲：

目前，照上述方法，我完成了整個房型的總平面圖和各個房間單獨的效果圖。初步還算滿意，效果圖看久了還是覺得稍微有點粗糙，以后如果發(fā)現更好的軟件，可能會更新這些圖片。之前預設的需求基本都達成了，在home assistant中點擊各個燈或開關的圖標可以打開對應的設備并在效果圖上實時顯示。如果通過siri或小愛同學語音操控這些設備，在home assistant中也能正確顯示實時狀態(tài)。簡單折騰了一番也算學到了不少沒用的技能，心中略感喜悅，于是來大媽上水一篇經驗，希望對有同樣需求的值友有些許幫助。