186 lines
5.3 KiB
Markdown
186 lines
5.3 KiB
Markdown
# 天气时钟界面说明
|
||
|
||
## 📋 概述
|
||
|
||
已成功将Arduino版本的MiniTV天气时钟UI移植到ESP-IDF LVGL环境中。新的天气时钟界面完全替换了原来的简单时钟界面，提供更丰富的信息显示。
|
||
|
||
## 🎨 界面布局
|
||
|
||
参考Arduino版本，新界面采用240x240分区布局：
|
||
|
||
```
|
||
┌─────────────────────────────────┐
|
||
│ 天气信息滚动 │ 城市名称 │ 顶部 (0-34px)
|
||
├─────────────────────────────────┤
|
||
│ │
|
||
│ 时:分 秒 │ 中部 (35-165px)
|
||
│ (大字体) (小字体) │
|
||
│ │
|
||
├─────┬─────────────┬─────────────┤
|
||
│ AQI │ 湿度图标 │ 温度图标 │ 底部上 (166-200px)
|
||
│空气 │ 💧XX% │ 🌡️XX℃ │
|
||
├─────┼─────────────┼─────────────┤
|
||
│周X │ XX月XX日 │ (空白) │ 底部下 (200-240px)
|
||
└─────┴─────────────┴─────────────┘
|
||
```
|
||
|
||
## ✨ 新增功能
|
||
|
||
### 1. 天气数据显示
|
||
- ✅ 城市名称
|
||
- ✅ 实时温度
|
||
- ✅ 湿度百分比
|
||
- ✅ 空气质量指数（AQI）和等级
|
||
- ✅ 最高/最低温度
|
||
- ✅ 风向和风速
|
||
|
||
### 2. 动态信息滚动
|
||
顶部滚动区域每2.5秒切换显示：
|
||
- 实时天气状况
|
||
- 空气质量描述
|
||
- 风向风速信息
|
||
- 今日天气概况
|
||
- 最低/最高温度
|
||
|
||
### 3. AQI颜色编码
|
||
空气质量指数自动显示对应颜色：
|
||
- 🟢 优 (0-50): 绿色
|
||
- 🟡 良 (51-100): 黄色
|
||
- 🟠 轻度污染 (101-150): 橙色
|
||
- 🟣 中度污染 (151-200): 紫红色
|
||
- 🔴 重度污染 (200+): 深红色
|
||
|
||
### 4. 自动更新
|
||
- ⏰ 时间：每秒更新
|
||
- 🌤️ 天气：每10分钟更新一次
|
||
|
||
## 📁 新增文件
|
||
|
||
1. **idle_screen.h** - 天气时钟UI头文件（重写）
|
||
2. **idle_screen.cc** - 天气时钟UI实现（重写）
|
||
3. **weather_service.h** - 天气API服务头文件
|
||
4. **weather_service.cc** - 天气API服务实现
|
||
|
||
## 🔧 修改文件
|
||
|
||
1. **genjutech-s3-1.54tft.cc**
|
||
- 添加 `SpiLcdDisplayEx` 类扩展
|
||
- 集成天气服务
|
||
- 添加 `InitWeatherService()` 方法
|
||
- 自动启动天气更新任务
|
||
|
||
## 🌐 天气API
|
||
|
||
使用中国天气网API：
|
||
- 城市代码自动检测：`http://wgeo.weather.com.cn/ip/`
|
||
- 天气数据获取：`http://d1.weather.com.cn/weather_index/{城市代码}.html`
|
||
|
||
### 🎯 城市代码配置（两种方式）
|
||
|
||
#### 方式1：自动检测（推荐）✨
|
||
|
||
**默认已启用**，WiFi连接后会根据IP地址自动获取所在城市！
|
||
|
||
在 `genjutech-s3-1.54tft.cc` 的 `InitWeatherService()` 中：
|
||
|
||
```cpp
|
||
self->weather_service_.Initialize(""); // 空字符串 = 自动检测
|
||
```
|
||
|
||
**优点**：
|
||
- ✅ 无需手动配置
|
||
- ✅ 根据实际位置显示天气
|
||
- ✅ 设备移动到其他城市会自动适应
|
||
- ✅ 失败时自动回退到北京
|
||
|
||
#### 方式2：手动指定城市代码
|
||
|
||
如果你想固定显示某个城市的天气，可以指定城市代码：
|
||
|
||
```cpp
|
||
self->weather_service_.Initialize("101280601"); // 指定：深圳
|
||
```
|
||
|
||
**常用城市代码：**
|
||
- 北京：`101010100`
|
||
- 上海：`101020100`
|
||
- 广州：`101280101`
|
||
- 深圳：`101280601`
|
||
- 成都：`101270101`
|
||
- 杭州：`101210101`
|
||
- 武汉：`101200101`
|
||
- 西安：`101110101`
|
||
- 青岛：`101120201`
|
||
- 南京：`101190101`
|
||
- 重庆：`101040100`
|
||
- 天津：`101030100`
|
||
|
||
**优点**：
|
||
- ✅ 可查看其他城市天气
|
||
- ✅ 不受网络IP地址影响
|
||
|
||
## 🎯 使用说明
|
||
|
||
### 1. 编译
|
||
```bash
|
||
idf.py build
|
||
```
|
||
|
||
### 2. 烧录
|
||
```bash
|
||
idf.py flash monitor
|
||
```
|
||
|
||
### 3. 配置城市
|
||
修改 `genjutech-s3-1.54tft.cc` 中的城市代码后重新编译烧录。
|
||
|
||
## 🔄 与原有功能的集成
|
||
|
||
- ✅ 保留语音交互功能
|
||
- ✅ 保留闹钟功能
|
||
- ✅ 闹钟触发时在时钟界面上显示
|
||
- ✅ 设备空闲时自动显示天气时钟
|
||
- ✅ 语音交互时自动切换到聊天界面
|
||
|
||
## 🐛 故障排查
|
||
|
||
### 天气数据不显示
|
||
1. 检查WiFi连接状态
|
||
2. 检查城市代码是否正确
|
||
3. 查看串口日志中的天气API响应
|
||
|
||
### 界面显示异常
|
||
1. 确认LVGL初始化正常
|
||
2. 检查显示锁是否正确使用
|
||
3. 查看内存使用情况
|
||
|
||
## 📝 注意事项
|
||
|
||
1. 天气更新需要WiFi连接
|
||
2. 首次获取天气数据需等待5秒（WiFi连接时间）
|
||
3. 天气API可能受网络状况影响
|
||
4. 建议在WiFi稳定环境下使用
|
||
|
||
## 🎨 设计理念
|
||
|
||
- **简洁实用**：一屏显示所有关键信息
|
||
- **视觉清晰**：分区明确，信息层次分明
|
||
- **动态更新**：滚动显示更多天气详情
|
||
- **色彩编码**：AQI用颜色直观表示空气质量
|
||
|
||
## 🚀 未来扩展
|
||
|
||
可能的扩展方向：
|
||
- [ ] 支持多城市切换
|
||
- [ ] 添加未来天气预报
|
||
- [ ] 自定义UI主题和颜色
|
||
- [ ] 添加天气图标/动画
|
||
- [ ] 支持更多天气数据源
|
||
|
||
---
|
||
|
||
**移植时间**: 2025-01-10
|
||
**原始参考**: Arduino MiniTV Weather Clock by DIY攻城狮
|
||
**实现版本**: ESP-IDF + LVGL
|
||
|