UI Widget: Weather

Add-ons UIs
,
1

Hey! :wave:

I’m very happy to see such interest and contributions to the weather-widgets - and all it’s variants - over the time (Thanks to all of you!)

The shown widgets were created at different (sometimes very early) development stages of the OH3 MainUI, so functions as well as the used binding (OWM) has evolved over time - so has the YAML-knowledge of myself. :slight_smile:

To make these widgets more accessible to new users and consider the above made changes to the system itself, I’ll try to create an overview of the widgets and point out some of the particularities for each of them.

All of the below shown widgets (the ones I created at least) using the same items now which are based on the default and automatically suggested naming-scheme during the creation of your semantic model.
Custom thing-prefixes as well as other prefixes (e.g. for different locations) can be configured within the widget.

What is the purpose of this widget?

It’s a weather widget for the great new OH3 MainUI based on the OpenWeatherMap-Binding to show the forecast for a dynamic ammount of hours and days with a lot of additional informations and some customization / localization options.

Prerequisites

You need to have the OpenWeatherMap binding installed, which offers all the informations you need to set-up this widget. You can follow this tutorial if you’re new to OpenHAB 3.0.

If you use textual configuration or want to add the items via UI afterwards, you can use the following thing- & item-defintions.

Not all of the items defined below are needed right now and differs on the widget you’d like to use - but to be future-proof, I would recommend to set up all of them.

:exclamation: Info: to those who want to assign their channels to a specific group in their semantic model - you’ve to add the group parameter.

Thing defintion (*.things)

→ owm-weather.things on github

Item definition (*.items)

→ owm-weather.items on github (667 items / Forecast for 25 hours and 7 days - including weather-informations that are not used by the widgets currently)
→ owm-weather-minimal.items on github (173 items / Forecast for 13 hours and 4 days - only necessary items included)

So let’s come to the different widget designs and their features (& limitations)…

Weather popup #1

This widget is meant to open inside a popup only!
It shows the current temperature , apparent temperature, condition (+icon), humidity and wind-speed as well as a forecast for the next x-days for which it also shows the min-/max-temperature, humidity, wind-speed and precipitation probability in a accordion-module.

  • Variable amount of days to forecast
  • Additional informations for each day (with click on the day)
  • Dynamic background change for day/night (simplified to background-gradient only atm)
  • Localization options (e.g. setting date-pattern & translations)

:exclamation: Info: If you used the above item-naming pattern you’ve to assign OneCallAPIweatherandforecast_ as itemPrefix (and Localweatherandforecast_ as additional itemPrefix if you want to show the Location automatically) within the widget-configuration.

weather_popup-day
weather_popup-day558×697 20.8 KB
weather_popup-night
weather_popup-night566×665 21.8 KB

Widget YAML

Weather popup #2 (extended)

This widget is meant to open inside a popup only!
This is an extended version of the first popup widget. It shows the current temperature, condition (+icon) as well as a slideable hourly- and daily-forecast

  • Variable amount of days to forecast (inside a swiper-element)
  • Variable amount of hours to forecast (inside a swiper-element)
  • Sunrise / Sunset information as background- and icon-indicator within the hourly-forecast
  • Dynamic background change for day/night (+the option to set different background images)
  • Localization options (e.g. setting date-pattern & translations)

:exclamation: Info: If you used the above item-naming pattern you’ve to assign OneCallAPIweatherandforecast_ as itemPrefix (and Localweatherandforecast_ as additional itemPrefix if you want to show the Location automatically) within the widget-configuration.

Images:

weather_img.txt (31.7 KB) (rename to *.rar - default would be /static/files/weather_img corresponds to /etc/openhab/html/files/weather_img)

Search for a prominent sight of your region here and also put it in the above mentioned image-path. (you can also use any other source or create your own icon here of course)

weather_popup_extended-day
weather_popup_extended-day635×635 58.5 KB
weather_popup_extended-night
weather_popup_extended-night633×634 64.5 KB

Widget YAML

Weather card new

