Habpanel Widget using Weatherunderground Binding

Tutorials & Examples HABPanel Examples
1

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:
Weather 1
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.
4 Likes
2

Has anyone an idea, how I can add the names of the next two day?
{{itemValue(ā€˜LocalWeather_ForecastDay1_forecastTimeā€™) | date:ā€˜Eā€™}} does not work.
Unfortunately I can not add the items ForecastDay1_forecastTime and ForecastDay2_forecastTime via PaperUI.

3

Hello,
In the following thread, you might find some helpful hints on adding different names for the days. Template example weather binding

4

I think

{{itemValue(ā€˜LocalWeather_ForecastDay1_forecastTimeā€™) | date:ā€˜EEEEā€™}}

is the right wayā€¦
I have this on my weather widget.

5

Thanks, but I am not using the Weather Binding but the Weatherunderground Binding which comes with OH2 support so I can set it up via Paper UI. Unfortunately there is nor forcasttime item I can chose in the Things-settings.
I have not set up an item file. I prefer to use the PaperUI

6

Hi,
if you select ā€œshow moreā€ on the upper right corner, the forcasttime will show up.

7

Ok, Iā€™m also using the Weather underground binding. If you look in the Paper UI under ā€œConfiguration > Things > Weather Informationā€ you should find all the channels available to you for that binding.

8

This is an extract from my custom widget, using Wunderground, it should give you a clue as to where to find the correct item.

<td>Today</td>
<td>{{itemValue('ForecastTimeTomorrow') | date:'EEEE'}}</td>
<td>{{itemValue('ForecastTimeNext') | date:'EEEE'}}</td>

You need to expose these channels as items; I did mine in an items file, not paper ui.
If you need it, I can send you a copy of my items file.

9

Thanks for this. I did not realize the ā€œshow moreā€. That helped! :wink:

10

Good work, but as always I would encourage you not to hardcode your item names into the custom widget - if you use config placeholders then it will be more accessible for others.

1 Like
11

Thanks Daniel,
I absolutly agree with you. But I am not a programmer. I was happy to write some lines HTML, so that the values fit into a table. Defining variables und using them, will be one of the next steps. Maybe I find some helpful articles, that help me to increase my ā€œskillsā€ :wink:
What I also realised, when I went through many articles: mapping seems not to be supported in HabPanel.
But good thing: Everything at the OH project is moving forward. I like that. Maybe one day I can support a little bit here and there. At the moment I am a student - not a teacher ā€¦ :wink: