zh_TW
zh_TW en_US
zh_TW
zh_TW en_US
Home Assistant 手把手教學

免外掛免 YAML 程式小白新手打造 Home Assistant 原生入門 Dashboard – Home Assistant 手把手教學 EP 14 

, Modified:
Neil
Neil

雖然我個人比較習慣使用平面圖控制，但平面圖 Dashboard 設置有一定難度，對程式小白來說不太容易入門，今天就來介紹剛入門 Home Assistant 在不依靠任何外掛也不碰 YAML coding 的前提下怎麼建立最基礎的 Dashboard！

如果對平面圖 Dashboard 有興趣的朋友，就直接參考這篇囉：

586094
Home Assistant Floor plan 視覺化平面圖智慧家庭控制新體驗！ – Home Assistant 手把手教學 EP 6
neiltw.com

先看看最終成品

Dashboard 最終成品

在開始之前先做一些基本目標設定：

  1. 因為透過手機 APP 控制是 Dashboard 最頻繁也最方便的使用場景，所以今天介紹的設定都會優先考慮手機操作。
  2. 今天會以最常見的「區域分割」的方式設定 Dashboard，未來你可以再依自己的使用習慣調整。
  3. 今天會使用最常見的裝置類型：冷氣、開關、窗簾，如果你家中有其他類型裝置，再依需求自行增加。

Step 1. 新增畫布

  1. 找到你的 dashboard 點擊右上鉛筆 icon 進入編輯模式
新增畫布
  1. 點選「+」並輸入畫布資訊
    • 標題：顯示在畫面上畫布切換頁籤的文字 (就是「+」左邊的那些)，盡可能簡短好識別
    • 圖示：選擇圖示之後頁籤上就只會顯示圖示，可以讓整個畫面更簡潔，但要注意圖示能否幫助精準識別該頁籤的內容，以今天的 demo，總覽的部分我選擇用圖示，其餘畫布都直接用文字標題
    • URL：在比較進階的應用才會用到，這邊就先輸入該畫布對應的英文名稱就好。
    • 主題：有另外安裝主題才會用到，可以先忽略。
    • 子畫布：也是比較進階的應用才會用到。
    • 面板類別：今天選用「區塊」
    • 最大區塊寬度：這指的是一個橫列最多容納幾個區塊，預設為 4，設定為 2 我個人認為比較適合，當然如果你的螢幕比較寬或是你常用桌機、平板控制，也可以把數值拉大一些。
畫布設定

其實畫布設定完之後就完全可以自由發揮了，但有鑒於有些朋友可能對於建立智慧家庭 Dashboard 完全沒想法，接下來就介紹一些基本款的設定 😎

Step 2. 設定實體章

除了「面板式」類型的畫布之外，在畫布的開頭都預設有「實體章」的區塊。

「實體章」可以讓你快速查看實體的狀態，同時可以快速操作實體 (e.g. 全關燈)，最基本應用就是顯示家中成員在家、離家狀態。

  1. 點擊畫布頂端膠囊形狀的「+」
  2. 選擇「實體」
新增實體章
  1. 選擇對應的人員實體
  2. 開啟「顯示實體照片」(也可以不開，但我覺得顯示頭像比較好看)
  3. 點擊「儲存」
實體章設定

把家中成員都設定上去之後就可以在畫面上看到每個人在家和離家的狀態囉！點擊還可以看到成員最後定位地點的地圖。

實體章設定完成

Step 3. 設定區段標題

  1. 點擊區塊內的「+」
  2. 選擇「標題」
新增區段標題
新增區段標題
  1. 設定「標題」
    • 標題：設定你對這個分區的命名。
    • 圖示 (可選)：選擇適合代表這個房間 (或分區) 的圖示。
    • 實體：這是 Home Assistant 2024.10 的新功能，可以將實體的狀態顯示在標題卡的右側，這裡我選了室內溫度和濕度，你也可以試著選擇其他想要顯示的狀態。
區段標題設定

Step 4. 設定溫控器面板 (空調)

  1. 點擊區塊內的「+」
  2. 選擇「溫控器面板」
新增溫控器面板
新增溫控器面板
  1. 設定「溫控器面板」
    • 實體：選擇所屬區域的空調實體。
    • 名稱：設定顯示在介面上的名稱，如果沒有輸入則直接使用實體名稱顯示。
    • 附加功能：我這邊選擇「風扇模式」、「HVAC 模式」，不同品牌、不同整合方式可能有不同功能，你可以依自己的狀況和需求選擇功能。
