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

 找回密码
 立即注册
查看: 13122|回复: 145

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

  [复制链接]

10

主题

70

帖子

1587

积分

论坛UI达人

积分
1587
金钱
1507
HASS币
28
发表于 2024-6-29 20:37:20 | 显示全部楼层 |阅读模式
本帖最后由 消逝 于 2024-8-9 21:01 编辑

1、界面分享:链接:HA彩平图UI分享(2024-08-09更新)-保姆及教程!
2、教程贴:链接:彩平图户型图制作教程
3、教程贴:链接:button_card详细用法
4、教程贴:链接:button_card制作天气ui界面

更新:文本左右对齐方式:使用这个效果更好一些:text-align: left
文本上下对齐方式:align-items: top(需要card,设置padding: 0 0 )
文本超长换行,使用white-space: normal

--------------------以下正文--------------------
github地址:GitHub - custom-cards/button-card: ❇️ Lovelace button-card for home assistant
插件button_card插件能做什么?
    ① 基础功能:可以显示【实体属性值state】、【实体名字name】、【实体文本label】、【实体图标icon】、【实体图片entity_picture】、【实体单位units】
    ② 进阶功能:可以设定【自定义属性variables】
    ③ 进阶功能:可以嵌套if,按设定条件显示想要数值
    ④ 进阶功能:可以嵌套简单的css代码,个性化显示到界面    ⑤ 网格布局:按特定网格布局,手搓显示模块必会
1、布局:layout
    常用的布局如下:
     vertical(默认布局)、icon_name_state、name_state、icon_name、icon_state、icon_label
    结合show_xxxx,决定最终将显示什么及布局时什么样
      show_state: true                   #实体数值:true显示,false不显示
      show_name: true                  #实体名字:true显示,false不显示
      show_label: true                   #实体文本:true显示,false不显示
      show_icon: true                    #实体图标:true显示,false不显示
      show_units: true                   #实体单位:true显示,false不显示
      show_entity_picture: true     #实体图片:true显示,false不显示     布局格式:
      微信截图_20240629211119.png   

          - type: custom:button-card
            entity: fan.jinghuaqi_keting
            layout: vertical
            show_state: true     
            show_name: true       
            show_label: true       
            show_icon: true        
            show_units: true       
            show_entity_picture: true 
            style:
              top: 20%
              left: 30%
              width: 100px
2、属性重定义:可以按照自己需要重定义属性(注:图片的优先级高于icon)
          - type: custom:button-card
            entity: fan.jinghuaqi_keting
            layout: vertical
            show_state: true     
            show_name: true  
            show_label: true       
            show_icon: true        
            show_units: true       
            show_entity_picture: true 
            name: "自定义名称name"
            label: "自定义名称label"
            units: "自定义单位"
            entity_picture: /local/UI/扫地机器人/扫地机器人-停靠.svg
            style:
              top: 20%
              left: 30%
              width: 200px

微信截图_20240629212130.png

3、属性重定义:高级应用,嵌套if,这样就可以根据实体属性state的值来变化相应的属性
          - type: custom:button-card
            entity: fan.jinghuaqi_keting
            layout: vertical
            show_state: true     
            show_name: true  
            show_label: true       
            show_icon: true        
            show_units: true       
            show_entity_picture: true          
            name: |
              [[[
                if (entity.state =='off') return '自定义mame-净化器关闭';   
                if (entity.state =='on')  return '自定义name-净化器开启';   
              ]]]
            label: |            
              [[[
                if (entity.state =='off') return '自定义label-净化器关闭';   
                if (entity.state =='on')  return '自定义label-净化器开启';   
              ]]]
            units: |       
             [[[
                if (entity.state =='off') return '自定义units-净化器关闭';   
                if (entity.state =='on')  return '自定义units-净化器开启';   
              ]]]
            entity_picture: |
              [[[
                if (entity.state =='off') return '/local/UI/扫地机器人/扫地机器人-停靠.svg';   
                if (entity.state =='on')  return '/local/UI/扫地机器人/扫地机器人-清扫.svg';   
              ]]]
            style:
              top: 20%
              left: 30%
              width: 200px

