I am using Habpanel on an Android tab which is wall mounted next to the main entrance. I now have started integrating weather forecast with using the new weatherunderground binding, what I want to share with you. I used the icons from the weather widget that is mentioned a few times in this forum.
Here the screenshot:
Here the code:
<table style="text-align: center; width: 483px;" border="1"
cellpadding="2" cellspacing="2">
<tbody>
<tr>
<td style="vertical-align: top; width: 60px;"><br>
</td>
<td
style="vertical-align: top; width: 130px; text-align: center; color: white;">Heute</td>
<td
style="vertical-align: top; width: 130px; text-align: center; color: white;">{{itemValue('LocalWeather_ForecastDay1_forecastTime') | date:'E'}}</td>
<td
style="vertical-align: top; width: 130px; text-align: center; color: white;">{{itemValue('LocalWeather_ForecastDay2_forecastTime') | date:'E'}}</td>
</tr>
<tr>
<td style="vertical-align: top; width: 60px;"><br>
</td>
<td style="vertical-align: top; text-align: center; width: 130px;"><img src="http://192.168.XXX.XXX:8080/static/images/flat_colorful/{{itemValue('LocalWeather_ForecastToday_ForecastConditions').replace(' ','-') | lowercase }}.png"/><br>{{itemValue('LocalWeather_ForecastToday_ForecastConditions')}}
</td>
<td style="vertical-align: top; text-align: center; width: 130px;"><img src="http://192.168.XXX.XXX:8080/static/images/flat_colorful/{{itemValue('LocalWeather_ForecastTomorrow_ForecastConditions').replace(' ','-') | lowercase }}.png"/><br>{{itemValue('LocalWeather_ForecastTomorrow_ForecastConditions')}}
</td>
<td style="vertical-align: top; text-align: center; width: 130px;"><img src="http://192.168.XXX.XXX:8080/static/images/flat_colorful/{{itemValue('LocalWeather_ForecastDay2_ForecastConditions').replace(' ','-') | lowercase }}.png"/><br>{{itemValue('LocalWeather_ForecastDay2_ForecastConditions')}}
</td>
</tr>
<tr>
<td style="vertical-align: top; width: 60px; color: white;">Max<br>
</td>
<td style="vertical-align: top; text-align: center; width: 130px;">{{itemValue('LocalWeather_ForecastToday_MaximumTemperature')}}°C<br>
</td>
<td style="vertical-align: top; text-align: center; width: 130px;">{{itemValue('LocalWeather_ForecastTomorrow_MaximumTemperature')}}°C<br>
</td>
<td style="vertical-align: top; text-align: center; width: 130px;">{{itemValue('LocalWeather_ForecastDay2_MaximumTemperature')}}°C<br>
</td>
</tr>
<tr>
<td style="vertical-align: top; width: 60px; color: white;">Min<br>
</td>
<td style="vertical-align: top; text-align: center; width: 130px;">{{itemValue('LocalWeather_ForecastToday_MinimumTemperature')}}°C<br>
</td>
<td style="vertical-align: top; text-align: center; width: 130px;">{{itemValue('LocalWeather_ForecastTomorrow_MinimumTemperature')}}°C<br>
</td>
<td style="vertical-align: top; text-align: center; width: 130px;">{{itemValue('LocalWeather_ForecastDay2_MinimumTemperature')}}°C<br>
</td>
</tr>
</tbody>
</table>
<br>
There is still space for improvement:
- Displaying Weekday instead of tomorrow
- Using a different language – which clashes with addressing the icons.
- And of course some kind of formatting.