UI Widget: Weather

aaaww!!! I want that, how can I get that?

Not yet available, as it needs to be dynamic for the implementation in the widget (which isn’t possible right now - or at least I don’t know yet, how to do it)

If I find a way, I will make it available here.

Hello RGroll,

thanks first of all for the great widgets! They help me extremely with the YAML but also the general conversion to OH3.
I have had the code adapted for me because I wanted to see some more information. After your last update I didn’t have the time to do that again. Maybe it is a suggestion to take over that or do you see maybe a possibility by means of checkbox to select what one on the 3 tabs everything would like to see?

Under Hourly I have the Current Temperature/Felt Temperature and below that the Wind Speed.


under Daily the same only instead of wind then rain probability.

and last and rain probability additionally the amount of precipitation, in my example you can see well why the amount was so important to me, because at 80% 0.0mmm rain falls sometimes.

The second thing I wanted to ask is, I have seen you have added an action. I have tried that and some “- component: Label” exchanged against “- component: oh-link”, thereby I can see by clicking on the temperature as the course of the variable was by means of “action: analyzer”. Your approach I find but just as practical to say I click on the widget and can do what I want, only unfortunately does not go both. As soon as I create an action in the settings, my actions are no longer selectable. Do you have an idea how it is possible to make the background and some variables (items) selectable at the same time?

I am looking forward to new ideas :slight_smile:

1 Like

You’re welcome!

Classical checkboxes won’t work here, but maybe I can make something up, that would allow to assign a dynamic amount of user-defined values to the swiper-elements. It should be doable.

I like the adjustments you made, especially the one with the amount of precipitation - it makes totaly sense and should be usefull for everyone so I might steal that :slight_smile: - and I see you’ve replaced the |-sign with /, which makes sense as it seems the YAML syntax don’t like the |-char very much.

If you have the components ordered that way, it should work out-of-the-box, as the components (oh-buttons in this case) are ordered inside the action-component that acts as the trigger for the widget-action.

YAML example
uid: something
props:
  parameters:
    - description: Dummy parameter
      name: dummy
      type: TEXT
  parameterGroups:
    - name: widgetAction
      context: action
      label: Action
      description: Action to perform when the element is clicked (<b>Experimental</b>)
component: f7-card
config:
  class:
    - padding
slots:
  default:
    - component: oh-button
      config:
        actionPropsParameterGroup: widgetAction
        style:
          position: absolute
          width: 100%
          height: 100%
          top: 0
          left: 0
    - component: f7-row
      slots:
        default:
          - component: oh-button
            config:
              text: "Link #1"
          - component: oh-button
            config:
              text: "Link #2"
          - component: oh-button
            config:
              text: "Link #3"

The other case would be that you have ordered your components outside of the widget-action component - in that case you should use the css property z-index (read more about this property). You’ve to ensure that your widget-action component has a lower z-index as the elements that you want to show on top of it.

YAML example
uid: something_else
props:
  parameters:
    - description: Dummy parameter
      name: dummy
      type: TEXT
  parameterGroups:
    - name: widgetAction
      context: action
      label: Action
      description: Action to perform when the element is clicked (<b>Experimental</b>)
component: f7-card
config:
  class:
    - padding
slots:
  default:
    - component: f7-row
      slots:
        default:
          - component: oh-button
            config:
              text: "Link #1"
              style:
                z-index: 2
          - component: oh-button
            config:
              text: "Link #2"
              style:
                z-index: 2
          - component: oh-button
            config:
              text: "Link #3"
              style:
                z-index: 2
    - component: oh-button
      config:
        actionPropsParameterGroup: widgetAction
        style:
          position: absolute
          width: 100%
          height: 100%
          top: 0
          left: 0
          z-index: 1

But be aware, there is a small bug in the widget-action currently which makes it impossible to set the parameters for the widget to open (but I’m sure this will be fixed soon).

Hope it helps.

Hey RGroll, hey everyone,
I am fairly new to OH in general and just started setting everything up, so I’m sorry for potentially dumb questions :smiley:
I installed and set up the OWM binding using the thing- and item-defintions. When I am now trying to get the widgets to work and assign the itemPrefix and additonial itemPrefix via “Set Props”, the widget looks fine in the preview, but as soon as I save and leave the widget-configuration the itemPrefixes get deleteted and the widget doesn’t show any data anymore. Does anybody have an idea what I am doing wrong? Help would be greatly appreciated!
Thanks for all your great work
Catherina