微信截图_20240629212939.png 微信截图_20240629213005.png

3、样式自定义,只列出了常用的,更多内容搜索css代码扩展     我列举了几乎所有可能用到的,部分内容可以举一反三,也可以添加css代码,实际使用按需使用
其中name、state、label都是文本类,是通用的,我只列举部分其中icon、entity_picture都是图片类,是通用的,我只列举部分,注:icon可以定义颜色
其中card里的部分代码也是可以给其他通用的
其中部分是可以做动画的,常用的旋转动画、闪烁动画,对对对,你没看错,就是动画
(注:动画有2种实现方式,一种是代码里实现,一种是使用动图gif或者svg)

          - type: custom:button-card
            entity: fan.jinghuaqi_keting
            layout: vertical
            show_state: true     
            show_name: true  
            show_label: true       
            show_icon: true        
            show_units: true       
            show_entity_picture: true 
            name: "自定义名称name"
            label: "自定义名称label"
            units: "自定义单位"
            #entity_picture: /local/UI/扫地机器人/扫地机器人-停靠.svg
            style:
              top: 50%
              left: 30%
              width: 200px
            styles:
              card:
                #- background: rgba(255,0,0,0.3)   #普通背景色 rgba(r,g,b,透明度),#AAAAAA05,red/blue等也支持
                #                                  #渐变背景色linear-gradient渐变色
                - background: >-
                    linear-gradient(to bottom right,rgb(85,120,150),rgb(12,39,66))
                - width: 400px          # 卡片宽度
                - height: 200px         # 卡片高度
                - border-radius: 10px   #卡片圆角大小
                - border: 8px solid     #卡片边框大小
                - border-color: blue    #卡片边框颜色
                - border-style: dotted  #卡片边框样式:dotted点、dashed虚线、solid实线、double双边框、3D边框(groove、ridge、inset、outset)
                - filter: hue-rotate(10deg)  #背景色的色相(分享帖里的自动变化颜色就是应用这个)
                - transform: rotate(0deg) #卡片旋转90度
                #- animation: blink 1.5s ease infinite  #添加动画,1.5秒间隔闪烁,截图不出来,自己测试看效果
                #- animation: rotating 1.5s linear infinite #添加动画,1.5秒间隔旋转,截图不出来,自己测试看效果
              icon:
                - width: 100px        #图标宽度
                - height: 100px       #图标高度
                - margin-left: 10px   #左边距,左右偏移位置,用于微调左右位置
                - margin-top: 10px    #上边距,上下偏移位置,用于微调上下位置
                - justify-self: start # 对齐方式,start左对齐、center居中对齐、end右对齐、left左对齐、right右对齐
                - background: red     #图标背景色
                - color: white        #图标前景色,图标颜色
                - transform: rotate(90deg) #图标旋转90度
                - animation: rotating 1.5s linear infinite #添加动画,1.5秒间隔旋转,截图不出来,自己测试看效果
              name:
                - color: rgba(255,255,255,0.8)  #文本颜色
                - font-size: 20px               #文本字体大小
                - font-weight: bold             #文本字体宽度,normal:正常粗细=400、bold加粗=700、也可以800、1000这种数值
                - justify-self: center          #文本对齐方式,start左对齐、center居中对齐、end右对齐、left左对齐、right右对齐
                - margin-left: 10px             #左边距,左右偏移位置,用于微调左右位置
                - margin-top: 10px              #上边距,上下偏移位置,用于微调上下位置
                - text-shadow: 0 0.5px black, 0.5px 0 black, -0.5px 0 black, 0 -0.5px black #文本边框0.5,本质是阴影
              label:
                - color: rgba(255,255,255,0.8)
                - font-size: 13px
                #同name部分
              state:
                - color: white
                - font-size: 22px
                #同name部分
              entity_picture:
                #同icon部分



微信截图_20240629222626.png