溫控器面板設定
  1. 調整「版面配置」：為了讓最終 Dashboard 更緊湊一點，我選擇將溫控器面板縮小一點，這裡完全可以依照自己的喜好調整。
溫控器面板版面配置設定

Step 5. 設定窗簾卡

  1. 點擊區塊內的「+」
  2. 選擇「資訊方塊面板」
新增窗簾卡
新增窗簾卡
  1. 設定「資訊方塊面板」
    • 實體：選擇所屬區域的窗簾實體。
    • 外觀：可以自訂顯示名稱和圖示，視個人需求選用。
    • 附加功能：我這裡選最常使用的「窗簾位置」。
窗簾卡設定

💡 可以使用「再製」功能快速建立類似的實體卡

再製功能快速建立類似的實體卡

Step 6. 設定開關卡

  1. 點擊區塊內的「+」
  2. 選擇「按鈕面板」
新增開關卡
新增開關卡
  1. 設定「控制面板」
    • 實體：選擇要控制的實體。
    • 名稱：不填則直接顯示實體名稱。
    • 圖示：不選則使用實體原始圖示。
    • 版面配置：就依想要的配置調整。
開關卡設定

大功告成！

接著就依樣畫葫蘆把各個區域設定完成，Home Assistant 最基本的 Dashboard 就完成啦！Home Assistant 入門就是這麼簡單，不用安裝額外的外掛也不用編寫 YAML 就可以完成一個簡單的 Dashboard。

未來可以再視使用狀況逐步強化自己的 Dashboard，把 Home Assistant 打造成適合自己的樣子！

4 COMMENTS

  1. Neil,請問之後會教學外網連入home assistant 裝置嗎？因為爬文後做設定一直失敗😓

    • Hi Hsu,
      請耐心等待囉～原本想走 DuckDNS，但看起來 DuckNDS 會有各種問題，正在嘗試 Cloudflare solution

LEAVE A REPLY

Please enter your comment!
Please enter your name here

