在现代智能家居中，电热毯作为冬季必备的取暖设备，通过 Home Assistant 实现智能化控制可以大大提升使用体验。今天我将分享一个精心设计的电热毯控制卡片配置，支持左右分区控制、状态监控和多种功能操作。

效果预览

功能特点

🎯 核心功能

  • 主开关控制，带有醒目状态指示

  • 左右分区独立控制（档位 + 速热）

  • 实时状态监控（故障检测 + 剩余时间）

  • 一键除螨和定时设置

🎨 设计亮点

  • 响应式布局，适配不同屏幕尺寸

  • 直观的状态颜色反馈

  • 合理的字体大小和间距

  • 统一的视觉风格

安装前提

在开始之前，请确保您的 Home Assistant 已安装以下组件：

必需组件

  • button-card 自定义卡片

  • 电热毯设备已通过 Xiaomi Home 接入 Home Assistant

安装 button-card

通过 HACS 安装或在 configuration.yaml 中添加：

yaml

# configuration.yaml
resources:
  - url: /hacsfiles/lovelace-button-card/button-card.js
    type: module

完整配置代码

yaml

type: vertical-stack
cards:
  # 第一行：主开关和状态
  - type: horizontal-stack
    cards:
      # 主开关（大按钮）
      - type: custom:button-card
        name: 电热毯
        entity: switch.jipin_cn_659146780_tt7xxa_on_p_2_1
        layout: vertical
        show_state: true
        state:
          - value: 'on'
            name: 已开启
            styles:
              icon:
                - color: var(--paper-item-icon-active-color)
                - width: 40px
                - height: 40px
              name:
                - font-size: 14px
                - font-weight: bold
              state:
                - font-size: 12px
                - color: var(--paper-item-icon-active-color)
              card:
                - background-color: 'rgba(255,193,7,0.2)'
                - border: 2px solid var(--paper-item-icon-active-color)
          - value: 'off'
            name: 电热毯
            styles:
              icon:
                - color: var(--disabled-text-color)
                - width: 40px
                - height: 40px
              name:
                - font-size: 14px
                - font-weight: bold
              state:
                - font-size: 12px
                - color: var(--disabled-text-color)
              card:
                - background-color: 'rgba(189,189,189,0.1)'
        tap_action:
          action: toggle
        icon: mdi:blanket
        styles:
          card:
            - padding: 10px
            - height: 100px
          grid:
            - grid-template-areas: '"i" "n" "s"'
            - grid-template-rows: 1fr min-content min-content
            - row-gap: 8px

      # 状态信息区域
      - type: vertical-stack
        cards:
          # 故障状态
          - type: custom:button-card
            entity: sensor.jipin_cn_659146780_tt7xxa_fault_p_2_2
            layout: horizontal
            show_state: true
            show_name: false
            state:
              - value: '故障'
                styles:
                  icon:
                    - color: '#ff3d00'
                  state:
                    - font-size: 12px
                    - font-weight: bold
                    - color: '#ff3d00'
                  card:
                    - background-color: 'rgba(255,61,0,0.1)'
              - value: '无故障'
                styles:
                  icon:
                    - color: '#4caf50'
                  state:
                    - font-size: 12px
                    - color: '#4caf50'
              - operator: default
                styles:
                  icon:
                    - color: '#4caf50'
                  state:
                    - font-size: 12px
                    - color: '#4caf50'
            icon: mdi:alert-circle-outline
            tap_action:
              action: more-info
            styles:
              card:
                - padding: 8px 12px
                - height: 40px
              grid:
                - grid-template-areas: '"i s"'
                - grid-template-columns: 1fr 2fr
                - align-items: center

          # 剩余时间
          - type: custom:button-card
            entity: sensor.jipin_cn_659146780_tt7xxa_left_time_p_4_7
            layout: horizontal
            show_state: true
            show_name: false
            state:
              - value: '0 min'
                styles:
                  icon:
                    - color: var(--disabled-text-color)
                  state:
                    - font-size: 12px
                    - color: var(--disabled-text-color)
              - operator: default
                styles:
                  icon:
                    - color: var(--paper-item-icon-active-color)
                  state:
                    - font-size: 12px
                    - color: var(--paper-item-icon-active-color)
            icon: mdi:timer-outline
            tap_action:
              action: more-info
            styles:
              card:
                - padding: 8px 12px
                - height: 40px
              grid:
                - grid-template-areas: '"i s"'
                - grid-template-columns: 1fr 2fr
                - align-items: center

  # 第二行：左右控制
  - type: horizontal-stack
    cards:
      # 左侧控制
      - type: vertical-stack
        cards:
          - type: custom:button-card
            name: 左档位
            entity: number.jipin_cn_659146780_tt7xxa_left_gears_p_4_2
            layout: vertical
            show_state: true
            show_name: true
            state:
              - operator: default
                styles:
                  name:
                    - font-size: 12px
                  state:
                    - font-size: 14px
                    - font-weight: bold
            icon: mdi:heat-wave
            tap_action:
              action: more-info
            hold_action:
              action: more-info
            styles:
              card:
                - padding: 8px
                - height: 80px
              grid:
                - grid-template-areas: '"i" "n" "s"'
                - grid-template-rows: 1fr min-content min-content
                - row-gap: 4px

          - type: custom:button-card
            name: 左速热
            entity: switch.jipin_cn_659146780_tt7xxa_left_speed_hot_p_4_4
            layout: vertical
            show_state: true
            show_name: true
            state:
              - value: 'on'
                styles:
                  icon:
                    - color: '#ff9800'
                  name:
                    - font-size: 12px
                  state:
                    - font-size: 12px
                    - color: '#ff9800'
                  card:
                    - background-color: 'rgba(255,152,0,0.2)'
              - value: 'off'
                styles:
                  icon:
                    - color: var(--disabled-text-color)
                  name:
                    - font-size: 12px
                  state:
                    - font-size: 12px
                    - color: var(--disabled-text-color)
            icon: mdi:flash
            tap_action:
              action: toggle
            styles:
              card:
                - padding: 8px
                - height: 80px
              grid:
                - grid-template-areas: '"i" "n" "s"'
                - grid-template-rows: 1fr min-content min-content
                - row-gap: 4px

      # 右侧控制
      - type: vertical-stack
        cards:
          - type: custom:button-card
            name: 右档位
            entity: number.jipin_cn_659146780_tt7xxa_right_gears_p_4_3
            layout: vertical
            show_state: true
            show_name: true
            state:
              - operator: default
                styles:
                  name:
                    - font-size: 12px
                  state:
                    - font-size: 14px
                    - font-weight: bold
            icon: mdi:heat-wave
            tap_action:
              action: more-info
            hold_action:
              action: more-info
            styles:
              card:
                - padding: 8px
                - height: 80px
              grid:
                - grid-template-areas: '"i" "n" "s"'
                - grid-template-rows: 1fr min-content min-content
                - row-gap: 4px

          - type: custom:button-card
            name: 右速热
            entity: switch.jipin_cn_659146780_tt7xxa_right_speed_hot_p_4_5
            layout: vertical
            show_state: true
            show_name: true
            state:
              - value: 'on'
                styles:
                  icon:
                    - color: '#ff9800'
                  name:
                    - font-size: 12px
                  state:
                    - font-size: 12px
                    - color: '#ff9800'
                  card:
                    - background-color: 'rgba(255,152,0,0.2)'
              - value: 'off'
                styles:
                  icon:
                    - color: var(--disabled-text-color)
                  name:
                    - font-size: 12px
                  state:
                    - font-size: 12px
                    - color: var(--disabled-text-color)
            icon: mdi:flash
            tap_action:
              action: toggle
            styles:
              card:
                - padding: 8px
                - height: 80px
              grid:
                - grid-template-areas: '"i" "n" "s"'
                - grid-template-rows: 1fr min-content min-content
                - row-gap: 4px

  # 第三行：底部功能
  - type: horizontal-stack
    cards:
      # 除螨功能
      - type: custom:button-card
        name: 除螨
        entity: switch.jipin_cn_659146780_tt7xxa_anti_acne_p_4_6
        layout: vertical
        show_state: true
        show_name: true
        state:
          - value: 'on'
            name: 除螨
            styles:
              icon:
                - color: '#2196f3'
              name:
                - font-size: 12px
              state:
                - font-size: 12px
                - color: '#2196f3'
              card:
                - background-color: 'rgba(33,150,243,0.2)'
          - value: 'off'
            name: 除螨
            styles:
              icon:
                - color: var(--disabled-text-color)
              name:
                - font-size: 12px
              state:
                - font-size: 12px
                - color: var(--disabled-text-color)
        icon: mdi:bug
        tap_action:
          action: toggle
        styles:
          card:
            - padding: 8px
            - height: 80px
          grid:
            - grid-template-areas: '"i" "n" "s"'
            - grid-template-rows: 1fr min-content min-content
            - row-gap: 4px

      # 定时功能
      - type: custom:button-card
        name: 定时
        entity: number.jipin_cn_659146780_tt7xxa_timer_p_4_1
        layout: vertical
        show_state: true
        show_name: true
        state:
          - operator: default
            styles:
              name:
                - font-size: 12px
              state:
                - font-size: 14px
                - font-weight: bold
        icon: mdi:clock-outline
        tap_action:
          action: more-info
        hold_action:
          action: more-info
        styles:
          card:
            - padding: 8px
            - height: 80px
          grid:
            - grid-template-areas: '"i" "n" "s"'
            - grid-template-rows: 1fr min-content min-content
            - row-gap: 4px

