Need help on how to change UI text icon color with input value from Serial Node

Dashboard
1

Hello, I just started Node-RED recently and I want to display the ui text icon color to green or red depending on the condition set. I know that by using trigger, the icon color can change accordingly but when i replace trigger with Serial node, the icon color only display one color continuously. The data I am sending into Node-RED is from Arduino.

[{"id":"ed47d1a8.4d2a9","type":"serial in","z":"ff9f1009.524c3","name":"","serial":"1e7f3d61.5d2fd3","x":110,"y":220,"wires":[["d1ac1592.bb9128"]]},{"id":"de5a310a.d28bd","type":"ui_text","z":"ff9f1009.524c3","group":"ea91e9a2.78d668","order":0,"width":0,"height":0,"name":"","label":"text","format":"<font color={{msg.color}}><i class=\"fa fa-circle\" style= \"font-size:24px;\"></i></font>","layout":"row-spread","x":510,"y":220,"wires":[]},{"id":"d1ac1592.bb9128","type":"function","z":"ff9f1009.524c3","name":"Test","func":"msg.color=(msg.payload <='100') ?'red':'green';\nreturn msg;","outputs":1,"noerr":0,"x":350,"y":220,"wires":[["de5a310a.d28bd"]]},{"id":"1e7f3d61.5d2fd3","type":"serial-port","z":"","serialport":"COM3","serialbaud":"9600","databits":"8","parity":"none","stopbits":"1","newline":"\\n","bin":"false","out":"char","addchar":false,"responsetimeout":"10000"},{"id":"ea91e9a2.78d668","type":"ui_group","z":"","name":"Testing","tab":"951ba2b7.7b00b","disp":true,"width":"6","collapse":false},{"id":"951ba2b7.7b00b","type":"ui_tab","z":"","name":"Home","icon":"dashboard"}]

2

Welcome to the forum :slight_smile:

Sadly we can not import your flow right now. But you can easely fix the situation by following instructions from this post:
https://discourse.nodered.org/t/how-to-share-code-or-flow-json/506?u=hotnipi

Chers

3

Thank you for the instruction for sharing flows :grinning:

Hope that the flow can be viewed now.

4

Your flow is fine. Now we need to know about the incoming data. Wire a debug node to the output of the serial in node and show us the message from debug panel.

5

image
image.png1920Ă—1080 217 KB

The incoming data is the distance value from ultrasonic sensor.
The distance values are displayed without issues but the output does not change when values are lesser than 100. Even the values start lower than 100 will also displayed in green.

6

In your debug node, you can set the output to show complete message object.
This gives much more valuable info.
image

1 Like
7

image
image.png1920Ă—1080 263 KB

8

Now the problem is revealed. In msg.payload is the string in format "Distance: value". This is not a number you can compare with another number. You must parse out the value from that string to be a number, before comparing it in your function node. Do a little research how to get a number from string in JavaScript. You are pretty close to result. :slight_smile:

1 Like
9

thank you for your guidance :smile:

I have achieved my results and I'll show the nodes below in case someone needs it.

[{"id":"ed47d1a8.4d2a9","type":"serial in","z":"ff9f1009.524c3","name":"","serial":"f83bde42.645e4","x":110,"y":220,"wires":[["d1ac1592.bb9128"]]},{"id":"de5a310a.d28bd","type":"ui_text","z":"ff9f1009.524c3","group":"ea91e9a2.78d668","order":0,"width":0,"height":0,"name":"","label":"text","format":"<font color={{msg.color}}><i class=\"fa fa-circle\" style= \"font-size:24px;\"></i></font>","layout":"row-spread","x":470,"y":220,"wires":[]},{"id":"d1ac1592.bb9128","type":"function","z":"ff9f1009.524c3","name":"Test","func":"var value = parseInt(msg.payload,10);\nmsg.color=(value <='100') ?'red':'green';\nreturn msg;","outputs":1,"noerr":0,"x":290,"y":220,"wires":[["de5a310a.d28bd","58d14acd.7103a4"]]},{"id":"58d14acd.7103a4","type":"debug","z":"ff9f1009.524c3","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","x":470,"y":280,"wires":[]},{"id":"f83bde42.645e4","type":"serial-port","z":"","serialport":"COM4","serialbaud":"9600","databits":"8","parity":"none","stopbits":"1","newline":"\\n","bin":"false","out":"char","addchar":false,"responsetimeout":"10000"},{"id":"ea91e9a2.78d668","type":"ui_group","z":"","name":"Testing","tab":"951ba2b7.7b00b","disp":true,"width":"6","collapse":false},{"id":"951ba2b7.7b00b","type":"ui_tab","z":"","name":"Home","icon":"dashboard"}]

10

I can't just let you go with it. :slight_smile:
I'ts because of if you will learn it today, you'll have much brighter tomorrow.
the (value <='100') and your value is for sure a number. Well the expression works for now obviously, but
take a little reading time about this topic and then maybe you want to write it down a bit differently.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators

2 Likes
11

Thank you very much! I appreciate for sharing the expressions link. I have learn much today! :man_student::blue_book:

1 Like