Openweatheremap node - help with icons and use

Dashboard
1

I have recently decided to get/use openweathermap.

I'm having fun with it. I'm guessing shopping centres use something like that to get their forecasts.

The output is interesting and slightly complex, but sitting down long enough I am starting to get it all, and with the link someone posted there is a pretty good breakdown to what is what.

But this is a bit of a curve ball for me on the icon:

Screenshot from 2020-11-01 07-36-17
Screenshot from 2020-11-01 07-36-17841Ă—381 45.3 KB

But where are these?

I've found these links:

https://github.com/Paul-Reed/weather-icons-lite/blob/master/css_mappings.md
https://erikflowers.github.io/weather-icons/

But they fall apart because the node outputs 11d is the icon and neither of those have a fond with 11d.

So, I'm stuck.

2

Forget about https://erikflowers.github.io/weather-icons/ because those icons/css are not installed in node-RED (unless of course you are loading them yourself...)

However https://github.com/Paul-Reed/weather-icons-lite/blob/master/css_mappings.md is integrated into the dashboard, so yes, you can access those.

If you look at the readme, you will see that the css for openweathermap includes wi-owm-11d which is 11d prefixed with wi-owm- (which is the css code for openweathermap)
So you need something like a template node;
wi-owm-{{payload.icon}} to prefix 11d. Or change it in a function node

2 Likes
3

Thanks Paul.

I was suspicious of something like that. My head is blown just now with the complexities of what I am trying to do.
(It isn't that I mind it. It is just the scope. And I need to keep myself busy just now.)

I'll look into that now.
That may save me a lot of works.

4

In fact, when I display weather icons in my dashboard, I use a ui-template node, and add something like;

<div style="display: flex;height: 100%;justify-content: center;align-items: center;">
<i class="wi wi-owm-{{payload.icon}} fa-4x"></i>
</div>

So I don't change the name until it arrives in the ui-template node.
(Although I don't use openweathermap)

...which is in my readme - https://github.com/Paul-Reed/weather-icons-lite

5

I'm not sure why but I seem intent on making my life miserable. :wink:

I am writing a sub-flow for it so I can also get other stuff as well and only have a single node to extract that which is needed.

Though: thinking about it, that (probably) isn't needed and I just make the nodes parse the required part of the message.

Back to the drawing board for me.

1 Like
6

Oh, sorry, forgot to ask.....

I'm wanting to get/use the background part of the message used to (maybe) control the icon's colour.

Yes, an easy thing to do, but with how my head is just now......

Oh, I checked your suggestion with the icons. Yes it works.
But - no offence - in the mean time I have started to use the bigger set of icons.
So, light rain goes from the basic icon using the way you said with the icons to a nicer looking one if I use the way I was going.

But it is food for thought and I did ask, so I accept that.

Do you know if the background value ever changes? Because if it doesn't then I am wasting my time parsing it and shall do something else to determine the colour.

For the sake of it:

My way:

Screenshot from 2020-11-01 08-38-28

Your way:

Screenshot from 2020-11-01 08-38-43

Subtle, but I sort of like the first way better.

7

What backgroundvalue??

Isn't the icon chopped off at the top in your version?

Andrew, that hurts and shows a distinct lack of loyalty :wink:

8

Sorry I am a bit ..... vulnerable/sensitive just now. I am not quite getting that.
I hope that there is a bit of taking the piss in that.
(Being in Oz, that is common place, but sometimes I am not sure which way it is meant.)

The background.

{"_msgid":"1f269dc0.b67e62","payload":{"id":520,"weather":"Rain","detail":"light intensity shower rain","icon":"09d","tempk":290.29,"tempc":17.1,"temp_maxc":18.3,"temp_minc":16.1,"humidity":82,"pressure":1014,"maxtemp":291.48,"mintemp":289.26,"windspeed":9.8,"winddirection":210,"location":"Ashfield","sunrise":1604170498,"sunset":1604218982,"clouds":75,"description":"The weather in Ashfield at coordinates: -33.89, 151.13 is Rain (light intensity shower rain)."},"topic":"","icon":"<i class=\"fa fa-refresh fa-spin\"></i>","background":"#333333","font":"red","location":{"lon":151.13,"lat":-33.89,"city":"Ashfield","country":"AU"},"data":{"coord":{"lon":151.13,"lat":-33.89},"weather":[{"id":520,"main":"Rain","description":"light intensity shower rain","icon":"09d"}],"base":"stations","main":{"temp":290.29,"feels_like":284.71,"temp_min":289.26,"temp_max":291.48,"pressure":1014,"humidity":82},"visibility":10000,"wind":{"speed":9.8,"deg":210},"rain":{"1h":0.13},"clouds":{"all":75},"dt":1604182832,"sys":{"type":1,"id":9600,"country":"AU","sunrise":1604170498,"sunset":1604218982},"timezone":39600,"id":7839683,"name":"Ashfield","cod":200},"time":"2020-10-31T22:20:32.000Z","title":"Current Weather Information","description":"Current weather information at coordinates: -33.89, 151.13"}

The icon being chopped off at the top.

Yes, I agree, and yet that is what I get.

AFAIK, I am not cropping it or cutting it down in anyway. But I am overwhelmed with all the variables in it and so although it may be cropped: at this point that is (I believe) a cosmetic thing more than a mechanical/practical thing.

Does that make sense? (Probably not)

The larger group was found by chance as I was researching the icon set and how to use them.

Though it could be argued that these are too many for which to choose - and I do partly agree - I am taking this on to (I hope) help me learn how to build structures to parse messages and create an output from that.

So though I could cheat and use them as you suggested with the prefix to create the name as per what you said. The small difference between day and night is ...... tempting.
So I thought I would use them.

I am not stuck with how to create a vendiagram of how the icons relate to one another and the output of the node.

Overcast, partly cloudy, scattered clouds.
Windy, gusty.
Rain, showers, sprinkle, thunderstorm.
Rain with wind.

And so on.

I don't know why I want to do this. (Self punishment? Self torment?) Dunno.
But some part of me seems to like the challenge. Though it could be argued that I am not really doing anything because I am (seemingly) constantly asking for help.
But that's a whole other can of worms.

I'd better shut up now. I think I am digging a bigger hole than it needs to me.

9

I hope so :laughing:

As I have said;

But unless it's described in the openweathermap API link that I gave you a few days ago, maybe another user may be able to help you.

1 Like
10

I did think that you were being polite, and so I didn't bite.

Sorry. (argh - again.... I keep apologising for just about everything)

Yeah, I am trying to learn (as per the name) and I know/get/understand that there are better/easier way of doing things. I am probably doing this as a case of getting experience at taking on something unknown, understanding it and then being able to control it.

I've read that is a good way to learn. Find something you don't understand, take it apart and learn how it works, then do something with it.

Rather than just taking the easy way out and using things that are already made.

No problems about not using weathermap. I just got it as it kind of looked ok/good.
It may not be, and there may be others out there better.

But for now it is giving me enough stuff to keep me interested and I only touched on using the icon output as I finally saw it and was curious.
Seems it is ..... ok at a push, but not as good as I would like.

I get that.

Now I have to build my own translation table between its output and the icons I see.
And I'll bet there are going to be a lot of head aches in doing it. But, it is all part of the fun.

1 Like
11

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.