Setting the icon colour

Dashboard
1

I have built this bit of code which sets the icon colour when a message is received.

But it is limited to a couple of colours defined by the nr-dashboard-xxxx

I am wanting to send it different colours.
Either with the RGB values or the name would suffice - for now, as red, green, blue, yellow, black, white would suffice for what I am doing at this point.

The code was from a "bubble" example flow I found somewhere, and so I extrapolated to this:

[{"id":"b91a0c51.d3aa3","type":"inject","z":"c163e61e.77c488","name":"","topic":"","payload":"Off-line","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":560,"y":80,"wires":[["2b7e22cf.6a9ef6"]]},{"id":"32adbc35.951a94","type":"inject","z":"c163e61e.77c488","name":"","topic":"","payload":"On-line","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":560,"y":120,"wires":[["2b7e22cf.6a9ef6"]]},{"id":"2b7e22cf.6a9ef6","type":"function","z":"c163e61e.77c488","name":"","func":"if (msg.payload == \"On-line\")\n{\n    //\n    msg  = {payload: '<i class=\"fa fa-bullseye fa-2x nr-dashboard-ok\"></i>'};\n} else\n{\n    //\n        msg  = {payload: '\"<i class=\"fa fa-bullseye fa-2x nr-dashboard-error\"></i>\"'};\n}\nreturn msg;","outputs":1,"noerr":0,"x":720,"y":90,"wires":[["25eb86c5.122112","1444d956.ad82d7"]]},{"id":"25eb86c5.122112","type":"ui_text","z":"c163e61e.77c488","group":"41f32a2e.a0347c","order":15,"width":"1","height":"1","name":"default","label":"","format":"{{msg.payload}}","layout":"row-center","x":850,"y":110,"wires":[]},{"id":"41f32a2e.a0347c","type":"ui_group","z":"","name":"Vieweryuyuyuyu","tab":"ede494d4.49ddb","order":1,"disp":true,"width":"12","collapse":false},{"id":"ede494d4.49ddb","type":"ui_tab","z":"","name":"Messages","icon":"dashboard","order":2}]
2

why not try a google search of 'nr-dashboard-error' and see what you can find?

3

I've done that - I think .

nr-dashboard-error is a set colour for errors.
Same way as nr-dashboard-ok and nr-dashboard-warn.
I can't quote the exact names, but I hope you believe me when I say I have read about that.

The flow injects the "names" and so their colours are translated into the node/button/icon's colour.

I get that.

But it is limited to the three names: error/warn/ok.

I was wanting to see how to construct a line so the name of the colour (or RGB value) can be used in the line as per the bubble flow so rather than using said names, I can use colours.

Alas in the mean time I seem to have opened a few more cans of worms and so am (at 22:30 local time) trying to put them back in their cans as well.

4

see if this helps

[{"id":"ea572d23.d98b18","type":"ui_switch","z":"99ca0aa1.683a18","name":"","label":"switch","group":"33b5f646.bd8c9a","order":2,"width":0,"height":0,"passthru":true,"decouple":"false","topic":"","style":"","onvalue":"true","onvalueType":"bool","onicon":"","oncolor":"","offvalue":"false","offvalueType":"bool","officon":"","offcolor":"","x":550,"y":320,"wires":[["ff215cef.502728"]]},{"id":"ff215cef.502728","type":"ui_text","z":"99ca0aa1.683a18","group":"33b5f646.bd8c9a","order":1,"width":0,"height":0,"name":"on/off","label":"","format":"<font color={{(msg.payload?\"yellow\":\"grey\")}}><i class=\"fa fa-lightbulb-o fa-2x\">","layout":"row-spread","x":730,"y":320,"wires":[]},{"id":"33b5f646.bd8c9a","type":"ui_group","z":"99ca0aa1.683a18","name":"Click","tab":"c0950eb1.938388","order":2,"disp":true,"width":"4","collapse":false},{"id":"c0950eb1.938388","type":"ui_tab","z":"99ca0aa1.683a18","name":"Home","icon":"link","order":1}]
1 Like
5

Are you using the projects feature with git? If not then I highly recommend doing so. Then after each significant set of changes you can commit the current state. If a change later messes things up you can easily revert to the last working system.

6

Colin,

No, I am not using GIT.

I read that NR is going towards that methodology. I am still too stupid to understand it with "version numbers". To me they just get bigger as the age increases. (Dumb look)

Maybe that is a bad thing, but I don't "live on the net".

I have resolved the issue by making backups of the flows now and then.

So if (cough) I mess up, I can just delete it all and go back to an older version.

7

Thanks much Zenofmud.

I'll work on that and apply it as needed.

This is a shot of my screen now.

As you can see, a lot of the "SWITCHES" are being migrated to the newer version of the indicator.

Still a few to go, but as they aren't important for now, I won't sweat on them.

You may also see the other modification top left.
There is the moon now.
That cycles between the moon and sun. Black and Yellow. Rather than (again) the SWITCH node in default mode.

Oh, (yeah sorry: off topic) WHY is that chart (the only one active) not BLACK?

