Weather icons - please help why some aren't loaded

Dashboard
1

I have probably asked before and it was never resolved.

I am working on my weather code and the unusual condition of SNOW happened.

I hadn't put it in as it is that infrequent.

So it happened and so I put in the code.

But I am not seeing the icon.

This is the message which is being used to make the icon appear.

{"payload":" wi wi-snow","event":{"clientX":975,"clientY":198,"bbox":[947,225,995,177]},"socketid":"avA216tBMV5ZI5RaAABP","_msgid":"f1b6e766.09fcd8","icon":"<i class=\"fa fa-refresh fa-spin\"></i>","background":"#333333","font":"red","location":{"lon":149.1333,"lat":-36.2333,"city":"Cooma","country":"AU"},"data":{"coord":{"lon":149.1333,"lat":-36.2333},"weather":[{"id":601,"main":"Snow","description":"snow","icon":"13d"}],"base":"stations","main":{"temp":272.02,"feels_like":268.21,"temp_min":272.02,"temp_max":272.02,"pressure":1016,"humidity":100},"visibility":10000,"wind":{"speed":3.09,"deg":30},"snow":{"1h":0.87},"clouds":{"all":100},"dt":1626647713,"sys":{"type":1,"id":9520,"country":"AU","sunrise":1626642594,"sunset":1626678551},"timezone":36000,"id":2170577,"name":"Cooma","cod":200},"time":"2021-07-18T22:35:13.000Z","title":"Current Weather Information","description":"Current weather information at coordinates: -36.2333, 149.1333","base":{"wind":{"light":10,"strong":40}},"_event":"node:1ac83a63.8be8e6","now":1626667415,"colour":"white"}

This is the message of the REAL weather.
(and it works)

{"payload":"wi wi-day-cloudy","event":{"clientX":940,"clientY":202,"bbox":[916,225,964,177]},"socketid":"HT5up78OgHXP74cbAABR","_msgid":"b40f4616.886b18","icon":"<i class=\"fa fa-refresh fa-spin\"></i>","background":"#333333","font":"red","location":{"lon":149.1333,"lat":-36.2333,"city":"Cooma","country":"AU"},"data":{"coord":{"lon":149.1333,"lat":-36.2333},"weather":[{"id":804,"main":"Clouds","description":"overcast clouds","icon":"04d"}],"base":"stations","main":{"temp":282.33,"feels_like":280.39,"temp_min":282.33,"temp_max":282.33,"pressure":1012,"humidity":51,"sea_level":1012,"grnd_level":919},"visibility":10000,"wind":{"speed":3.5,"deg":275,"gust":4.52},"clouds":{"all":100},"dt":1626667458,"sys":{"country":"AU","sunrise":1626642594,"sunset":1626678551},"timezone":36000,"id":2170577,"name":"Cooma","cod":200},"time":"2021-07-19T04:04:18.000Z","title":"Current Weather Information","description":"Current weather information at coordinates: -36.2333, 149.1333","base":{"wind":{"light":10,"strong":40}},"now":1626667459,"colour":"white"}

So why is it the icon isn't the snow?

2

Perhaps it melted too quickly :laughing:

But seriously, perhaps whatever info source you use never actually listed snow as it may have been a localized condition? Just a guess.

PS, none of your flows imported for me... Error: Input not a JSON Array

3

Oh that was the msg.payload... Not the flow.

Just so you can see what I am sending.

I am sending that into a template (the other one) node.

It works for other conditions.

But today, snow was the key and as snow wasn't parsed, it failed.

4

Are you using Font Awesome images? If so they don't seem to have "snow" but "snowflake"

https://fontawesome.com/v4.7/icon/snowflake-o

5

I found the problem!

A stupid space in the name of the icon.

SILLY ME!

1 Like
6

If you are using weather icons lite which is included to the node red dashboard css, not all the icons here just to keep file size reasonable. also the naming is different for some icons.
To get covered for all possible weather condition, it will be reasonable to use weather icons (full set)- You can even download it or via some cdn provider like this

