# Monitoring of change of value via colors

**URL:** <https://discourse.nodered.org/t/monitoring-of-change-of-value-via-colors/71705>\
**Category:** Dashboard\
**Tags:** node-red-dashboard, function-node, mqtt\
**Created:** [5 December 2022 10:36 UTC](https://discourse.nodered.org/t/monitoring-of-change-of-value-via-colors/71705 "2022-12-05T10:36:30Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![HilalAbuSaleh](https://avatars.discourse-cdn.com/v4/letter/h/f04885/32.png) [@HilalAbuSaleh](https://discourse.nodered.org/u/HilalAbuSaleh)\
**Post date:** [5 December 2022 10:36 UTC](https://discourse.nodered.org/t/monitoring-of-change-of-value-via-colors/71705/1 "2022-12-05T10:36:30Z")

</div>

Hi all,

I am sending values with MQTT broker and receiving them (with network: mqtt in-nodes) and showing them in the dashboard using text input...what i want is to monitor the values. the first value should get the default color text - in my case white...actually the values should stay steady and if it changes it means there is a failure and the color should turn in red for example... is that possible? and if yeah how can i do it...sry i am still new to mqtt and trying to figure things out 🙂

It would be a great help if someone have ideas! thanks in advance 🙂

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [5 December 2022 11:22 UTC](https://discourse.nodered.org/t/monitoring-of-change-of-value-via-colors/71705/2 "2022-12-05T11:22:21Z")

</div>

> [@HilalAbuSaleh](#):
>
> showing them in the dashboard using text input

Are you are using the `ui-text-input` or `ui-test` (output) node? (I assume you mean the output node)

Take a look at this [thread](https://discourse.nodered.org/t/how-to-change-the-color-of-the-ui-text-node-dynamically/843) and see if it will help

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [5 December 2022 13:25 UTC](https://discourse.nodered.org/t/monitoring-of-change-of-value-via-colors/71705/3 "2022-12-05T13:25:41Z")

</div>

Here is a dashboard text node which changes colour green/yellow/orange/red as the input value goes from 0 to 100.

 ![Untitled 3](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/0/f06a01a31fb69a778d6373d5fbc8f502adcb6511.jpeg)

```auto
[{"id":"cd431910dcb0d3c8","type":"switch","z":"bd9513ca4c1623c3","name":"","property":"payload","propertyType":"msg","rules":[{"t":"btwn","v":"0","vt":"num","v2":"25","v2t":"num"},{"t":"btwn","v":"25","vt":"num","v2":"50","v2t":"num"},{"t":"btwn","v":"50","vt":"num","v2":"75","v2t":"num"},{"t":"gt","v":"75","vt":"num"}],"checkall":"true","repair":false,"outputs":4,"x":410,"y":220,"wires":[["7a3b0f0b059d34fc"],["b9db7ac81bbf122a"],["6804210ba7c52a28"],["3a6af5e16387a5bd"]]},{"id":"1d97f45c06662157","type":"ui_text","z":"bd9513ca4c1623c3","group":"a6e358b.672ffa8","order":2,"width":"4","height":"1","name":"","label":"Value","format":"{{msg.payload}}","layout":"row-spread","className":"","x":790,"y":220,"wires":[]},{"id":"7a3b0f0b059d34fc","type":"change","z":"bd9513ca4c1623c3","name":"Green","rules":[{"t":"set","p":"className","pt":"msg","to":"green","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":550,"y":160,"wires":[["1d97f45c06662157"]]},{"id":"b9db7ac81bbf122a","type":"change","z":"bd9513ca4c1623c3","name":"Yellow","rules":[{"t":"set","p":"className","pt":"msg","to":"yellow","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":550,"y":200,"wires":[["1d97f45c06662157"]]},{"id":"6804210ba7c52a28","type":"change","z":"bd9513ca4c1623c3","name":"Orange","rules":[{"t":"set","p":"className","pt":"msg","to":"orange","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":560,"y":240,"wires":[["1d97f45c06662157"]]},{"id":"3a6af5e16387a5bd","type":"change","z":"bd9513ca4c1623c3","name":"Red","rules":[{"t":"set","p":"className","pt":"msg","to":"red","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":550,"y":280,"wires":[["1d97f45c06662157"]]},{"id":"a73018c7d92a915b","type":"ui_template","z":"bd9513ca4c1623c3","group":"a6e358b.672ffa8","name":"CSS Styling","order":2,"width":0,"height":0,"format":"<style>\np.value {\n font-size: 2em;\n}\n.green p.value {\n color: hsl(100, 100%, 50%);\n}\n.yellow p.value {\n color: hsl(50, 100%, 50%);\n}\n.orange p.value {\n color: hsl(25, 100%, 50%);\n}\n.red p.value {\n color: hsl(0, 100%, 50%);\n}\n</style>\n\n\n\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":810,"y":160,"wires":[[]]},{"id":"c28fa0fcf31605e7","type":"inject","z":"bd9513ca4c1623c3","name":"10 per sec","props":[{"p":"payload"}],"repeat":"0.1","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":110,"y":220,"wires":[["17db904e1235033e"]]},{"id":"17db904e1235033e","type":"function","z":"bd9513ca4c1623c3","name":"Data","func":"var num = context.get('count') || 0.0;\nnum += 1;\nnum %= 100;\ncontext.set('count', num);\nmsg.payload = num;\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":270,"y":220,"wires":[["cd431910dcb0d3c8"]]},{"id":"a6e358b.672ffa8","type":"ui_group","name":"Demo","tab":"4e528085.a1bfa","order":1,"disp":true,"width":"20","collapse":false},{"id":"4e528085.a1bfa","type":"ui_tab","name":"Demo","icon":"dashboard","order":2,"disabled":false,"hidden":false}]

```

---

<div class="post-metadata">

**Author:** ![HilalAbuSaleh](https://avatars.discourse-cdn.com/v4/letter/h/f04885/32.png) [@HilalAbuSaleh](https://discourse.nodered.org/u/HilalAbuSaleh)\
**Post date:** [6 December 2022 10:05 UTC](https://discourse.nodered.org/t/monitoring-of-change-of-value-via-colors/71705/4 "2022-12-06T10:05:02Z")

</div>

> [@zenofmud](#):
>
> ui-text-input

im using ui-text-input 🙂

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [6 December 2022 11:15 UTC](https://discourse.nodered.org/t/monitoring-of-change-of-value-via-colors/71705/5 "2022-12-06T11:15:25Z")

</div>

So you are using an `input` node, i.e. people will enter something into it and - if I understand you - input data is coming from MQTT and if the number is not the same as the previous number it should change color.

Is that correct???

Did you look at the thread I pointed to, or try the suggestion from @jbudd ?

Please export your current flow and attach it to a reply.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [5 January 2023 11:16 UTC](https://discourse.nodered.org/t/monitoring-of-change-of-value-via-colors/71705/6 "2023-01-05T11:16:05Z")

</div>

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