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

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

 找回密码
 立即注册
楼主: 消逝

[UI界面] button_card详细用法教程

  [复制链接]

9

主题

248

帖子

1333

积分

金牌会员

Rank: 6Rank: 6

积分
1333
金钱
1085
HASS币
0
发表于 2024-7-2 23:35:05 | 显示全部楼层
这个是真的很好,谢谢楼主分享,我最近一直想手搓洗衣机就在研究这个卡片
回复

使用道具 举报

20

主题

136

帖子

817

积分

高级会员

Rank: 4

积分
817
金钱
681
HASS币
0
发表于 2024-7-3 01:38:58 | 显示全部楼层
HA新手向大神学习!
回复

使用道具 举报

4

主题

52

帖子

393

积分

中级会员

Rank: 3Rank: 3

积分
393
金钱
341
HASS币
0
发表于 2024-7-3 08:13:23 | 显示全部楼层
图片都不显示了呢
回复

使用道具 举报

0

主题

9

帖子

97

积分

注册会员

Rank: 2

积分
97
金钱
88
HASS币
0
发表于 2024-7-3 14:38:42 | 显示全部楼层
节气怎么获取的
回复

使用道具 举报

0

主题

27

帖子

374

积分

中级会员

Rank: 3Rank: 3

积分
374
金钱
347
HASS币
0
发表于 2024-7-3 14:41:07 | 显示全部楼层
谢谢分享
回复

使用道具 举报

7

主题

114

帖子

1105

积分

金牌会员

Rank: 6Rank: 6

积分
1105
金钱
991
HASS币
0
发表于 2024-7-3 19:56:11 | 显示全部楼层
本帖最后由 hungheo 于 2024-7-3 19:58 编辑

参考楼主的代码,分享一下,我的房间温度卡片,开始没搞懂,后面才知道每个区域都必须是矩形才行,每个矩形区域的宽高都与EXCEL上的一致才行。 屏幕截图 2024-07-03 195018.png

附上代码:
#温度
        - type: custom:button-card
          styles:
            grid:
              - grid-template-areas: |
                  "a1 z1 z1 a2 a3 d1 d1 a4 a5 k k k"
                  "z2 z2 z2 z2 a3 d d d a5 k k k"
                  "a7 a7 a7 z3 a3 a6 a6 a6 a5 k k k"
                  "p p a8 z3 a3 k1 k1 k1 k1 k k k"
                  "p p a9 a9 a9 a9 a9 a9 a9 k k k"
                  "b1 b1 b1 x x x b4 c b5 k k k"
                  "b1 b1 b1 x x x b4 b6 b5 b7 b8 k2"
                  "b1 b1 b1 c1 c1 c1 c1 f1 f1 f1 b8 k2"
                  "b1 b1 b1 f f f f f f f b8 b9"
              - grid-template-columns: 5px 20px 5px 15px 5px 20px 5px 20px 5px 25px 5px 20px
              - grid-template-rows: 10px 55px 5px 15px 5px 35px 5px 5px 25px
            card:
              - width: 150px
              - height: 160px
              - background-color: rgba(0,0,0,0)
          style:
            left: 80px
            top: 500px
          custom_fields:
            k: #客厅
              card:
                type: custom:button-card
                entity: sensor.a4c138d5271a_temperature
                template: wendubeijing
                variables:
                  width: 50px
                  height: 125px
                  font_size: 14px
            k1: #客厅
              card:
                type: custom:button-card
                entity: sensor.a4c138d5271a_temperature
                show_state: false #不显示
                template: wendubeijing
                variables:
                  width: 50px
                  height: 15px
                  font_size: 11px 
            k2: #客厅
              card:
                type: custom:button-card
                entity: sensor.a4c138d5271a_temperature
                show_state: false #不显示
                template: wendubeijing
                variables:
                  width: 20px
                  height: 10px
                  font_size: 11px
            z1: #主卧
              card:
                type: custom:button-card
                entity: sensor.a4c13823df0b_temperature
                show_state: false #不显示
                template: wendubeijing
                variables:
                  width: 25px
                  height: 10px
                  font_size: 14px 
            z2: #主卧
              card:
                type: custom:button-card
                entity: sensor.a4c13823df0b_temperature
                template: wendubeijing
                variables:
                  width: 45px
                  height: 55px
                  font_size: 14px
            z3: #主卧
              card:
                type: custom:button-card
                entity: sensor.a4c13823df0b_temperature
                show_state: false #不显示
                template: wendubeijing
                variables:
                  width: 15px
                  height: 20px
                  font_size: 14px  
            d: #大次卧
              card:
                type: custom:button-card
                entity: sensor.a4c1387d255a_temperature
                template: wendubeijing
                variables:
                  width: 45px
                  height: 55px
                  font_size: 14px
            d1: #大次卧
              card:
                type: custom:button-card
                entity: sensor.a4c1387d255a_temperature
                show_state: false #不显示
                template: wendubeijing
                variables:
                  width: 25px
                  height: 10px
                  font_size: 11px 
            p: #主卫
              card:
                type: custom:button-card
                entity: sensor.0x00158d000444b5af_temperature
                template: wendubeijing
                variables:
                  width: 25px
                  height: 20px
                  font_size: 10px
            x: #小次卧
              card:
                type: custom:button-card
                entity: sensor.a4c13801e940_temperature
                template: wendubeijing
                variables:
                  width: 40px
                  height: 40px
                  font_size: 14px
            c: #次卫
              card:
                type: custom:button-card
                entity: sensor.0x00158d000444b6a2_temperature
                template: wendubeijing
                variables:
                  width: 20px
                  height: 35px
                  font_size: 8px
            f: #厨房
              card:
                type: custom:button-card
                entity: sensor.a4c138d5271a_temperature
                template: wendubeijing
                show_state: false #不显示
                variables:
                  width: 95px
                  height: 25px
                  font_size: 6px
            f1: #厨房
              card:
                type: custom:button-card
                entity: sensor.a4c138d5271a_temperature
                template: wendubeijing
                show_state: false #不显示
                variables:
                  width: 50px
                  height: 5px
                  font_size: 6px



