Help with icon in `text` node

I thought I had it down pat, but it isn't working.

msg.payload comes in with a value. 0 - 360. (Direction.)

Depending on the direction, it sets the arrow pointing to that corner.

The node.warn works, but the icon isn't getting through for reasons unknown.

[{"id":"d3f4d577.4a2e7","type":"function","z":"ae12fd.00ef75","name":"","func":"var direction = msg.payload;\nif (direction > 338)\n{\n    node.warn(\"N\");\n    msg.payload = '<i <span class=\"material-icons\">north</span></i>';\n    return msg;\n} else\nif (direction < 22)\n{\n    node.warn(\"N\");\n    msg.payload = '<i <span class=\"material-icons\">north</span></i>';\n    return msg;\n} else\nif (direction >=22)\n{\n    if (direction < 67)\n    {\n        node.warn(\"NE\")\n        msg.payload = '<i <span class=\"material-icons\">north_east</span></i>';\n        return msg;\n    } else\n    if (direction < (67+45))\n    {\n        node.warn(\"E\")\n        msg.payload = '<i <span class=\"material-icons\">east</span></i>';\n        return msg;\n    } else\n    if (direction < (67 + 90))\n    {\n        node.warn(\"SE\")\n        msg.payload = '<span <i class=\"material-icons\">south_east</i></span>';\n        return msg;\n    } else\n    if (direction < (67 + 90 + 45))\n    {\n        node.warn(\"S\")\n        msg.payload = '<i <span class=\"material-icons\">south</span></i>';\n        return msg;\n    } else\n    if (direction < (67 + 180))\n    {\n        node.warn(\"SW\")\n        msg.payload = '<i <span class=\"material-icons\">south_west</span></i>';\n        return msg;\n    } else\n    node.warn(\"W\")\n    msg.payload = '<i <span class=\"material-icons\">west</span></i>';\n    return msg;\n}\n//return msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":990,"y":810,"wires":[["f5a316a7.dc33b8","96773fd0.4f8ac"]]},{"id":"f5a316a7.dc33b8","type":"ui_text","z":"ae12fd.00ef75","group":"7198f93e.4f6f5","order":15,"width":"3","height":"1","name":"","label":"Wind Direction","format":"{{msg.payload}}","layout":"row-spread","x":1160,"y":810,"wires":[]},{"id":"7198f93e.4f6f5","type":"ui_group","z":"","name":"Ashfield weather","tab":"de0f6b36.132fa8","order":1,"disp":true,"width":"6","collapse":false},{"id":"de0f6b36.132fa8","type":"ui_tab","z":"","name":"Weather","icon":"dashboard","order":27,"disabled":false,"hidden":false}]

The set of material-design icons what is included to dashboard is not full set. Let's call it the offline set.
If you are using your setup with internet connection available, you can include more like this:

[{"id":"1f979a65.0feef6","type":"ui_text","z":"e84eac3f.4c039","group":"93fae10c.09faa","order":4,"width":5,"height":1,"name":"","label":"text","format":"{{msg.payload}}","layout":"row-center","x":470,"y":720,"wires":[]},{"id":"4d88f08a.ae2f7","type":"ui_template","z":"e84eac3f.4c039","group":"93fae10c.09faa","name":"","order":7,"width":0,"height":0,"format":"<link href=\"https://fonts.googleapis.com/icon?family=Material+Icons\" rel=\"stylesheet\">","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"global","x":380,"y":660,"wires":[[]]},{"id":"76470286.d11d7c","type":"inject","z":"e84eac3f.4c039","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"<span class=\"material-icons\">south_east</span>","payloadType":"str","x":330,"y":720,"wires":[["1f979a65.0feef6"]]},{"id":"93fae10c.09faa","type":"ui_group","z":"","name":"Default","tab":"6ff5405c.a8e6","order":1,"disp":true,"width":"9","collapse":false},{"id":"6ff5405c.a8e6","type":"ui_tab","z":"","name":"TEST","icon":"dashboard","order":3,"disabled":false,"hidden":false}]

And there is more instructions how to get icons for different situations.

And then make corrections in your function node. You have slight mess with <i> and <span> tags.

1 Like

Sorry, but I am stuck again.

Similar problem and I don't know what I need to do.

I want to use icons from here:

So using what you showed me with the material design icons, what do I do to get these available too.

I'm guessing the code can go in the same node.
But I can't work out the trick to doing it.

<i class="wi wi-wu-nt_flurries"></i>

1 Like

Um, dumb question, but that isn't working and I was wanting to use more than the flurries one.

More like the night versions to be different for the day ones.

Ah ok. To get full set of weather-icons

