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

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

 找回密码
 立即注册
查看: 26922|回复: 1068

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

  [复制链接]

23

主题

302

帖子

2061

积分

论坛技术达人

积分
2061
金钱
1734
HASS币
110

活跃会员教程狂人

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

备注

  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:重复即可增加多个实体。
    我是萝卜,我重新编辑一下。上面代码格式有误,我修正了:
    具体看图

WX20191224-104429@2x.png

  • 启用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处理。







评分

参与人数 4金钱 +52 HASS币 +20 收起 理由
gzroc + 10 感谢楼主分享!
hundajdx + 2 膜拜大神!
咸味土豆 + 20 膜拜大神!
+ 20 + 20 灰常酷!

查看全部评分

博客 https://ljr.im
回复

使用道具 举报

7

主题

1851

帖子

4920

积分

论坛元老

流水无味

Rank: 8Rank: 8

积分
4920
金钱
3069
HASS币
145

灌水之王

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

使用道具 举报

6

主题

294

帖子

859

积分

高级会员

Rank: 4

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

使用道具 举报

0

主题

148

帖子

710

积分

高级会员

Rank: 4

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

使用道具 举报

54

主题

1386

帖子

4710

积分

论坛元老

Rank: 8Rank: 8

积分
4710
金钱
3294
HASS币
270

活跃会员教程狂人

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

使用道具 举报

0

主题

56

帖子

309

积分

中级会员

Rank: 3Rank: 3

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

使用道具 举报

7

主题

710

帖子

2686

积分

金牌会员

Rank: 6Rank: 6

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

使用道具 举报

5

主题

289

帖子

966

积分

高级会员

Rank: 4

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

使用道具 举报

1

主题

46

帖子

254

积分

论坛分享达人

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

使用道具 举报

0

主题

47

帖子

172

积分

注册会员

Rank: 2

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

使用道具 举报

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

本版积分规则

Archiver|手机版|小黑屋|Hassbian

GMT+8, 2020-7-12 00:22 , Processed in 0.095110 second(s), 36 queries .

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

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