# Need help on how to change UI text icon color with input value from Serial Node
**URL:** https://discourse.nodered.org/t/need-help-on-how-to-change-ui-text-icon-color-with-input-value-from-serial-node/3260
**Category:** Dashboard
**Created:** [19 September 2018 08:14 UTC](https://discourse.nodered.org/t/need-help-on-how-to-change-ui-text-icon-color-with-input-value-from-serial-node/3260 "2018-09-19T08:14:28Z")
**Posts on this page:** 11
**Page:** 1
### Author:  [@Foo](https://discourse.nodered.org/u/Foo)
#### Post date: [19 September 2018 08:14 UTC](https://discourse.nodered.org/t/need-help-on-how-to-change-ui-text-icon-color-with-input-value-from-serial-node/3260/1 "2018-09-19T08:14:28Z")
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":"","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"}]`
---
### Author:  [@hotNipi](https://discourse.nodered.org/u/hotNipi)
#### Post date: [19 September 2018 11:37 UTC](https://discourse.nodered.org/t/need-help-on-how-to-change-ui-text-icon-color-with-input-value-from-serial-node/3260/2 "2018-09-19T11:37:21Z")
Welcome to the forum 🙂
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](https://discourse.nodered.org/t/how-to-share-code-or-flow-json/506?u=hotnipi)
Chers
---
### Author:  [@Foo](https://discourse.nodered.org/u/Foo)
#### Post date: [20 September 2018 02:11 UTC](https://discourse.nodered.org/t/need-help-on-how-to-change-ui-text-icon-color-with-input-value-from-serial-node/3260/3 "2018-09-20T02:11:29Z")
Thank you for the instruction for sharing flows 😀
Hope that the flow can be viewed now.
---
### Author:  [@hotNipi](https://discourse.nodered.org/u/hotNipi)
#### Post date: [20 September 2018 04:38 UTC](https://discourse.nodered.org/t/need-help-on-how-to-change-ui-text-icon-color-with-input-value-from-serial-node/3260/4 "2018-09-20T04:38:04Z")
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.
---
### Author:  [@Foo](https://discourse.nodered.org/u/Foo)
#### Post date: [20 September 2018 06:12 UTC](https://discourse.nodered.org/t/need-help-on-how-to-change-ui-text-icon-color-with-input-value-from-serial-node/3260/5 "2018-09-20T06:12:09Z")
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.
---
### Author:  [@hotNipi](https://discourse.nodered.org/u/hotNipi)
#### Post date: [20 September 2018 06:17 UTC](https://discourse.nodered.org/t/need-help-on-how-to-change-ui-text-icon-color-with-input-value-from-serial-node/3260/6 "2018-09-20T06:17:26Z")
In your debug node, you can set the output to show complete message object.
This gives much more valuable info.
---
### Author:  [@Foo](https://discourse.nodered.org/u/Foo)
#### Post date: [20 September 2018 06:20 UTC](https://discourse.nodered.org/t/need-help-on-how-to-change-ui-text-icon-color-with-input-value-from-serial-node/3260/7 "2018-09-20T06:20:35Z")
---
### Author:  [@hotNipi](https://discourse.nodered.org/u/hotNipi)
#### Post date: [20 September 2018 06:29 UTC](https://discourse.nodered.org/t/need-help-on-how-to-change-ui-text-icon-color-with-input-value-from-serial-node/3260/8 "2018-09-20T06:29:40Z")
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. 🙂
---
### Author:  [@Foo](https://discourse.nodered.org/u/Foo)
#### Post date: [20 September 2018 06:31 UTC](https://discourse.nodered.org/t/need-help-on-how-to-change-ui-text-icon-color-with-input-value-from-serial-node/3260/9 "2018-09-20T06:31:11Z")
thank you for your guidance 😄
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":"","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"}]`
---
### Author:  [@hotNipi](https://discourse.nodered.org/u/hotNipi)
#### Post date: [20 September 2018 07:23 UTC](https://discourse.nodered.org/t/need-help-on-how-to-change-ui-text-icon-color-with-input-value-from-serial-node/3260/10 "2018-09-20T07:23:48Z")
I can't just let you go with it. 🙂
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](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators)
---
### Author:  [@Foo](https://discourse.nodered.org/u/Foo)
#### Post date: [20 September 2018 10:03 UTC](https://discourse.nodered.org/t/need-help-on-how-to-change-ui-text-icon-color-with-input-value-from-serial-node/3260/11 "2018-09-20T10:03:17Z")
Thank you very much! I appreciate for sharing the expressions link. I have learn much today! 👨🎓📘