[{"id":"958b98d7.3bc0f8","type":"ui_text","z":"9038de34.04db3","group":"93fae10c.09faa","order":4,"width":"3","height":1,"name":"","label":"WEATHER","format":"{{msg.payload}}","layout":"row-left","x":490,"y":440,"wires":[]},{"id":"6be9676a.1ca8a8","type":"ui_template","z":"9038de34.04db3","group":"93fae10c.09faa","name":"","order":7,"width":0,"height":0,"format":"<link href=\"https://fonts.googleapis.com/icon?family=Material+Icons\" rel=\"stylesheet\">\n<link href=\"https://cdnjs.cloudflare.com/ajax/libs/weather-icons/2.0.10/css/weather-icons.min.css\" rel=\"stylesheet\">","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"global","x":500,"y":380,"wires":[[]]},{"id":"ff2b2602.9421f8","type":"inject","z":"9038de34.04db3","name":"span","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"","payload":"<span class=\"wi wi-2x wi-flood\"></span>","payloadType":"str","x":330,"y":440,"wires":[["958b98d7.3bc0f8"]]},{"id":"f91dab3a.dbf978","type":"ui_text","z":"9038de34.04db3","group":"93fae10c.09faa","order":4,"width":"3","height":1,"name":"","label":"WEATHER","format":"{{msg.payload}}","layout":"row-left","x":490,"y":480,"wires":[]},{"id":"5383bc90.754b74","type":"inject","z":"9038de34.04db3","name":"span ","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"","payload":"<span class=\"wi wi-2x wi-volcano\"></span>","payloadType":"str","x":330,"y":480,"wires":[["f91dab3a.dbf978"]]},{"id":"93fae10c.09faa","type":"ui_group","z":"","name":"Default","tab":"6ff5405c.a8e6","order":1,"disp":true,"width":"6","collapse":false},{"id":"6ff5405c.a8e6","type":"ui_tab","z":"","name":"TEST","icon":"dashboard","order":3,"disabled":false,"hidden":false}]

But as I see you trying to show wind direction, it can be done with weather-icons-wind with much nicer graphics and with much less coding. And you may get rid of full set of mateial-icons if you like.

