替换天气组件 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 的文件,没有相关文件夹请自行新建,文件内容为:(部分值已由我人工汉化过了)

代码示例

<dom-module id='custom-weather-card'>
<template>
<style>
.clear {
clear:both;
}
.card {
margin:1em auto;
padding-left: 1em;
padding-right:1em;
position: relative;
}
.iron-icon {
height: 18px;
color: #c8c8c8;
}
.temp {
font-weight: 300;
font-size: 4em;
color:#5b5b5b;
position: absolute;
right: .5em;
}
.tempc {
font-weight: 300;
font-size: 1.5em;
vertical-align: super;
color:#5b5b5b;
position: absolute;
right: 0em;
}
.variations {
font-weight:300;
color:#8c8c8c;
list-style:none;
margin-left:-2em;
margin-top: 2.5em;
}
.variations.right {
float: right;
margin-left: 0;
margin-right: 1em;
}
.unit {
font-size:.8em;
}
.forecast {
width:100%;
margin:0 auto;
height:9em;
}
.day {
display:block;
width: 25%;
float:left;
text-align:center;
color: #5b5b5b;
border-right:.1em solid #d9d9d9;
line-height: 2;
box-sizing: border-box;
}
.dayname {
text-transform: uppercase;
}
.forecast .day:first-child {
margin-left: 0;
}
.forecast .day:nth-last-child(2) {
border-right:none;
margin-right: 0;
}
.highTemp {
font-weight:bold;
}
.lowTemp {
color: #8c8c8c;
}
.icon.bigger {
width: 10em;
height: 10em;
margin-top: -4em;
position: absolute;
left: 0em;
}
.icon {
width: 50px;
height: 50px;
display: inline-block;
vertical-align: middle;
background-size: contain;
background-position: center center;
background-repeat: no-repeat;
text-indent: -9999px;
}
.weather {
font-weight: 300;
font-size: 1.5em;
color:#5b5b5b;
text-align:center;
position: absolute;
top: 0em;
left: 6em;
}
</style>
<div class="card">
<span class="icon bigger" style="background: none, url(/local/weather_icons/animated/[[nowCond]].svg) no-repeat; background-size: contain;"></span>
<span class="temp">[[roundedTemp]]</span><span class="tempc">°C</span>
<span class="weather">[[nowCondIT]]</span>
<br>
<span>
<ul class="variations right">
<template is="dom-if" if="[[weatherObj.attributes.humidity]]">
<li><iron-icon icon="mdi:water-percent"></iron-icon> [[weatherObj.attributes.humidity]]<span class="unit">%</span></li>
</template>
<template is="dom-if" if="[[weatherObj.attributes.pressure]]">
<li><iron-icon icon="mdi:gauge"></iron-icon> [[weatherObj.attributes.pressure]]<span class="unit"> hPa</span></li>
</template>
</ul>
<ul class="variations">
<template is="dom-if" if="[[weatherObj.attributes.wind_speed]]">
<li><iron-icon icon="mdi:weather-windy"></iron-icon> [[windBearing]] [[weatherObj.attributes.wind_speed]]<span class="unit"> m/s</span></li>
</template>
<template is="dom-if" if="[[weatherObj.attributes.visibility]]">
<li><iron-icon icon="mdi:weather-fog"></iron-icon> [[weatherObj.attributes.visibility]]<span class="unit">m</span></li>
</template>
</ul>
</span>
<div class="forecast clear">
<template is="dom-repeat" items="[[forecast]]">
<div class="day"><span class="dayname">[[item.dayIT]]</span>
<template is="dom-if" if="[[item.condIcon]]">
<br> <i class="icon" style="background: none, url(/local/weather_icons/animated/[[item.condIcon]].svg) no-repeat; background-size: contain;"></i>
</template>
<template is="dom-if" if="[[item.tempHigh]]">
<br> <span class="highTemp">[[item.tempHigh]]°C</span>
</template>
<template is="dom-if" if="[[item.tempLow]]">
<br> <span class="lowTemp">[[item.tempLow]]°C</span>
</template>
</div>
</template>
</div>
</div>
</template>
</dom-module>
<script>
(function () {
'use strict';
var _WEATHER_TO_ICON = {
cloudy: 'cloudy',
fog: 'cloudy',
hail: 'rainy-7',
lightning: 'thunder',
'lightning-rainy': 'thunder',
partlycloudy: 'cloudy-day-3',
pouring: 'rainy-6',
rainy: 'rainy-5',
snowy: 'snowy-6',
'snowy-rainy': 'rainy-7',
sunny: 'day',
windy: 'cloudy',
'windy-variant': 'cloudy-day-3',
exceptional: '!!',
};
var _WEATHER_TO_NAME = {
cloudy: '多云',
fog: '雾',
hail: '冰雹',
lightning: '雷电',
'lightning-rainy': '雷雨',
partlycloudy: '局部多云',
pouring: '大雨',
rainy: '雨',
snowy: '雪',
'snowy-rainy': '雨夹雪',
sunny: '晴',
windy: '多风',
'windy-variant': '阵风',
exceptional: '!',
};
var _DEGREE_TEXT = [
'北', '东北偏北', '东北', '东北偏东', '东', '东南偏东', '东南', '东南偏南',
'南', '西南偏南', '西南', '西南偏西', '西', '西北偏西', '西北', '西北偏北'
];
var _DAY_TO_DAY = {
Mon: '周一',
Tue: '周二',
Wed: '周三',
Thu: '周四',
Fri: '周五',
Sat: '周六',
Sun: '周日',
};
Polymer({
is: 'custom-weather-card',
properties: {
hass: {
type: Object,
},
stateObj: {
type: Object,
},
weatherObj: {
type: Object,
observer: 'checkRequirements',
computed: 'computeWeatherObj(hass, stateObj)',
},
},
computeWeatherObj: function (hass, stateObj) {
return stateObj && stateObj.attributes && stateObj.attributes.config && stateObj.attributes.config.weather ? hass.states[stateObj.attributes.config.weather] : null;
},
getForecastArray: function () {
if (!this.weatherObj.attributes.forecast) {
return [];
}
var data = this.weatherObj.attributes.forecast;
var forecast = [];
var prevDay = '';
for (var i = 0; i < data.length; i++) {
var day = new Date(data[i].datetime).toString().split(' ')[0];
if (day != prevDay) {
if (data[i].max_temp) {
var tempHigh = Math.round(data[i].max_temp * 10) / 10;
} else {
var tempHigh = Math.round(data[i].temperature * 10) / 10;
}
if (tempHigh == 0) {
tempHigh = '0'; // otherwise the value 0 will not be shown on the weather card
}
var tempLow = Math.round(data[i].templow * 10) / 10;
if (tempLow == 0) {
tempLow = '0'; // otherwise the value 0 will not be shown on the weather card
}
var condIcon = _WEATHER_TO_ICON[data[i].condition];
var dayIT = _DAY_TO_DAY[day];
forecast.push({dayIT:dayIT, tempHigh:tempHigh, tempLow:tempLow, condIcon:condIcon});
prevDay = day;
} else {
if (data[i].max_temp) {
var tempHigh = Math.round(data[i].max_temp * 10) / 10;
} else {
var tempHigh = Math.round(data[i].temperature * 10) / 10;
}
var tempLow = Math.round(data[i].tempLow * 10) / 10;
if (tempLow > forecast[forecast.length-1].tempHigh) {
forecast[forecast.length-1].tempHigh = tempLow;
}
if (tempHigh > forecast[forecast.length-1].tempHigh) {
forecast[forecast.length-1].tempHigh = tempHigh;
}
if (!forecast[forecast.length-1].tempLow) {
forecast[forecast.length-1].tempLow = tempHigh;
}
if (tempHigh < forecast[forecast.length-1].tempLow) {
forecast[forecast.length-1].tempLow = tempHigh;
}
if (tempLow < forecast[forecast.length-1].tempLow) {
forecast[forecast.length-1].tempLow = tempLow;
}
}
}
return forecast;
},
checkRequirements: function () {
if (!this.weatherObj) {
return;
}
this.nowCond = _WEATHER_TO_ICON[this.weatherObj.state];
this.nowCondIT = _WEATHER_TO_NAME[this.weatherObj.state];
if (this.weatherObj.attributes.temperature) {
this.roundedTemp = Math.round( this.weatherObj.attributes.temperature * 10) / 10;
}
if (this.weatherObj.attributes.wind_bearing) {
this.windBearing = this.windBearingToText(this.weatherObj.attributes.wind_bearing);
}
this.forecast = this.getForecastArray().slice(0, 4);
},
windBearingToText: function (degree) {
// return _DEGREE_TEXT[((parseInt(degree) + 5.63) / 11.25) | 0];
return _DEGREE_TEXT[(parseInt((degree + 11.25) / 22.5))];
},
});
}());
</script>

