基于和风天气的lovelace天气卡片【丰富信息】【动态图标】

cnk700i

备注

1. 排版不细调整了，如有问题可以去博客看。
2. 一个基于和风天气的lovelace天气卡片，主体基于lovelace-weather-card-chart修改，根据自己喜好补充了更多的展示信息。

---

提醒回复用

并没有隐藏内容，如果觉得有用回复下帮忙顶贴。

游客，如果您要查看本帖隐藏内容请回复

---

正文

0. 插件说明

• 概述
  • 包含hf_weather组件、自定义卡片两块：hf_weather组件获取数据，卡片展示数据。
    

    效果图

    
• 下载地址
  • hf_weather
• 主要改动
  • 支持生成多个天气Entity
  • 天气数据统一存储
  • 天气卡片增加空气质量、小时预报、生活建议、数据更新时间
  • 天气卡片更多信息增加生活建议详细数据
  • 天气卡片图表增加下雨概率
  • 天气卡片使用动态图标
• 参考插件
  • 和风天气插件组
  • 基础版式
  • 动态图标

---

1.环境

• Ubuntu 18.04 + HA 0.92.1

---

2.使用说明

2.1 组件

• 下载文件，hf_weather目录放置在{HA配置目录}/custom_components/下。
• 启用hf_weather组件，（要先在api平台申请key）。

  # 配置 configuration.yaml
  weather:
  - platform: hf_weather
  name: test                  # entityid
  city:                       # 城市代码，api平台有查询接口查询
  appkey: {{YOUR_API_KEY}}    # api平台申请的key

  INFO：重复即可增加多个实体。

• 启用sun组件。

  # 配置 configuration.yaml
  sun:

  DEBUG：用于提供卡片的日出日落数据。

2.2 自定义卡片

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

  INO：该路径可自定义，只要保证在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，结尾要有"/"

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

xieahui

好像比以前的更详细了 更新个

peter5858

谢谢分享，学习下。

wormshow

非常好。看上去很棒！

咸味土豆

看起来不错，感谢大佬分享。

neki

谢谢分享，学习下。

新生活

给大神点赞，帮顶，

淘子

支持支持，现在我倒觉得我没显示屏，ha面板没必要加天气

梁小呆

好好学习，天天向上

cdzlxk

更新版本后，用不了和风天气了，来更新一下，感谢分享。