设为首页收藏本站
切换到窄版

 找回密码
 立即注册

微信扫码登录

搜索
『瀚思彼岸』» 智能家居技术论坛»论坛首页 › 〖HomeAssistant〗技术讨论区 › 『HomeAssistant』综合讨论区 › 分享一个仿美的美居空调控制卡片，我的自制卡片集大成作 ...
返回列表 发新帖
查看: 68|回复: 3

[UI界面] 分享一个仿美的美居空调控制卡片，我的自制卡片集大成作品

[复制链接]
gasment 手机认证

38

主题

257

回帖

2301

积分

论坛UI达人

积分
2301
金钱
2001
HASS币
60
发表于 4 小时前 | 显示全部楼层 |阅读模式
先上图对比下，左边是美的美居，右边是自制卡片
f99b076d19ef890fe2f4365a2d0710c3.jpg

布局基本一致，偏紧凑，精简一些没用的功能

动态操作效果：
preview.webp

模板与模块化，主卡片100行yaml，弹窗部件为隐藏式外挂独立卡片，方便维护修改；
抄作业之前请三思，此卡片模板代码非常庞杂（2700+行），如果你没有基础的yaml理解与编辑能力，建议放弃，也建议有一定的css基础，对基本的css style有一定了解，有玩button-card的一些经验，熟悉template与variables的用法
主要功能针对美的、华凌空调配置，其他空调因为实体提供方式不一致，移植需要自行修改对应的模板逻辑
想纯纯抄作业的，可以关掉此页面了

美的、华凌空调使用Midea AC LAN集成接入，需要提供的实体：
  • climate实体，提供hvac_mode为cool/heat/dry/fan_only/auto/off，这个大部分climate实体一致
  • 垂直摆风switch实体，必须
  • 水平摆风switch实体，可选
  • 电源开关switch实体，必须
  • 风速百分比number实体，必须
  • 上下风向select实体，必须
  • 左右风向select实体，可选
  • 防直吹、舒省、睡眠、eco、提示音等switch实体，可选
  • 实时功率sensor实体，可选

另外对小米也做了一点适配，使用Xiaomi Miot集成接入，需要提供的实体：
  • climate实体，同美的
  • 风速档位select实体，必须
  • 垂直摆风switch实体，必须

其他空调需要自行修改模板语法做移植


抄作业之前，安装好以下所有卡片的最新版：


卡片用到的所有图标资源，我会在文中打包好附件

接下来开始操作：

一、插入全局模板配置
  • 下载全局模板配置文件：
    游客，如果您要查看本帖隐藏内容请回复
  • 全局模板包含数个模块配置，需要插入到仪表盘原始配置顶部（views字段前），注意检查插入后的缩进格式
       image.png
       image.png

二、下载图标资源
  • 附件：
    游客，如果您要查看本帖隐藏内容请回复
  • 解压得到ac_card_icon文件夹，将其放入到HA的config/www内的任意目录内，比如/config/www/ac_card_icon
  • 不要修改ac_card_icon文件夹内的文件结构，不要修改任何子文件名，除非你想重写模板


三、配置主卡片
image.png
  • 主卡片配置附件：
    游客，如果您要查看本帖隐藏内容请回复
  • 主卡片yaml代码，所有需要修改的地方都已用注释给出：