Hey @MadOregano and welcome to the community!

You have to set the item prefixes in the page configuration.
Based on your explanation I would assume that you’ ve tried to set the properties in the widget-editor (in which the set properties will not be saved).

To do it via page config:
Click on Edit in the top right corner of the page you want to add the widget to. Then Add BlockAdd RowAdd Column+ (Add) → Select the widget → Click the black square icon on the top right of the widget and select Configure Widget → Set-up the widget to your liking → Hit Save in the widget as well as on the page and it should work! :slight_smile:

P.S. If you want the widget to be smaller in width or if it should be resized based of the browser-size, you could do this via the Column Options in the same menu.

Don’t hesitate to ask, if you need further help!

2 Likes

Ah, thank you so much, that was indeed the problem!

Many thanks for this nice widget.

Does anyone know on how to translate the condition string.
In the bridge I configured loacle = DE; Openhab set to Germany; German
Where else do I need to update something to get a translation of the strings (in 2.5 there was the possibility to map something, but most of the time the binding already did that job).

Thanks for your support.

Joerg

Hi @DerLang

It should translate the condition string to your region automatically. Did you set your Regional Settings within OH to your location?
SettingsRegional Settings on the right under System Services

Hopefully this is the right section. But basically, yes, I think i did this:

Hi,

I just did the IT thing: Did you turn it off and on again?

And suddenly the translation is available…

Thanks for your support.

Regards
Joerg

Would you mind to share your YAML code?

Hello Rainer,

thanks for the quick reply!
Glad that the idea with the amount of rain is well received.

I understood that with the checkboxes, over a swiper element is practically the same effect. A reason why I have added in each of the 3 tabs something to information was also that they must always have the same height because the widget otherwise with each tab change the size. This could be the only hurdle if you can show and hide info independently.

the z-index is also a great thing, I have previously overlooked in your code smooth :smiley: .

In fact, actions that are based on oh-action work quite well for me. only the f7-action seems to have problems.

if i can help somewhere let me know, otherwise i’ll wait for a final version. My OH3 is anyway first to try until all bindings are converted.

many greetings

Thanks for the really nice widgets.

There is a minor bug in the code of the first widget (have not checked the others). In line 462, it should be wordingPrecipitation instead of wordingUvindex.

Oh, thank you @vbier - I forgot to change that after putting together the final widget.

Hi @RGroll and everyone. Im totally new to OH and began my study with your weather widget. If I add things and points like its described, I get a lot of unorganized stuff. So i`ve added them to model outdoor/forecast. What must i change with the widget code to implement that?

привет Вася and welcome to the community!

Normally, you don’t have to mess with the code whatsoever - it’s only necessary to set-up the particularities (that might be unique for your setup) inside the widget-configuration.

If I understand you right, you’ve successfully added your items and getting values for them, right?
SettingsItems → You see values to the right of your items?!

If it looks similar to this screenshot, you only have to set OneCallAPIweatherandforecast_ as the itemPrefix inside the configuration of the weather-widget.

Yes I do see all items and their values in settings. Then i copy widget code to new widget window, get a widget preview with a lot of ???s. I’ve set in widget props itemPrefix as described - and nothing changes, still a lot of undefinedNaN???s. If I’ll change itemPrefix as Forecast_Forecast, I’ll get the same And I’m so dumb that even can`t figure out what is going wrong.

After copying the widget code - hit Save in the top right corner - don’t do Set props here (as it’s just for testing purposes and won’t be saved permanently).

Set your widget props inside the Page where you won’t to show the widget in, like described here.

Nearly correct :slight_smile: - the prefix in your case would be Forecast_

Not at all - as you’re new to OH and the use of widgets it’s normal that it might need some time, getting familiar with this.

Hope it will work then! :wink:

Thanks, it does work with Forecast_, it`s a strange decision from developers that users can’t fully test widgets in widget window, before going live on OH pages, didn’t expected that to work that way. Now i’ve got:


Will discover more and thanks for you help!