『瀚思彼岸』» 智能家居技术论坛

标题: 數張 HACS Frontend Card 組合製作千變萬化的「動態卡片」 [打印本页]

---

作者: chinyaolin    时间: 2021-12-28 17:55
标题: 數張 HACS Frontend Card 組合製作千變萬化的「動態卡片」


先來五張卡片的連結

• auto-entities -> https://github.com/thomasloven/lovelace-auto-entities
  

• template-entity-row -> https://github.com/thomasloven/lovelace-template-entity-row
  

• fold-entity-row -> https://github.com/thomasloven/lovelace-fold-entity-row
  

• text-divider-row -> https://github.com/iantrich/text-divider-row
• flex-table-card -> https://github.com/custom-cards/flex-table-card
  

• 透過 HACS 或是每張卡片中都有手動安裝的說明
  

需求一：我想將相同特性的 entity_id 「自動的」組合在一起成為一張卡片

• 數個 entity_id = input_boolean.mydebug_xxxxx_ui 而 friendly_name = mydebug_XXXXX_UI 的實例
• 單純使用 auto-entities 卡片
• [attach]34304[/attach]
• 程式碼也很簡單, 重點在於 filter: >> include: >> entity_id: '*.mydebug_*_ui' 這一段過濾條件需要正確指定
  
  1. type: custom:auto-entities
     
  2. show_empty: true
     
  3. card:
     
  4.   type: entities
     
  5.   show_header_toggle: true
     
  6.   title: Debug MODE
     
  7. filter:
     
  8.   include:
     
  9.     - entity_id: '*.mydebug_*_ui'
     
  10. sort:
      
  11.   method: entity_id
      
  12.   numeric: false

  复制代码
  
  

需求二：卡片上的實例名稱「mydebug_XXXXX_UI」實在太醜了, 美化一下

• 去除實例名稱中的 mydebug_ 以及 _UI 只保留 XXXXX
• 除了 auto-entities 之外, 這一次再加上名稱美化神器 template-entity-row
• [attach]34305[/attach][attach]34305[/attach]
• 程式碼變成這樣, 多了一段 options 套用了新加入使用的卡片, 然後用自定義 name, 套用 replace 指令將不要的字串替換掉
  name: {{ state_attr(config.entity, "friendly_name") | replace("mydebug_","")  | replace("_UI", "")}}
  1. type: custom:auto-entities
     
  2. show_empty: true
     
  3. card:
     
  4.   type: entities
     
  5.   show_header_toggle: true
     
  6.   title: Debug MODE
     
  7. filter:
     
  8.   include:
     
  9.     - entity_id: '*.mydebug_*_ui'
     
  10.       options:
      
  11.         type: custom:template-entity-row
      
  12.         name: {{ state_attr(config.entity, "friendly_name") | replace("mydebug_","")  | replace("_UI", "")}}
      
  13.         toggle: true
      
  14. sort:
      
  15.   method: entity_id
      
  16.   numeric: false

  复制代码
  
  

需求三：卡片太佔空間, 收起來比較美觀

• 將卡片收折起來, 同時選擇一個適合的元件做為卡片收起來之後的抬頭
• 引入 fold-entity-row 收折卡片
• 引入 text-divider-row 做為抬頭
• [attach]34307[/attach]
• 這裡複雜了點, 由外而內說起
  第一層：官方標準 entities 卡片, 在 entities 下放置一張客製卡片(fold-entity-row)
  第二層：客製卡片(fold-entity-row)下有兩塊, 一塊(head)設定收折時的抬頭, 一塊(entities)設定打開後的內容
  第三層(抬頭)：使用客製卡片(text-divider-row)
  第三層(內容)：把前面需求二的程式碼套娃進來
  
  

至於最後一張卡片(flex-table-card), 先幾張圖, 有空再談談
[attach]34308[/attach][attach]34309[/attach]

---

作者: QQ617250210    时间: 2021-12-28 18:07
需求三看起来不错

---

作者: 全身发热    时间: 2022-2-24 22:31
这是个好玩意

---

作者: hbxgzhc2    时间: 2022-8-1 21:05
二的程式碼套娃進來

---

作者: geniush    时间: 2023-1-23 02:59
实用,看一看

---

作者: e073116888    时间: 2023-7-23 00:47
感謝坂大

---

作者: zml3589110    时间: 2024-2-1 17:06
继续学习美化~~~

---

作者: uncleice    时间: 2024-7-4 14:54
感谢分享！～

---

作者: 932224322    时间: 2024-7-16 23:30
谢谢分享                                              。

---

作者: fsk2684    时间: 2024-9-3 17:19
6666666666666666666666666666666666

---

作者: chocolatetak    时间: 2024-9-10 22:16
學習學習

---

欢迎光临 『瀚思彼岸』» 智能家居技术论坛 (https://bbs.hassbian.com/)

Powered by Discuz! X3.5