Habpanel Widget using Weatherunderground Binding

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

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.

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

I think

{{itemValue(‘LocalWeather_ForecastDay1_forecastTime’) | date:‘EEEE’}}

is the right way…
I have this on my weather widget.

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

Hi,
if you select “show more” on the upper right corner, the forcasttime will show up.

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.

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.

Thanks for this. I did not realize the “show more”. That helped! :wink:

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

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: