How to change the colour of this icon. FA-Icon

Dashboard
1

I am using the fa icon group and have this bit of code.

if (msg.payload == "On-line")
{
    //
    msg  = {payload: '<i class="fa fa-bullseye fa-2x nr-dashboard-ok"></i>'};
    node.status({fill:"green",shape:"dot",text:"On-line"});
} else
{
    //
    msg  = {payload: '<i class="fa fa-bullseye fa-2x nr-dashboard-error"></i>'};
    node.status({fill:"red",shape:"dot",text:"Off-line"});
}
return msg;

Where I am falling over is the colour.
Status quo, the colour is set by the nr-dashboard-ok part.
And there are two options. ok or error.

Ok, I can change the definition of the colour. But alas it isn't that simple.

I am wanting to have three colours.

But to maintain the standard, I have to use the nr-dashboard-xxx part.
Where can I get a list of how to put more options in there.

I have looked at this site:
nr-dashboard

But I get confused when it goes to the:
and the line below.

body.nr-dashboard-theme .nr-dashboard-color { color: @groupTextColor; }

Because if I make the line:

    msg  = {payload: '<i class="fa fa-bullseye fa-2x nr-dashboard-color { color: #888829; }"></i>'};

It doesn't work.
I picked the values at random. But I am wanting a kind of yellow colour.

Thanks in advance.

2

For yellow use the "warning" class

r-01
r-01.PNG815Ă—231 9.38 KB

1 Like
3

Appreciated.

I am confused though with the other stuff around it.

I haven't got enough courage (?) to know all the workings of how "nr-dashboard-warning" works.
I am sure I tried it and all I got was a WHITE version of the icon, not a yellow one, so where does that code set the colour?

Just asking.

This is the line I (finally) got to work:

msg  = {payload: '<i class="fa fa-bullseye fa-2x nr-dashboard-warning { color: #eaf42f; }"></i>'};
4

You could use the font-color tag instead, for other colors:

r-02
r-02.PNG817Ă—226 9.31 KB

5

Explaining: nr-dashboard-warning is the name of a CSS class. Inside the class definition you can see what is the color defined.

body.nr-dashboard-theme .nr-dashboard-error { color: #ff2929; }
body.nr-dashboard-theme .nr-dashboard-warning { color: #eaf42f; }
body.nr-dashboard-theme .nr-dashboard-ok { color: #49db3c; }

6

Again: Thanks.

But (sorry) I don't have the fields you show.

I don't know how to "identify the node" once it is in a flow.
I think it is a NUMBER input node... Dunno, but this is the code:

Oh, there you go. It is a UI_TEXT node - I think. Top line in the code.

[{"id":"215b8976.4a058e","type":"ui_text","z":"c636aa5a.cc34","group":"1f5fe937.c354c7","order":1,"width":"2","height":"1","name":"82","label":"82","format":"{{msg.payload}}","layout":"row-center","x":3510,"y":550,"wires":[]},{"id":"1f5fe937.c354c7","type":"ui_group","z":"","name":"Cat-5","tab":"1c792414.600e94","order":3,"disp":true,"width":"10","collapse":false},{"id":"1c792414.600e94","type":"ui_tab","z":"","name":"Telemetry","icon":"dashboard","order":2}]
7

But where are these lines?

In which file?

(Sorry if we are tripping over each other's replies.)

8

The screenshot I have used was taken from the config of an inject node. It is the easier way for you to test.

Flow:

[{"id":"b195cce4.3c5d5","type":"tab","label":"Flow 1","disabled":false,"info":""},{"id":"f4996196.d495","type":"ui_text","z":"b195cce4.3c5d5","group":"3dfd1195.df4f4e","order":4,"width":"1","height":"1","name":"indicator","label":"","format":"{{msg.payload}}","layout":"row-center","x":560,"y":160,"wires":[]},{"id":"a2b85955.22e8a8","type":"inject","z":"b195cce4.3c5d5","name":"unlock","topic":"","payload":"<font color= #00A4DE><i class=\"fa fa-lightbulb-o fa-2x\"></i></font>","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":"","x":390,"y":160,"wires":[["f4996196.d495"]]},{"id":"3dfd1195.df4f4e","type":"ui_group","z":"","name":"Test","tab":"d50effcd.c6b68","disp":true,"width":"6","collapse":false},{"id":"d50effcd.c6b68","type":"ui_tab","z":"","name":"Test","icon":"dashboard","order":5}]
9

My reply: From the very same link you have shared in your post.

I have looked at this site:
nr-dashboard

10

Ok....

(catch up time)

This line was added (replaced) and all seems to work, and I think it is "tidier" than the mess I had.

        msg  = {payload: '<font color = "yellow" i class="fa fa-bullseye fa-2x"></i>'};

That link I mentioned confused me, as it went on and did/does say that, but (to me) it is out of context, as it doesn't say (clearly enough) where they are assingned.

It only shows code.....
But not where/how to set them.
Maybe I need to learn a bit more about it.

But it is working and I have learned a bit more.
Thing is, I think something else has been pushed out the other end/side. Shame I don't know what that is though. :frowning:

Screenshot%20from%202018-09-02%2010-25-15
Screenshot from 2018-09-02 10-25-15.png1360Ă—768 91.8 KB

11

Good, if it was useful for your it may be for someone else in the future so please mark the post as resolved. :wink:

1 Like