请选择 进入手机版 | 继续访问电脑版

『瀚思彼岸』» 智能家居技术论坛

 找回密码
 立即注册
查看: 11726|回复: 675

[插件发布] 基于和风天气的lovelace天气卡片【丰富信息】【动态图标】

  [复制链接]

23

主题

302

帖子

1982

积分

论坛技术达人

积分
1982
金钱
1655
HASS币
110

活跃会员教程狂人

发表于 2019-5-3 10:37:10 | 显示全部楼层 |阅读模式
本帖最后由 cnk700i 于 2019-8-29 12:30 编辑

备注

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

提醒回复用

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


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


正文

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组件。
    # 配置 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组件。
    # 配置 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处理。





评分

参与人数 3金钱 +42 HASS币 +20 收起 理由
hundajdx + 2 膜拜大神!
咸味土豆 + 20 膜拜大神!
+ 20 + 20 灰常酷!

查看全部评分

博客 https://ljr.im
回复

使用道具 举报

7

主题

1845

帖子

4827

积分

论坛元老

流水无味

Rank: 8Rank: 8

积分
4827
金钱
2982
HASS币
145

灌水之王

发表于 2019-5-3 11:14:57 | 显示全部楼层
好像比以前的更详细了 更新个
回复

使用道具 举报

1

主题

109

帖子

325

积分

中级会员

Rank: 3Rank: 3

积分
325
金钱
216
HASS币
0
发表于 2019-5-3 11:17:14 | 显示全部楼层
谢谢分享,学习下。
回复

使用道具 举报

0

主题

119

帖子

505

积分

高级会员

Rank: 4

积分
505
金钱
386
HASS币
0
发表于 2019-5-3 11:22:14 | 显示全部楼层
非常好。看上去很棒!
回复

使用道具 举报

52

主题

1346

帖子

4385

积分

论坛元老

Rank: 8Rank: 8

积分
4385
金钱
3014
HASS币
250

活跃会员教程狂人

发表于 2019-5-3 11:25:18 | 显示全部楼层
看起来不错,感谢大佬分享。
回复

使用道具 举报

0

主题

52

帖子

288

积分

中级会员

Rank: 3Rank: 3

积分
288
金钱
236
HASS币
0
发表于 2019-5-3 11:27:23 | 显示全部楼层
谢谢分享,学习下。
回复

使用道具 举报

7

主题

672

帖子

2343

积分

金牌会员

Rank: 6Rank: 6

积分
2343
金钱
1671
HASS币
0
发表于 2019-5-3 11:38:22 | 显示全部楼层
给大神点赞,帮顶,
回复

使用道具 举报

4

主题

274

帖子

895

积分

高级会员

Rank: 4

积分
895
金钱
621
HASS币
0
发表于 2019-5-3 11:40:12 | 显示全部楼层
支持支持,现在我倒觉得我没显示屏,ha面板没必要加天气
回复

使用道具 举报

1

主题

46

帖子

252

积分

论坛分享达人

积分
252
金钱
206
HASS币
0
发表于 2019-5-3 11:41:39 | 显示全部楼层
好好学习,天天向上
回复

使用道具 举报

0

主题

41

帖子

148

积分

注册会员

Rank: 2

积分
148
金钱
107
HASS币
0
发表于 2019-5-3 11:45:51 | 显示全部楼层
更新版本后,用不了和风天气了,来更新一下,感谢分享。
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|Hassbian

GMT+8, 2019-12-10 01:38 , Processed in 0.079804 second(s), 25 queries .

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表