I know it has two colours on it now: that was me changing the colours to try and see what is going on.
It is set to BLACK, yet it is still tracing in Orange. (That was because it was the light blue and I changed it to ORANGE only because it was on BLACK and so I had to pick another colour.)

Screenshot%20from%202018-08-11%2023-29-43
Screenshot from 2018-08-11 23-29-43.png1360Ă—768 194 KB

8

No, git version numbers (actually called revision hashes) don't get bigger.
You haven't resolved the issue, you have just found (IMO) a poor workaround. This is another case where spending some time learning would save time in the long run. If you decide you do want to learn about git then try https://www.learnenough.com/git-tutorial.
Also, you keep saying you are stupid, when what you actually mean is that there are things that you don't know. Lack of knowledge is not the same as stupidity.

9

Hang on.

I want to "explore that idea that "REVISION HASHES don't get bigger".

I write a program/what ever. It is (to use your term) revision hash 1. Ya gotta start somewhere.

A few days later I improve it. That is revision hash? 1.x or 2? (Who cares?)

Another month down the track I find a big bug in it and fix it. That is revision hash? B?

"You haven't resolved the issue, you have found (IMO) a poor workaround."
That too has me stumped.
What issue? Working with Node-Red or the revision hash? Or...?
I'll look at the revision hash first:
What happened before GIT existed?
20 years ago I kept backups of programs I wrote when ever there was significant changes to the previous version. That way if something went pear shaped, I could get an earlier version.
It worked/works.
Because GIT came along doesn't make any previous working system ..... a poor workaround.
It - to me - only means it is not the better/best way. It doesn't mean it doesn't work, and also doesn't mean it should no longer be used.
Now the Node-Red side of things:
I don't know when I started with Node-Red, but I'd guess less than 6 months.
Rhetorically: How long have you been using Node-Red? Years?
There is no way I can know in 6 months what you (and others) have learnt in YEARS of study/use.

Now, the last part:
And this is re-enforced by YEARS of "experience":
For >40 years I have been told "YOU ARE STUPID AND DON'T DESERVE......." "YOU WILL NEVER ACHIEVE ANYTHING" and a whole lot more other stuff which makes that look tame.
I don't like admitting this as it seems a plea for help/pitty.
So it is INGRAINED into me that I am stupid.

I am doing things I never thought I would/could.
I don't want to waste time .... doing stupid things. I agree that it is better to do things the better way. But until you UNDERSTAND it, it is rather academic. You have to persevere/persist with what works at that time until you understand the better way.

I (somehow) seem to enjoy TRYING things and not just "oh, that's too complicated for me".
But I am not getting the language of how things are explained.
I watch a youtube clip for 20 minutes and it takes them 14 to get to the crux of what they are doing.
For instance:
"This is a node, you connect it to another node........ (blah blah blah)"
Nothing to do with "How to set the colour of a button"

I'd better stop now, I think I have exposed a few too many things here/now and I am not really coping with it.

10

On the git issues, revision hashes, and versions, if you spend a couple of hours working through the first sections of the tutorial I linked then all will become clear. Probably best to start a new thread if you want to discuss git further.

On the aspect of stupidity, the Oxford dictionary defines it as "having or showing a great lack of intelligence or common sense". Whether you choose to consider that applies to yourself is up to you, however I would have thought that it would be unlikely to apply to anyone who manages to even get started with computer programming (which is what node-red is). In fact you go on to say "There is no way I can know in 6 months what you (and others) have learnt in YEARS of study/use." which is precisely my point, it is lack of knowledge that is holding you back, not lack of intelligence. However I would say that to some extent you are, entirely understandably, guilty of the sin of wanting to run before you can walk. Consider the task of learning to drive a car for example. After a few hours training and practice one might expect to be able to basically control the car to go in the direction you want at the speed you want. However you would not expect at that time to be able to do a handbrake slide into a parking slot. With node red you have mastered the fundamentals using the built in nodes and have, I guess, made it do useful things for you. Now you want to go on to do more sophisticated things which involve knowledge of javascript, html, css, etc. To be competent in any of those needs a significant amount of additional learning. One can make a certain amount of progress just by copying other people's examples (and we all do that) but the problem then is that when it doesn't work one is a bit stuck if one hasn't got the knowledge to understand what is happening. This is why I keep coming back to the suggestion of taking time to work through tutorials in order to better understand the fundamentals.

Consider your problem about setting the icon colour. I don't like video guides much either, I much prefer written text that one can work through methodically, experiment to make sure I understand what is going on, and skip over bits that I already know about. You say you could not find a guide telling you to set the icon colour. Think about how many people have set an icon colour in the node-red dashboard. I have not done that as I have not found it necessary. Maybe less than 50 people in the world have ever done that, I don't know. It isn't surprising that you can't immediately find a guide on how to do it. Once you understand the basics of html and css however, such a task becomes much easier as, for example, the snippet in @zenofmud's example <font color={{(msg.payload?"yellow":"grey")}}><i class="fa fa-lightbulb-o fa-2x"> is instantly meaningful to me and I would likely be able to adapt it to be able to do what I wanted.

2 Likes