作者：鄰家王老

前言：

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

正題：

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

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

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

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

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

關(guān)于圖片元素卡片的幾個變量和參數(shù)：

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

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

-image: 圖片元素，由off和on參數(shù)來表示開光狀態(tài)下分別顯示哪張圖片。off狀態(tài)下，我就顯示一張完全透明的圖片，然后在on狀態(tài)下，顯示開燈的效果圖。位置居中擺放，entity指向?qū)?yīng)的開關(guān)實(shí)例。

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

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

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

尾聲：

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