type: custom:grid-template-card
template: ac_card_template
variables:
  climate_entity: climate.211106241774699_climate  #修改，你的空调climate实体
  icon_dir: /local/ui_v3/test/ac_card_icon  #修改，你的图标文件夹根目录
  info_temp_entity: 无   #修改，室内温度sensor实体，如无，填写“无”
  info_power_entity: 无   #修改，空调功率sensor实体，如无，填写“无”
  info_power_cost_entity: 无  #修改，空调能耗sensor实体，如无，填写“无”
  commom_function1_switch: switch.211106241774699_indirect_wind  #修改，常用功能区的按钮，模板只支持switch实体，function1~6一致
  commom_function1_name: 防直吹  ##修改，常用功能区的按钮名称，function1~6一致
  commom_function1_icon: /local/ui_v3/test/ac_card_icon/commom/indirect_wind.svg #修改，常用功能区的按钮图标，function1~6一致
  commom_function2_switch: switch.211106241774699_comfort_mode
  commom_function2_name: 舒省模式
  commom_function2_icon: /local/ui_v3/test/ac_card_icon/commom/comfort_mode.svg
  commom_function3_switch: switch.211106241774699_eco_mode
  commom_function3_name: ECO模式
  commom_function3_icon: /local/ui_v3/test/ac_card_icon/commom/eco_mode.svg
  commom_function4_switch: switch.211106241774699_sleep_mode
  commom_function4_name: 睡眠模式
  commom_function4_icon: /local/ui_v3/test/ac_card_icon/commom/sleep_mode.svg
  commom_function5_switch: switch.211106241774699_prompt_tone
  commom_function5_name: 提示音
  commom_function5_icon: /local/ui_v3/test/ac_card_icon/commom/prompt_tone.svg
  commom_function6_switch: 无   #修改，如无按钮配置，填写“无”，无需再配置名称与按钮
  power_state_entity: switch.211106241774699_power   #修改，空调的电源实体，模板只支持switch实体
custom_grid_areas:
  temp_ctl:
    card:
      custom_grid_areas:
        bar:  #温控区滑块配置
          card:
            type: custom:slider-mod-card    
            value_range_min: 17       #修改，空调最低温度值
            value_range_max: 30       #修改，空调最高温度值
            value_range_step: 0.5     #修改，温度值步进
            sync_value: |       #修改，climate实体id，需要返回当前设定温度属性值
              [[[
                    var value = states[`climate.211106241774699_climate`].attributes.target_temperature;  
                    return value
              ]]]
            tap_action:
              action: perform-action
              perform_action: climate.set_temperature
              target:
                entity_id: climate.211106241774699_climate #修改，climate实体id
              data:
                temperature: value_range
  mode_fan:   
    card:   
      type: custom:grid-template-card
      custom_grid_areas:
        mode:
          card:
            type: custom:popup-button-card
            name: 运行模式
            variables:
              climate_entity: climate.211106241774699_climate   #修改，你的climate实体id
              icon_dir: /local/ui_v3/test/ac_card_icon   #修改，你的图标文件夹根目录
            content:
              from_id: 2f_mainbedroom_ac_mode_popup  #修改，你的运行模式弹窗id
        fan:
          card:
            type: custom:popup-button-card
            name: 风速&风向
            variables:
              climate_entity: climate.211106241774699_climate  #修改，你的climate实体id
              fan_entity: number.211106241774699_fan_speed  #修改，你的风速实体，支持百分比number与档位select实体
              wind_ud_angle_entity: select.211106241774699_wind_ud_angle  #修改，你的上下风向select实体，如果无，可以填写垂直扫风的switch实体
              icon_dir: /local/ui_v3/test/ac_card_icon  #修改，你的图标文件夹根目录
            content:
              from_id: 2f_mainbedroom_ac_fan_popup  #修改，你的风速风向弹窗id
  commom:
    card:
      type: custom:grid-template-card
      name: 常用功能
      styles:
        grid:   #如果你用不到全部6个按钮，按钮布局不会自动调整， 需要手动修改grid布局配置
          - grid-template-areas: |
              "name name name "
              "function1 function2 function3"
              "function4 function5 function6"
          - grid-template-columns: auto auto auto
          - grid-template-rows: 30px 40px 30px
          - justify-items: center
  power_timeset:
    card:
      type: custom:grid-template-card
      custom_grid_areas:
        timeset:
          card:
            type: custom:popup-button-card
            variables:
              timer_entity: timer.2f_zhu_wo_kong_diao_ding_shi  #修改，你的定时器辅助元素实体
              icon_dir: /local/ui_v3/test/ac_card_icon  #修改，你的图标文件夹根目录
            content:
              from_id: 2f_mainbedroom_ac_timeset  #修改，你的定时器弹窗id