4、样式自定义,同样兼容if嵌套比如card卡片背景,根据实体数值的大小显示不同的颜色,如温度卡片背景,根据温度显示蓝、绿、橙、红背景色,直观显示温度

            styles:
              card:
                - background: |
                    [[[
                        if (entity.state <  -10 )                      return 'rgba(0,0,255,0.3)';
                        if (entity.state >= -10 && entity.state <  0)  return 'rgba(30,144,255,0.3)';
                        if (entity.state >= 0   && entity.state < 10)  return 'rgba(0,191,255,0.3)';
                        if (entity.state >= 10  && entity.state < 15)  return 'rgba(0,255,255,0.3)';
                        if (entity.state >= 15  && entity.state < 20)  return 'rgba(0,255,127,0.3)';
                        if (entity.state >= 20  && entity.state < 24)  return 'rgba(0,255,0,0.3)';
                        if (entity.state >= 24  && entity.state < 27)  return 'rgba(173,255,47,0.3)';
                        if (entity.state >= 27  && entity.state < 30)  return 'rgba(255,215,0,0.3)';
                        if (entity.state >= 30  && entity.state < 33)  return 'rgba(255,140,0,0.3)';
                        if (entity.state >= 33  && entity.state < 36)  return 'rgba(255,69,0,0.3)';
                        if (entity.state >= 36  && entity.state < 39)  return 'rgba(255,0,0,0.3)';
                        if (entity.state >= 39 )                       return 'rgba(139,0,0,0.3)';
                    ]]] 

5、我们发现定义的东西越多,代码就越长,这时我们可以使用button模板来简化代码,及可读性    这是一个完整代码,格式错误的可以直接复制这个

views:
  - type: panel
    cards:
      - type: picture-elements
        image: /local/UI/null.png
        elements:
          - type: custom:button-card
            entity: sensor.wendu_ciwo
            template: wendubeijing   #调用模板
            variables:
              width: 50px
              height: 50px
              font_size: 12px
            style:
              top: 200px
              left: 400px
          - type: custom:button-card
            entity: sensor.wendu_zhuwo
            template: wendubeijing   #调用模板
            variables:
              width: 50px
              height: 50px
              font_size: 12px
            style:
              top: 300px
              left: 400px
          - type: custom:button-card
            entity: sensor.wendu_keting
            template: wendubeijing   #调用模板
            show_units: true
            variables:
              width: 50px
              height: 50px
              font_size: 12px
            style:
              top: 400px
              left: 400px
button_card_templates:  ###button模板开头,顶格写
  wendubeijing:         ###button模板定义,下面就是常规代码,这是一个温度背景颜色
    show_icon: false
    show_name: false
    show_label: false
    show_state: true
    show_units: false
    styles:
      card:
        - width: '[[[ return  variables.width ]]]'
        - height: '[[[ return  variables.height ]]]'
        - border-radius: 0px
        - border: 0px solid
        - background: |
            [[[
                if (entity.state <  -10 )                      return 'rgba(0,0,255,0.3)';
                if (entity.state >= -10 && entity.state <  0)  return 'rgba(30,144,255,0.3)';
                if (entity.state >= 0   && entity.state < 10)  return 'rgba(0,191,255,0.3)';
                if (entity.state >= 10  && entity.state < 15)  return 'rgba(0,255,255,0.3)';
                if (entity.state >= 15  && entity.state < 20)  return 'rgba(0,255,127,0.3)';
                if (entity.state >= 20  && entity.state < 24)  return 'rgba(0,255,0,0.3)';
                if (entity.state >= 24  && entity.state < 27)  return 'rgba(173,255,47,0.3)';
                if (entity.state >= 27  && entity.state < 30)  return 'rgba(255,215,0,0.3)';
                if (entity.state >= 30  && entity.state < 33)  return 'rgba(255,140,0,0.3)';
                if (entity.state >= 33  && entity.state < 36)  return 'rgba(255,69,0,0.3)';
                if (entity.state >= 36  && entity.state < 39)  return 'rgba(255,0,0,0.3)';
                if (entity.state >= 39 )                       return 'rgba(139,0,0,0.3)';
            ]]] 
      state:
        - text-shadow: 0 0.5px black, 0.5px 0 black, -0.5px 0 black, 0 -0.5px black
        - font-weight: bold
        - font-size: '[[[ return  variables.font_size ]]]'
        - color: white
        - justify-self: center

