enhance weather panel (#352)

* enhance weather panel

* enhance weather panel
Make a skin for weather panel.
Multi day forecast shows in table using Emoji.

* fix wind bearing
This commit is contained in:
Boyi C 2017-07-24 14:25:09 +08:00 committed by Paulus Schoutsen
parent 2ea5cbcc88
commit 0c428134df

View File

@ -2,8 +2,6 @@
<link rel='import' href='../../bower_components/iron-flex-layout/iron-flex-layout-classes.html'>
<link rel='import' href='../../bower_components/google-apis/google-legacy-loader.html'>
<link rel='import' href='../components/ha-card.html'>
<link rel='import' href='../components/ha-attributes.html'>
<dom-module id='ha-weather-card'>
@ -17,12 +15,101 @@
color: var(--secondary-text-color);
text-align: right;
}
tr.temphigh span {
color: red;
font-weight: 600;
}
tr.templow span {
color: blue;
}
tr.date span {
color: darkgrey;
font-weight: 600;
}
.content td {
text-align: center;
vertical-align: middle;
overflow-x: hidden;
}
tr.cond td {
overflow-x: hidden;
overflow-y: visible;
text-align: center;
vertical-align: middle;
width:0%;
height: 2.4em;
}
tr.cond td div {
font-size: 2em;
margin-left: -2em;
transform: translateX(1em);
}
.forecast td:first-child {
background-color: #ddd;
}
.forecast td:nth-child(2n+3) {
background-color: #eee;
}
table, tr, td {
border: 0;
padding: 0;
border-spacing: 0;
}
.currentcond {
text-align: center;
vertical-align: middle;
}
td.pw_small span {
font-size: 2.4em;
}
td.pw_small{
width: 25%;
height: 2.6em;
}
td.pw_smallp span {
font-size: 1.2em;
}
td.pw_large span {
font-size: 6em;
}
</style>
<google-legacy-loader on-api-load='googleApiLoaded'></google-legacy-loader>
<ha-card header='[[computeTitle(stateObj)]]'>
<div class='content'>
<div id='chart_id' hidden$="[[!stateObj.attributes.forecast]]"></div>
<ha-attributes state-obj='[[stateObj]]' extra-filters='forecast'></ha-attributes>
<table class="currentcond" width="100%">
<tr>
<td class="pw_small"><span>[[stateObj.attributes.temperature]]°</span></td>
<td rowspan="2" class="pw_large"><span>[[nowCond]]</span></td>
<td class="pw_small"><span>[[stateObj.attributes.humidity]]%</span></td>
</tr>
<tr>
<td class="pw_smallp"><span>[[windBearing]]<br />[[stateObj.attributes.wind_speed]]</span></td>
<td class="pw_smallp"><span>Visual<br />[[stateObj.attributes.visibility]]</span></td>
</tr>
</table><br />
<table class="forecast" width="100%">
<tr class="cond">
<template is="dom-repeat" items="[[data.cond]]">
<td><div>[[item]]</div></td>
</template>
</tr>
<tr class="temphigh">
<template is="dom-repeat" items="[[data.temphigh]]">
<td><span>[[item]]</span></td>
</template>
</tr>
<tr class="templow">
<template is="dom-repeat" items="[[data.templow]]">
<td><span>[[item]]</span></td>
</template>
</tr>
<tr class="date">
<template is="dom-repeat" items="[[data.date]]">
<td><span>[[item]]</span></td>
</template>
</tr>
</table>
</div>
</ha-card>
</template>
@ -32,6 +119,28 @@
(function () {
'use strict';
var _WEATHER_TO_ICON = {
cloudy: '\uD83C\uDF2B',
fog: '\uD83C\uDF2B',
hail: 'Hail',
lightning: '\uD83C\uDF29',
'lightning-rainy': '\u26c8',
partlycloudy: '\u26c5',
pouring: '\uD83C\uDF22',
rainy: '\uD83C\uDF27',
snowy: '\uD83C\uDF28',
'snowy-rainy': 'SR',
sunny: '\u2600',
windy: '\uD83C\uDF2C',
'windy-variant': '[]',
exceptional: '!!',
};
var _DEGREE_TEXT = [
'N', 'NNE', 'NE', 'ENE', 'E', 'ESE', 'SE', 'SSE',
'S', 'SSW', 'SW', 'WSW', 'W', 'WNW', 'NW', 'NNW', 'N'
];
Polymer({
is: 'ha-weather-card',
@ -51,7 +160,6 @@
},
getDataArray: function () {
var dataArray = [];
var data = this.stateObj.attributes.forecast;
var i;
@ -59,14 +167,18 @@
return [];
}
// Current values
dataArray.push([new Date(), this.stateObj.attributes.temperature]);
var dDate = [];
var dTempHigh = [];
var dTempLow = [];
var dCond = [];
for (i = 0; i < data.length; i++) {
dataArray.push([new Date(data[i].datetime), data[i].temperature]);
dDate.push(new Date(data[i].datetime).getDate());
dTempHigh.push(data[i].temperature);
dTempLow.push(data[i].templow);
dCond.push(_WEATHER_TO_ICON[data[i].condition]);
}
return dataArray;
return { date: dDate, cond: dCond, temphigh: dTempHigh, templow: dTempLow };
},
checkRequirements: function () {
@ -74,56 +186,19 @@
return;
}
if (!window.google) {
return;
}
if (!this.chartEngine) {
this.chartEngine = new window.google.visualization.LineChart(
this.$.chart_id);
}
if (!this.stateObj.attributes || !this.stateObj.attributes.forecast) {
return;
}
this.drawChart();
this.nowCond = _WEATHER_TO_ICON[this.stateObj.state];
this.windBearing = this.windBearingToText(this.stateObj.attributes.windBearing);
this.data = this.getDataArray();
},
drawChart: function () {
var dataGrid = new window.google.visualization.DataTable();
var options = {
legend: {
position: 'top'
},
interpolateNulls: true,
titlePosition: 'none',
chartArea: {
left: 25,
top: 5,
height: '100%',
width: '90%',
bottom: 25,
},
curveType: 'function',
};
dataGrid.addColumn('datetime', 'Time');
dataGrid.addColumn('number', 'Temperature');
dataGrid.addRows(this.getDataArray());
this.chartEngine.draw(dataGrid, options);
},
googleApiLoaded: function () {
window.google.load('visualization', '1', {
packages: ['corechart'],
callback: function () {
this.checkRequirements();
}.bind(this),
});
},
windBearingToText: function (degree) {
return _DEGREE_TEXT[((parseInt(degree) + 5.63) / 11.25) | 0];
}
});
}());
</script>