四、配置运行模式弹窗
image.png
  • 运行模式弹窗配置附件：
    游客，如果您要查看本帖隐藏内容请回复
  • 运行模式弹窗yaml代码，所有需要修改的地方都已用注释给出：
type: custom:popup-button-card
card_function: content
content_id: 2f_mainbedroom_ac_mode_popup  #修改，你的运行模式弹窗id，需要与主卡片中的对应
content:
  card:
    type: custom:grid-template-card
    template: ac_card_hvac_mode_popup_template
    variables:
      icon_dir: /local/ui_v3/test/ac_card_icon  #修改，你的图标文件夹根目录
    custom_grid_areas:
      mode:
        card:
          type: custom:grid-button-card
          sync_state_delay: 3000  #按钮同步延迟（ms）,如果你的空调反应很慢，可以把延迟调大，防止动画效果回溯
          variables:
            entity: climate.211106241774699_climate   #修改，你的climate实体id
            icon_dir: /local/ui_v3/test/ac_card_icon  #修改，你的图标文件夹根目录
            option1: cool     #一般不用修改，需要与climate实体的hvac_mode选项值严格配对，option1~6一致
            option1_name: 制冷
            option2: heat
            option2_name: 制热
            option3: dry
            option3_name: 除湿
            option4: fan_only
            option4_name: 送风
            option5: auto
            option5_name: 自动
            option6: "off"
            option6_name: 关机

五、配置风速风向模式弹窗
此弹窗有3个样式，按需选择
1、全功能，空调需要支持百分比风速，上下风向角度调节，左右风向角度调节
image.png
2、单上下风向，空调只有上下风向角度调节，风速百合比
image.png
3、风速没有百分比，只有档位，且没有上下风向角度调节
image.png

全功能版本
  • 配置附件：
    游客，如果您要查看本帖隐藏内容请回复
  • yaml代码：
type: custom:popup-button-card
card_function: content
content_id: 2f_mainbedroom_ac_fan_popup  #修改，你的风速风向弹窗id，需要与主卡片中的对应
content:
  card:
    type: custom:grid-template-card
    template: ac_card_fan_mode_popup_template
    variables:
      icon_dir: /local/ui_v3/test/ac_card_icon  #修改，你的图标文件夹根目录
      fan_speed_entity_type: number  #修改，你的风速实体类型，可选number、select
      fan_speed_entity: number.211106241774699_fan_speed  #修改，你的风速实体id
    custom_grid_areas:
      fan_auto:
        card:
          type: custom:grid-template-card
          tap_action:   #自动风速的服务调用方式，此处为美的华凌的方法
            action: midea_ac_lan.set_attribute
            data:
              device_id: 211106241774699  #空调id，与climate实体中的一致
              attribute: fan_speed
              value: auto
      fan_speed:
        card:
          type: custom:slider-mod-card
          value_range_min: 1   #修改，风速滑动条最小值
          value_range_max: 100  #修改，风速滑动条最大值
          value_range_step: 1   #修改，风速滑动条步进
          name: |  #修改，风速number实体id
            [[[    
                if (states[`number.211106241774699_fan_speed`].state > 100){
                  return "风速 · 自动"
                } else {
                   return "风速 · " + states[`number.211106241774699_fan_speed`].state+"%"
                }
            ]]]
          sync_value: |  #修改，风速number实体id
            [[[
                  var value = states[`number.211106241774699_fan_speed`].state;
                  return value
            ]]]
          tap_action:
            action: perform-action
            perform_action: number.set_value
            target:
              entity_id: number.211106241774699_fan_speed  #修改，风速number实体id
            data:
              value: value_range
      ud_angle:
        card:
          type: custom:grid-button-card
          variables:
            entity: select.211106241774699_wind_ud_angle #修改，你的上下风向select实体id
            icon_dir: /local/ui_v3/test/ac_card_icon  #修改，你的图标文件夹根目录
            option1: up    #一般不用修改，需要与select实体的option值严格匹配，option1~6一致
            option2: up-mid
            option3: middle
            option4: down-mid
            option5: down
            option6: "off"
            vertical_switch_entity: switch.211106241774699_swing_vertical  #修改，你的上下扫风switch实体
          sync_state_delay: 5000  #同步延迟
      lr_angle:
        card:
          type: custom:grid-button-card
          variables:
            entity: select.211106241774699_wind_lr_angle  #修改，你的左右风向select实体id
            icon_dir: /local/ui_v3/test/ac_card_icon    #修改，你的图标文件夹根目录
            option1: left   #一般不用修改，需要与select实体的option值严格匹配，option1~6一致
            option2: left-mid
            option3: middle
            option4: right-mid
            option5: right
            option6: "off"
            horizontal_switch_entity: switch.211106241774699_swing_horizontal  #修改，你的左右扫风switch实体
          sync_state_delay: 5000  #同步延迟