你可能會喜歡
最近的討論
  • Jerry 2025/04/14非常感謝Neil無私的分享，您提供的這些網站對我幫助很大。我先收藏好，再來慢慢消化^^ 也期待之後Neil的產業新訊與教學文章Home Assistant Floor plan 視覺化平面圖智慧家庭控制新體驗！ – Home Assistant 手把手教學 EP 6
  • Neil 2025/04/13Hi Jerry, 我通常從這些地方取得關於 HA 的資訊： 網站： – Home Assistant 官方 Release note – Automata – 家庭自動化社群 – 惟家居家智能 FB 社團： – Taiwan Home Assistant 同好交流 – Home Assistant YouTube 頻道： – Smart Home Solver – Everything Smart Home – Home Assistant 程式語言的部分： 嚴格說來 YAML 不太算是程式語言 (先聲明，以免有些人很介意🤣)，不過如果把這些 “看似” 程式語言的資料格式或是樣式語言都算進來，以 HA 中使用深度排序 (越下面越深)： – YAML (資料格式)：HA 環境中很多地方會用到的設定檔用語言。 – CSS (樣式語言)：用來調整介面樣式 (字體大小、顏色、圖片、位置…等)。 – JSON (資料格式)：如果有用 Node-RED 應該會碰到。 – Jinja2 (Python 模板語法)：自動化或是 Dashboard 玩深一點可能會碰到。 ※ 但其實現在的 HA 就算不會上面這些也都可以把智慧家庭弄的很完整了，不見得要給自己這麼多壓力，但如果有興趣多了解一些也不錯 關於裝置支援度 這其實很難一概而論，現在就算家電本身不支援，還是有很多不同的方式可以把傳統家電接入 HA。 另外像海爾這種 case，也確實需要深入研究，通常我會做的就是在網路上爬大量的資訊，通常都會找到其他人做過的嘗試，剛好我最近在查其他資料的時候有看到有人分享海爾熱水器接入 HA 但也確實像你講的，多碰一段時間，就會越來越了解這些細節了 🤣Home Assistant Floor plan 視覺化平面圖智慧家庭控制新體驗！ – Home Assistant 手把手教學 EP 6
  • Jerry 2025/04/10hello Neil： 觀察了1、2天，似乎都正常了，可能是剛建置那段時間，碰到系統不太穩定吧!? 越玩越覺得水很深，也發現自已還有很多不足的，不知Neil是否能分享，教大家怎麼釣魚嗎? 例如推薦不錯的網站、論壇、FB社團、youtube影片，或是指導一下，除了YAML語言外，是不是會一些CSS語法也會有幫助，還需要會其它種語言嗎? 甚至開一個新教學方向，看到標榜有支援APP的非大廠產品(例如大陸的產品)，教大家怎麼辨別能否接入HA，怎麼問客服?從哪裡可看到支援的文章或平台?這類的經驗談，我想對大家也很有幫助。 我目前想買海爾的熱泵電熱水器，海爾在世界來看也是大廠，也有自已的APP，從HACS也有找到海爾的套件，但似乎沒支援熱泵電熱水器，那是否就代表無法接入HA了?或是有什麼管道可以查得到呢? 對岸也有不少平板燈兼風扇功能的燈具，也是標榜支援APP連線，但皆是小廠，也不好辨別能否接入HA。這都是我目前碰到的問題，如果家電買的跟Neil分享的不一樣，就有點不知如何開始。 可能我還太嫩了，再玩個幾個月，也許我以上的問題就不是問題了，哈^^Home Assistant Floor plan 視覺化平面圖智慧家庭控制新體驗！ – Home Assistant 手把手教學 EP 6
  • Neil 2025/04/09Hi Jerry, 我自己測試是沒問題，但要注意的是因為是透過雲端控制，有多一層品牌中介，所以不適合快速切換開關，我自己測試點擊後大約 1 秒左右就同步完成了，記得要在 entities 裡把實體放進去，否則狀態顯示可能會有問題Home Assistant Floor plan 視覺化平面圖智慧家庭控制新體驗！ – Home Assistant 手把手教學 EP 6
  • Jerry 2025/04/07謝謝Neil的解惑。我後來測試，發現使用「按鈕面板」去控制伊萊克斯清淨機(和Neil的同款)的開關，設備會在1秒左右就反應開或關了，但開的「狀態圖示」則慢很多，大約要等個30秒，關的「狀態圖示」則是正常，其它負離子開關的「狀態圖示」和監測燈開關的「狀態圖示」也正常，害我以為同步有狀況。我再測試看看好了，也許是那個地方沒設定好導致的。Home Assistant Floor plan 視覺化平面圖智慧家庭控制新體驗！ – Home Assistant 手把手教學 EP 6
  • Neil 2025/04/07Hi Jerry, 1. 這個方式就是透過雲端整合，實際上就是用 HA 去呼叫小米/伊萊克斯去控制裝置 2. 不太正常，如果有這個狀況可能要看一下你顯示在 floor plan 的實體是不是真正可以代表該裝置的狀態，如果不行可能要換同裝置的其他實體試試看Home Assistant Floor plan 視覺化平面圖智慧家庭控制新體驗！ – Home Assistant 手把手教學 EP 6
  • Jerry 2025/04/07問題解決了，再次感謝Neil的幫忙^^ 另外再請教2個觀念的問題，請教Neil我是否認知有錯誤 1、我透過HACS把小米和伊來克斯的設備連進HA，這中間還是透wifi的方式來連結是吧!?在連結前還需要向官方取得API key、Access Token這方面的資訊，代表HA和設備之間的溝通仍然需要經過官方，只是可以取代官方的APP，全部整合進HA的APP一起控制? 2、經過測試，透過實體操作或原官方APP去操控設備，HA的app是沒辦法同步知道設備的狀態，相反則可以，這是正常的是吧!?例如，家裡的小米電風扇在出門前，被人用實體的方式打開，但人在外面，是無法透過HA的app知道設備忘了關，要連到小米的app才會知道!?Home Assistant Floor plan 視覺化平面圖智慧家庭控制新體驗！ – Home Assistant 手把手教學 EP 6
  • Jerry 2025/04/07Xiaomi Home的國家選擇新加坡就可以用了Home Assistant 必裝外掛 HACS 安裝步驟詳解 – Home Assistant 手把手教學 EP 17
  • Ghost 2025/04/07Xiaomi Home 目前不支援台灣區，暫時還是只能用 Xiaomi Miot Auto 至於 Xiaomi Cloud Map Extractor 目前遇到 2FA 的問題，好像沒有簡單的解法，我自己還沒試成功Home Assistant 必裝外掛 HACS 安裝步驟詳解 – Home Assistant 手把手教學 EP 17
  • Neil 2025/04/07Jerry, 看起來應該是因為疊圖導致點擊動作無法穿透 在換圖的部分 style 加 pointer-events: none 試試看Home Assistant Floor plan 視覺化平面圖智慧家庭控制新體驗！ – Home Assistant 手把手教學 EP 6
你可能會喜歡

© Copyright - SpaceN (https://neiltw.com)