6、自定义属性variables,和模板可以很好的结合    调用模板时,不可避免的,我们可能不会使用完全相同的模板。这时可以多做一些模板。但是终究还是比较麻烦,那么这个时候我们就可以引用自定义属性,针对不同处的处理
    这里支持if,也支持直接返回,看是实际使用情况

views:
  - type: panel
    cards:
      - type: picture-elements
        image: /local/UI/null.png
        elements:
          - type: custom:button-card
            entity: sensor.wendu_ciwo
            template: wendubeijing   #调用模板
            variables:     #自定义属性
              width: 50px  
              height: 50px
              abc: 净化器
            style:
              top: 200px
              left: 400px
          - type: custom:button-card
            entity: sensor.wendu_ciwo
            template: wendubeijing   #调用模板
            variables:     #自定义属性
              width: 50px  
              height: 50px
              abc: 加湿器
            style:
              top: 300px
              left: 400px
button_card_templates:  ###button模板开头,顶格写
  wendubeijing:         ###button模板定义,下面就是常规代码,这是一个温度背景颜色
    show_icon: false
    show_name: false
    show_label: false
    show_state: true
    show_units: false
    styles:
      card:
        - width: '[[[ return  variables.width ]]]'   #自定义属性宽度,直接返回值
        - height: '[[[ return  variables.height ]]]' #自定义属性宽度,直接返回值
        - border-radius: 0px
        - border: 0px solid
        - background: |
            [[[
                if (variables.abc =='净化器') return 'red';    #自定义属性,净化器显示红色
                if (variables.abc =='加湿器')  return 'blue';  #自定义属性,加湿器显示蓝色
            ]]]
      state:
        - text-shadow: 0 0.5px black, 0.5px 0 black, -0.5px 0 black, 0 -0.5px black
        - font-weight: bold
        - font-size: 13px
        - color: white
        - justify-self: center

7、网格布局,手搓模块必备    其实就是将不同的卡片,封装在一个button_card内,比如一个净化器集合,里面包含开关、状态、数值等等,每个位置的固定等
    首先是怎么定义布局,通常借助下execl表格

微信截图_20240629231842.png

views:
  - type: panel
    cards:
      - type: picture-elements
        image: /local/UI/null.png
        elements:
          - type: custom:button-card
            entity: fan.jinghuaqi_keting
            template: button_back
            style:
              top: 25%
              left: 25%
            custom_fields:
              s:
                card:                                    #引用子卡片
                  type: custom:button-card
                  entity: sensor.jinghuaqi_keting_pm25
                  template: button_state
              u:
                card:
                  type: custom:button-card              #引用子卡片
                  label: µg/m³
                  template: button_label
                  variables:
                    type: unit
              a:
                card:
                  type: custom:button-card              #引用子卡片
                  entity: fan.jinghuaqi_keting
                  template: button_icon
                  variables:
                    mode_name: 开关
                  tap_action:
                    service: script.jinghuaqi_keting_mode_toggle
              b:
                card:                                    #引用子卡片
                  type: custom:button-card
                  entity: sensor.jinghuaqi_keting_mode
                  template: button_icon
                  variables:
                    mode_name: 自动
                  tap_action:
                    service: script.jinghuaqi_keting_mode_auto
              c:
                card:                                     #引用子卡片
                  type: custom:button-card
                  entity: sensor.jinghuaqi_keting_mode
                  template: button_icon
                  variables:
                    mode_name: 睡眠
                  tap_action:
                    service: script.jinghuaqi_keting_mode_sleep
              d:
                card:                                     #引用子卡片
                  type: custom:button-card
                  entity: sensor.jinghuaqi_keting_mode
                  template: button_icon
                  variables:
                    mode_name: 最爱
                  tap_action:
                    service: script.jinghuaqi_keting_mode_favorite
              'n':                                         #引用子卡片
                card:
                  type: custom:button-card
                  label: 客厅净化器
                  template: button_label
                  variables:
                    type: name
              m:                                           #引用子卡片 
                card:
                  type: custom:button-card
                  entity: fan.jinghuaqi_keting
                  template: button_icon
                  show_name: false
                  variables:
                    mode_name: 更多
                  tap_action:
                    action: more-info

