button_card详细用法教程

PerryLayne

这个是真的很好，谢谢楼主分享，我最近一直想手搓洗衣机就在研究这个卡片

flamestsui

HA新手向大神学习！

KE-HASS

图片都不显示了呢

guogb

节气怎么获取的

walun

谢谢分享

hungheo

参考楼主的代码，分享一下，我的房间温度卡片，开始没搞懂，后面才知道每个区域都必须是矩形才行，每个矩形区域的宽高都与EXCEL上的一致才行。

附上代码：

#温度
        - 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

复制代码

消逝

hungheo 发表于 2024-7-3 19:56
参考楼主的代码，分享一下，我的房间温度卡片，开始没搞懂，后面才知道每个区域都必须是矩形才行，每个矩形 ...

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

          - 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

复制代码

userdragon

这个属实高端了

林不扬

手搓可太牛了

LigTwwl

学习一下