HA彩平图UI分享（2024-11-17阶段性更新）-保姆级教程！

消逝 · 发表于 2024-8-9 22:41:23

本帖最后由消逝于 2024-8-9 22:43 编辑

18、右边动作调修改对应实体就行了

          - type: image
            info: '************************    右边状态栏    ************************'
          - type: custom:button-card
            styles:
              grid:
                - grid-template-areas: |
                    "bar1" "bar2" "bar3" "bar4" "bar5" "bar6"
                - grid-template-columns: 60px
                - grid-template-rows: 80px 80px 80px 80px 80px 80px
              card:
                - '--mdc-ripple-press-opacity': 0
                - width: 60px
                - height: 480px
            style:
              left: 970px
              top: 460px
            custom_fields:
              bar1:
                card:
                  type: custom:button-card
                  entity: sensor.fullroom_climate_num
                  tap_action:
                    action: more-info
                  show_icon: true
                  show_name: true
                  icon: mdi:air-conditioner
                  name: 空调
                  custom_fields:
                    num: |
                      [[[ return states['sensor.fullroom_climate_num'].state;]]]
                  styles:
                    custom_fields:
                      num:
                        - background: >
                            [[[ var num
                            =states['sensor.fullroom_climate_num'].state;
                                if (num> 0) return 'DeepSkyBlue';
                                if (num==0) return 'transparent';   ]]]
                        - color: >
                            [[[ var num
                            =states['sensor.fullroom_climate_num'].state;
                                if (num> 0) return 'white';
                                if (num==0) return 'transparent';  ]]]
                        - padding: 1px 1px 0 1px
                        - font-size: 12px
                        - font-weight: bold
                        - width: 16px
                        - height: 16px
                        - border-radius: 100%
                        - position: absolute
                        - margin-left: 40px
                        - align-self: start
                    icon:
                      - padding: 5px 0 0 0
                      - color: >
                          [[[ var num
                          =states['sensor.fullroom_climate_num'].state;
                              if (num> 0) return 'DeepSkyBlue';
                              if (num==0) return 'white';  ]]]
                    name:
                      - padding: 0 0 5px 0
                      - font-size: 14px
                      - font-weight: bold
                    card:
                      - '--mdc-ripple-press-opacity': 0.1
                      - padding: 0 0 0 0
                      - width: 60px
                      - height: 65px
                      - border-radius: 10px
                      - background: >-
                          linear-gradient(180deg, transparent 0%,rgba(0,0,0,0.4)
                          50%)
              bar2:
                card:
                  type: custom:button-card
                  entity: sensor.fullroom_humidifier_num
                  tap_action:
                    action: more-info
                  show_icon: true
                  show_name: true
                  icon: mdi:air-humidifier
                  name: 加湿器
                  custom_fields:
                    num: >
                      [[[ return
                      states['sensor.fullroom_humidifier_num'].state;]]]
                  styles:
                    custom_fields:
                      num:
                        - background: >
                            [[[ var num
                            =states['sensor.fullroom_humidifier_num'].state;
                                if (num> 0) return 'DeepSkyBlue';
                                if (num==0) return 'transparent';   ]]]
                        - color: >
                            [[[ var num
                            =states['sensor.fullroom_humidifier_num'].state;
                                if (num> 0) return 'white';
                                if (num==0) return 'transparent';  ]]]
                        - padding: 1px 1px 0 1px
                        - font-size: 12px
                        - font-weight: bold
                        - width: 16px
                        - height: 16px
                        - border-radius: 100%
                        - position: absolute
                        - margin-left: 40px
                        - align-self: start
                    icon:
                      - padding: 5px 0 0 0
                      - color: >
                          [[[ var num
                          =states['sensor.fullroom_humidifier_num'].state;
                              if (num> 0) return 'DeepSkyBlue';
                              if (num==0) return 'white';  ]]]
                    name:
                      - padding: 0 0 5px 0
                      - font-size: 14px
                      - font-weight: bold
                    card:
                      - '--mdc-ripple-press-opacity': 0.1
                      - padding: 0 0 0 0
                      - width: 60px
                      - height: 65px
                      - border-radius: 10px
                      - background: >-
                          linear-gradient(180deg, transparent 0%,rgba(0,0,0,0.4)
                          50%)
              bar3:
                card:
                  type: custom:button-card
                  entity: sensor.fullroom_fan_num
                  tap_action:
                    action: more-info
                  show_icon: true
                  show_name: true
                  icon: mdi:air-purifier
                  name: 净化器
                  custom_fields:
                    num: |
                      [[[ return states['sensor.fullroom_fan_num'].state;]]]
                  styles:
                    custom_fields:
                      num:
                        - background: >
                            [[[ var num
                            =states['sensor.fullroom_fan_num'].state;
                                if (num> 0) return 'LimeGreen';
                                if (num==0) return 'transparent';   ]]]
                        - color: >
                            [[[ var num
                            =states['sensor.fullroom_fan_num'].state;
                                if (num> 0) return 'white';
                                if (num==0) return 'transparent';  ]]]
                        - padding: 1px 1px 0 1px
                        - font-size: 12px
                        - font-weight: bold
                        - width: 16px
                        - height: 16px
                        - border-radius: 100%
                        - position: absolute
                        - margin-left: 40px
                        - align-self: start
                    icon:
                      - padding: 5px 0 0 0
                      - color: |
                          [[[ var num =states['sensor.fullroom_fan_num'].state;
                              if (num> 0) return 'LimeGreen';
                              if (num==0) return 'white';  ]]]
                    name:
                      - padding: 0 0 5px 0
                      - font-size: 14px
                      - font-weight: bold
                    card:
                      - '--mdc-ripple-press-opacity': 0.1
                      - padding: 0 0 0 0
                      - width: 60px
                      - height: 65px
                      - border-radius: 10px
                      - background: >-
                          linear-gradient(180deg, transparent 0%,rgba(0,0,0,0.4)
                          50%)
              bar4:
                card:
                  type: custom:button-card
                  entity: sensor.fullroom_yuba_num
                  tap_action:
                    action: more-info
                  show_icon: true
                  show_name: true
                  icon: mdi:hvac
                  name: 浴霸
                  custom_fields:
                    num: |
                      [[[ return states['sensor.fullroom_yuba_num'].state;]]]
                  styles:
                    custom_fields:
                      num:
                        - background: >
                            [[[ var num
                            =states['sensor.fullroom_yuba_num'].state;
                                if (num> 0) return 'DarkOrange';
                                if (num==0) return 'transparent';   ]]]
                        - color: >
                            [[[ var num
                            =states['sensor.fullroom_yuba_num'].state;
                                if (num> 0) return 'white';
                                if (num==0) return 'transparent';  ]]]
                        - padding: 1px 1px 0 1px
                        - font-size: 12px
                        - font-weight: bold
                        - width: 16px
                        - height: 16px
                        - border-radius: 100%
                        - position: absolute
                        - margin-left: 40px
                        - align-self: start
                    icon:
                      - padding: 5px 0 0 0
                      - color: |
                          [[[ var num =states['sensor.fullroom_yuba_num'].state;
                              if (num> 0) return 'DarkOrange';
                              if (num==0) return 'white';  ]]]
                    name:
                      - padding: 0 0 5px 0
                      - font-size: 14px
                      - font-weight: bold
                    card:
                      - '--mdc-ripple-press-opacity': 0.1
                      - padding: 0 0 0 0
                      - width: 60px
                      - height: 65px
                      - border-radius: 10px
                      - background: >-
                          linear-gradient(180deg, transparent 0%,rgba(0,0,0,0.4)
                          50%)
              bar5:
                card:
                  type: custom:button-card
                  entity: sensor.fullroom_media_num
                  tap_action:
                    action: more-info
                  show_icon: true
                  show_name: true
                  icon: mdi:multimedia
                  name: 媒体
                  custom_fields:
                    num: |
                      [[[ return states['sensor.fullroom_media_num'].state;]]]
                  styles:
                    custom_fields:
                      num:
                        - background: >
                            [[[ var num
                            =states['sensor.fullroom_media_num'].state;
                                if (num> 0) return 'Magenta';
                                if (num==0) return 'transparent';   ]]]
                        - color: >
                            [[[ var num
                            =states['sensor.fullroom_media_num'].state;
                                if (num> 0) return 'white';
                                if (num==0) return 'transparent';  ]]]
                        - padding: 1px 1px 0 1px
                        - font-size: 12px
                        - font-weight: bold
                        - width: 16px
                        - height: 16px
                        - border-radius: 100%
                        - position: absolute
                        - margin-left: 40px
                        - align-self: start
                    icon:
                      - padding: 5px 0 0 0
                      - color: >
                          [[[ var num
                          =states['sensor.fullroom_media_num'].state;
                              if (num> 0) return 'Magenta';
                              if (num==0) return 'white';  ]]]
                    name:
                      - padding: 0 0 5px 0
                      - font-size: 14px
                      - font-weight: bold
                    card:
                      - '--mdc-ripple-press-opacity': 0.1
                      - padding: 0 0 0 0
                      - width: 60px
                      - height: 65px
                      - border-radius: 10px
                      - background: >-
                          linear-gradient(180deg, transparent 0%,rgba(0,0,0,0.4)
                          50%)
              bar6:
                card:
                  type: custom:button-card
                  entity: sensor.fullroom_other_num
                  tap_action:
                    action: more-info
                  show_icon: true
                  show_name: true
                  icon: mdi:tune-variant
                  name: 其他
                  custom_fields:
                    num: |
                      [[[ return states['sensor.fullroom_other_num'].state;]]]
                  styles:
                    custom_fields:
                      num:
                        - background: >
                            [[[ var num
                            =states['sensor.fullroom_other_num'].state;
                                if (num> 0) return 'OrangeRed';
                                if (num==0) return 'transparent';   ]]]
                        - color: >
                            [[[ var num
                            =states['sensor.fullroom_other_num'].state;
                                if (num> 0) return 'white';
                                if (num==0) return 'transparent';  ]]]
                        - padding: 1px 1px 0 1px
                        - font-size: 12px
                        - font-weight: bold
                        - width: 16px
                        - height: 16px
                        - border-radius: 100%
                        - position: absolute
                        - margin-left: 40px
                        - align-self: start
                    icon:
                      - padding: 5px 0 0 0
                      - color: >
                          [[[ var num
                          =states['sensor.fullroom_other_num'].state;
                              if (num> 0) return 'OrangeRed';
                              if (num==0) return 'white';  ]]]
                    name:
                      - padding: 0 0 5px 0
                      - font-size: 14px
                      - font-weight: bold
                    card:
                      - '--mdc-ripple-press-opacity': 0.1
                      - padding: 0 0 0 0
                      - width: 60px
                      - height: 65px
                      - border-radius: 10px
                      - background: >-
                          linear-gradient(180deg, transparent 0%,rgba(0,0,0,0.4)
                          50%)

