Monitoring of change of value via colors

Dashboard
, ,
1

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 :slight_smile:

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

2

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 and see if it will help

3

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

Untitled 3
Untitled 31000×210 18 KB 

[{"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}]
4

im using ui-text-input :slight_smile:

5

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.

6

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