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

『瀚思彼岸』» 智能家居第一站

 找回密码
 立即注册
查看: 1919|回复: 244

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

  [复制链接]

20

主题

286

帖子

1746

积分

论坛技术达人

积分
1746
金钱
1440
HASS币
90

活跃会员教程狂人

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

备注

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

提醒回复用

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


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


正文

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


评分

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

查看全部评分

博客 https://ljr.im
回复

使用道具 举报

7

主题

1307

帖子

3624

积分

论坛元老

流水无味

Rank: 8Rank: 8

积分
3624
金钱
2317
HASS币
145

灌水之王

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

使用道具 举报

0

主题

80

帖子

207

积分

中级会员

Rank: 3Rank: 3

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

使用道具 举报

0

主题

75

帖子

294

积分

中级会员

Rank: 3Rank: 3

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

使用道具 举报

36

主题

1159

帖子

3584

积分

论坛元老

Rank: 8Rank: 8

积分
3584
金钱
2405
HASS币
200

活跃会员教程狂人

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

使用道具 举报

0

主题

51

帖子

275

积分

中级会员

Rank: 3Rank: 3

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

使用道具 举报

6

主题

574

帖子

1953

积分

金牌会员

Rank: 6Rank: 6

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

使用道具 举报

4

主题

245

帖子

793

积分

高级会员

Rank: 4

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

使用道具 举报

1

主题

35

帖子

126

积分

论坛分享达人

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

使用道具 举报

0

主题

41

帖子

135

积分

注册会员

Rank: 2

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

使用道具 举报

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

本版积分规则

Archiver|手机版|小黑屋|Hassbian

GMT+8, 2019-5-27 05:13 , Processed in 0.487533 second(s), 41 queries .

Powered by Discuz! X3.3

© 2001-2017 Comsenz Inc.

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