接着,下载全套天气图标(公众号回复“天气图标” 获取文件),解压后的 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系列 -- 自动语音播报天气

    在树莓派上要让 Home Assistant  发声朗读 ,从硬件上我们需要 3.5mm插口音箱(耳机)或usb口音箱(耳机).软件方面 我们需要一个媒体播放器以及 tts ( 将文字转化为语音的服务 ...

  2. 智能家居系统 Home Assistant 系列 --介绍篇

    一. HomeAssistant 是什么? HomeAssistant是构建智慧空间的神器.是一个成熟完整的基于 Python 的智能家居系统,设备支持度高,支持自动化(Automation).群组化 ...

  3. Home Assistant系列 -- 基于树莓派安装并设置自启动

    Home Assistant 是当前智能家居最火热的开源DIY 软件,之前的文章  智能家居系统 Home Assistant 系列 --介绍篇  已经详细介绍过了,这里就不详细介绍了,今天介绍 如何 ...

  4. 七天接手react项目 系列 —— 尾篇(antd 和 mobx)

    其他章节请看: 七天接手react项目 系列 尾篇 前面我们依次学习了 react 基础知识.react 脚手架创建项目.react 路由,已经花费了不少时间,但距离接手 spug_web 项目还有一 ...

  5. iOS系列 基础篇 03 探究应用生命周期

    iOS系列 基础篇 03 探究应用生命周期 目录: 1. 非运行状态 - 应用启动场景 2. 点击Home键 - 应用退出场景 3. 挂起重新运行场景 4. 内存清除 - 应用终止场景 5. 结尾 本 ...

  6. Java多线程系列--“基础篇”04之 synchronized关键字

    概要 本章,会对synchronized关键字进行介绍.涉及到的内容包括:1. synchronized原理2. synchronized基本规则3. synchronized方法 和 synchro ...

  7. SQL Server调优系列基础篇(联合运算符总结)

    前言 上两篇文章我们介绍了查看查询计划的方式,以及一些常用的连接运算符的优化技巧,本篇我们总结联合运算符的使用方式和优化技巧. 废话少说,直接进入本篇的主题. 技术准备 基于SQL Server200 ...

  8. 【转载】Android Metro风格的Launcher开发系列第二篇

    前言: 各位小伙伴们请原谅我隔了这么久才开始写这一系列的第二篇博客,没办法忙新产品发布,好了废话不说了,先回顾一下:在我的上一篇博客Android Metro风格的Launcher开发系列第一篇写了如 ...

  9. DOM系列---基础篇

    DOM系列---基础篇   DOM (Document Object Model) 即文档对象模型, 针对 HTML 和 XML 文档的 API (应用程序接口) .DOM 描绘了一个层次化的节点树, ...

随机推荐

  1. 两步让你的mobile traffic通过fiddler代理传送

    mobile app运行时由于调试网络相关的内容非常不便,所以如果能够让iphone通过桌面主机来跑traffic,那么在pc上就能非常清楚地检查mobile app和后端之间有什么问题了. 幸运的是 ...

  2. 高精度定时器实现 z

    1背景Permalink .NET Framework 提供了四种定时器,然而其精度都不高(一般情况下 15ms 左右),难以满足一些场景下的需求. 在进行媒体播放.绘制动画.性能分析以及和硬件交互时 ...

  3. l2tp over ipsec

    搭建教程: 转自: https://segmentfault.com/a/1190000006125737 http://www.wangyuxiong.com/blog/ti-yan-qiang-w ...

  4. Oracle 时段负载情况

    ALTER session SET nls_date_format='yyyy-mm-dd hh24:mi:ss'; SELECT *  FROM ( SELECT A.INSTANCE_NUMBER ...

  5. django get_object_or_404

    django get_object_or_404 是django shortcuts模块里面一个比较简便的方法,特别是用django get来操作数据库的时候,可以帮 我们少写一些代码,加快开发速度. ...

  6. tp5.0和tp3.2中前台模板IF标签和FOREACH的区别

    IF标签 tp3.2 <if condition="($name eq 1) OR ($name gt 100) "> value1 <elseif condit ...

  7. Avito Cool Challenge 2018 B. Farewell Party 【YY】

    传送门:http://codeforces.com/contest/1081/problem/B B. Farewell Party time limit per test 1 second memo ...

  8. HashMap和Hashtable的详细区别

    1.Hashtable是线程安全,HashMap是非线程安全 HashMap的性能会高于Hashtable,我们平时使用时若无特殊需求建议使用HashMap,在多线程环境下若使用HashMap需要使用 ...

  9. TCP Flow Control and Data Transfer

    TCP Flow Control TCP Data Transfer Selective Repeat ARQ with Positive ACK Window slides a byte basis ...

  10. MVC验证码生成类库

    public class ValidateCode { /// <summary> /// 验证码的最大长度 /// </summary> public int MaxLeng ...