UI Widget: Weather

RGroll · January 4, 2021, 11:20am

No problemo and thanks for the hint. It seems, that something is messed up in my setup due to the frequent updates from earlier versions I did. As an easy fix you could do the following:

Search for the line:

text: "=items[((props.itemPrefix === undefined) ? '' : props.itemPrefix) + 'localForecastHour' + Math.round(loop.hour_idx+1) + 'PrecipProb'].displayState + '%'"

and replace it with:

text: "=items[((props.itemPrefix === undefined) ? '' : props.itemPrefix) + 'localForecastHour' + Math.round(loop.hour_idx+1) + 'PrecipProb'].state"

It slightly changes the format of the output, which shouldn’t bother too much, I hope.

And if you’re willed to help me one more time, it would be awesome if you could create a custom widget with this content and making me a screenshot with the output?! Thanks in advance!

Further more it would nice to know, if you used the UI to create the items or if you used textfiles?

uid: test
component: f7-card
config:
  content: "='State: ' + items.localForecastHour2PrecipProb.state + ' | displayState: ' + items.localForecastHour2PrecipProb.displayState"

Thank you very much!

Joselh · January 4, 2021, 1:02pm

Many Thanks Raimer,

your proposed Fix is working without any issue, precipitation is showed correctly!!

Items were created from textual definition, too many items to do it by hand.

Here you have the requested Screenshot:

Many thanks for your support!! let me know if you need any additional test from my side.

Thanks for your great widget

Happy New Year

BR

Jose

candiesdoodle · January 6, 2021, 5:19pm

Hii folks

any ideas on how we can create a line chart with the forecast temperatures? I am not sure, but the chart pages in OH3 might not suppor this. What i am thinking about is a line chart plotting all the forecast temperatures at a given instant in time vs. plotting historical values of an item against a time series (which i know is possible).

something like the line graph in salexes’ post

RGroll · January 6, 2021, 5:34pm

Easiest way would be the oh-trend graph, but this won’t look like the picture of this weawow app (no aligned temp-values / condition-icons for example) and is somewhat limited design-wise. I could imagine that recreating something like the seen with css, but it would cost some effort/time to find a way handling the variable min / max values and the connections between the hourly forecasts.

Maybe I find some time at the weekend to look into this.

Are there historical values visible in the screenshot? I thought it would only show the current and the next x hours of forecast. I might be wrong…

candiesdoodle · January 7, 2021, 10:21am

Hi @RGroll

Yes, thats the idea. the graph should show only the current and next x hours of forecast. All data points are in different items.

thanks and great if you could look into it.

RGroll · January 9, 2021, 2:06pm

I think I found a way around the most of the challenges (even the missing integration of css pseudo-classes, which leads me to use clip-path: polygon() for the connections between the hourly graphs - a hell of a css attribute… )

It still needs some cleanup and I would like to implement a swiper-functionality for the hourly-forecast, but this shouldn’t be that hard.

The biggest challenge for me right now is to find a way, getting the min/max values out of dynamically selected hourly forecast items. It would be doable with a rule but (if possible) I’d like to do all of that inside the YAML. I think something like this should be doable with the filter-functionality on the oh-repeater-component, but I’m not 100% sure yet…

The kid is awake now, so maybe I’ll find some more time for this tonight.

weather_widget-graph

If anyone has an idea, how to solve the above mentioned problem - you’re invited to help . I also opened a separate thread for that.

stue · January 9, 2021, 11:23pm

I’m sure that you got this already but just a quick shot:

 - component: Label
                  config:
                    text: "=Math.min(items[((props.itemPrefix === undefined) ? '' : props.itemPrefix) + '' + 'Current' + '_Temperature'].state.split(' ')[0], items[((props.itemPrefix === undefined) ? '' : props.itemPrefix) + 'ForecastHours' + '01' + '_Temperature'].state.split(' ')[0], items[((props.itemPrefix === undefined) ? '' : props.itemPrefix) + 'ForecastHours' + '02' + '_Temperature'].state.split(' ')[0])"
                    style:
                      font-size: 20px
                      font-weight: 100
                      color: var(--weather-card-text-color)