button_card_templates:
  button_back:
    show_label: false
    show_name: false
    show_icon: false
    show_state: false
    layout: vertical
    tap_action:
      action: none
    hold_action:
      action: none
    styles:
      grid:
        - grid-template-areas: |                      #卡片布局,参考图片5步
            "z1 x s s z"  
            "z1 x s s u" 
            "z1 a b c d"  
            "n n n n m"
        - grid-template-columns: 10% 20% 20% 20% 20%  #卡片横向每列的宽度
        - grid-template-rows: 25% 30% 20% 25%         #卡片纵向每列的高度
      card:
        - background: |
            [[[
                if (entity.state == 'on' )   return 'radial-gradient(rgba(0,15,35,0.5),rgba(0,5,11,0.5))';
                if (entity.state == 'off' )  return 'rgba(0,0,0,0)';
            ]]]
        - border-radius: 100%
        - border: 8px solid
        - border-color:  'rgba(0,139,0,0.9)'
        - width: 216px
        - height: 216px
  button_state:
    show_name: false
    show_icon: false
    show_state: true
    show_units: false
    layout: vertical
    tap_action:
      action: none
    hold_action:
      action: none
    styles:
      card:
        - width: 120px
        - left: -25px
      state:
        - padding: 10px 0 0 0
        - justify-self: center
        - font-weight: bold
        - font-size: 65px
  button_label:
    show_label: true
    layout: vertical
    tap_action:
      action: none
    hold_action:
      action: none
    styles:
      card:
        - width: |
            [[[  
                if (variables.type =='name' ) return '200px';
                if (variables.type =='unit' ) return '40px';              
            ]]]    
      label:
        - justify-self: center
        - font-weight: bold
        - font-size: |
            [[[
                if (variables.type == 'name') return '15px';
                if (variables.type == 'unit') return '13px';
            ]]]
  button_icon:
    show_entity_picture: true
    show_name: true
    show_icon: true
    show_state: false
    name: '[[[ return variables.mode_name]]]'
    layout: vertical
    tap_action:
      action: call-service
    entity_picture: |
      [[[
          if (variables.mode_name =='开关' && entity.state ==  'off') return '/local/UI/净化器/按钮-开机.svg';
          if (variables.mode_name =='开关' && entity.state ==  'on')  return '/local/UI/净化器/按钮-关机.svg';       
          if (variables.mode_name =='全关' && entity.state ==  'off') return '/local/UI/净化器/按钮-开机.svg';
          if (variables.mode_name =='全关' && entity.state ==  'on')  return '/local/UI/净化器/按钮-关机.svg';  
          if (variables.mode_name =='更多' )                          return '/local/UI/净化器/按钮-更多.svg';  
          if (variables.mode_name =='自动' && entity.state ==  'Auto')      return '/local/UI/净化器/按钮-自动-on.svg';
          if (variables.mode_name =='自动' && entity.state !=  'Auto')      return '/local/UI/净化器/按钮-自动-off.svg';       
          if (variables.mode_name =='睡眠' && entity.state ==  'Sleep')     return '/local/UI/净化器/按钮-睡眠-on.svg';
          if (variables.mode_name =='睡眠' && entity.state !=  'Sleep')     return '/local/UI/净化器/按钮-睡眠-off.svg';   
          if (variables.mode_name =='最爱' && entity.state ==  'Favorite')  return '/local/UI/净化器/按钮-最爱-on.svg';
          if (variables.mode_name =='最爱' && entity.state !=  'Favorite')  return '/local/UI/净化器/按钮-最爱-off.svg';
      ]]]
    styles:
      name:
        - font-size: 10px
      icon:
        - width: 25px


8、差不多就这些了,后续有其他的,也会补充,这个需要自己来回测试
游客,如果您要查看本帖隐藏内容请回复














评分

参与人数 11金钱 +106 HASS币 +10 收起 理由
xiaobai1828 + 5 高手,这是高手!
jyz_0501 + 12 高手,这是高手!
rf5 + 8 高手,这是高手!
深兰之刃 + 5 感谢楼主分享!
q873139535 + 8 论坛有你更精彩!
隔壁的王叔叔 + 12 感谢楼主分享!
isw866 + 8 论坛有你更精彩!
+ 20 + 10 论坛有你更精彩!
yybl + 10 论坛有你更精彩!
summ99111 + 6 感谢楼主分享!
polisher + 12 感谢楼主分享!

