Change fa-icon in ui template with a message payload

Dashboard
1

I have a ui template node that i am wanting to be able to change the fa-icon by sending different msg.payloads. First i added "" To my button, which worked as it should. then i tried " which made the icon spin. (i was well impressed) so how to make it spin and stop ? so far i have tried various versions of this.

i have tried various versions of the "" bit but none seem to work. it would be nice to be able to create an template that could be injected with say... msg.icon to change its icon on the fly.
Thanks Chris.

2

I think the bits between "" went missing from your post? In any case, a template node displaying msg.icon is a doddle - in its most basic form you could do something like this:

<img src="/icons/{{msg.icon}}.png" />

The icon files should then be placed in your Node-RED httpStatic directory, in a subfolder called "icons". Check Node-RED's settings.js for the parameter httpStatic, which you can change if you want.

3

Thanks. My code did go missing in the post. I am wanting to use The fa-icons that work ok and to my knowledge are not in the icon folder specified in httpstatic. do i need to place these in there ?
i am trying to change the icon between "fa-cog" and "fa-cog fa-spin" to get it to spin or not.

4

In that case you can omit the leading "/" in my example; Node-RED stores its internal icons in a directory called "icons" below wherever its application root is. So the example would be:

<img src="icons/{{msg.icon}}.png" />

Edit: This is incorrect - see further down.

5

I think i need to find where the "fa-icons are on my machine i am using at the moment. (Linux mint laptop just using for testing) I have a pi3 running the whole house that i have broken several times tinkering about. It has all the icons in a myIcons folder that httpStatic points to. But on this laptop they must be somewhere as they work using
thanks i will keep playing

6

whenever i type code it dissapears ?????

7

Not really necessary; I'm pretty sure a URL like "icons/fa-cog.png" will automatically point to wherever Node-RED stores its internal icon files. But having actually tried it myself, I found that it's better to not reference the filename of the icon, but to give some element the class fa plus the name of the FontAwesome icon you want to use. For example:

<div class="fa {{msg.icon}}" />

Where msg.icon = "fa-cog" etc.

1 Like
8

Code you want to appear in-line with the text in your message should be wrapped in single "backtick" characters (`), and a block of code goes between three backticks (```). At least on a UK keyboard this is in the top left, just below the "Esc" key, to the left of the "1" key.

9

works perfect ! ...and quite simple, you should of seen my first attempt with all the script and if..then..else rubbish.
thank you

1 Like
10

Hi there,

I also need a templete.
Would it be possible to set me a complete example (code).
Unfortunately my knowledge is not enough. Would be really nice.
Thank you very much.

11

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