# Pobaby空调卡片

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

## 📸 界面预览

<div style="display: flex; justify-content: space-around; align-items: center; flex-wrap: wrap;">
  <img src="https://github.com/chjspp520/pobaby-air-conditioner-card/blob/main/%E6%88%AA%E5%9B%BE1.png" alt="截图" style="width: 100%; height: auto; margin: 5px;">
  <img src="https://github.com/chjspp520/pobaby-air-conditioner-card/blob/main/%E5%8A%A8%E7%94%BB.gif" alt="截图" style="width: 100%; height: auto; margin: 5px;">
  <img src="[https://github.com/chjspp520/power-usage-calendar-card/blob/main/power-usage-calendar-card%E6%BC%94%E7%A4%BA.mp4](https://github.com/chjspp520/pobaby-air-conditioner-card/blob/main/%E8%A7%86%E9%A2%91.mp4)" alt="演示视频" style="width: 30%; height: auto; margin: 5px;">  

## 功能特性

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

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

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

## 安装方法

### 1. 前置条件
- Home Assistant已安装并运行
- 空调实体已正确配置（climate实体）
- （可选）用电量统计实体（sensor实体）

### 2. 文件部署
1. 将 `pobaby-air_conditioner.js` 文件复制到Home Assistant的 `www` 目录下
   ```bash
   # 例如复制到 /config/www/pobaby-air_conditioner/
   ```

2. 在Home Assistant配置文件中添加资源引用
   ```yaml
   # 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
重启服务使配置生效。

## 配置参数

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

### 完整配置示例
```yaml
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即可）
```yaml
current_temperature: sensor.living_room_temperature # 配置温度传感器实体
power_display_entity: sensor.ertongfang_ac_gonglv # 配置功率传感器实体
```

## 贡献指南

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

## 许可证

MIT License

## 支持与反馈

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