【插件·改】基于和风天气的lovelace天气卡片

还是管不住手把HA升级到0.92，开始配置大迁移。旧的天气插件用的是伸手拿来用版，测试下来基本能继续用，不过比较臃肿，会生成很多sensor来保存展示数据。刚好这次得启用lovelace界面，想了下干脆一起改了吧，做个自定义卡片统一展示天气数据。折腾了两天还算顺利地完成了，还好之前接触Vue框架积累了点经验，这次看Polymer的前台代码不至于眼前一黑了。目前对HA前端整体架构理解还是有限，只能做到小修改，以后有机会再深入了解吧。

0. 插件说明

概述
- 包含hf_weather组件、自定义卡片两块：hf_weather组件获取数据，卡片展示数据。
- 2019-08-24新增一个样式
下载地址
- hf_weather
主要改动
- 支持生成多个天气Entity
- 天气数据统一存储
- 天气卡片增加空气质量、小时预报、生活建议、数据更新时间
- 天气卡片更多信息增加生活建议详细数据
- 天气卡片图表增加下雨概率
- 天气卡片使用动态图标
参考插件
- 基础版式
- 动态图标

1.环境

Ubuntu 18.04 + HA 0.92.1

2.使用说明

2.1 组件

下载文件，hf_weather目录放置在{HA配置目录}/custom_components/下。
在京东万象api平台申请appkey。
在和风天气网站找到你的城市代码，CN开头的字符串。

配置启用hf_weather组件。

# 配置 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

Tips

重复即可增加多个实体。

启用sun组件。
1
2
# 配置 configuration.yaml
sun:
说明
用于提供卡片的日出日落数据。

2.2 自定义卡片

下载文件，hf_weather-card目录放置在{HA配置目录}/www/custom-lovelace/下。

路径
该路径可自定义，只要保证在www目录里即可。

lovelace启用天气卡片

# 配置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，结尾要有"/"

路径映射

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处理。