Home Assistant系列美化篇——替换天气 UI

替换天气组件 weather 的默认 UI,生成美观大方的气象卡片。
Home Assistant 原生的天气平台不少,国内用户常用的有雅虎天气和 Darksky。其他论坛和社区也有分享自制的和风、彩云天气等。

依托国内天气服务商的组件优点自然是数据比较丰富,但前提是找服务商获取了 API。不过 API 的获取现在越来越难了,少不了隐私信息的提供,当然也可以通过抓包获取公共 API,但是持续有效性存疑。其实原生的天气平台本身信息并不少,数据出入不大,基本无需 API,即使需要流程也很简单。

原生天气组件生成的卡片 UI 实在是丑,雅虎的稍好一点懂得放大温度数字,但是同样没有完整的信息展示。而 Darksky 的 weather 组件信息丰富性远远比不上同款 sensor 组件。

官方英文论坛的 Bram Kragten 开发了一套天气组件使用的 UI(论坛讨论 见此 ),赏心悦目,国内爱好者也有利用此套 UI 做了魔改的天气组件。当然别人魔改的作品不在此文讨论内,这里讲一下在接入 Home Assistant 原生的天气平台 weather 下 (推荐雅虎 yweather),如何使用这套 UI。

首先,在 /www/custom_ui/ 文件夹下创建名为 custom-weather-card.html 的文件,没有相关文件夹请自行新建,文件内容为:(部分值已由我人工汉化过了)

代码示例


  


接着,下载全套天气图标(公众号回复“天气图标” 获取文件),解压后的 svg 文件放入 \www\weather_icons\animated\ 文件夹内。

最后,在配置文件 configuration.yaml 中添加相关设置(文档分离用户请自行判断):

#接入雅虎天气
weather:	
  - platform: yweather
    woeid: 
#引入引导组件
input_boolean:  
  weather:
  
#前端接入自定义UI
frontend:
  extra_html_url:
    - /local/custom_ui/custom-weather-card.html
  extra_html_url_es5:
    - /local/custom_ui/custom-weather-card.html
#调用 UI
customize:
  input_boolean.weather:
    custom_ui_state_card: custom-weather-card
    config:
      weather: weather.yweather
  weather.yweather:    #隐藏原 UI 组件
    hidden: true
    
#合成群组
group:
  weather:
    view: no
    name: 天气
    entities:
      - input_boolean.weather

上述操作完成后,重启 Home Assistant,你的天气卡片就焕然一新了~~

此篇文章由墨澜妹纸投稿,感谢妹纸!

关注一下,更多精彩,不容错过!

???

Home Assistant系列美化篇——替换天气 UI_第1张图片

你可能感兴趣的:(Home Assistant系列美化篇——替换天气 UI)