Pobaby空调卡片

一个功能丰富、界面美观的Home Assistant自定义空调卡片，支持多种空调模式和统计功能。

📸 界面预览

功能特性

核心控制功能

• ✅ 多种模式支持: 制冷、制热、除湿、送风、自动、关闭
• ✅ 风速调节: 支持多种风速模式（自动、静音、低、中、高、强风等）
• ✅ 摆风控制: 支持垂直、水平、双向等多种摆风模式
• ✅ 温度调节: 直观的温度进度条控制，支持拖动和点击调节
• ✅ 实时状态显示: 当前温度、目标温度、运行模式等信息

高级功能

• ✅ 使用统计: 今日、本周、近10日使用次数、时长统计
• ✅ 用电量统计: 支持关联用电量实体，显示用电量数据
• ✅ 动态背景: 根据运行模式自动切换背景颜色和渐变效果
• ✅ 动画效果: 状态切换时的平滑动画过渡
• ✅ 响应式设计: 适配桌面和移动设备

自定义功能

• ✅ 自定义按钮: 支持添加自定义功能按钮
• ✅ 网页嵌入: 支持嵌入外部网页内容
• ✅ 图标支持: 支持Material Design图标
• ✅ 开关控制: 支持关联其他开关实体

安装方法

1. 前置条件

• Home Assistant已安装并运行
• 空调实体已正确配置（climate实体）
• （可选）用电量统计实体（sensor实体）

2. 文件部署

1. 将 pobaby-air_conditioner.js 文件复制到Home Assistant的 www 目录下

   # 例如复制到 /config/www/pobaby-air_conditioner/

2. 在Home Assistant配置文件中添加资源引用

   # configuration.yaml
   lovelace:
     resources:
       - url: /local/pobaby-air_conditioner/pobaby-air_conditioner.js
         type: module

3. 准备空调模式图标（可选）

   • 将图标文件放置在 /config/www/pobaby-air_conditioner/ 目录下（文件中已提供）
   • 支持的模式图标：off.png, cool.png, heat.png, on.png

3. 重启Home Assistant

重启服务使配置生效。

配置参数

基础配置

type: 'custom:pobaby-air-conditioner-card'
entity: climate.air_conditioner  # 必需的空调实体
name: '客厅空调'                # 卡片显示名称
width: '400px'                  # 卡片宽度（可选）

完整配置示例

type: 'custom:pobaby-air-conditioner-card'
entity: climate.living_room_ac
name: '客厅空调'
current_temperature: sensor.living_room_temperature # 配置温度传感器实体
power_display_entity: sensor.ertongfang_ac_gonglv # 配置功率传感器实体
width: 'calc(100vw - 20px)'
power_entity: sensor.ac_power_usage
features:
  - type: toggle
    name: '节能模式'
    service: climate.set_preset_mode
    data:
      preset_mode: 'eco'
    switch_entity: switch.ac_eco_mode
    icon: 'mdi:leaf'
  - type: toggle
    name: '静音'
    service: climate.set_preset_mode
    data:
      preset_mode: 'silent'
    toggle_attribute: 'preset_mode'
    toggle_value: 'silent'
    icon: 'mdi:volume-off'
  - type: toggle
    switch_entity: select.xiaomi_cn_572101627_m6_vertical_angle_p_3_6
    switch_name: ⤓
    toggle_attribute: current_option
    toggle_value: 下定格（地毯风）           # 激活的选项值

swing_buttons:
  - type: toggle
    name: '强力摆风'
    service: climate.set_swing_mode
    data:
      swing_mode: 'strong'
    switch_entity: switch.ac_strong_swing
    icon: 'mdi:wind-power'

  - type: toggle
    switch_entity: select.ac_swing_mode  # 控制select实体
    switch_name: 自动摆风
    toggle_attribute: current_option
    toggle_value: auto  # 激活状态值

webpage:                                    #正常使用不要加此项
  url: 'https://example.com/weather'        #正常使用不要加此项
  width: '100%'                            #正常使用不要加此项
  height: '200px'                           #正常使用不要加此项
  zoom: 0.8                                   #正常使用不要加此项

配置参数详解

必需参数

• entity: 空调实体ID（climate实体）

可选参数

