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 的文件，没有相关文件夹请自行新建，文件内容为：（部分值已由我人工汉化过了）

代码示例

<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;
        h