Template Example: Weather Binding

Tags: #<Tag:0x00007f1826ff2978>

(paquet) #124

Hello everyone
excuse me for my ignorance
I managed to set the weather on the part in the Classic UI part I see the temperature, humidity pressure by cons I do understand the operation of HABpanel
is there a tutorial or can you tell me what I need to put and or
because frankly I do not see

(Johnny Janssen) #126

Hi Nathan,
I don’t know if you already solved your problem with the weather icons, but I found out that weatherunderground sends the icons in GIF format instead of PNG. So i renamed all my icons to GIF and that worked for me.

(Andy Wolff) #127

Hello Everybody,

i have a little problem with my weather widget.
The example.css has no effect on the look.
For example: When i make by #weather-icon the width or height smaller --> Nothing


<div ng-init="ServerPath='http://192.***.*.**:8080/static'; IconSet='flat_white_wu'">
<div ng-init="daysnames={'Sunday': 'Sonntag', 'Monday': 'Montag', 'Tuesday': 'Dienstag', 'Wednesday': 'Mittwoch', 'Thursday': 'Donnerstag', 'Friday': 'Freitag', 'Saturday': 'Samstag'}">
<link rel="stylesheet" type="text/css" href="{{ServerPath}}/weather-data/layouts/example.css" />
body {
	font-size: 14px;
	font-family: Helvetica, sans-serif;

table {
	border-spacing: 0px;
	border: 0px;
	padding: 0px;
	width: 1px;

#weather-table, #weather-location-name{
	padding-bottom: 10px;

#weather-icon {
	width: 80px;
	height: 80px;
	margin-left: 8px;
	margin-right: 8px;

#weather-temp {
	text-align: left;
	font-size: 35px;
	width: 1px;

#weather-temp-sign {
	text-align: top;
	font-size: 22px;

#weather-table-details {
	font-size: 12px;
	text-align: left;

#weather-table-details td {
	white-space: nowrap;

#weather-forecast-table img {
	width: 30px;
	height: 30px;

#weather-forecast-table td {
  	text-align: center;

#weather-forecast-table .temp-max {
	font-size: 18px;
	color: red;

#weather-forecast-table .temp-min {
	font-size: 16px;
	color: blue;

I see no mistake … you?

(Greg) #128

If you browse to


does the css file load?

(Andy Wolff) #129

Yes, of course

(Andy) #130

Hi @AndyW,

Looking at your code:

<div ng-init="ServerPath='http://192.***.*.**:8080/static'; IconSet='flat_white_wu'">
<div ng-init="daysnames={'Sunday': 'Sonntag', 'Monday': 'Montag', 'Tuesday': 'Dienstag', 'Wednesday': 'Mittwoch', 'Thursday': 'Donnerstag', 'Friday': 'Freitag', 'Saturday': 'Samstag'}">
<link rel="stylesheet" type="text/css" href="{{ServerPath}}/weather-data/layouts/example.css" />

versus my latest (working) version:

<div ng-init="ServerPath='../static'; IconSet='flat_colorful'; daynames={'Sunday': 'Sunday', 'Monday': 'Monday', 'Tuesday': 'Tuesday', 'Wednesday': 'Wednesday', 'Thursday': 'Thursday', 'Friday': 'Friday', 'Saturday': 'Saturday', 'Sunday': 'Sunday'}">
<link rel="stylesheet" type="text/css" href="{{ServerPath}}/layouts/example.css" />

There appear to be a couple of (significant) differences to try:

  1. Simplify the specification of the ServerPath variable to ng-init="ServerPath='../static'. This is the variable that was designed to be used to change the location of the files, In your case, you added a weather-data sub-directory. So your ServerPath would be ng-init="ServerPath='../static/weather-data'. Rationale: by changing in one location/variable, you do not need to change any of the other paths (if you have made any other path changes you may need to undo these changes etc).

  2. Remove the nested <div> statement where you declare the daysnames mappings. In my version this is appended to the main declaration statement. Possible that the two ng-init statements are a problem and I would always go for simpler 1 rather than 2 when debugging etc.

If neither of these work:

  • Try outputting the ServerPath variable to see what you are getting / is it being set correctly?:
<div ng-init="ServerPath='../static'; IconSet='flat_colorful'; daynames={'Sunday': 'Sunday', 'Monday': 'Monday', 'Tuesday': 'Tuesday', 'Wednesday': 'Wednesday', 'Thursday': 'Thursday', 'Friday': 'Friday', 'Saturday': 'Saturday', 'Sunday': 'Sunday'}">
<link rel="stylesheet" type="text/css" href="{{ServerPath}}/layouts/example.css" />
  • Try changing the hyphen in your path to the HEX for this symbol &#2010 i.e. ng-init="ServerPath='../static/weather&#2010data'. Long shot, but worth a try if all else has failed (I’ve been burnt in the past with issues associated with symbols and punctuation characters in URLs).

Hope this is helpful. Please let the community know which of these steps cured the problem. If you are still stuck, can you post your full code text so I can copy/paste to reproduce your problem.

Regards, Andy

(Andy Wolff) #131

Hi @AndyMB,

thank you so much for your help.
The problem was not the second ng-init, rather the "Serverpath".

When I chance the Serverpath from this


to this


then the example.css will be accessed.


(Marcel Becker) #132

Hey AndyW,

love your widget, i’ve try to set German weekdays but don’t work.

Do you want to share your widget :), would be very nice.


(spaceman) #133

Please, where do I put the conditions?

(Andy Wolff) #134

sorry for my late reply… @Marcello87

I work for the german Weatherinformations with the WeatherUnderground Binding, while the Weather Binding doesn’t support the german translation and the mapping does not really work either.
But I need the Weather Binding for the pictures in the widget.

The german daynames is defined in the ng-init:

<div ng-init="ServerPath='../static'; IconSet='flat_white_wu'; daysnames={'Sunday': 'Sonntag', 'Monday': 'Montag', 'Tuesday': 'Dienstag', 'Wednesday': 'Mittwoch', 'Thursday': 'Donnerstag', 'Friday': 'Freitag', 'Saturday': 'Samstag'}">

And here it is called with the item:

<td ng-if="itemValue('ObservationTime1')!='UNDEF'">{{daysnames[(itemValue('ObservationTime1') | date:'EEEE')]}}</td>

For the pictures I take the “Condition_ID”, which means the same as the picture, so I don’t have to work with “lowercase, etc”.

		<td ng-if="itemValue('Condition_ID0')!='UNDEF'">
			<img id="weather-icon" src="{{ServerPath}}/images/{{IconSet}}/{{itemValue('Condition_ID0')}}.png"/>
			<p> {{itemValue('WeatherInformation_ForecastToday_Conditions')}} </p>
		<td ng-if="itemValue('Condition_ID0')=='UNDEF'">
			<img id="weather-icon" src="{{ServerPath}}/images/{{IconSet}}/unknown.png"/>

Here is my Widget:
Wetter-Widget-002.widget.json (5.4 KB)

(Andy) #135

Hi @spaceman,

If you mean where do you place the weather condition icons, then you need to extract the files to your conf/html directory. You should end up with two sub directories named images and layouts containing the extracted files.

If you are mapping from a Windows PC to your openHAB host, this would be to \\192.168.0.xxx\openHAB-conf (replacing 192.168.0.xxx with your IP address or hostname) you should see the html subdirectory as one of the folders. So you would extract your files there.

If you are using Linux then refer to the openHAB file locations. Depending on your install type it is /etc/openhab2/html or /opt/openhab2/conf/html.

Either way you should end up with a folder structure that is:

conf -- html ---  images --- colourful
              |          |-- dark
              |          |-- flat_black
              |          |-- flat_colourful
              |          |-- flat_white
              |          |-- light
              --- layouts

I hope this answers your question, if not can you provide more detail on the part of the implementation that you are having trouble with.

Regards, Andy

(spaceman) #136

I finally figure it out! I install openHab on Simple mode instead of Expert mode. So for that, I could not seen the items when linking a channel. When I saw the items, it all went clear. Before that, I did not know at all where Condition0, Condition1, etc came from…

It’s all working well now!

Thank you!

What would be great is to have a set of icons that cover all possibilities.

(Marcel Becker) #137

Hey AndyW,

special thanks for your great declaration, works perfect for me.

Only “WeatherInformation_ForecastToday_Conditions” said N/A, but that is because of my WU configuration.

Best greetings

(John) #138

Hi - would you mind sharing your animation code? Also how did you get the current day high/low forecast as there are no xml feeds for this. Is it off the html observations files?

(vincent) #139


I run OH2.1 and try to install the weather binding.
I think I have a issue with the ServerPath because it’s impossible for me to acces to the css file stored in here :

Here the code posted by AndyMB I added :

<div ng-init="ServerPath='../static'; IconSet='flat_colorful'">
<link rel="stylesheet" type="text/css" href="{{ServerPath}}/layouts/weather.css" />

Even when I browse http://192…:8080/static//layouts/weather.css :frowning:

It look’s like the site configuration is pointing to another place so I tried to access to the webapps folder



What do you think about ?

Regards Vincent

(vincent) #140


even whith the right URL it doesn’t works


(Sergey M) #141

http://192…:8080/static/ I’m not sure, but ‘static’ this in the address it is a folder 'html’
try putting your files in the directory ‘/openHAB2-Conf/html/layouts/’
(http://192…:8080/static/ = /openHAB2-Conf/html/)

(vincent) #142

Indeed, http:// 192…:8080/static/ is linked to /openHAB2-Conf/html/.

So it was a mistake to create the static folder in /openHAB2-Conf/html/static.
As it was written, OH was attented to find the weather.css file in the http:// 192…:8080/static/static/layouts folder.

Thank you four your help Olymp !

(E. Gerland) #143

That’s a great help - thanks a lot.
I am currently migrating from weather binding webview to a wunderground binding habpanel template approach.

However, I struggle with the translated weather condition which is part of OH 2.2 now through localization (I guess :wink:
So my Weather_Current condition comes as “Nebel” instead of Fog.

Because I don’t want to rename all the icons (and I guess it’s not neccessary I wonder if there’s another easier way?

Any suggestion would be greatly appreciated.

(Thomas Binder) #144

The is be a “icon” item/channel for that:

Image Icon "Icon" {channel="weatherunderground:weather:CDG:current#icon"}