消逝 · 发表于 2024-8-9 22:45:28

本帖最后由消逝于 2024-8-9 22:58 编辑

19、全屋空调、加湿器直接使用的ha自带的恒温器和恒湿器

          - type: custom:popup-card
            entity: sensor.fullroom_climate_num
            style: |
              --popup-min-width: 600px;
            card:
              type: horizontal-stack
              cards:
                - type: thermostat
                  entity: climate.kongtiao_keting
                  features:
                    - type: climate-hvac-modes
                    - style: icons
                      type: climate-fan-modes
                    - style: icons
                      type: climate-swing-modes
                - type: thermostat
                  entity: climate.kongtiao_zhuwo
                  features:
                    - type: climate-hvac-modes
                    - style: icons
                      type: climate-fan-modes
                    - style: icons
                      type: climate-swing-modes

20、净化器、浴霸
使用的是button手搓的的模块
除复制代码外，还需要复制模板内device开头的模板

button_card_templates:
    device_xxxx:
    ……
    device_xxxx:
    ……

          - type: custom:popup-card
            entity: sensor.fullroom_fan_num
            style: |
              --popup-min-width: 600px;
            card:
              type: picture-elements
              image: /local/UI/null30_23.png
              elements:
                - type: custom:button-card
                  style:
                    top: 50%
                    left: 25%
                  template: device
                  variables:
                    entity: fan.jinghuaqi_keting #背景环对应的实体
                    button_num: 2  #第一排是2个按钮还是3个按钮
                    name: 客厅净化器  #显示的名字
                    more_entity: fan.jinghuaqi_keting  #右上角更多关联的实体
                    label_entity: fan.jinghuaqi_keting  #文本状态显示的实体
                    wendu_entity: sensor.jinghuaqi_keting_wendu # 下面小写的温度
                    shidu_entity: sensor.jinghuaqi_keting_shidu # 下面小写的湿度
                    state_entity: sensor.jinghuaqi_keting_pm25 # 中间大的数值
                    unit: µg/m³  # 中间的单位
                    a1_entity: fan.jinghuaqi_keting #第1个操作的按钮的实体
                    a2_entity: fan.jinghuaqi_keting #第2个操作的按钮的实体
                    a3_entity: sensor.jinghuaqi_keting_mode #第3个操作的按钮的实体
                    a4_entity: sensor.jinghuaqi_keting_mode #第4个操作的按钮的实体
                    a5_entity: sensor.jinghuaqi_keting_mode #第5个操作的按钮的实体
                    a1_action: call-service #第1个操作的按钮的执行的动作，服务或者点击
                    a2_action: call-service #第2个操作的按钮的执行的动作，服务或者点击
                    a3_action: call-service #第3个操作的按钮的执行的动作，服务或者点击
                    a4_action: call-service #第4个操作的按钮的执行的动作，服务或者点击
                    a5_action: call-service #第5个操作的按钮的执行的动作，服务或者点击
                    a1_service: script.jinghuaqi_keting_mode_on  #第1个操作的按钮链接的服务
                    a2_service: script.jinghuaqi_keting_mode_off  #第2个操作的按钮链接的服务
                    a3_service: script.jinghuaqi_keting_mode_auto  #第3个操作的按钮链接的服务
                    a4_service: script.jinghuaqi_keting_mode_sleep  #第4个操作的按钮链接的服务
                    a5_service: script.jinghuaqi_keting_mode_favorite  #第5个操作的按钮链接的服务
                    a1_state: 'on'  #第1个按钮显示的状态，on显示灰色
                    a2_state: 'off' #第2个按钮显示的状态，off显示灰色
                    a1_mode: 开机  #第1个按钮显示文本或图标
                    a2_mode: 关机  #第2个按钮显示文本或图标
                    a3_mode: 自动  #第3个按钮显示文本或图标
                    a4_mode: 睡眠  #第4个按钮显示文本或图标
                    a5_mode: 最爱  #第5个按钮显示文本或图标

你敢呲大哥 · 发表于 2024-8-9 22:56:42

专程来看你的贴子

lilili000 · 发表于 2024-8-9 23:10:52

搬张凳子

ltliyue · 发表于 2024-8-10 00:07:37

太牛了，膜拜大佬

liwenle · 发表于 2024-8-10 04:26:30

这个是我见过最好看的主题，想学习

cooliscool · 发表于 2024-8-10 08:42:52

时间怎么设置成秒的？
这个接口的诗词量蛮少的，就那么几首。不知道有没有其他的接口
同时也提供在线接口：https://v2.jinrishici.com/sentence

liberty · 发表于 2024-8-10 08:49:12

感谢分享

心之向阳 · 发表于 2024-8-10 09:09:55

感谢楼主无私奉献，有的一番研究了

mrbryant · 发表于 2024-8-10 10:18:29

11112221222222222222222

		自动登录	找回密码
密码			立即注册

[UI界面] HA彩平图UI分享（2024-11-17阶段性更新）-保姆级教程！