回复

使用道具 举报

10

主题

70

帖子

1533

积分

论坛UI达人

积分
1533
金钱
1453
HASS币
28
 楼主| 发表于 2024-7-3 22:19:03 | 显示全部楼层
hungheo 发表于 2024-7-3 19:56
参考楼主的代码,分享一下,我的房间温度卡片,开始没搞懂,后面才知道每个区域都必须是矩形才行,每个矩形 ...

就是这样的,附上我自己的

QQ截图20240703221613.png

          - type: image
            info: '************************   温度分布图   ************************'
          - type: custom:button-card
            styles:
              grid:
                - grid-template-areas: |
                    "a a a z2 z11 z11 z11 z11 z11 z11"
                    "a a a z2 d1 z12 z12 z12 z12 z12"
                    "z1 z1 z1 z1 d1 z12 z12 z12 z12 z12"
                    "b z3 d d d d d d d z13"
                    "z4 z4 z4 z4 d2 z10 z10 z10 z10 z10"
                    "c c c z5 d2 z9 g1 g1 g g"
                    "c c c z5 z6 z6 z6 z6 g g"
                    "c c c z5 e z7 f z8 g g"
                - grid-template-columns: 25.5px 1.4px 9.8px 2.5px 20px 3px 21.21px 1.8px 24px 14px
                - grid-template-rows: 20px 12px 1.6px 41px 2.3px 7px 3px 26px
              card:
                - width: 125px
                - height: 122px
                - background-color: rgba(0,0,0,0)
            style:
              left: 85px
              top: 680px
            custom_fields:
              a:
                card:
                  type: custom:button-card
                  entity: sensor.wendu_ciwo
                  template: wendubeijing
                  variables:
                    width: 36px
                    height: 30px
                    font_size: 11px
              b:
                card:
                  type: custom:button-card
                  entity: sensor.wendu_chufang
                  template: wendubeijing
                  variables:
                    width: 24px
                    height: 40px
                    font_size: 11px
              c:
                card:
                  type: custom:button-card
                  entity: sensor.wendu_ertongfang
                  template: wendubeijing
                  variables:
                    width: 36px
                    height: 36px
                    font_size: 11px
              d:
                card:
                  type: custom:button-card
                  entity: sensor.wendu_keting
                  template: wendubeijing
                  show_units: true
                  variables:
                    width: 80px
                    height: 40px
                    font_size: 12px
              d1:
                card:
                  type: custom:button-card
                  entity: sensor.wendu_keting
                  template: wendubeijing
                  show_state: false
                  variables:
                    width: 20px
                    height: 14px
                    font_size: 12px
              d2:
                card:
                  type: custom:button-card
                  entity: sensor.wendu_keting
                  template: wendubeijing
                  show_state: false
                  variables:
                    width: 20px
                    height: 10.5px
                    font_size: 12px
              e:
                card:
                  type: custom:button-card
                  entity: sensor.wendu_gonggongweishengjian
                  template: wendubeijing
                  variables:
                    width: 20px
                    height: 26px
                    font_size: 9px
              f:
                card:
                  type: custom:button-card
                  entity: sensor.wendu_zhuwoweishengjian
                  template: wendubeijing
                  variables:
                    width: 20px
                    height: 26px
                    font_size: 9px
              g:
                card:
                  type: custom:button-card
                  entity: sensor.wendu_zhuwo
                  template: wendubeijing
                  variables:
                    width: 36px
                    height: 36px
                    font_size: 11px
              g1:
                card:
                  type: custom:button-card
                  entity: sensor.wendu_zhuwo
                  template: wendubeijing
                  show_state: false
                  variables:
                    width: 23px
                    height: 7px
                    font_size: 9px


回复

使用道具 举报

0

主题

30

帖子

246

积分

中级会员

Rank: 3Rank: 3

积分
246
金钱
216
HASS币
0
发表于 2024-7-4 02:06:55 | 显示全部楼层
这个属实高端了
回复

使用道具 举报

0

主题

14

帖子

146

积分

注册会员

Rank: 2

积分
146
金钱
132
HASS币
0
发表于 2024-7-4 17:45:10 | 显示全部楼层
手搓可太牛了
回复

使用道具 举报

4

主题

45

帖子

362

积分

中级会员

Rank: 3Rank: 3

积分
362
金钱
317
HASS币
0
发表于 2024-7-4 23:54:12 | 显示全部楼层
学习一下
回复

使用道具 举报

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

本版积分规则

Archiver|手机版|小黑屋|Hassbian

GMT+8, 2024-12-14 18:57 , Processed in 0.060427 second(s), 33 queries .

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

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