This is a weather card which shows the current- and apparent temperature, condition (+icon) as well as a slideable hourly-, daily- and %-precipitation-forecast.

  • Variable amount of days to forecast (inside a swiper-element)
  • Variable amount of hours to forecast (inside a swiper-element)
  • Sunrise / Sunset information as background- and icon-indicator within the hourly-forecast
  • Dynamic background change for day/night (+the option to set different background images)
  • Localization options (e.g. setting date-pattern & translations)
  • Widget-size settings
  • Various other styling settings
  • Support for Actions (Experimental - theres a small issue right now, with setting parameters of the widget to open, which should be solved soon)

:exclamation: Info: If you used the above item-naming pattern you’ve to assign OneCallAPIweatherandforecast_ as itemPrefix (and Localweatherandforecast_ as additional itemPrefix if you want to show the Location automatically) within the widget-configuration.

weather_card-image_by_night

weather_card-image_by_day

image

Widget YAML

Feel free to reuse and modify all of these widgets (if you willed to make them available here as well) - and please report any errors, if you find them.

Other variants

The item-definitions of these widgets might differ - consult their postings to get more information.

Thx!

40 Likes
2

A suggestion: when you have a significant amount of items to show, maybe it’s best to make an assumption that they will have a predefined naming scheme, and you only want to parametrize a prefix (as a TEXT parameter).

Then instead of
=items[props.day2MinTemp].displayState
you’d have
=items[props.itemPrefix + 'day2MinTemp'].displayState
and describe your naming scheme so you users can adopt it (with or without a prefix, in that case they would only have this to configure).

2 Likes
3

Great idea. If I update the header-image section I will do so, to keep the widget-configuration cleaner. :slight_smile: Until the ui-config for this widget will work, this will be implemented - so please don´t be too fast with this :slight_smile:

One small downside would be, that everyone who already had an existing item naming scheme, which differs from the one I suggest, had to rename his items OR changing the item-names in the yaml, correct?!

4

Sure, but IMHO the trade-off between doing that having to configure dozen of parameters of the widgets is worth it.

5

I have been planning on using the default naming scheme that “Create equipment from thing” creates. Of course this is not so great in your case where anyone could use a different ‘weather binding’, but if someone uses the “openweathermap” binding, adds the equipment from thing, then in theory everything should work with no editing needed.

I have been creating my V3 setup from scratch so that everything uses the default naming scheme, this makes it a lot easier if I need to delete and re-add something from scratch as I dont need to stop and think what exact naming I used as it is all automatic.

1 Like
7

Hi,
nice Widget,
I just have a question: where can I find the weather-warning channels?
I can’t find them in OpenWeatherMap binding
Regards
Lorenzo

8

Hi and thank you, @Foxejoe - still working and some enhancements.

For the weather alerts I’m using the fields, that are described in the OWM API documentation.

I’m not sure, if these fields are represented in the OH binding (and can’t try it here sadly) but saw the chance to test this on this widget - as someone will give me a response if they’re not working and then I could submit an issue on github. :stuck_out_tongue:

These are the item-representation for the described API-fields, that I’m using:

String      weatherAlertSenderName      "Weather alarm Source [%s]"       { channel="openweathermap:weather-and-forecast:api:local:alerts#sender_name" }
String      weatherAlertEvent           "Weather alarm Event [%s]"        { channel="openweathermap:weather-and-forecast:api:local:alerts#event" }
DateTime    weatherAlarmStartTime       "Weather alarm StartTime [%s]"    { channel="openweathermap:weather-and-forecast:api:local:alerts#start" }
DateTime    weatherAlarmEndTime         "Weather alarm StartTime [%s]"    { channel="openweathermap:weather-and-forecast:api:local:alerts#end" }
String      weatherAlertDescription     "Weather alarm Description [%s]"  { channel="openweathermap:weather-and-forecast:api:local:alerts#event" }
9