I’m not able to implement this loop thing, but this undynamic variant works for the next 4 hours

RGroll · January 9, 2021, 11:49pm

Hey @stue and welcome to the community!

thanks for donating your first post in this forum to my problem.
And yes, this approach would work for a static amount of items but my curiosity is forcing me to make it as dynamic as possible (and with as little code as possible).

But thank you very much for your help!

Eragim · January 10, 2021, 12:34pm

Hello folks,
@RGroll weather widget and the resulting modifiactions look really great

I am currently struggling with the IconIDs. When I create a Thing for the “OWM One Call API” with the UI, only a channel “Current Icon” is included which only contains a *.png file for the icon of OWM. Can someone please tell me how to get the channel for the IconID used in the widget with the UI?
Thank you very much!

RGroll · January 10, 2021, 12:39pm

Hey @Eragim

thank you!
Just tick the small “show advaced” box in the top right of the UI to show all available channels.

Eragim · January 10, 2021, 1:14pm

Hey @RGroll,
thank you for your quick reply. Sometimes you can’t see the forest for the trees .

RGroll · January 10, 2021, 1:18pm

Haha, no problem. To be honest, I got stuck at the some point some time ago.

Claes_Nordmark · January 11, 2021, 10:06am

I have issues with the above section (location name and current temp ) overlapping the below ( forecast section)

RGroll · January 11, 2021, 10:16am

If possible, please provide a screenshot so I can look into it.

Thanks!

Claes_Nordmark · January 11, 2021, 10:22am

RGroll · January 11, 2021, 10:34am

Ah okay, I see - you’ve tried to use it as a widget inside the page grid. It’s supposed to show inside a popup only.

Theres no custom card available right now to open it, so you have to use one of the standard widgets atm - so what you’ve to do:

Create e.g. a Label Card on the page-level
Make your widget-configuration and specify the Open popup action with the weather widget as Modal page or Widget - after that you can make the setting for the widget via Model component configuration and it will open the widget in a popup on click.

image640×649 13.6 KB

Maybe I’ll do a custom card at some time - which fits the look&feel of the popup content a bit better.

Hope this helps!

Claes_Nordmark · January 11, 2021, 11:55am

Would it be possible to just set some fixed height otherwise? so it would not be squeezed together?

cmar · January 12, 2021, 3:05pm

Folks,
the work on the widget is impressive and I would really like to switch from my own dabbling with an UI for the weather forecast that you guys did.
As many time before, I find it not easy to pinpoint the correct starting point.
Is there a “current version”? Where?
Are the Item names posted by @RGroll at the very beginning still valid, or have they been changed with the introduction of the prefix? Searching for the item names in the YAML that I pulled from one of the postings did not yield a result.
Was anyone successful in using the Item_Names that are created automatically in the new MainUI (I seem to be getting proposed German Item names, which I would need to translate.)
Would anyone have an .item file with item -> channel mappings? This would make a bit easier in setting up items.
Thanks
Clemens

RGroll · January 12, 2021, 3:27pm

Hey @cmar

Fully understandable! There came up a lot of different versions over time, which all have their special usecases.

Generally every of the posted versions should have it’s thing/item definitons and the respective YAML-code attached in their posting.

Yes and no - the item names from the initial posting are only valid for the widget shown in that posting (which has a more limited “feature-set” than other versions)

Sadly, this isn’t that easy, as the item names gets localized so it isn’t possible to set a fixed “naming” which works all over the world - but there is a way to just copy over the item names that are given with the preferred widget via the UI using the Expert Mode in the Model creation process…

I’ll try to update this whole thread (including the channel mappings) today and making a better overview of all available widgets in the initial post.

So maybe you can wait until tomorrow so that everything should be more clear for you (and others)

cmar · January 12, 2021, 3:42pm

great, much appreciated.