Very nice @AndyMB this is really nice. I’ll add that clear-night also needs to be renamed to clear.
Time for another side project to be put on the list methinks…
What is the best way to translate the days?
True 
I copied “sunny.png” to “clear.png” for a day display
Original post updated. I’d did the icon changes weeks ago and completely forgot all the changes when doing the post. Lesson learnt… Andy 
1 Like
Looks awesome, I like how much easily readable info you have on yours. I made a very similar Weather widget, however I used the Climacons font which I had to upload to the web/assets folder. Happy to share the HTML if people are interested, but I may need to upload it somewhere as it is quite long due to the very sloppy embeded CSS.
6 Likes
Hi Ben, I would like to see your HTML code. Especially I am interested how you integrated the climacons font.
I would love to see an animated weather conditions background possible in HABPanel, like what is done in the Nest web interface, or like what is done here: http://www.mmmbridgecity.org/estilos/WeatherSlider/example/example.html
(Evidently, it’s snowing in Berlin. The snowflakes are falling in this example. Others, rain is falling, clouds, are drifting, lightning is striking, etc.)
1 Like
wow - that screen looks awesome, would be nice with some animated screens
hi Ben x2 for me would love to see all your template, item and sitemap for this beauty
Does anybody know where can i find full list of weather icon filenames possible to occur? I often get blank icons because they don’t exist in icon set, for example “breeze.png”. I use yahoo weather.
Hi Ben,
Definitely would like to see your HTML for this widget. Looks fantastic
There does not seem to be an API call to list all the possible condition names (which are used in the code to match to the icons). There are several lists of these published from a web search, for example:
But that does not include “Breezy”. Some suggestions that there may be some discrepancy between the published lists and what “conditions” are being published by the API today.
You could try adding condition IDs to the HTML rendering to identify if these are a) new codes or b) they have changed the name for the ID.
String Condition_ID0 "Condition id [%s]" {weather="locationId=[your location], forecast=0, type=condition, property=id"}
String Condition_ID1 "Condition id [%s]" {weather="locationId=[your location], forecast=1, type=condition, property=id"}
String Condition_ID2 "Condition id [%s]" {weather="locationId=[your location], forecast=2, type=condition, property=id"}
If it is a new condition ID then we will need a new icon (sorry I do not have the artistic skills to generate these). If it is a rename then a simple rename / copy of the icon as I indicted was necessary in some cases in my first post, would obviously do the job.
If you post back what you find, I will amend the first post to improve the code / instructions.
Cheers, Andy
1 Like
@bwhouse Ben, I really like yours the best. I wonder if you can share your code. I am not ready to dive into Habpanel yet, but when ready, this would be the first thing that I implement. Thanks
I’ve submitted a pull request on HABPanel github where I created a weather widget using same Climacons that @bwhouse did
The icons can be animated as well (there’s an option in settings) and you can pass three additional items at the bottom (like humidity, pressure etc).
It’s still experimental, but I’d love some feedback on my pull requests page
1 Like
Hi Andy,
so the only I can say is that i don’t trust “text” property of ConditionID anymore.
I did something else to fix this issue:
-
downloaded set of icons from http://postimg.org/image/7ibc9nqy1/ with preassigned icons to Condition ID by filename. There are png and svg icons available.
-
I’ve exchanged icon sets from openhab/conf/html/images with the downloaded ones.
The only you need to do with the icon set is to remove “0” from every ‘single digit’ filename e.g. 05.png copy to 5.png and na.png copy to 3200.png.
This is according to https://developer.yahoo.com/weather/documentation.html#codes -
Addedd new items to get Conditions ID property
String YCondition_id "[%s]" {weather="locationId=homeyahoo, type=condition, property=id"}
String YCondition0_id "[%s]" {weather="locationId=homeyahoo, forecast=0, type=condition, property=id"}
String YCondition1_id "[%s]" {weather="locationId=homeyahoo, forecast=1, type=condition, property=id"}
String YCondition2_id "[%s]" {weather="locationId=homeyahoo, forecast=2, type=condition, property=id"}
- Changed html code to:
<div ng-init="ServerPath='http://192.168.0.1:8080/static'; IconSet='colorful'">
<link rel="stylesheet" type="text/css" href="{{ServerPath}}/layouts/example.css" />
</div>
<div id="weather-location-name" >
My home {{itemValue('YObservationTime') | date:'short'}}
</div>
<table id="weather-table">
<tr>
<td rowspan="2"><img id="weather-icon" src="{{ServerPath}}/images/{{IconSet}}/png/{{itemValue('YCondition_id')}}.png"/></td>
<td id="weather-temp">{{'%.1f' | sprintf:itemValue('YTemperature')}}</td>
<td id="weather-temp-sign">°C</td>
</tr>
<tr>
<td colspan="2">
<table id="weather-table-details">
<tr>
<td>Humidity:</td>
<td>{{itemValue('YHumidity')}} %</td>
</tr>
<tr>
<td>Pressure:</td>
<td>{{'%.0f' | sprintf:itemValue('YPressure') / 1000}} MPa</td>
</tr>
</table>
</td>
</tr>
<tr>
<td/>
<td>Today</td>
<td>{{itemValue('YObservationTime1') | date:'EEEE'}}</td>
<td>{{itemValue('YObservationTime2') | date:'EEEE'}}</td>
</tr>
<tr>
<td/>
<td>
<img id="weather-icon" src="{{ServerPath}}/images/{{IconSet}}/png/{{itemValue('YCondition0_id')}}.png"/>
<p>{{itemValue('YCondition0')}}</p>
</td>
<td>
<img id="weather-icon" src="{{ServerPath}}/images/{{IconSet}}/png/{{itemValue('YCondition1_id')}}.png"/>
<p>{{itemValue('YCondition1')}}</p>
</td>
<td>
<img id="weather-icon" src="{{ServerPath}}/images/{{IconSet}}/png/{{itemValue('YCondition2_id')}}.png"/>
<p>{{itemValue('YCondition2')}}</p>
</td>
</tr>
<tr>
<td class="col-xs-4" style="color:red">Max</td>
<td class="col-xs-4" style="color:red">{{'%.0f' | sprintf:itemValue('YTemp_Max0')}} °C</td>
<td class="col-xs-4" style="color:red">{{'%.0f' | sprintf:itemValue('YTemp_Max1')}} °C</td>
<td class="col-xs-4" style="color:red">{{'%.0f' | sprintf:itemValue('YTemp_Max2')}} °C</td>
</tr>
<tr>
<td class="col-xs-4" style="color:#0db9f0">Min</td>
<td class="col-xs-4" style="color:#0db9f0">{{'%.0f' | sprintf:itemValue('YTemp_Min0')}} °C</td>
<td class="col-xs-4" style="color:#0db9f0">{{'%.0f' | sprintf:itemValue('YTemp_Min1')}} °C</td>
<td class="col-xs-4" style="color:#0db9f0">{{'%.0f' | sprintf:itemValue('YTemp_Min2')}} °C</td>
</tr>
</table>
<p/>
-
Of course you need to change YCondition_id, YCondition0_id, YCondition1_id, YCondition2_id and YCondition, YCondition0, YCondition1, YCondition2 to your own items.
-
Corrected weather_eng.map to compliant with https://developer.yahoo.com/weather/documentation.html#codes
EDIT: Additional exception - na.png should be copied to UNDEF.png
Many thanks for this thread. I’m not a programmer, so I need an examples like this to get me started. I have managed to get this widget working but am confused about the icon names.
I get my weather from OpenWeatherMap and it works fine in the Paper Ui from the example.html file rather than from the items file. The condition names and hence the icons are however completely different using the above code than from the html file.
For example in the html example it’s few-showers but in the widget it is light-rain, sunny is clear-sky, fog is mist. I have therefore got to copy and rename all the icons as and when they occur!
My ‘example.html’ doesn’t use any mapping, nor the items in the ‘home.items’ file (I had to add them to get the widget to work) and uses the following for the current day’s forecast:
<img src="static/weather-data/images/${param:iconset}/${forecast(0):condition.commonId}.png"/>
The widget uses the following:
<img src="{{ServerPath}}/weather-data/images/{{IconSet}}/{{itemValue('Condition0').replace(' ','-') | lowercase }}.png"/>
Can anyone please explain why I get different results?
Mike
I have solved my icon problem by changing the property in the Condition items from ‘text’ to ‘commonId’.
String Condition0 "Condition [%s]" {weather="locationId=home, type=condition, property=commonId"}
The day something works for me first time in OpenHAB I’m going straight to the bar for a whiskey.
My panel doesn’t display the icons, though the weather data seems fine.
<div ng-init="ServerPath='http://192.168.178.51:8080/static'; IconSet='flat_white'">```
Would anyone have an idea why?
Edit: I noticed the Karaf consol through some messages for a clue:
<img src="//community-openhab-org.s3-eu-central-1.amazonaws.com/original/2X/7/79c2077095601a2f18c51d84eb6414671aae9ddf.png" width="499" height="334">