[{"id":"958b98d7.3bc0f8","type":"ui_text","z":"9038de34.04db3","group":"93fae10c.09faa","order":4,"width":"3","height":1,"name":"","label":"WEATHER","format":"{{msg.payload}}","layout":"row-left","x":490,"y":440,"wires":[]},{"id":"6be9676a.1ca8a8","type":"ui_template","z":"9038de34.04db3","group":"93fae10c.09faa","name":"","order":7,"width":0,"height":0,"format":"<link href=\"https://fonts.googleapis.com/icon?family=Material+Icons\" rel=\"stylesheet\">\n<link href=\"https://cdnjs.cloudflare.com/ajax/libs/weather-icons/2.0.10/css/weather-icons.min.css\" rel=\"stylesheet\">\n<link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/weather-icons/2.0.10/css/weather-icons-wind.css\"/>\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"global","x":500,"y":380,"wires":[[]]},{"id":"ff2b2602.9421f8","type":"inject","z":"9038de34.04db3","name":"span","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"","payload":"<span class=\"wi wi-2x wi-flood\"></span>","payloadType":"str","x":330,"y":440,"wires":[["958b98d7.3bc0f8"]]},{"id":"f91dab3a.dbf978","type":"ui_text","z":"9038de34.04db3","group":"93fae10c.09faa","order":4,"width":"3","height":1,"name":"","label":"WEATHER","format":"{{msg.payload}}","layout":"row-left","x":490,"y":480,"wires":[]},{"id":"5383bc90.754b74","type":"inject","z":"9038de34.04db3","name":"span ","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"","payload":"<span class=\"wi wi-2x wi-volcano\"></span>","payloadType":"str","x":330,"y":480,"wires":[["f91dab3a.dbf978"]]},{"id":"d70e1410.23ec78","type":"function","z":"9038de34.04db3","name":"","func":"\nmsg.payload = '<span class=\"wi wi-2x wi-wind towards-'+msg.payload+'-deg\"></span>'\n\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":500,"y":560,"wires":[["f98dfe22.a5c3b"]]},{"id":"601ff63f.480228","type":"inject","z":"9038de34.04db3","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"2","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":190,"y":560,"wires":[["72b91e92.4e0d"]]},{"id":"72b91e92.4e0d","type":"random","z":"9038de34.04db3","name":"","low":"1","high":"360","inte":"true","property":"payload","x":340,"y":560,"wires":[["d70e1410.23ec78"]]},{"id":"f98dfe22.a5c3b","type":"ui_text","z":"9038de34.04db3","group":"93fae10c.09faa","order":4,"width":"3","height":1,"name":"","label":"WIND","format":"{{msg.payload}}","layout":"row-left","x":630,"y":560,"wires":[]},{"id":"93fae10c.09faa","type":"ui_group","z":"","name":"Default","tab":"6ff5405c.a8e6","order":1,"disp":true,"width":"6","collapse":false},{"id":"6ff5405c.a8e6","type":"ui_tab","z":"","name":"TEST","icon":"dashboard","order":3,"disabled":false,"hidden":false}]

image

(I've only just got up and had breakfast)

Yeah, thanks.

The wind direction bit is "work in progress". I'm not sure I need/want such accuracy.

This next bit throws a spanner in the works.
Ok you have given me the link, but that doesn't show me their individual names.

So.... I went off searching.

I have a basic bit of code/flow with an inject change and they go to a template node.
I put the icon's name in the change and press the inject.

I then look at the dashboard to see the icon. Or that's the idea.

It isn't working.

I'll have to look at what is going on.

Oh, something else - kind of off topic:
When I imported that flow, I got a warning about "nodes already exist in the flow".
Hmmm. Ok.

Opened a new tab and imported. Same error.
And there were quite a few tabs listed, yet I only imported 5.

Back to the weather icons.

Ok, so just thinking.
The link in the template node you gave me is:

<link href="https://cdnjs.cloudflare.com/ajax/libs/weather-icons/2.0.10/css/weather-icons.min.css" rel="stylesheet">

That is the minimum set. .min

I've been using the ones from Paul Reed on his site.
Though this isn't the same kind of link you gave me.
https://github.com/Paul-Reed/weather-icons-lite/blob/master/css_mappings.md

Anyway, so I'm not quite getting why it isn't working.

This is the code:

Oh, I have also modified (and put back to the original with no change) I deleted the .min to maybe point to the complete set of icons. Sorry, just in case.....

No difference. Doesn't work either way.

[{"id":"51fd0507.98a774","type":"inject","z":"e43e3902.57c4e8","name":"","repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":210,"y":3050,"wires":[["17de4414.091dcc"]]},{"id":"17de4414.091dcc","type":"change","z":"e43e3902.57c4e8","name":"Night rain","rules":[{"t":"set","p":"payload","pt":"msg","to":"<i class=\"wi-night-alt-cloudy\"></i>","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":370,"y":3050,"wires":[["530b398c.0b0738"]]},{"id":"530b398c.0b0738","type":"ui_template","z":"e43e3902.57c4e8","group":"5ed75eac.331a3","name":"","order":12,"width":3,"height":2,"format":"\n<div style=\"font-size: 48px;\"\n    ng-bind-html=\"msg.payload\">\n</div>\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":620,"y":3050,"wires":[[]]},{"id":"918e7bfc.d5a75","type":"inject","z":"e43e3902.57c4e8","name":"","repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":210,"y":3100,"wires":[["ff9a9b79.3aa198"]]},{"id":"ff9a9b79.3aa198","type":"change","z":"e43e3902.57c4e8","name":"Night rain","rules":[{"t":"set","p":"payload","pt":"msg","to":"<i class=\"wi-wu-nt_rain\"></i>","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":370,"y":3100,"wires":[["73da0eff.5b571"]]},{"id":"73da0eff.5b571","type":"ui_template","z":"e43e3902.57c4e8","group":"5ed75eac.331a3","name":"","order":12,"width":3,"height":2,"format":"\n<div style=\"font-size: 48px;\"\n    ng-bind-html=\"msg.payload\">\n</div>\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":620,"y":3100,"wires":[[]]},{"id":"b21e2569.ef1118","type":"ui_template","z":"e43e3902.57c4e8","group":"93fae10c.09faa","name":"","order":7,"width":0,"height":0,"format":"<link href=\"https://fonts.googleapis.com/icon?family=Material+Icons\" rel=\"stylesheet\">\n<link href=\"https://cdnjs.cloudflare.com/ajax/libs/weather-icons/2.0.10/css/weather-icons.css\" rel=\"stylesheet\">\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"global","x":420,"y":3140,"wires":[[]]},{"id":"5ed75eac.331a3","type":"ui_group","name":"Group 2","tab":"c7a5e8aa.a9df28","order":1,"disp":true,"width":"15","collapse":true},{"id":"93fae10c.09faa","type":"ui_group","name":"Default2","tab":"273de47d.2d2bac","order":2,"disp":true,"width":"9","collapse":false},{"id":"c7a5e8aa.a9df28","type":"ui_tab","name":"Weather","icon":"dashboard","order":4,"disabled":false,"hidden":false},{"id":"273de47d.2d2bac","type":"ui_tab","name":"TEST","icon":"dashboard","order":13,"disabled":false,"hidden":false}]

Looking more at the link:
https://cdnjs.com/libraries/weather-icons
I see there is this woff thing.

I went through a similar thing with an LCD node a while back and I have this:

me@me-desktop:~/.node-red/public/myfonts$ ls
DSEG14Modern-Italic.woff     DSEG7Modern-Italic.woff
DSEG7Modern-BoldItalic.woff  DSEGWeather.woff
me@me-desktop:~/.node-red/public/myfonts$ ^C

So..... Can I download that woff thing and have them local?

Just asking.

In the mean time:
I'll try to work out why this isn't working as is.

Oh, just to (maybe) save you more time and me not bothering you more.

The output of the openweathermap node... has a field with the name icon.
In an example I got 11d shown to me.

Looking at the site I am using, there is no such beast. But there will/should be.

That's probably something I need to as the node makers - yes?
Just then it may save me a lot of messing around decoding the output as much as I am and greatly simplify the flow.

On the icon: 11... What ever. I'm guessing thunderstorm and d for day. I don't know.


And you are missing the class wi
<i class="wi wi-night-alt-cloudy"></i>
1 Like

Yeah, silly me.

Thanks.

You have no need to do it. There is node for that. node-red-contrib-compass (node) - Node-RED

[{"id":"d70e1410.23ec78","type":"function","z":"9038de34.04db3","name":"","func":"\nmsg.payload = String.raw`<span class=\"wi wi-5x wi-wind towards-${msg.payload}-deg\"></span>`;\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":680,"y":560,"wires":[["f98dfe22.a5c3b"]],"info":"Incoming payload treated as wind direction in degrees. It should be number between 0 - 360.\n\nOugoing payload is string containing html span tag with choosed directional weather-icon for wind and additional classes to adjust icon appearance. \n`<span class=\"wi wi-5x wi-wind towards-63-deg\"></span>`"},{"id":"601ff63f.480228","type":"inject","z":"9038de34.04db3","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"2","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":190,"y":560,"wires":[["72b91e92.4e0d"]]},{"id":"72b91e92.4e0d","type":"random","z":"9038de34.04db3","name":"","low":"1","high":"360","inte":"true","property":"payload","x":340,"y":560,"wires":[["d70e1410.23ec78","23f75a15.fca426"]]},{"id":"f98dfe22.a5c3b","type":"ui_text","z":"9038de34.04db3","group":"93fae10c.09faa","order":4,"width":"3","height":"2","name":"","label":"WIND DEGREE","format":"{{msg.payload}}","layout":"col-center","x":880,"y":560,"wires":[]},{"id":"23f75a15.fca426","type":"compass-point","z":"9038de34.04db3","direction":"toCompass","subset":"secondary","language":"en","inputField":"payload","outputField":"payload","name":"","x":520,"y":620,"wires":[["d53abbb0.f0efb8"]]},{"id":"d53abbb0.f0efb8","type":"function","z":"9038de34.04db3","name":"","func":"\nmsg.payload.icon = String.raw`<span class=\"wi wi-5x wi-wind wi-towards-${msg.payload.direction.toLowerCase()}\"></span>`;\n\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":680,"y":620,"wires":[["972dd83d.ec5668"]],"info":"Incoming payload treated as wind direction in degrees. It should be number between 0 - 360.\n\nOugoing payload is string containing html span tag with choosed directional weather-icon for wind and additional classes to adjust icon appearance. \n`<span class=\"wi wi-5x wi-wind towards-63-deg\"></span>`"},{"id":"972dd83d.ec5668","type":"ui_template","z":"9038de34.04db3","group":"93fae10c.09faa","name":"","order":12,"width":"4","height":"5","format":"<div style=\"font-size: 16px; text-align: center; overflow:hidden\"\n    ng-bind-html=\"msg.payload.description\">\n</div>\n<div style=\"font-size: 48px; text-align: center; overflow:hidden\"\n    ng-bind-html=\"msg.payload.icon\">\n</div>\n\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":820,"y":620,"wires":[[]]},{"id":"93fae10c.09faa","type":"ui_group","z":"","name":"Default","tab":"6ff5405c.a8e6","order":1,"disp":true,"width":"6","collapse":false},{"id":"6ff5405c.a8e6","type":"ui_tab","z":"","name":"TEST","icon":"dashboard","order":3,"disabled":false,"hidden":false}]

I haven't got that far yet. I am having fun with the weather and mixing the cloud and wind parts now.

I just put the wind thing in at that time as a case of an exercise.

But thanks.

I quickly looked.

Yes it would work in that it would give me the SW,SE, etc output, but I got smart and also added the arrow part just to try it out.

Thanks though.

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