Custom widget: Current Weather

Thanks Dominic, I’ll take a look at it. Shouldn’t be difficult.


Hi Dominic,

thanks a lot. That was actually what I was looking for. It looks much better now on my forcast:

my items are:

String Weather_Formatted_Condition0  "Wetter: [MAP(]" {weather="locationId=home, type=condition, property=commonId"}
String Weather_Formatted_Condition1  "Wetter: [MAP(]" {weather="locationId=home, forecast=1, type=condition, property=commonId"}
String Weather_Formatted_Condition2  "Wetter: [MAP(]" {weather="locationId=home, forecast=2, type=condition, property=commonId"}
String Weather_Formatted_Condition3  "Wetter: [MAP(]" {weather="locationId=home, forecast=3, type=condition, property=commonId"}
String Weather_Formatted_Condition4  "Wetter: [MAP(]" {weather="locationId=home, forecast=4, type=condition, property=commonId"}
String Weather_Formatted_Condition5  "Wetter: [MAP(]" {weather="locationId=home, forecast=5, type=condition, property=commonId"}
String Weather_Formatted_Condition6  "Wetter: [MAP(]" {weather="locationId=home, forecast=6, type=condition, property=commonId"}

Number Temp_Min0 "Temperature min [%.2f °C]" {weather="locationId=home, forecast=0, type=temperature, property=min"}
Number Temp_Max0 "Temperature max [%.2f °C]" {weather="locationId=home, forecast=0, type=temperature, property=max"}
Number Temp_Min1 "Temperature min [%.2f °C]" {weather="locationId=home, forecast=1, type=temperature, property=min"}
Number Temp_Max1 "Temperature max [%.2f °C]" {weather="locationId=home, forecast=1, type=temperature, property=max"}
Number Temp_Min2 "Temperature min [%.2f °C]" {weather="locationId=home, forecast=2, type=temperature, property=min"}
Number Temp_Max2 "Temperature max [%.2f °C]" {weather="locationId=home, forecast=2, type=temperature, property=max"}
Number Temp_Min3 "Temperature min [%.2f °C]" {weather="locationId=home, forecast=3, type=temperature, property=min"}
Number Temp_Max3 "Temperature max [%.2f °C]" {weather="locationId=home, forecast=3, type=temperature, property=max"}
Number Temp_Min4 "Temperature min [%.2f °C]" {weather="locationId=home, forecast=4, type=temperature, property=min"}
Number Temp_Max4 "Temperature max [%.2f °C]" {weather="locationId=home, forecast=4, type=temperature, property=max"}
Number Temp_Min5 "Temperature min [%.2f °C]" {weather="locationId=home, forecast=5, type=temperature, property=min"}
Number Temp_Max5 "Temperature max [%.2f °C]" {weather="locationId=home, forecast=5, type=temperature, property=max"}
Number Temp_Min6 "Temperature min [%.2f °C]" {weather="locationId=home, forecast=6, type=temperature, property=min"}
Number Temp_Max6 "Temperature max [%.2f °C]" {weather="locationId=home, forecast=6, type=temperature, property=max"}

Number Wind_Speed0 "Windspeed [%.2f km/h]" {weather="locationId=home, forecast=0, type=wind, property=speed"}
Number Wind_Speed1 "Windspeed [%.2f km/h]" {weather="locationId=home, forecast=1, type=wind, property=speed"}
Number Wind_Speed2 "Windspeed [%.2f km/h]" {weather="locationId=home, forecast=2, type=wind, property=speed"}
Number Wind_Speed3 "Windspeed [%.2f km/h]" {weather="locationId=home, forecast=3, type=wind, property=speed"}
Number Wind_Speed4 "Windspeed [%.2f km/h]" {weather="locationId=home, forecast=4, type=wind, property=speed"}
Number Wind_Speed5 "Windspeed [%.2f km/h]" {weather="locationId=home, forecast=5, type=wind, property=speed"}
Number Wind_Speed6 "Windspeed [%.2f km/h]" {weather="locationId=home, forecast=6, type=wind, property=speed"}
String Weather_Condition0 "Wetter: Pogoda [%s]" {weather="locationId=home, type=condition, property=commonId"}
String Weather_Condition6 "Wetter: [%s]" {weather="locationId=home, forecast=6, type=condition, property=commonId"}
String Weather_Condition2 "Wetter: [%s]" {weather="locationId=home, forecast=2, type=condition, property=commonId"}
String Weather_Condition1 "Wetter: [%s]" {weather="locationId=home, forecast=1, type=condition, property=commonId"}
String Weather_Condition3 "Wetter: [%s]" {weather="locationId=home, forecast=3, type=condition, property=commonId"}
String Weather_Condition4 "Wetter: [%s]" {weather="locationId=home, forecast=4, type=condition, property=commonId"}
String Weather_Condition5 "Wetter: [%s]" {weather="locationId=home, forecast=5, type=condition, property=commonId"}

DateTime Day0
String Today 			"Heute: [MAP(]"
String Tomorrow 		"Morgen: [MAP(]"
String DayAfterTomorrow "Übermorgen: [MAP(]"
String Day3  			"4.Tag: [MAP(]"
String Day4  			"5.Tag: [MAP(]"
String Day5   			"6.Tag: [MAP(]"
String Day6     		"7.Tag: [MAP(]"

my contains…


…and my contains:

rain-and-snow=Regen und Schnee
rain-and-sleet=Regen und Schneeregen
snow-and-sleet=Schnee und Schneeregen
freezing-drizzle=gefrierender Niessel
few-showers=wenige Schauer
freezing-rain=gefrierender Regen
light-snow=leichter Schnee
mostly-cloudy-night=Bewölkte Nacht
mostly-cloudy-day=Bewölkter Tag
partly-cloudy-night=Leicht bewölkte Nacht
partly-cloudy-day=Leicht bewölkter Tag
clear-night=Klare Nacht
scattered-thunder=vereinzelte Gewitter
scattered-showers=vereinzelte Schauer
scattered-thundershower=vereinzelte Gewitterschauer

Do you have any idea, why my mappings in and do not work?
Or why the wind speed is always UNDEF (I’m using yahoo weather)
or how to change text color?

Thanks a lot.


1 Like

Hi @Matt_Hiass. I am having the same issue.

Please let me know if you solve it.

Wouldn’t be nice if Current Weather widget was clickable and by touching it, get forwarded to Forecast Dashboard where Forecast widget is displayed?

Something like Button widget functionality:

Does anyone knows how to get this done?
Thanks, regards.

Yes I did it, you just need to add a alink at the beginning


For the day, it’s simply:

<td>{{itemValue('WB_1ObservationTime') | date:'EEEE'}}</td>

No Map needed for me. If you want my whole widget:

<td>{{itemValue('WB_1ObservationTime') | date:'EEEE'}}</td>


<td>{{itemValue('WB_2ObservationTime') | date:'EEEE'}}</td>


Today {{itemValue('WB_Condition')}}

{{'%.0f' | sprintf:itemValue('WB_Temp_Max_F')}}/{{'%.0f' | sprintf:itemValue('WB_Temp_Min_F')}}°F


{{’%.0f’ |
sprintf:itemValue(‘WB_1Temp_Max_F’)}}/{{’%.0f’ |


{{’%.0f’ |
sprintf:itemValue(‘WB_2Temp_Max_F’)}}/{{’%.0f’ |

Here is my map(updated since my last post…there was alot missing, and may
still need more, but you get the idea how to fix that. Take the .json off
the end.

Thank you everyone for the help! (1.03 KB)

…and the widget cut off, so here it is with a .json extensioon.

weatherbar.json (1.2 KB)

Thanks so much!
Worked great:

Again, you have done such a great job with this. It was the perfect thing to replace the old geek dashboard, which I always loved the way it had the weather at the bottom. It’s incredible how flexible this thing has become!

1 Like


I tried your widget and I didn’t get anywhere especially the conditions

I’m using Openhab2 on Ubuntu 16.04

Please Help

your weather.cfg file shows all lines commented out.

1 Like

Hey all,

this widget is nice! I need help to make this Widget linking to my Weather Dashboard. Can you help me and give me the code i have to add?

Thank you!

Hello again,

I’m almost done with the widget but I’m having trouble with “Preview Widget”,I’m not sure if someone has/had a similar problem, But would appreciate your Help

Nice work! Your widget works flawlessly :slight_smile: I had to figure out to install the map transformation service and then voila

Off topic but may I ask what software you use to record the screen gif?



Hey Craig, I use a great LICECap to record the screen gifs.
Best regards,

1 Like

That’s a very useful utility Many thanks :slight_smile:

Hey Again, Um

Today I upgraded to Openhab 2.1 on Ubuntu and after I did the upgrade,the climacons stopped rendering

And When I check the openhab.log file there is no hint of the cimacons having an issue…Help please

have a look at this.

you need the latest version of the icons.

1 Like

Thank You

It’s back to Normal :smile:

really nice widget, thanks!

I just have one little issue…
The animation of the icons is a bit whacky…
E.g. the “sunny” svg is rotating as a whole, so the center circle and the sun rays are rotating around the center. I guess that only the rays should rotate around the center circle…

I tried with different browsers (Safari, Firefox both latest on Mac and Safari iPhone) but it shows the same result…

Any hint how to fix that?

Looks like it just has to do with the svg icons that are used.
When I preview the icons with macSVG, the look good… opening the svg in Safari or Firefox make it spin around the wrong center…

Edit Edit…
Found the issue… not sure how to fix it though…
In the SVG files, the -webkit-transform-origin uses 50% 50%
Unfortunately, it looks like Safari and Firefox doesn’t correctly support this.
Changed it to 50px 50px absolute values and now it sort of works…
The scaling seems to be off a bit also…
Now I do not really know how to compile the jar file with the new svg icons…
Any help on this???

Does anyone know if there are any widgets which show the weather on an hourly basis rather than the next couple of days? I’d rather have a dashboard showing the weather now and over the next couple of hours by my front door.