• name: 卡片显示名称
• width: 卡片宽度，支持CSS单位
• power_entity: 用电量统计实体ID（sensor实体）

功能按钮配置

• features: 功能按钮列表
  • type: 按钮类型（toggle-开关类型，webpage-网页打开）
  • name: 按钮显示名称
  • service: 调用的服务
  • data: 服务数据
  • switch_entity: 关联的开关实体（toggle类型）
  • toggle_attribute: 状态检查的属性名
  • toggle_value: 状态检查的属性值
  • icon: Material Design图标
  • url: 网页地址（webpage类型）
  • width/height: 网页窗口尺寸（webpage类型）

摆风按钮配置

• swing_buttons: 自定义摆风按钮列表
  • 配置方式与features类似

网页嵌入配置

• webpage: 嵌入网页配置
  • url: 网页地址
  • width/height: 嵌入区域尺寸
  • zoom: 缩放比例
  • frame_style: 自定义iframe样式

使用说明

基本操作

1. 开关空调: 点击"关"按钮关闭空调
2. 模式切换: 点击对应的模式按钮（❄️-制冷，🔥-制热等）
3. 温度调节:
   • 拖动温度进度条
   • 点击上下箭头
   • 直接点击温度显示区域
4. 风速调节: 选择合适的风速模式
5. 摆风控制: 选择摆风模式和方向

统计功能

• 开启状态: 右上角显示当前时间维度的使用时长
• 关闭状态: 显示详细的使用统计信息
• 点击切换: 点击使用时长区域切换时间维度（今日/本周/近10日）

自定义功能

• 功能按钮: 配置的功能按钮显示在"功能"区域
• 网页打开: 点击网页按钮在新窗口打开指定网页
• 开关控制: 开关类按钮会显示激活状态

支持的空调模式

运行模式

• off: 关闭
• cool: 制冷
• heat: 制热
• dry: 除湿
• fan_only: 送风
• auto: 自动

风速模式

支持自动检测空调实体支持的风速模式，包括：

• 自动、静音、低、中、高、强风
• 数字风速（1-7档）
• 其他自定义风速模式

摆风模式

支持自动检测空调实体支持的摆风模式，包括：

• 关闭、垂直、水平、双向
• 上下、左右等特定方向

故障排除

常见问题

1. 卡片不显示

   • 检查资源引用是否正确
   • 确认文件路径正确
   • 检查浏览器控制台错误信息

2. 实体状态不更新

   • 确认空调实体配置正确
   • 检查实体状态是否正常
   • 重启Home Assistant服务

3. 统计功能异常

   • 确认有足够的历史数据
   • 检查用电量实体配置
   • 查看浏览器控制台错误信息

4. 图标不显示

   • 确认图标文件路径正确
   • 检查文件权限
   • 确认图标文件格式支持

调试方法

1. 打开浏览器开发者工具
2. 查看控制台错误信息
3. 检查网络请求状态
4. 验证实体状态和属性

技术细节

架构说明

• 基于Web Components技术
• 使用Shadow DOM实现样式隔离
• 响应式设计，适配多设备
• 异步数据加载，避免界面卡顿

性能优化

• 状态变化时才触发重渲染
• 使用CSS动画而非JavaScript动画
• 异步加载历史统计数据
• 内存泄漏防护

更新日志

v1.0.0

• 初始版本发布
• 支持基础空调控制功能
• 添加使用统计功能
• 实现响应式设计

v1.0.1

• 使用情况统计新增缓存，优化数据获取

v1.0.2

• 1、新增配置室内温度实体（当配置此实体后，优先使用该实体，不配置则使用空调再带的温度）。
• 2、新增功率显示，当配置此实体，会在室内温度后方显示实时功率。
• 3、新增定时器，会在"功能"后方显示定时设置（该功能需要定时器卡片支持，后续发布），当没有配置features时不显示定时器（可以配置一个空的features即可）

current_temperature: sensor.living_room_temperature # 配置温度传感器实体
power_display_entity: sensor.ertongfang_ac_gonglv # 配置功率传感器实体

贡献指南

欢迎提交Issue和Pull Request来改进这个项目。

许可证

MIT License

支持与反馈

如有问题或建议，请通过GitHub Issues提交。