请选择 进入手机版 | 继续访问电脑版

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

 找回密码
 立即注册
查看: 1754|回复: 6

[修仙教程] 數張 HACS Frontend Card 組合製作千變萬化的「動態卡片」

[复制链接]

30

主题

493

帖子

4767

积分

论坛元老

佑桑

Rank: 8Rank: 8

积分
4767
金钱
4259
HASS币
156

教程狂人

发表于 2021-12-28 17:55:25 | 显示全部楼层 |阅读模式
本帖最后由 chinyaolin 于 2021-12-29 13:00 编辑

先來五張卡片的連結

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

需求一:我想將相同特性的 entity_id 「自動的」組合在一起成為一張卡片
  • 數個 entity_id = input_boolean.mydebug_xxxxx_ui 而 friendly_name = mydebug_XXXXX_UI 的實例
  • 單純使用 auto-entities 卡片
  • 00001.jpg
  • 程式碼也很簡單, 重點在於 filter: >> include: >> entity_id: '*.mydebug_*_ui' 這一段過濾條件需要正確指定
    type: custom:auto-entities
    show_empty: true
    card:
      type: entities
      show_header_toggle: true
      title: Debug MODE
    filter:
      include:
        - entity_id: '*.mydebug_*_ui'
    sort:
      method: entity_id
      numeric: false


需求二:卡片上的實例名稱「mydebug_XXXXX_UI」實在太醜了, 美化一下
  • 去除實例名稱中的 mydebug_ 以及 _UI 只保留 XXXXX
  • 除了 auto-entities 之外, 這一次再加上名稱美化神器 template-entity-row
  • 00002.jpg
  • 程式碼變成這樣, 多了一段 options 套用了新加入使用的卡片, 然後用自定義 name, 套用 replace 指令將不要的字串替換掉
    name: {{ state_attr(config.entity, "friendly_name") | replace("mydebug_","")  | replace("_UI", "")}}
    type: custom:auto-entities
    show_empty: true
    card:
      type: entities
      show_header_toggle: true
      title: Debug MODE
    filter:
      include:
        - entity_id: '*.mydebug_*_ui'
          options:
            type: custom:template-entity-row
            name: {{ state_attr(config.entity, "friendly_name") | replace("mydebug_","")  | replace("_UI", "")}}
            toggle: true
    sort:
      method: entity_id
      numeric: false


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

  • 將卡片收折起來, 同時選擇一個適合的元件做為卡片收起來之後的抬頭
  • 引入 fold-entity-row 收折卡片
  • 引入 text-divider-row 做為抬頭
  • 00004.jpg
  • 這裡複雜了點, 由外而內說起
    第一層:官方標準 entities 卡片, 在 entities 下放置一張客製卡片(fold-entity-row)
    第二層:客製卡片(fold-entity-row)下有兩塊, 一塊(head)設定收折時的抬頭, 一塊(entities)設定打開後的內容
    第三層(抬頭):使用客製卡片(text-divider-row)
    第三層(內容):把前面需求二的程式碼套娃進來
    游客,如果您要查看本帖隐藏内容请回复


至於最後一張卡片(flex-table-card), 先幾張圖, 有空再談談
00005.jpg 00006.jpg

ASRock H370 PRO4, 48GB, 8TBx3 + 2TBx3
ESXi 6.7 + Ununtu + Docker + HASS.IO -> Homeassistant OS
(Home Assistant Supervised 官方文件)
回复

使用道具 举报

8

主题

657

帖子

4143

积分

论坛元老

Rank: 8Rank: 8

积分
4143
金钱
3481
HASS币
0
QQ
发表于 2021-12-28 18:07:32 | 显示全部楼层
需求三看起来不错
回复

使用道具 举报

1

主题

34

帖子

499

积分

中级会员

Rank: 3Rank: 3

积分
499
金钱
465
HASS币
0
发表于 2022-2-24 22:31:41 | 显示全部楼层
这是个好玩意
回复

使用道具 举报

0

主题

51

帖子

313

积分

中级会员

Rank: 3Rank: 3

积分
313
金钱
262
HASS币
0
发表于 2022-8-1 21:05:53 来自手机 | 显示全部楼层
二的程式碼套娃進來
回复

使用道具 举报

0

主题

8

帖子

101

积分

注册会员

Rank: 2

积分
101
金钱
93
HASS币
0
发表于 2023-1-23 02:59:28 | 显示全部楼层
实用,看一看
回复

使用道具 举报

0

主题

8

帖子

46

积分

新手上路

Rank: 1

积分
46
金钱
38
HASS币
0
发表于 2023-7-23 00:47:24 | 显示全部楼层
感謝坂大
回复

使用道具 举报

2

主题

45

帖子

227

积分

中级会员

Rank: 3Rank: 3

积分
227
金钱
182
HASS币
0
发表于 2024-2-1 17:06:59 | 显示全部楼层
继续学习美化~~~
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|Hassbian

GMT+8, 2024-3-29 13:16 , Processed in 0.239287 second(s), 33 queries .

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

快速回复 返回顶部 返回列表