Thanks I will try and let you know … otherwise we can ask for implementation on the OH3 Bindind :wink:
I have another question: my OpenWheatherMap language is “it” (Italian), The weather condition is in Italian but the day time-stamp are still in English (i.e. Monday) while I see yours are in German …
where am I wrong?
Last question, how can we use the map.file in the new UI, I would like to use the f7:icon for the weather condition using a map.file but I don’t know how to do it.
Regards
Lorenzo

10

If I remember right, the time-stamp uses the systems default language, so just change the language of your OS (sudo raspi-config → Localisation Options → Change Locale) and it should work.

I don’t know if mappings can be applied from inside the YAML (I doubt it tbh) - but you can still define the mapping via the item-config like this:

String   xyz   "Item xyz [MAP(yourmapping.map):%s]"

I would also recommend you, using the ConditionID instead, as its easier to handle these numbers instead of a long string (there are documented here)

You could to it all from inside the code with concatenated expressions. Something like this would work:

- component: f7-icon
  config:
    f7: '=(items.localCurrentConditionId.state === "801") ? "cloud" : (items.localCurrentConditionId.state === "802") ? "cloud_fill" : (items.localCurrentConditionId.state === "803") ? "cloud_fill" : "etc..."'

But this will be a long expression :slight_smile:

P.S. I also do not like the standard OWM-icons :stuck_out_tongue: - so I’d be happy, if you share your expression, when you decide to do it that way.

11

You can

Better yet: use the state description metadata on your item to specify the options:

801=cloud
802=cloud_fill
803=...

then the label (“cloud” etc.) will be available with items.localCurrentConditionId.displayState.

1 Like
12

Thanks for that info!

Is it possible to define the description metadata via textual configuration or is this a UI only feature?

13

It’s standard metadata so it should work with textual configuration as well, see https://github.com/openhab/openhab-core/issues/1185
The options are comma-separated. I believe it will break if one of your options/label also contains a comma or an equal sign as there’s no escaping.

String ConditionID { stateDescription="N/A" [ options="801=cloud,802=cloud_fill,..." ] }
14

Pefect, so it should work fine with the typical icon-namings then. Thank you!

15

Thanks I have create the first version of the meteo.map file using the ConditionID and it works.
If you like I can share it.
I also made some personalization as you can see.
The only issue I still have are the day naming in English while on OH2 are in italian
I have OH2 and OH3 on 2 different machines, I checked OH language, system language and binding language (all are it). Any help ?
Lorenzo

weatherwidget
weatherwidget228×528 24.7 KB

1 Like
16

Would be very nice if you do so - thx!

17

Hi, here the map file meteo.map.txt (1.0 KB) , you should rename it as meteo.map and move to the “transform” directory.
Then you should add the ConditionID items as follow:

String localCurrentConditionID “[MAP(meteo.map):%s]”
String localDailyForecastTomorrowConditionID “[MAP(meteo.map):%s]”
and so on …

Than you can use this updated Widget UI_Weather2.txt (37.6 KB) even if it is not the final version yet

Regards
Lorenzo

1 Like
18

I’m currently working on a soloution with custom backgrounds depending on day/night as well as the weather condition. Your mapping will help me here, saving some time - TY! :slight_smile:

And please keep me updated on your progress.

On my side it’s mostly about creating and adjusting the images inside the widget that it looks nice on all devices. If I got this working in my test-widget I’ll implement this in this version as well.

widget2_day 0
widget2_day 0636×636 74.3 KB
widget2_night 0
widget2_night 0638×637 85.8 KB

7 Likes
19

Rainer, Do you mind sharing your updated widget :wink:

20

Hey @hmerk

I’ll do tomorrow if everything goes according to plan (which also depends on the mood of my son, who is a bit grumpy right now :stuck_out_tongue:) . There are some nasty errors on iOS I’d like to solve before I publish it and I have to create some weather graphics, to not getting any copyright troubles.

I try my best to publish it as fast as I can - as I’m very interested in your opinion. :slight_smile:

2 Likes
21

I know what you mean, my 2 1/2 year old boy can be really stressing…

1 Like