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

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


0. 插件说明

  • 概述
    • 包含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)。
    1
    2
    3
    4
    5
    6
    # 配置 configuration.yaml
    weather:
    - platform: hf_weather
    name: test # entity_id,自定义
    city: {{YOUR_CITY_CODE}} # 城市代码,api平台有查询接口查询
    appkey: {{YOUR_API_KEY}} # api平台申请的key

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

  • 启用sun组件。
    1
    2
    # 配置 configuration.yaml
    sun:

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

2.2 自定义卡片

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

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

  • lovelace启用天气卡片
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    # 配置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处理。