Home Assistant系列美化篇——替換天氣 UI

時間 2019-11-30

標籤 home assistant 系列美化替換天氣简体版

原文原文鏈接

替換天氣組件 weather 的默認 UI，生成美觀大方的氣象卡片。 Home Assistant 原生的天氣平臺很多，國內用戶經常使用的有雅虎天氣和 Darksky。其餘論壇和社區也有分享自制的和風、彩雲天氣等。html

依託國內天氣服務商的組件優勢天然是數據比較豐富，但前提是找服務商獲取了 API。不過 API 的獲取如今愈來愈難了，少不了隱私信息的提供，固然也能夠經過抓包獲取公共 API，可是持續有效性存疑。其實原生的天氣平臺自己信息並很多，數據出入不大，基本無需 API，即便須要流程也很簡單。前端

原生天氣組件生成的卡片 UI 實在是醜，雅虎的稍好一點懂得放大溫度數字，可是一樣沒有完整的信息展現。而 Darksky 的 weather 組件信息豐富性遠遠比不上同款 sensor 組件。node

官方英文論壇的 Bram Kragten 開發了一套天氣組件使用的 UI（論壇討論見此 )，賞心悅目，國內愛好者也有利用此套 UI 作了魔改的天氣組件。固然別人魔改的做品不在此文討論內，這裏講一下在接入 Home Assistant 原生的天氣平臺 weather 下（推薦雅虎 yweather），如何使用這套 UI。frontend

首先，在 /www/custom_ui/ 文件夾下建立名爲 custom-weather-card.html 的文件，沒有相關文件夾請自行新建，文件內容爲：（部分值已由我人工漢化過了）dom

代碼示例

<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">&#176;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]]&#176;C</span>
          </template>
          <template is="dom-if" if="[[item.tempLow]]">
          <br> <span class="lowTemp">[[item.tempLow]]&#176;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\ 文件夾內。svg

最後，在配置文件 configuration.yaml 中添加相關設置（文檔分離用戶請自行判斷）：ui

#接入雅虎天氣
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