单上下风向版本
  • 配置附件：
    游客，如果您要查看本帖隐藏内容请回复
  • yaml代码：
type: custom:popup-button-card
card_function: content
content_id: 2f_mainbedroom_ac_fan_popup-type2   #修改，你的风速风向弹窗id，需要与主卡片中的对应
content:
  card:
    type: custom:grid-template-card
    template: ac_card_fan_mode_popup_only_ud_angle_template
    variables:
      icon_dir: /local/ui_v3/test/ac_card_icon  #修改，你的图标文件夹根目录
      fan_speed_entity_type: number   #修改，你的风速实体类型，可选number、select
      fan_speed_entity: number.160528700994507_fan_speed  #修改，你的风速实体id
    custom_grid_areas:
      fan_auto:
        card:
          type: custom:grid-template-card
          tap_action:   #自动风速的服务调用方式，此处为美的华凌的方法
            action: midea_ac_lan.set_attribute
            data:
              device_id: 160528700994507    #空调id，与climate实体中的一致
              attribute: fan_speed
              value: auto
      fan_speed:
        card:
          type: custom:slider-mod-card
          value_range_min: 1   #修改，风速滑动条最小值
          value_range_max: 100  #修改，风速滑动条最大值
          value_range_step: 1   #修改，风速滑动条步进
          name: | #修改，风速number实体id
            [[[
                if (states[`number.160528700994507_fan_speed`].state > 100){
                  return "风速 · 自动"
                } else {
                   return "风速 · " + states[`number.160528700994507_fan_speed`].state+"%"
                }
            ]]]
          sync_value: |   #修改，风速number实体id
            [[[
                  var value = states[`number.160528700994507_fan_speed`].state;
                  return value
            ]]]
          tap_action:
            action: perform-action
            perform_action: number.set_value
            target:
              entity_id: number.160528700994507_fan_speed   #修改，风速number实体id
            data:
              value: value_range
      ud_angle:
        card:
          type: custom:grid-button-card
          variables:
            entity: select.160528700994507_wind_ud_angle  #修改，你的上下风向select实体id
            icon_dir: /local/ui_v3/test/ac_card_icon  #修改，你的图标文件夹根目录
            option1: up      #一般不用修改，需要与select实体的option值严格匹配，option1~6一致
            option2: up-mid
            option3: middle
            option4: down-mid
            option5: down
            option6: "off"
            vertical_switch_entity: switch.160528700994507_swing_vertical   #修改，你的上下扫风switch实体
          sync_state_delay: 5000      #同步延迟

无百分比无风向版本
  • 配置附件：
    游客，如果您要查看本帖隐藏内容请回复
  • yaml配置