[{"id":"cd3ea588.42ad38","type":"ui_template","z":"407e1abc.6d1cb4","group":"65dfd687.bc39a8","name":"weather icons","order":10,"width":0,"height":0,"format":"<link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/weather-icons/2.0.12/css/weather-icons.min.css\" integrity=\"sha512-r/Gan7PMSRovDus++vDS2Ayutc/cSdl268u047n4z+k7GYuR7Hiw71FsT3QQxdKJBVHYttOJ6IGLnlM9IoMToQ==\" crossorigin=\"anonymous\" referrerpolicy=\"no-referrer\" />","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"global","x":360,"y":580,"wires":[[]]},{"id":"65dfd687.bc39a8","type":"ui_group","name":"Default","tab":"5394d338.3dd19c","order":1,"disp":true,"width":"15","collapse":false},{"id":"5394d338.3dd19c","type":"ui_tab","name":"Home","icon":"dashboard","order":2,"disabled":false,"hidden":false}]
7

Thanks.

We were posting at the same time.

My Silly me post was kind of right, but also wrong.

I got an inject node and send wi wi-snow into the template node and it worked.

So I looked at the sub-flow again and saw/noticed a space at the start of the msg.payload when it was created.

I then deleted the space - hoping that would be it.

No. Still not seeing the icon.

This is the payload for real:

{"payload":"wi wi-darksky-partly-cloudy-day","event":{"clientX":947,"clientY":203,"bbox":[916,225,964,177]},"socketid":"HT5up78OgHXP74cbAABR","_msgid":"f6e7b21.c8f925","icon":"<i class=\"fa fa-refresh fa-spin\"></i>","background":"#333333","font":"red","location":{"lon":149.1333,"lat":-36.2333,"city":"Cooma","country":"AU"},"data":{"coord":{"lon":149.1333,"lat":-36.2333},"weather":[{"id":803,"main":"Clouds","description":"broken clouds","icon":"04d"}],"base":"stations","main":{"temp":281.02,"feels_like":278.75,"temp_min":281.02,"temp_max":281.02,"pressure":1011,"humidity":61},"visibility":10000,"wind":{"speed":3.6,"deg":230},"clouds":{"all":75},"dt":1626673587,"sys":{"type":1,"id":9520,"country":"AU","sunrise":1626642594,"sunset":1626678551},"timezone":36000,"id":2170577,"name":"Cooma","cod":200},"time":"2021-07-19T05:46:27.000Z","title":"Current Weather Information","description":"Current weather information at coordinates: -36.2333, 149.1333","base":{"wind":{"light":10,"strong":40}},"now":1626673692,"colour":"white"}

This is what I see:

Screenshot from 2021-07-19 15-48-14

If I inject this (node) it works - I see the snow icon.

[{"id":"5f942384.546724","type":"inject","z":"ae12fd.00ef75","name":"Snow","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"wi wi-snow","payloadType":"str","x":1240,"y":1800,"wires":[["6a03d7e5.10e1d"]]}]

Screenshot from 2021-07-19 15-50-50

But if I send it this payload, it doesn't show.

Weird.

Probably me not seeing something.

{"payload":"wi wi-snow","event":{"clientX":975,"clientY":198,"bbox":[947,225,995,177]},"socketid":"avA216tBMV5ZI5RaAABP","_msgid":"7b54af66.82257","icon":"<i class=\"fa fa-refresh fa-spin\"></i>","background":"#333333","font":"red","location":{"lon":149.1333,"lat":-36.2333,"city":"Cooma","country":"AU"},"data":{"coord":{"lon":149.1333,"lat":-36.2333},"weather":[{"id":601,"main":"Snow","description":"snow","icon":"13d"}],"base":"stations","main":{"temp":272.02,"feels_like":268.21,"temp_min":272.02,"temp_max":272.02,"pressure":1016,"humidity":100},"visibility":10000,"wind":{"speed":3.09,"deg":30},"snow":{"1h":0.87},"clouds":{"all":100},"dt":1626647713,"sys":{"type":1,"id":9520,"country":"AU","sunrise":1626642594,"sunset":1626678551},"timezone":36000,"id":2170577,"name":"Cooma","cod":200},"time":"2021-07-18T22:35:13.000Z","title":"Current Weather Information","description":"Current weather information at coordinates: -36.2333, 149.1333","base":{"wind":{"light":10,"strong":40}},"_event":"node:1ac83a63.8be8e6","now":1626673921,"colour":"white"}

So what is wrong with this message?
(Rhetorical in a lot of ways.)
But I won't mind if you can point out the elephant. :wink:

8

Ok, "test case"

This flow works.

[{"id":"c1d18db4.1d53a","type":"inject","z":"ae12fd.00ef75","name":"Clear night","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"wi wi-darksky-clear-night","payloadType":"str","x":1250,"y":1750,"wires":[["6a03d7e5.10e1d"]]},{"id":"5f942384.546724","type":"inject","z":"ae12fd.00ef75","name":"Snow","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"wi wi-snow","payloadType":"str","x":1240,"y":1800,"wires":[["6a03d7e5.10e1d"]]},{"id":"6a03d7e5.10e1d","type":"function","z":"ae12fd.00ef75","name":"Set colour","func":"if (msg.colour == undefined)\n{\n    msg.colour = \"white\";\n}\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":1180,"y":1860,"wires":[["822a0d23.fec4d8"]]},{"id":"822a0d23.fec4d8","type":"ui_template","z":"ae12fd.00ef75","group":"360d5537.210baa","name":"","order":7,"width":3,"height":2,"format":"<div style=\"display: flex;height: 100%;justify-content: center;align-items: center;\">\n    <i style=\"color:{{msg.colour}};\" class=\"{{msg.payload}} fa-4x\"></i>\n</div>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":1330,"y":1860,"wires":[["97541b.27e9ebe8"]]},{"id":"360d5537.210baa","type":"ui_group","name":"Cooma weather","tab":"de0f6b36.132fa8","order":4,"disp":true,"width":"8","collapse":false},{"id":"de0f6b36.132fa8","type":"ui_tab","name":"Weather","icon":"dashboard","order":17,"disabled":false,"hidden":false}]

Either icon is shown correctly.

But when the flow sends its message to the node (input at same point as the two inject nodes): the icon is not changed/shown.

9

Without weathericons

image
image1726Ă—374 83 KB

With weather icons included

image
image1710Ă—364 83.4 KB

10

Ok, but where is that?

I can't declare to use weathericons or weather-icons-lite

I did a search on the machine for weathericons and weather-icons-lite.
Only the latter was found and that was only in a comment node.

So sorry, I don't know which node you got that from.

Is that in something like the css definitions node (template) node?

Again: sorry.

11

I found this node which I believe is used to allow me to use those icons, but it is not what you showed me.

[{"id":"e3725a0e.43adb8","type":"ui_template","z":"10fde8b5.a8a82f","group":"d141f99f.9e6318","name":"Icons","order":7,"width":0,"height":0,"format":"<link href=\"https://fonts.googleapis.com/icon?family=Material+Icons\" rel=\"stylesheet\">\n<i class=\"wi wi-wu-nt_flurries\"></i>\n<link href=\"https://cdnjs.cloudflare.com/ajax/libs/weather-icons/2.0.10/css/weather-icons.min.css\" rel=\"stylesheet\">\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"global","x":770,"y":100,"wires":[[]]},{"id":"d141f99f.9e6318","type":"ui_group","name":"Default","tab":"a770f02a.b6e3c8","order":1,"disp":true,"width":"9","collapse":false},{"id":"a770f02a.b6e3c8","type":"ui_tab","name":"TEST","icon":"dashboard","order":4,"disabled":false,"hidden":false}]

So I guess that is the reason for the problem.

12

The weather-icons-min.css will be loaded if you include it with the ui_template node like I shared before.
When loaded, the class .wi will be overrided. So it uses different font-familiy and that is absolutely different set of icons. You can't use them in parallel cos whichever is added later will take effect. And adding via ui_template will happen later.

13

So it would be better if I put those lines in the template node to force the use of the bigger set of weather icons?

Though that code you posted (a few posts back) isn't from a node. That looks like browser debug output.

14
  1. yes (unless there isn't restrictions doing so )
  2. the code was just ui_template node where loading of weather icons is done.
15

I've looked and I don't load them anywhere on the machine.

That's what is stumping me.

I thought it was in a ui_template node... but searching for weathericons yields nothing in any.

So I have got to this in that node in the flow I posted:

element.style {
}
.wi {
     font_family: 'weathericons';
}

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

But that isn't right is it. I suspect that because the first few lines aren't coloured.
So I'm guessing it isn't right.

16

You should not do this unless you are sure you have this fontfamily included. And it is not by default. That's why the loading needs to be done using the ui_template node like was shown.
If loaded, there will be no need to do it cos it just happens.

17

(take me out the back and shoot me)

I am honestly not getting it.

What you showed me (the two pictures) I see as browser debug output.

So sorry, I am not getting it.

18

Too far a shot... re-tasking Starlink satellites for rapid deorbit to your supplied location :laughing:

19

Try this. But be sure you don't have any other ui_template active where you may load in the weather icons.

[{"id":"77a26bc5.764fc4","type":"ui_template","z":"407e1abc.6d1cb4","group":"65dfd687.bc39a8","name":"show two weather icons","order":9,"width":"6","height":"4","format":"<div><i class=\" wi wi-snow\"></i></div>\n<div><i class=\"wi wi-day-cloudy\"></i></div>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":610,"y":580,"wires":[[]]},{"id":"cd3ea588.42ad38","type":"ui_template","z":"407e1abc.6d1cb4","d":true,"group":"65dfd687.bc39a8","name":"load weather icons","order":10,"width":0,"height":0,"format":"<link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/weather-icons/2.0.12/css/weather-icons.min.css\" integrity=\"sha512-r/Gan7PMSRovDus++vDS2Ayutc/cSdl268u047n4z+k7GYuR7Hiw71FsT3QQxdKJBVHYttOJ6IGLnlM9IoMToQ==\" crossorigin=\"anonymous\" referrerpolicy=\"no-referrer\" />","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"global","x":370,"y":580,"wires":[[]]},{"id":"6e268e98.ed431","type":"comment","z":"407e1abc.6d1cb4","name":"enable me to make it working","info":"","x":380,"y":540,"wires":[]},{"id":"65dfd687.bc39a8","type":"ui_group","name":"Default","tab":"5394d338.3dd19c","order":1,"disp":true,"width":"15","collapse":false},{"id":"5394d338.3dd19c","type":"ui_tab","name":"Home","icon":"dashboard","order":2,"disabled":false,"hidden":false}]
20

I am really sorry, but..... That works. Fine.

As given.

But this is what is really doing my head in:

Before this, I had my flow. Until the other day it was working and snow wasn't used/seen/needed.

Ok, so what I have (bigger picture) doesn't work.
I kept the whole msg so I re-inject it to test the flow.
But other times the msg.payload is something else and works.

So, after some trial and failure, I put an inject node to inject wi wi-snow as the payload and it works.

So it gets me why when I send the bigger (original) message it doesn't show the snow icon.

To repeat: In this flow.... if I click the inject node and it sends wi wi-snow I see the snow icon.

This works:

[{"id":"c1d18db4.1d53a","type":"inject","z":"ae12fd.00ef75","name":"Clear night","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"wi wi-darksky-clear-night","payloadType":"str","x":1250,"y":1750,"wires":[["6a03d7e5.10e1d"]]},{"id":"5f942384.546724","type":"inject","z":"ae12fd.00ef75","name":"Snow","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"wi wi-snow","payloadType":"str","x":1240,"y":1800,"wires":[["6a03d7e5.10e1d"]]},{"id":"6a03d7e5.10e1d","type":"function","z":"ae12fd.00ef75","name":"Set colour","func":"if (msg.colour == undefined)\n{\n    msg.colour = \"white\";\n}\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":1180,"y":1860,"wires":[["822a0d23.fec4d8"]]},{"id":"822a0d23.fec4d8","type":"ui_template","z":"ae12fd.00ef75","group":"360d5537.210baa","name":"","order":7,"width":3,"height":2,"format":"<div style=\"display: flex;height: 100%;justify-content: center;align-items: center;\">\n    <i style=\"color:{{msg.colour}};\" class=\"{{msg.payload}} fa-4x\"></i>\n</div>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":1330,"y":1860,"wires":[["97541b.27e9ebe8"]]},{"id":"97541b.27e9ebe8","type":"debug","z":"ae12fd.00ef75","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","x":1470,"y":1860,"wires":[]},{"id":"360d5537.210baa","type":"ui_group","name":"Cooma weather","tab":"de0f6b36.132fa8","order":4,"disp":true,"width":"8","collapse":false},{"id":"de0f6b36.132fa8","type":"ui_tab","name":"Weather","icon":"dashboard","order":17,"disabled":false,"hidden":false}]

Clicking either inject node shows the correct icon.

But when the (bigger) message has snow in it: it isn't shown.
The message is sent as I see the entire message coming out the node.

So why does it work with the basic message and not with the other one?