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
Regards,
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.
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'}">
</div>
<link rel="stylesheet" type="text/css" href="{{ServerPath}}/weather-data/layouts/example.css" />
</div>
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?
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'}">
</div>
<link rel="stylesheet" type="text/css" href="{{ServerPath}}/weather-data/layouts/example.css" />
</div>
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" />
</div>
There appear to be a couple of (significant) differences to try:
-
Simplify the specification of the
ServerPathvariable tong-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 aweather-datasub-directory. So your ServerPath would beng-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). -
Remove the nested
<div>statement where you declare thedaysnamesmappings. In my version this is appended to the main declaration statement. Possible that the twong-initstatements 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
ServerPathvariable 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" />
{{ServerPath}}
</div>
- Try changing the hyphen in your path to the HEX for this symbol
ߚi.e.ng-init="ServerPath='../static/weatherߚdata'. 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
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
ng-init="ServerPath='http://myIP:8080/static';
to this
ng-init="ServerPath='../static';
then the example.css will be accessed.
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.
Greetings,
Marcel
Please, where do I put the conditions?
Hi,
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'}">
</div>
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>
<td ng-if="itemValue('Condition_ID0')=='UNDEF'">
<img id="weather-icon" src="{{ServerPath}}/images/{{IconSet}}/unknown.png"/>
<p>--</p>
</td>
Here is my Widget:
Wetter-Widget-002.widget.json (5.4 KB)
1 Like
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
1 Like
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.
1 Like
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
Marcel
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?
Hi
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" />
{{ServerPath}}
</div>
Even when I browse http://192…:8080/static//layouts/weather.css 
It look’s like the site configuration is pointing to another place so I tried to access to the webapps folder
Unfortunately…
What do you think about ?
Regards Vincent
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/)
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 !
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 
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.
The is be a “icon” item/channel for that:
Image Icon "Icon" {channel="weatherunderground:weather:CDG:current#icon"}