# Custom widget: Current Weather

**URL:** <https://community.openhab.org/t/custom-widget-current-weather/18216>\
**Category:** HABPanel\
**Tags:** widget, widgetgallery\
**Created:** [December 14, 2016, 5:42pm UTC](https://community.openhab.org/t/custom-widget-current-weather/18216 "2016-12-14T17:42:03Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![kubawolanin](https://community.openhab.org/user_avatar/community.openhab.org/kubawolanin/32/71363_2.png) [@kubawolanin](https://community.openhab.org/u/kubawolanin)\
**Post date:** [December 14, 2016, 5:42pm UTC](https://community.openhab.org/t/custom-widget-current-weather/18216/1 "2016-12-14T17:42:03Z")

</div>

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

I wouldn’t be able to do this without @ysc’s [iconset](https://github.com/ghys/org.openhab.ui.iconset.climacons/releases)!

![](https://community-openhab-org.s3-eu-central-1.amazonaws.com/original/2X/c/cbedd1bfa54f915f5fa1a6db8c958bc6ef6a7894.gif)

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 🙂

**Installation** :

1. Place [this climacons iconset file](https://github.com/ghys/org.openhab.ui.iconset.climacons/releases/download/20161212/org.openhab.ui.iconset.climacons-2.0.0-SNAPSHOT.jar) into your `/addons/` folder
2. Import the widget from here:

[current-weather.widget.json](https://community-openhab-org.s3-eu-central-1.amazonaws.com/original/2X/f/f035101a5d6e5a6fce9dc65dbf54d044a1d494ae.json) (2.9 KB)

1. Prepare 3 items from the weather binding - condition, formatted condition and temperature:

```auto
    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](https://gist.github.com/kubawolanin/907bfbea8550450f4ba258cd880112b6#file-weather_pl-map))

And you’re all set! 🙂

Let me know what you think!

Cheers,  
K

---

<div class="post-metadata">

**Author:** ![Murpher](https://community.openhab.org/user_avatar/community.openhab.org/murpher/32/29626_2.png) [@Murpher](https://community.openhab.org/u/Murpher)\
**Post date:** [December 14, 2016, 5:53pm UTC](https://community.openhab.org/t/custom-widget-current-weather/18216/2 "2016-12-14T17:53:47Z")

</div>

Nice work @kubawolanin.

Be cool if the icon changed color on the conditions.

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

---

<div class="post-metadata">

**Author:** ![kubawolanin](https://community.openhab.org/user_avatar/community.openhab.org/kubawolanin/32/71363_2.png) [@kubawolanin](https://community.openhab.org/u/kubawolanin)\
**Post date:** [December 14, 2016, 6:11pm UTC](https://community.openhab.org/t/custom-widget-current-weather/18216/3 "2016-12-14T18:11:33Z")

</div>

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

```css
.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:

```auto
<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 🙂 But you get the idea.

---

<div class="post-metadata">

**Author:** ![Murpher](https://community.openhab.org/user_avatar/community.openhab.org/murpher/32/29626_2.png) [@Murpher](https://community.openhab.org/u/Murpher)\
**Post date:** [December 14, 2016, 6:42pm UTC](https://community.openhab.org/t/custom-widget-current-weather/18216/4 "2016-12-14T18:42:58Z")

</div>

Sounds good @kubawolanin

---

<div class="post-metadata">

**Author:** ![ysc](https://community.openhab.org/letter_avatar_proxy/v4/letter/y/e480ec/32.png) [@ysc](https://community.openhab.org/u/ysc)\
**Post date:** [December 15, 2016, 11:06am UTC](https://community.openhab.org/t/custom-widget-current-weather/18216/5 "2016-12-15T11:06:59Z")

</div>

👍 🙂

---

<div class="post-metadata">

**Author:** ![MacFly](https://community.openhab.org/user_avatar/community.openhab.org/macfly/32/37151_2.png) [@MacFly](https://community.openhab.org/u/MacFly)\
**Post date:** [December 15, 2016, 4:06pm UTC](https://community.openhab.org/t/custom-widget-current-weather/18216/6 "2016-12-15T16:06:57Z")

</div>

This is a very fancy widget thanks you !

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

---

<div class="post-metadata">

**Author:** ![MacFly](https://community.openhab.org/user_avatar/community.openhab.org/macfly/32/37151_2.png) [@MacFly](https://community.openhab.org/u/MacFly)\
**Post date:** [December 15, 2016, 4:22pm UTC](https://community.openhab.org/t/custom-widget-current-weather/18216/7 "2016-12-15T16:22:42Z")

</div>

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

```

---

<div class="post-metadata">

**Author:** ![Dominic\_Bonneau](https://community.openhab.org/letter_avatar_proxy/v4/letter/d/ecc23a/32.png) [@Dominic\_Bonneau](https://community.openhab.org/u/Dominic_Bonneau)\
**Post date:** [December 16, 2016, 6:41pm UTC](https://community.openhab.org/t/custom-widget-current-weather/18216/8 "2016-12-16T18:41:59Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![ingo\_e\_sigmund](https://community.openhab.org/letter_avatar_proxy/v4/letter/i/87869e/32.png) [@ingo\_e\_sigmund](https://community.openhab.org/u/ingo_e_sigmund)\
**Post date:** [December 16, 2016, 7:18pm UTC](https://community.openhab.org/t/custom-widget-current-weather/18216/9 "2016-12-16T19:18:07Z")

</div>

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: [Weather Binding · openhab/openhab1-addons Wiki · GitHub](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:

```auto
#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

```

---

<div class="post-metadata">

**Author:** ![Dominic\_Bonneau](https://community.openhab.org/letter_avatar_proxy/v4/letter/d/ecc23a/32.png) [@Dominic\_Bonneau](https://community.openhab.org/u/Dominic_Bonneau)\
**Post date:** [December 16, 2016, 8:09pm UTC](https://community.openhab.org/t/custom-widget-current-weather/18216/10 "2016-12-16T20:09:22Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![ingo\_e\_sigmund](https://community.openhab.org/letter_avatar_proxy/v4/letter/i/87869e/32.png) [@ingo\_e\_sigmund](https://community.openhab.org/u/ingo_e_sigmund)\
**Post date:** [December 17, 2016, 5:43am UTC](https://community.openhab.org/t/custom-widget-current-weather/18216/11 "2016-12-17T05:43:42Z")

</div>

Are you using Openhab2 or 1.8 ?

---

<div class="post-metadata">

**Author:** ![Dominic\_Bonneau](https://community.openhab.org/letter_avatar_proxy/v4/letter/d/ecc23a/32.png) [@Dominic\_Bonneau](https://community.openhab.org/u/Dominic_Bonneau)\
**Post date:** [December 17, 2016, 8:00am UTC](https://community.openhab.org/t/custom-widget-current-weather/18216/12 "2016-12-17T08:00:28Z")

</div>

Openhab2

---

<div class="post-metadata">

**Author:** ![marcel\_erkel](https://community.openhab.org/letter_avatar_proxy/v4/letter/m/5e9695/32.png) [@marcel\_erkel](https://community.openhab.org/u/marcel_erkel)\
**Post date:** [December 24, 2016, 1:16pm UTC](https://community.openhab.org/t/custom-widget-current-weather/18216/13 "2016-12-24T13:16:49Z")

</div>

> [@Dominic\_Bonneau](#):
>
> Number Weather\_Temp “Dzisiaj [%.2f °C]” \<temperature\> (Weather) {weather=“locationId=hHme, type=temperature, property=feel”}

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)

---

<div class="post-metadata">

**Author:** ![opdenkamp](https://community.openhab.org/user_avatar/community.openhab.org/opdenkamp/32/71845_2.png) [@opdenkamp](https://community.openhab.org/u/opdenkamp)\
**Post date:** [December 30, 2016, 12:41am UTC](https://community.openhab.org/t/custom-widget-current-weather/18216/14 "2016-12-30T00:41:09Z")

</div>

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

```

---

<div class="post-metadata">

**Author:** ![bdv](https://community.openhab.org/letter_avatar_proxy/v4/letter/b/8baadc/32.png) [@bdv](https://community.openhab.org/u/bdv)\
**Post date:** [December 30, 2016, 8:15am UTC](https://community.openhab.org/t/custom-widget-current-weather/18216/15 "2016-12-30T08:15:34Z")

</div>

Thx 🙂

---

<div class="post-metadata">

**Author:** ![jackdw](https://community.openhab.org/letter_avatar_proxy/v4/letter/j/51bf81/32.png) [@jackdw](https://community.openhab.org/u/jackdw)\
**Post date:** [December 30, 2016, 6:54pm UTC](https://community.openhab.org/t/custom-widget-current-weather/18216/16 "2016-12-30T18:54:42Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![StephanKratzer](https://community.openhab.org/user_avatar/community.openhab.org/stephankratzer/32/6163_2.png) [@StephanKratzer](https://community.openhab.org/u/StephanKratzer)\
**Post date:** [December 31, 2016, 3:15pm UTC](https://community.openhab.org/t/custom-widget-current-weather/18216/17 "2016-12-31T15:15:28Z")

</div>

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 ❄ )

```
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

```

---

<div class="post-metadata">

**Author:** ![Dominic\_Bonneau](https://community.openhab.org/letter_avatar_proxy/v4/letter/d/ecc23a/32.png) [@Dominic\_Bonneau](https://community.openhab.org/u/Dominic_Bonneau)\
**Post date:** [December 31, 2016, 8:14pm UTC](https://community.openhab.org/t/custom-widget-current-weather/18216/18 "2016-12-31T20:14:00Z")

</div>

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

[![Imgur](https://i.imgur.com/wscYCqh.png "imgur.com") ](https://imgur.com/wscYCqh)

Sorry it’s in french

---

<div class="post-metadata">

**Author:** ![jackdw](https://community.openhab.org/letter_avatar_proxy/v4/letter/j/51bf81/32.png) [@jackdw](https://community.openhab.org/u/jackdw)\
**Post date:** [January 1, 2017, 12:16am UTC](https://community.openhab.org/t/custom-widget-current-weather/18216/19 "2017-01-01T00:16:17Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Dominic\_Bonneau](https://community.openhab.org/letter_avatar_proxy/v4/letter/d/ecc23a/32.png) [@Dominic\_Bonneau](https://community.openhab.org/u/Dominic_Bonneau)\
**Post date:** [January 1, 2017, 6:40pm UTC](https://community.openhab.org/t/custom-widget-current-weather/18216/20 "2017-01-01T18:40:16Z")

</div>

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](https://community-openhab-org.s3-eu-central-1.amazonaws.com/original/2X/4/40321a51382eba7bc24418583db5f2607e8a2d49.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 😉

[Next page](https://community.openhab.org/t/custom-widget-current-weather/18216.md?page=2)