使用说明

操作指南

  • 主开关：点击切换电热毯开关状态

  • 档位按钮：点击查看当前档位，长按调整档位

  • 速热开关：点击开启/关闭速热功能

  • 除螨功能：点击开启/关闭除螨模式

  • 定时设置：点击查看剩余时间，长调整定时

状态指示

  • 🟡 黄色边框：设备已开启

  • 🔴 红色背景：设备故障

  • 🟢 绿色图标：设备运行正常

  • 🟠 橙色背景：速热功能开启

  • 🔵 蓝色背景：除螨功能开启

自定义调整

修改实体ID

如果您的电热毯实体ID不同，只需将配置中的所有实体ID替换为您的实际ID即可。

调整颜色主题

您可以根据自己的主题修改颜色值：

yaml

# 修改主色调
- color: '#2196f3'  # 蓝色主题色
# 可替换为：
- color: '#e91e63'  # 粉色
- color: '#9c27b0'  # 紫色
- color: '#ff5722'  # 深橙色

调整布局尺寸

如需调整按钮大小，修改 height 和 padding 值：

yaml

styles:
  card:
    - padding: 12px    # 内边距
    - height: 90px     # 按钮高度

结语

这个电热毯控制卡片经过多次优化，在美观性和实用性之间取得了很好的平衡。通过清晰的布局和直观的状态反馈，您可以轻松掌控电热毯的各项功能。希望这个配置能为您的智能家居体验增添一份温暖和便利！

如果您在使用过程中遇到任何问题，或有改进建议，欢迎在评论区留言交流。祝您使用愉快！