基于和风天气的lovelace天气卡片【丰富信息】【动态图标】
本帖最后由 antsunzj 于 2019-12-24 10:49 编辑#备注
1. 排版不细调整了，如有问题可以去博客看。
2. 一个基于和风天气的lovelace天气卡片，主体基于lovelace-weather-card-chart修改，根据自己喜好补充了更多的展示信息。
3. 2019-08-24新增一个样式。
***
#提醒回复用
并没有隐藏内容，如果觉得有用回复下帮忙顶贴。
**** Hidden Message *****
***
#正文
## 0. 插件说明 ##
- 概述
- 包含hf_weather组件、自定义卡片两块：hf_weather组件获取数据，卡片展示数据。
- 下载地址
-
- 主要改动
- 支持生成多个天气Entity
- 天气数据统一存储
- 天气卡片增加空气质量、小时预报、生活建议、数据更新时间
- 天气卡片更多信息增加生活建议详细数据
- 天气卡片图表增加下雨概率
- 天气卡片使用动态图标
- 参考插件
- [和风天气插件组]
- [基础版式]
- [动态图标]
***
## 1.环境 ##
- Ubuntu 18.04 + HA 0.92.1
***
## 2.使用说明 ##
### 2.1 组件 ###
- 下载文件，`hf_weather`目录放置在`{HA配置目录}/custom_components/`下。
- 在[京东万象api平台]申请appkey。
- 在[和风天气网站]找到你的城市代码，CN开头的字符串。
- 配置启用hf_weather组件。
```yaml
# 配置 configuration.yaml
# {{}}符号为标示变量
weather:
- platform: hf_weather
name: {{test}} # 必填，自定义实体名称，生成实体的entityId为weather.{{test}}，后续配置需要用到
city: {{YOUR_CITY_CODE}} # 必填，城市代码，支持城市中英文名称、ID和IP地址，例如city=北京，city=beijing，city=CN101010100，city= 60.194.130.1，建议使用ID
appkey: {{YOUR_API_KEY}} # 必填，京东万象api平台申请的key
```
> __INFO：重复即可增加多个实体。__
我是萝卜，我重新编辑一下。上面代码格式有误，我修正了：
具体看图
- 启用sun组件。
```yaml
# 配置 configuration.yaml
sun:
```
> __DEBUG：用于提供卡片的日出日落数据。__
### 2.2 自定义卡片 ###
- 下载文件，`hf_weather-card`目录放置在`{HA配置目录}/www/custom-lovelace/`下。
> __INO：该路径可自定义，只要保证在www目录里即可。__
- lovelace启用天气卡片
```yaml
# 配置lovelace（使用UI的原始编辑器编辑即可）
# 引入自定义卡片hf_weather-card
resources:
- type: module
url: /local/custom-lovelace/hf_weather-card/hf_weather-card.js
- type: module
url: /local/custom-lovelace/hf_weather-card/hf_weather-more-info.js
# 在view里面的cards节点，增加天气卡片类型
views:
- path: default_view
title: Home
cards:
- type: 'custom:hf_weather-card' # card类型
entity: weather.test # entityid
mode: daily # hourly按小时天气预报、daily按天天气预报，不设置则同时显示
title: 天气 # 标题，不设置则使用entity的friendly_name
icons: /local/custom-lovelace/hf_weather-card/icons/animated/# 图标路径，不设置则采用cdn，结尾要有"/"
```
> __WARN：lovelace配置里面路径，`/local/`实际映射`{HA配置目录}/www/`，保证放置文件的子路径设置对。__
***
## 3. 小结 ##
- 新版本Home Assistant的前端项目名为home-assistant-polymer，可以在src/cards找到天气卡片代码进行分析，结合别人自定义卡片代码基本就能完成了解数据的传入及展示方法。
- 点击卡片弹出详细信息的面板，由src/dialogs其中相关代码逐级渲染完成：ha-more-info-dialog.js>>more-info-controls.js-more>>more-info-weather.js，通过修改more-info-weather.js可以实现详细信息面板数据的自定义展示，但这样需要重新编译太麻烦。查看代码发现给实体添加`custom_ui_more_info`属性可以指定自定义的js处理。
: https://bbs.hassbian.com/thread-3971-1-1.html "和风天气插件组(天气预报+生活提示+小时预报+空气质量)"
: https://github.com/cnk700i/ha_mo ... e/master/hf_weather "hf_weather"
: https://github.com/sgttrs/lovelace-weather-card-chart "lovelace-weather-card-chart"
: https://github.com/bramkragten/custom-ui/tree/master/weather-card "weather-card"
: https://wx.jdcloud.com/market/datas/26/10610 "中国和世界天气预报API"
: https://where.heweather.com "和风天气位置搜索"
好像比以前的更详细了 更新个 谢谢分享，学习下。 非常好。看上去很棒！ 看起来不错，感谢大佬分享。 谢谢分享，学习下。 给大神点赞，帮顶，:) 支持支持，现在我倒觉得我没显示屏，ha面板没必要加天气 好好学习，天天向上 更新版本后，用不了和风天气了，来更新一下，感谢分享。