type: custom:popup-button-card
card_function: content
content_id: 2f_secbedroom_ac_fan_popup    #修改，你的风速风向弹窗id，需要与主卡片中的对应
content:
  card:
    type: custom:grid-template-card
    template: ac_card_fan_mode_popup_level_type_template
    variables:
      icon_dir: /local/ui_v3/test/ac_card_icon    #修改，你的图标文件夹根目录
    custom_grid_areas:
      fan_speed:
        card:
          custom_grid_areas:
            fan_level_6:
              card:
                type: custom:grid-button-card
                variables:
                  level_entity: select.zhimi_ma4_89b8_fan_level  #修改，你的风速档位select实体id
                  level_1_option: Level1  #一般不用修改，需要与风速档位select实体的option值严格匹配，level_1~6一致
                  level_1_name: 1档
                  level_2_option: Level2
                  level_2_name: 2档
                  level_3_option: Level3
                  level_3_name: 3档
                  level_4_option: Level4
                  level_4_name: 4档
                  level_5_option: Level5
                  level_5_name: 5档
                  level_6_option: Auto
                  level_6_name: 自动
                sync_state_delay: 1000  #同步延迟
      ud_angel:
        card:
          type: custom:grid-template-card
          name: 垂直扫风
          custom_grid_areas:
            option:
              card:
                type: custom:grid-button-card
                variables:
                  sw_entity: switch.zhimi_ma4_89b8_vertical_swing  #修改，你的垂直扫风switch实体id
                sync_state_delay: 1000

六、配置计时器弹窗
image.png
  • 配置附件：
    游客，如果您要查看本帖隐藏内容请回复
  • yaml配置：
type: custom:popup-button-card
card_function: content
content_id: 2f_mainbedroom_ac_timeset   #修改，你的定时器弹窗id，需要与主卡片中的对应
content:
  card:
    type: custom:grid-template-card
    template: ac_card_power_timeset_popup_template 
    variables:
      icon_dir: /local/ui_v3/test/ac_card_icon  #修改，你的图标文件夹根目录
    custom_grid_areas:
      timeset:
        card:
          type: custom:countdown-mod-card
          timer_entity: timer.1f_ci_wo_kong_diao_ding_shi    #修改，你的计时器辅助元素实体id
          title: 定时关机
          hour_sensitivity: 5   #修改，小时部分滑动灵敏度
          minute_sensitivity: 1   #修改，分钟部分滑动灵敏度
          hour_step: 1    #修改，小时部分滑动步进
          minute_step: 1    #修改，分钟部分滑动步进
          start_icon: /local/ui_v3/test/ac_card_icon/power_timeset/start.svg  ##修改，开始图标路径
          stop_icon: /local/ui_v3/test/ac_card_icon/power_timeset/stop.svg    #修改，停止图标路径

附加说明：
  • 由于代码量巨大，可能存在排版或拼写错误
  • 各个子卡片的使用方法，我在自制卡片的帖子内都有详细说明
  • 弹窗卡片在非编辑状态时为隐藏，而且不需要与主卡片处于同一视图，可以放到同一仪表盘内的其他视图内
  • “上次耗电”信息实体需要自行创建实体，实体主属性为kwh单位的耗电量，拥有一个子属性“once_time”为单次使用时间，也可以显示其他信息，自行修改模板
       image.png
  • 卡片模板存在局限性，不可能考虑到所有情况，模板外的功能，需要你自己完善，不要指望我更新，我已经不想动这坨屎山了



回复

使用道具 举报

乱世繁华 手机认证

0

主题

13

回帖

88

积分

注册会员

积分
88
金钱
75
HASS币
0
发表于 4 小时前 | 显示全部楼层
xuexixuexi
回复

使用道具 举报

yeilong001 手机认证

0

主题

4

回帖

19

积分

新手上路

积分
19
金钱
15
HASS币
0
发表于 4 小时前 | 显示全部楼层
学习学习
回复

使用道具 举报

fkxldn 手机认证

1

主题

83

回帖

1125

积分

金牌会员

积分
1125
金钱
1041
HASS币
0
发表于 2 小时前 | 显示全部楼层
学习学习
回复

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|Hassbian ( 晋ICP备17001384号-1 )

GMT+8, 2025-11-19 21:38 , Processed in 0.303037 second(s), 5 queries , MemCached On.

Powered by Discuz! X3.5

© 2001-2025 Discuz! Team.

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