查看全部评分

回复

使用道具 举报

20

主题

485

帖子

3204

积分

论坛元老

Rank: 8Rank: 8

积分
3204
金钱
2719
HASS币
8
发表于 2024-6-29 21:44:28 | 显示全部楼层
前段研究了一会儿官方文档,确实强大,要学精通要下些功夫,坐等楼主图文教程
回复

使用道具 举报

10

主题

70

帖子

1587

积分

论坛UI达人

积分
1587
金钱
1507
HASS币
28
 楼主| 发表于 2024-6-29 23:34:40 | 显示全部楼层
cjnt007 发表于 2024-6-29 21:44
前段研究了一会儿官方文档,确实强大,要学精通要下些功夫,坐等楼主图文教程 ...

做完了,,
回复

使用道具 举报

0

主题

16

帖子

71

积分

注册会员

Rank: 2

积分
71
金钱
55
HASS币
0
发表于 2024-6-30 00:40:29 | 显示全部楼层
昨天复制了主题,显示一堆错误,正在找问题
回复

使用道具 举报

0

主题

16

帖子

71

积分

注册会员

Rank: 2

积分
71
金钱
55
HASS币
0
发表于 2024-6-30 02:15:52 | 显示全部楼层
本帖最后由 119977 于 2024-6-30 02:42 编辑

楼主根据主题出个设置教程吧,水平有限,复制不来,没有一个在正常工作,现在卡在lovelace代码.yaml这里,直接复制进去显示N多错误,插件也都装完了,公布一下这个文件吧sensor: !include sensor.yaml
实在是看的头昏 111222.png
回复

使用道具 举报

6

主题

29

帖子

222

积分

中级会员

Rank: 3Rank: 3

积分
222
金钱
193
HASS币
0
发表于 2024-6-30 09:49:09 | 显示全部楼层
119977 发表于 2024-6-30 02:15
楼主根据主题出个设置教程吧,水平有限,复制不来,没有一个在正常工作,现在卡在lovelace代码.yaml这里, ...

因为楼主设有template的模板,你的设备和他的不一样,报错也是正常的
回复

使用道具 举报

10

主题

70

帖子

1587

积分

论坛UI达人

积分
1587
金钱
1507
HASS币
28
 楼主| 发表于 2024-6-30 10:39:51 | 显示全部楼层
119977 发表于 2024-6-30 02:15
楼主根据主题出个设置教程吧,水平有限,复制不来,没有一个在正常工作,现在卡在lovelace代码.yaml这里, ...

sensor里没啥,就是ha自带的time
回复

使用道具 举报

10

主题

70

帖子

1587

积分

论坛UI达人

积分
1587
金钱
1507
HASS币
28
 楼主| 发表于 2024-6-30 10:44:41 | 显示全部楼层
119977 发表于 2024-6-30 02:15
楼主根据主题出个设置教程吧,水平有限,复制不来,没有一个在正常工作,现在卡在lovelace代码.yaml这里, ...
  - platform: time_date
    display_options:
      - 'time'
      - 'date'
      - 'date_time'
      - 'date_time_utc'
      - 'date_time_iso'
      - 'time_date'
      - 'time_utc'
      - 'beat'      
回复

使用道具 举报

0

主题

9

帖子

182

积分

注册会员

Rank: 2

积分
182
金钱
173
HASS币
0
发表于 2024-6-30 19:17:03 | 显示全部楼层
学习学习
回复

使用道具 举报

4

主题

61

帖子

263

积分

中级会员

Rank: 3Rank: 3

积分
263
金钱
202
HASS币
0
发表于 2024-6-30 21:57:21 来自手机 | 显示全部楼层
为啥没有回复呢。是太肝了吗。。。
大佬 插眼
回复

使用道具 举报

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

本版积分规则

Archiver|手机版|小黑屋|Hassbian

GMT+8, 2024-12-22 01:15 , Processed in 0.062578 second(s), 36 queries .

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

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