# Openweatheremap node - help with icons and use

**URL:** <https://discourse.nodered.org/t/openweatheremap-node-help-with-icons-and-use/35129>\
**Category:** Dashboard\
**Created:** [31 October 2020 20:40 UTC](https://discourse.nodered.org/t/openweatheremap-node-help-with-icons-and-use/35129 "2020-10-31T20:40:08Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [31 October 2020 20:40 UTC](https://discourse.nodered.org/t/openweatheremap-node-help-with-icons-and-use/35129/1 "2020-10-31T20:40:08Z")

</div>

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](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/5/d/5d3bc39e75616e848794b1dd6516adfd226bb755.png)

But where are these?

I've found these links:

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

---

<div class="post-metadata">

**Author:** ![Paul-Reed](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/paul-reed/32/66906_2.png) [@Paul-Reed](https://discourse.nodered.org/u/Paul-Reed)\
**Post date:** [31 October 2020 21:07 UTC](https://discourse.nodered.org/t/openweatheremap-node-help-with-icons-and-use/35129/2 "2020-10-31T21:07:49Z")

</div>

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.

> [@Trying\_to\_learn](#):
>
> But they fall apart because the node outputs `11d` is the icon and neither of those have a fond with `11d` .

If you [look at the readme](https://github.com/Paul-Reed/weather-icons-lite/blob/master/css_mappings.md), 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

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [31 October 2020 21:11 UTC](https://discourse.nodered.org/t/openweatheremap-node-help-with-icons-and-use/35129/3 "2020-10-31T21:11:43Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Paul-Reed](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/paul-reed/32/66906_2.png) [@Paul-Reed](https://discourse.nodered.org/u/Paul-Reed)\
**Post date:** [31 October 2020 21:22 UTC](https://discourse.nodered.org/t/openweatheremap-node-help-with-icons-and-use/35129/4 "2020-10-31T21:22:55Z")

</div>

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

```auto
<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](https://github.com/Paul-Reed/weather-icons-lite)

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [31 October 2020 21:31 UTC](https://discourse.nodered.org/t/openweatheremap-node-help-with-icons-and-use/35129/5 "2020-10-31T21:31:48Z")

</div>

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

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.

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [31 October 2020 21:38 UTC](https://discourse.nodered.org/t/openweatheremap-node-help-with-icons-and-use/35129/6 "2020-10-31T21:38:14Z")

</div>

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](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/6/16e8059e83dd28f7fc2874a8469bab9722e2afa9.png)

Your way:

![Screenshot from 2020-11-01 08-38-43](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/6/66c418db75d42f6d4a7bb6e09d3e992df78dccfc.png)

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

---

<div class="post-metadata">

**Author:** ![Paul-Reed](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/paul-reed/32/66906_2.png) [@Paul-Reed](https://discourse.nodered.org/u/Paul-Reed)\
**Post date:** [31 October 2020 22:15 UTC](https://discourse.nodered.org/t/openweatheremap-node-help-with-icons-and-use/35129/7 "2020-10-31T22:15:05Z")

</div>

> [@Trying\_to\_learn](#):
>
> Do you know if the `background` value ever changes?

What `background`value??

> [@Trying\_to\_learn](#):
>
> but I sort of like the first way better

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

> [@Trying\_to\_learn](#):
>
> But - no offence - in the mean time I have started to use the bigger set of icons.

Andrew, that hurts and shows a distinct lack of loyalty 😉

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [31 October 2020 22:32 UTC](https://discourse.nodered.org/t/openweatheremap-node-help-with-icons-and-use/35129/8 "2020-10-31T22:32:03Z")

</div>

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

```auto
{"_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.

---

<div class="post-metadata">

**Author:** ![Paul-Reed](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/paul-reed/32/66906_2.png) [@Paul-Reed](https://discourse.nodered.org/u/Paul-Reed)\
**Post date:** [31 October 2020 22:58 UTC](https://discourse.nodered.org/t/openweatheremap-node-help-with-icons-and-use/35129/9 "2020-10-31T22:58:09Z")

</div>

> [@Trying\_to\_learn](#):
>
> I hope that there is a bit of _taking the piss_ in that.

I hope so 😆

* * *

As I have said;

> [@Paul-Reed](#):
>
> I don't use openweathermap

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.

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [31 October 2020 23:04 UTC](https://discourse.nodered.org/t/openweatheremap-node-help-with-icons-and-use/35129/10 "2020-10-31T23:04:24Z")

</div>

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_.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [30 November 2020 23:04 UTC](https://discourse.nodered.org/t/openweatheremap-node-help-with-icons-and-use/35129/11 "2020-11-30T23:04:26Z")

</div>

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