Skip to content

Weatherpanel #375

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
balloob merged 8 commits into from
Aug 8, 2017
Merged

Weatherpanel #375

Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
7d0f840
temporary save
fanthos Aug 5, 2017
9d899ac
revert table to chart
fanthos Aug 5, 2017
0b682ef
Merge remote-tracking branch 'remotes/upstream/master'
fanthos Aug 5, 2017
b8e5ca0
fix missing emoji
fanthos Aug 5, 2017
194d90c
fix linting
fanthos Aug 5, 2017
508d7bb
commit, try to migrate table to div
fanthos Aug 7, 2017
9bb3024
Change the table to div
fanthos Aug 7, 2017
6460025
fix lint
fanthos Aug 7, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
242 changes: 130 additions & 112 deletions src/cards/ha-weather-card.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,7 @@
<link rel='import' href='../../bower_components/polymer/polymer.html'>

<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'>
<template>
<style>
Expand All @@ -15,101 +13,57 @@
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 {
.condicon {
text-align: center;
vertical-align: middle;
overflow-x: hidden;
font-size: 4em;
}
tr.cond td {
overflow-x: hidden;
overflow-y: visible;
.condtemp {
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;
font-size: 4em;
}
.forecast td:nth-child(2n+3) {
background-color: #eee;
div.cond {
display: inline;
}
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;
div.conddetails {
float: right;
display: block table;
overflow: auto;
text-align: right;
}
td.pw_small{
width: 25%;
height: 2.6em;
span.line {
display: block;
}
td.pw_smallp span {
font-size: 1.2em;
.condsmall {
font-size: 1em;
}
td.pw_large span {
font-size: 6em;
.clear {
clear: both;
}

</style>
<google-legacy-loader on-api-load='googleApiLoaded'></google-legacy-loader>
<ha-card header='[[computeTitle(stateObj)]]'>
<div class='content'>
<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 class='condpanel'>
<div class='cond condicon'>[[nowCond]]</div>
<div class='cond condtemp'>[[attr.temperature]]°</div>
<div class='cond conddetails'>
<div class="condsmall" hidden$="[[!attr.wind_speed]]">
Wind:
<span hidden$="[[!attr.wind_speed]]">
[[attr.wind_speed]]
</span>
<span hidden$="[[!windBearing]]">[[windBearing]]</span>
</div>
<div class="condsmall" hidden$="[[!attr.humidity]]">
Humidity: [[attr.humidity]]%
</div>
<div class="condsmall" hidden$="[[!attr.visibility]]">
Visibility: [[attr.visibility]]
</div>
</div>
<div class='clear'></div>
</div>
<div id='chart_id' hidden$="[[!attr.forecast]]"></div>
</div>
</ha-card>
</template>
Expand All @@ -120,20 +74,20 @@
'use strict';

var _WEATHER_TO_ICON = {
cloudy: '\uD83C\uDF2B',
fog: '\uD83C\uDF2B',
cloudy: '\u2601\ufe0f',
fog: '\uD83C\uDF2B\ufe0f',
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: '!!',
lightning: '\uD83C\uDF29\ufe0f',
'lightning-rainy': '\u26c8\ufe0f',
partlycloudy: '\u26c5\ufe0f',
pouring: '\uD83D\uDCA7\ufe0f',
rainy: '\uD83C\uDF27\ufe0f',
snowy: '\uD83C\uDF28\ufe0f',
'snowy-rainy': '\uD83C\uDF28\ufe0f',
sunny: '\u2600\ufe0f',
windy: '\uD83C\uDF2C\ufe0f',
'windy-variant': '\uD83C\uDF2C\ufe0f',
exceptional: '\u2b55\ufe0f',
};

var _DEGREE_TEXT = [
Expand All @@ -158,46 +112,110 @@
computeTitle: function (stateObj) {
return stateObj.attributes.friendly_name;
},

getDataArray: function () {
var dataArray = [];
var data = this.stateObj.attributes.forecast;
var i;

if (!this.stateObj.attributes.forecast) {
return [];
}

var dDate = [];
var dTempHigh = [];
var dTempLow = [];
var dCond = [];
for (i = 0; i < data.length; i++) {
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]);
var d = data[i];
if (!d.condition) {
dataArray.push([new Date(d.datetime), null, d.temperature, d.templow]);
} else {
dataArray.push([new Date(d.datetime), _WEATHER_TO_ICON[data[i].condition],
d.temperature, d.templow]);
}
}

return { date: dDate, cond: dCond, temphigh: dTempHigh, templow: dTempLow };
return dataArray;
},

checkRequirements: function () {
if (!this.stateObj) {
return;
}

if (!this.stateObj.attributes || !this.stateObj.attributes.forecast) {
if (!this.stateObj.attributes) {
return;
}

this.attr = this.stateObj.attributes;

this.nowCond = _WEATHER_TO_ICON[this.stateObj.state];
this.windBearing = this.windBearingToText(this.stateObj.attributes.windBearing);
this.windBearing = this.windBearingToText(this.attr.wind_bearing);

if (!window.google) {
return;
}

if (!this.chartEngine) {
this.chartEngine = new window.google.visualization.LineChart(
this.$.chart_id);
}

if (!this.attr.forecast) {
return;
}

this.data = this.getDataArray();

this.drawChart();
},
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',
focusTarget: 'category',
colors: ['red', 'blue'],
annotations: {
textStyle: {
fontSize: '24',
}
}
};

dataGrid.addColumn('datetime', 'Time');
dataGrid.addColumn({ type: 'string', role: 'annotation' });
dataGrid.addColumn('number', 'Temperature');
dataGrid.addColumn('number', 'Temperature Low');

var dataArray = this.getDataArray();
dataGrid.addRows(dataArray);

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];
var degreenum = parseInt(degree);
if (isFinite(degreenum)) {
return _DEGREE_TEXT[(((degreenum + 11.25) / 22.5) | 0) % 16];
}
return '';
}
});
}());
Expand Down