Home Assistant 卡片分享（八）晾衣架控制卡片配置分享

效果预览

打造一个既美观又实用的晾衣架控制面板，让你的智能家居体验更上一层楼

功能概述

这款晾衣架控制卡片集成了以下所有功能：

升降控制：上升、停止、下降三个核心功能
灯光控制：独立的照明开关
智能功能：UV杀菌、风干/烘干模式选择
状态监控：实时显示各项功能的剩余时间
故障提醒：设备异常状态即时提示

卡片配置代码

yaml

type: vertical-stack
cards:
  # 第一行：升降控制（突出显示）
  - type: horizontal-stack
    cards:
      - type: custom:button-card
        name: 上升
        icon: mdi:arrow-up
        tap_action:
          action: call-service
          service: cover.open_cover
          service_data:
            entity_id: cover.renx_cn_876603365_pinsh_s_2_airer
        styles:
          card:
            - background: var(--primary-color)
            - color: white
            - border-radius: 16px
            - font-weight: bold
            - font-size: 20px
            - height: 100px
          icon:
            - width: 40px
            - height: 40px
            - color: white
          name:
            - font-weight: bold
            - font-size: 18px

      - type: custom:button-card
        name: 停止
        icon: mdi:stop
        tap_action:
          action: call-service
          service: cover.stop_cover
          service_data:
            entity_id: cover.renx_cn_876603365_pinsh_s_2_airer
        styles:
          card:
            - background: orange
            - color: white
            - border-radius: 16px
            - height: 100px
            - font-size: 18px
          icon:
            - width: 35px
            - height: 35px
            - color: white
          name:
            - font-weight: bold
            - font-size: 16px

      - type: custom:button-card
        name: 下降
        icon: mdi:arrow-down
        tap_action:
          action: call-service
          service: cover.close_cover
          service_data:
            entity_id: cover.renx_cn_876603365_pinsh_s_2_airer
        styles:
          card:
            - background: var(--accent-color)
            - color: white
            - border-radius: 16px
            - height: 100px
            - font-size: 18px
          icon:
            - width: 35px
            - height: 35px
            - color: white
          name:
            - font-weight: bold
            - font-size: 16px

  # 第二行：功能按钮
  - type: horizontal-stack
    cards:
      # 照明按钮
      - type: custom:button-card
        entity: light.renx_cn_876603365_pinsh_s_3_light
        name: 照明
        icon: mdi:ceiling-light
        tap_action:
          action: toggle
        styles:
          card:
            - border-radius: 12px
            - height: 80px
            - background: var(--paper-card-background-color)
            - border: 2px solid var(--primary-color)
          icon:
            - width: 25px
            - height: 25px
          name:
            - font-size: 14px
        state:
          - value: 'on'
            styles:
              card:
                - background: yellow
                - border: 2px solid orange
              icon:
                - color: black
          - value: 'off'
            styles:
              icon:
                - color: var(--primary-color)

      # UV杀菌
      - type: custom:button-card
        entity: switch.renx_cn_876603365_pinsh_uv_p_2_8
        name: UV杀菌
        icon: mdi:weather-sunny
        tap_action:
          action: toggle
        styles:
          card:
            - border-radius: 12px
            - height: 80px
            - background: var(--paper-card-background-color)
            - border: 2px solid purple
          icon:
            - width: 25px
            - height: 25px
          name:
            - font-size: 14px
        state:
          - value: 'on'
            styles:
              card:
                - background: lavender
              icon:
                - color: purple
          - value: 'off'
            styles:
              icon:
                - color: gray

        # 消毒剩余时间
        label: |
          [[[ 
            const time = states['sensor.renx_cn_876603365_pinsh_left_time_p_2_9'].state;
            return time === '0' ? '完成' : `${time}Min`;
          ]]]

      # 风干功能
      - type: custom:button-card
        entity: select.renx_cn_876603365_pinsh_dryer_p_2_5
        name: 风干
        icon: mdi:weather-windy
        tap_action:
          action: more-info
        styles:
          card:
            - border-radius: 12px
            - height: 80px
            - background: var(--paper-card-background-color)
            - border: 2px solid blue
          icon:
            - width: 25px
            - height: 25px
          name:
            - font-size: 14px
        state:
          - value: '风干'
            styles:
              card:
                - background: lightblue
              icon:
                - color: blue
          - value: '烘干'
            styles:
              card:
                - background: wheat
              icon:
                - color: orange
          - value: '风干待机'
            styles:
              icon:
                - color: gray

        # 风干剩余时间
        label: |
          [[[ 
            const time = states['sensor.renx_cn_876603365_pinsh_left_time_p_2_10'].state;
            return time === '0' ? '完成' : `${time}Min`;
          ]]]

      # 烘干状态
      - type: custom:button-card
        entity: sensor.renx_cn_876603365_pinsh_left_time_p_2_7
        name: 烘干
        icon: mdi:heat-wave
        tap_action:
          action: more-info
        styles:
          card:
            - border-radius: 12px
            - height: 80px
            - background: wheat
            - border: 2px solid orange
          icon:
            - width: 25px
            - height: 25px
            - color: orange
          name:
            - font-size: 14px

        # 烘干剩余时间
        label: |
          [[[ 
            const time = entity.state;
            return time === '0' ? '完成' : `${time}Min`;
          ]]]

  # 第三行：故障状态
  - type: conditional
    conditions:
      - entity: sensor.renx_cn_876603365_pinsh_fault_p_2_1
        state_not: '正常'
    card:
      type: custom:button-card
      entity: sensor.renx_cn_876603365_pinsh_fault_p_2_1
      name: 设备故障
      icon: mdi:alert-circle
      styles:
        card:
          - background: pink
          - color: darkred
          - border-radius: 12px
          - font-weight: bold
          - height: 60px
        icon:
          - color: darkred

