Custom widget: Current Weather

Apps & Services HABPanel
,
1

So finally I was able to finish up my simple weather widget for you guys :slight_smile:

I wouldn’t be able to do this without @ysc’s iconset!

As you can see, there are two different layouts - one for square-shaped widgets, and second for rectangular widgets.
Of course you can play around with the styling (change the font sizes and what have you) to fit your needs :slight_smile:

Installation:

  1. Place this climacons iconset file into your /addons/ folder
  2. Import the widget from here:

current-weather.widget.json (2.9 KB)

  1. Prepare 3 items from the weather binding - condition, formatted condition and temperature:
    String  Weather_Condition   "Pogoda [%s]" <fog> (Weather) {weather="locationId=home, type=condition, property=commonId"}
    String  Weather_Formatted_Condition   "Pogoda [MAP(weather_pl.map):%s]" <fog> (Weather) {weather="locationId=home, type=condition, property=commonId"}
    Number  Weather_Temp        "Dzisiaj [%.2f °C]"     <temperature>   (Weather) {weather="locationId=home, type=temperature, property=feel"}

“Formatted condition” is simply same “condition” item but with a nice MAP transformation (here’s my example in Polish)

And you’re all set! :slight_smile:

Let me know what you think!

Cheers,
K

25 Likes
2

Nice work @kubawolanin.

Be cool if the icon changed color on the conditions.

Yellow when sunny, White when snowing!!!::smiley:

3

@Murpher That’d be fairly easy i think.
Add these two classes between <style>..</style>:

.weather-icon img.sunny {
	filter: invert(90%) sepia(78%) hue-rotate(-50deg) saturate(1000%);
}
  
.weather-icon img.snowy {
	filter: invert(100%) saturate(1000%);
}

And around line number 105 you can add a condition checking the weather:

<img ng-class="(itemValue(config.weather_condition) == 'sunny') ? 'sunny' : 'snowy'"
src="/icon/climacon?iconset=climacons&format=svg&state={{itemValue(config.weather_condition)}}" />

But this will only check two cases, so you’d need to use ng-switch for handling multiple cases :slight_smile: But you get the idea.

4

Sounds good @kubawolanin

5

:+1: :slight_smile:

6

This is a very fancy widget thanks you !

I will trying to just add min and max temp for the day.

7

This is the map transformation file for french peoples if needed by someone.

thunder=Orage
storm=TempĂȘte
rain-and-snow=Pluie et neige
rain-and-sleet=Pluie et neige fondue
snow-and-sleet=Neige et neige fondue
freezing-drizzle=Bruine verglaçante
few-showers=Pluie Ă©parse
freezing-rain=Pluie verglaçante
rain=Pluie
snow-flurries=Averses de neige
light-snow=Neige légÚre
blowing-snow=Neige poudreuse
snow=Neige
sleet=Grésil
dust=PoussiĂšre
fog=Brouillard
wind=Vent
cold=Froid
cloudy=Nuageux
mostly-cloudy-night=TrĂšs nuageux
mostly-cloudy-day=TrĂšs nuageux
partly-cloudy-night=LĂ©gĂšrement nuageux
partly-cloudy-day=LĂ©gĂšrement nuageux
clear-night=Nuit Claire
sunny=Soleil
hot=Chaleur
scattered-thunder=Orages Ă©pars
scattered-showers=Pluie Ă©parse
thundershowers=Orage et pluie
snow-showers=Averse de neige
scattered-thundershower=Averse de neige Ă©parse
unknown=Inconnu
1 Like
8

i can’t setup my weather binding 
 can some one show me how he does ?

9

BIts a 1.x binding, so you need a file called weather.cfg in your conf/services folder to setup the parameters for the weather binding. See here for the documentation: https://github.com/openhab/openhab/wiki/Weather-Binding

Since Its a 1.x binding you you need to remove the weather: before each line in the weather.cfg. Here is mine as an example:

#apikey.ForecastIo= 
apikey.OpenWeatherMap=165547daf043f51aa85effXXXXXXXXX
#apikey.WorldWeatherOnline=
#apikey.Wunderground=
#apikey.Hamweather=
#apikey2.Hamweather=
#apikey.Meteoblue=

# location configuration, you can specify multiple locations
location.Home.name=Salem
location.Home.latitude=47.7766
location.Home.longitude=9.28598
#location.Home.woeid=      (required for Yahoo provider)
location.Home.provider=OpenWeatherMap
location.Home.language=EN
location.Home.updateInterval=60
1 Like
10

