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 5 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
143 changes: 91 additions & 52 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 Down Expand Up @@ -70,11 +68,14 @@
td.pw_smallp span {
font-size: 1.2em;
}
td.pw_large span {
font-size: 6em;
td.pw_large {
vertical-align: middle;
font-size: 5em;
overflow: visible;
}

</style>
<google-legacy-loader on-api-load='googleApiLoaded'></google-legacy-loader>
<ha-card header='[[computeTitle(stateObj)]]'>
<div class='content'>
<table class="currentcond" width="100%">
Expand All @@ -84,32 +85,16 @@
<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>
<td class="pw_smallp">
<span>[[windBearing]]<br />[[stateObj.attributes.wind_speed]]</span>
</td>
<td class="pw_smallp">
<span hidden$="[[!stateObj.attributes.visibility]]">
Visibility<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 id='chart_id' hidden$="[[!stateObj.attributes.forecast]]"></div>
</div>
</ha-card>
</template>
Expand All @@ -120,20 +105,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,34 +143,42 @@
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 (!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;
}
Expand All @@ -194,6 +187,52 @@
this.windBearing = this.windBearingToText(this.stateObj.attributes.windBearing);

@balloob balloob Aug 6, 2017

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There is no windBearing attribute. It should be wind_bearing.

@balloob balloob Aug 6, 2017

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should also always assume that certain attributes might not be available.


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) {
Expand Down