设计特点

🎨 视觉设计

层次分明：升降控制按钮最大，功能按钮适中，状态显示最小
色彩搭配：使用主题色彩，不同功能配以不同颜色标识
圆角设计：统一的圆角风格，提升视觉美感

📱 布局结构

三行布局：升降控制 → 功能按钮 → 状态提示
主次分明：最常用的升降功能占据最突出位置
空间利用：合理利用屏幕空间，信息密度适中

🔧 交互体验

状态反馈：按钮状态变化有明确的视觉反馈
智能标签：剩余时间动态显示，完成时自动切换状态
条件显示：故障状态只在异常时出现，不占用正常使用空间

安装说明

前置要求

已安装 Home Assistant
已安装 button-card 自定义组件
晾衣架设备已接入 Home Assistant

配置步骤

将上述代码复制到你的 Lovelace 配置中
确保所有实体 ID 与你的系统匹配
根据需要调整颜色和尺寸参数
保存配置并刷新页面

自定义建议

颜色调整

你可以根据你的主题调整颜色：

yaml

# 使用主题变量
- background: var(--primary-color)
- background: var(--accent-color)

# 使用固定颜色
- background: "#2196F3"  # 蓝色
- background: "#4CAF50"  # 绿色

尺寸调整

如果需要调整按钮大小，修改以下参数：

yaml

- height: 100px    # 按钮高度
- width: 25px      # 图标宽度
- font-size: 14px  # 字体大小

使用技巧

快速操作：直接点击按钮执行相应功能
状态查看：功能按钮下方显示剩余时间
模式切换：点击风干按钮可切换不同工作模式
故障处理：出现故障时底部会显示红色警告

总结

这个晾衣架控制卡片设计充分考虑了用户体验和视觉美感，将复杂的功能通过简洁的界面呈现出来。通过合理的布局和色彩设计，让用户可以快速找到需要的功能，同时通过状态反馈了解设备运行情况。

希望这个配置能帮助你打造更好的智能家居体验！如果你有任何改进建议或问题，欢迎在评论区留言讨论。