I copy paste ( and change you apikey) your and it doesn’t work
 here my cfg and items:

String  Weather_Condition   "Pogoda [%s]" <fog> (Weather) {weather="locationId=Home, type=condition, property=commonId"}
String  Weather_Formatted_Condition   "Pogoda [MAP(weather_pl.map):%s]" <fog> (Weather) {weather="locationId=Home, type=condition, property=commonId"}
Number  Weather_Temp        "Dzisiaj [%.2f °C]"     <temperature>   (Weather) {weather="locationId=hHme, type=temperature, property=feel"}

apikey.OpenWeatherMap=XXXXXXXXXXXXXXXXXXXXXXXXXXXXX
location.Home.name=Salem
location.Home.latitude=47.7766
location.Home.longitude=9.28598

location.Home.provider=OpenWeatherMap
location.Home.language=EN
location.Home.updateInterval=60

and log :

2016-12-16 15:04:37.112 [WARN ] [eather.internal.common.WeatherConfig] - Incomplete location config for locationId ‘’. Check openhab.cfg.
2016-12-16 15:04:37.113 [ERROR] [org.apache.felix.configadmin ] - [org.osgi.service.cm.ManagedService, org.osgi.service.event.EventHandler, id=322, bundle=207/mvn:org.openhab.binding/org.openhab.binding.weather/1.9.0-SNAPSHOT]: Updating property weather of configuration org.openhab.weather caused a problem: Incomplete location config for locationId ‘’. Check openhab.cfg.

11

Are you using Openhab2 or 1.8 ?

12

Openhab2

13

The locationId in this line is incorrect. It should not be hHme but Home.
(Note: I’m not yet using the weather binding nor OpenHAB 2 myself, so if this is not the root cause of the problem, then I probably won’t be able to provide much help)

14

Here’s the mapping file for Dutch. Thanks for the widget

thunder=Donder
storm=Storm
rain-and-snow=Regen en sneeuw
rain-and-sleet=Regen en natte sneeuw
snow-and-sleet=Sneeuw en natte sneeuw
freezing-drizzle=Ijskoude miezelregen
few-showers=Enkele buien
freezing-rain=Ijskoude regen
rain=Regen
snow-flurries=Sneeuwvlagen
light-snow=Lichte sneeuw
blowing-snow=Poedersneeuw
snow=Sneeuw
sleet=Ijzel
dust=Stof
fog=Mist
wind=Wind
cold=Koud
cloudy=Bewolkt
mostly-cloudy-night=Bewolkte nacht
mostly-cloudy-day=Bewolkte dag
partly-cloudy-night=Lichtbewolkte nacht
partly-cloudy-day=Lichtbewolkte dag
clear-night=Heldere nacht
sunny=Zonnig
hot=Warm
scattered-thunder=Verspreid onweer
scattered-showers=Verspreide buien
thundershowers=Onweersbuien
snow-showers=Sneeuwbuien
scattered-thundershower=Verspreide onweersbuien
unknown=Onbekend
2 Likes
15

Thx :slight_smile:

16

I am having good results with this widget, but am having problems with it disappearing when I go back to the page.

Is there something special you need to do to make sure custom widgets are properly saved?

17

And here goes the german translation (though i’m no expert on weather conditions and i’m not sure why there are all different types of snow :snowflake: )

thunder=Gewitter
storm=Sturm
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
rain=Regen
snow-flurries=Sneeuwvlagen
light-snow=leichter Schnee
blowing-snow=Schneetreiben
snow=Schnee
sleet=Schneeregen
dust=Staubig
fog=Nebel
wind=Wind
cold=Kalt
cloudy=Bewölkt
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
sunny=Sonnig
hot=Warm
scattered-thunder=vereinzelte Gewitter
scattered-showers=vereinzelte Schauer
thundershowers=Gewitterschauer
snow-showers=Schneeschauer
scattered-thundershower=vereinzelte Gewitterschauer
unknown=Unbekannt
18

I use your widget as a forecast page ! THANK YOU !!

http://imgur.com/wscYCqh

Sorry it’s in french

3 Likes
19

Dominic, would you be able to share how you set up the widget for the forecasting?

1 Like
20

Yes ! I adapt it to work with my android tab and since i’m not a dev my code could be really bad i don’t know 
 try it and you will see !

Forecast.widget.json (3.4 KB)

just for your info, on my main page I have the Curent weather widget and I put a ahref line who redirect me to my forecast page :wink: