# Habpanel Widget using Weatherunderground Binding

**URL:** <https://community.openhab.org/t/habpanel-widget-using-weatherunderground-binding/36460>\
**Category:** HABPanel Examples\
**Created:** [November 22, 2017, 10:11am UTC](https://community.openhab.org/t/habpanel-widget-using-weatherunderground-binding/36460 "2017-11-22T10:11:53Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![Knallfrosch](https://community.openhab.org/user_avatar/community.openhab.org/knallfrosch/32/34225_2.png) [@Knallfrosch](https://community.openhab.org/u/Knallfrosch)\
**Post date:** [November 22, 2017, 10:11am UTC](https://community.openhab.org/t/habpanel-widget-using-weatherunderground-binding/36460/1 "2017-11-22T10:11:54Z")

</div>

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](https://community-openhab-org.s3.dualstack.eu-central-1.amazonaws.com/original/3X/6/1/616154e3411d8473618587a37003cd99dd3e69f5.png)  
Here the code:

```auto
<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.

---

<div class="post-metadata">

**Author:** ![Knallfrosch](https://community.openhab.org/user_avatar/community.openhab.org/knallfrosch/32/34225_2.png) [@Knallfrosch](https://community.openhab.org/u/Knallfrosch)\
**Post date:** [November 23, 2017, 10:08am UTC](https://community.openhab.org/t/habpanel-widget-using-weatherunderground-binding/36460/2 "2017-11-23T10:08:16Z")

</div>

> [@Knallfrosch](#):
>
> {{itemValue(‘LocalWeather\_ForecastDay1\_forecastTime’) | date:‘E’}}

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.

---

<div class="post-metadata">

**Author:** ![Ernesto\_Castoza](https://community.openhab.org/user_avatar/community.openhab.org/ernesto_castoza/32/14332_2.png) [@Ernesto\_Castoza](https://community.openhab.org/u/Ernesto_Castoza)\
**Post date:** [November 23, 2017, 1:03pm UTC](https://community.openhab.org/t/habpanel-widget-using-weatherunderground-binding/36460/3 "2017-11-23T13:03:54Z")

</div>

Hello,  
In the following thread, you might find some helpful hints on adding different names for the days. [Template example weather binding](https://community.openhab.org/t/template-example-weather-binding/15869)

---

<div class="post-metadata">

**Author:** ![AndyW](https://community.openhab.org/letter_avatar_proxy/v4/letter/a/f05b48/32.png) [@AndyW](https://community.openhab.org/u/AndyW)\
**Post date:** [November 23, 2017, 2:09pm UTC](https://community.openhab.org/t/habpanel-widget-using-weatherunderground-binding/36460/4 "2017-11-23T14:09:05Z")

</div>

I think

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

```

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

---

<div class="post-metadata">

**Author:** ![Knallfrosch](https://community.openhab.org/user_avatar/community.openhab.org/knallfrosch/32/34225_2.png) [@Knallfrosch](https://community.openhab.org/u/Knallfrosch)\
**Post date:** [November 23, 2017, 2:25pm UTC](https://community.openhab.org/t/habpanel-widget-using-weatherunderground-binding/36460/5 "2017-11-23T14:25:45Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![metnet](https://community.openhab.org/letter_avatar_proxy/v4/letter/m/ccd318/32.png) [@metnet](https://community.openhab.org/u/metnet)\
**Post date:** [November 23, 2017, 2:33pm UTC](https://community.openhab.org/t/habpanel-widget-using-weatherunderground-binding/36460/6 "2017-11-23T14:33:23Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Ernesto\_Castoza](https://community.openhab.org/user_avatar/community.openhab.org/ernesto_castoza/32/14332_2.png) [@Ernesto\_Castoza](https://community.openhab.org/u/Ernesto_Castoza)\
**Post date:** [November 23, 2017, 2:57pm UTC](https://community.openhab.org/t/habpanel-widget-using-weatherunderground-binding/36460/7 "2017-11-23T14:57:49Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![evansnp](https://community.openhab.org/letter_avatar_proxy/v4/letter/e/8797f3/32.png) [@evansnp](https://community.openhab.org/u/evansnp)\
**Post date:** [November 23, 2017, 4:57pm UTC](https://community.openhab.org/t/habpanel-widget-using-weatherunderground-binding/36460/8 "2017-11-23T16:57:16Z")

</div>

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

```auto
<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.

---

<div class="post-metadata">

**Author:** ![Knallfrosch](https://community.openhab.org/user_avatar/community.openhab.org/knallfrosch/32/34225_2.png) [@Knallfrosch](https://community.openhab.org/u/Knallfrosch)\
**Post date:** [November 24, 2017, 8:28am UTC](https://community.openhab.org/t/habpanel-widget-using-weatherunderground-binding/36460/9 "2017-11-24T08:28:57Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![danielwalters86](https://community.openhab.org/user_avatar/community.openhab.org/danielwalters86/32/37745_2.png) [@danielwalters86](https://community.openhab.org/u/danielwalters86)\
**Post date:** [November 24, 2017, 2:55pm UTC](https://community.openhab.org/t/habpanel-widget-using-weatherunderground-binding/36460/10 "2017-11-24T14:55:09Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Knallfrosch](https://community.openhab.org/user_avatar/community.openhab.org/knallfrosch/32/34225_2.png) [@Knallfrosch](https://community.openhab.org/u/Knallfrosch)\
**Post date:** [November 25, 2017, 6:16am UTC](https://community.openhab.org/t/habpanel-widget-using-weatherunderground-binding/36460/11 "2017-11-25T06:16:19Z")

</div>

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” 😉  
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 … 😉