分享：自定义洗衣机状态卡片（带运行动画效果）

853331642

分享：自定义洗衣机状态卡片（带运行动画效果）

大家好！今天给大家分享一个我为洗衣机定制的 Mushroom 模板卡片，这个卡片不仅能显示洗衣机的运行状态、剩余时间，还有一个很酷的动态效果——当洗衣机运行时，徽章图标会自动旋转！

效果展示

• 当洗衣机关机时：显示"已关机"
• 当洗衣机开机但未运行程序时：显示"已开机"
• 当洗衣机运行程序时：显示当前洗衣模式和剩余时间，同时徽章图标旋转

代码分享

type: custom:mushroom-template-card
layout: horizontal
primary: |-
  {% if states("binary_sensor.a08222021fda_laundrycyclestatus") == 'on' %}
    洗衣机 - {{states('select.a08222021fda_laundrycycle')}}
  {% else %}
    洗衣机
  {% endif %}
secondary: |-
  {% if states("binary_sensor.a08222021fda_laundrycyclestatus") == 'on' %}
    剩余时间 {{ states('sensor.a08222021fda_remainingtimehh') }}:{{ '%02d' | format(states('sensor.a08222021fda_remainingtimemm') | int) }}
  {% elif states("switch.a08222021fda_onoffstatus") == 'on' %}
    已开机
  {% else %}
    已关机
  {% endif %}
icon: mdi:washing-machine
entity: switch.a08222021fda_onoffstatus
badge_icon: |-
  {% if states("binary_sensor.a08222021fda_laundrycyclestatus") == 'on' %}
  mdi:pinwheel
  {% endif %}
badge_color: |-
  {% if states("binary_sensor.a08222021fda_laundrycyclestatus") == 'on' %}
    #ff9f09
  {% endif %}
icon_color: |
  {% if states('switch.a08222021fda_onoffstatus') == 'on' %}
    red
  {% endif %}
fill_container: true
card_mod:
  style: |
    ha-card {
      --card-primary-font-size: 32px;
      --card-secondary-font-size: 16px;
    }
    {% if states("binary_sensor.a08222021fda_laundrycyclestatus") == 'on' %}
    ha-card .badge ha-icon {
      animation: spin 2s linear infinite;
    }
    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
    {% endif %}

使用说明

1. 需要安装以下HACS前端插件：

   • Mushroom Cards
   • card-mod

2. 需要替换代码中的实体ID为你自己的洗衣机实体：

   • switch.a08222021fda_onoffstatus - 洗衣机开关状态
   • binary_sensor.a08222021fda_laundrycyclestatus - 洗衣机运行状态
   • select.a08222021fda_laundrycycle - 洗衣模式
   • sensor.a08222021fda_remainingtimehh - 剩余小时
   • sensor.a08222021fda_remainingtimemm - 剩余分钟

3. 可以根据需要调整字体大小和动画速度

技术说明

• 使用 card_mod 实现了徽章图标的旋转动画
• 通过条件判断实现不同状态下的显示内容
• 使用格式化函数确保分钟显示为两位数

希望这个卡片对大家有用！如果有任何问题或改进建议，欢迎在评论区留言。

gtyun

什么牌子的洗衣机

853331642

gtyun 发表于 2025-4-5 09:48
什么牌子的洗衣机

海尔      

wenbieba

853331642 发表于 2025-4-5 23:15
海尔

海尔现在只要抓包就卡死不能登录