Hi all, i think i have this in the right place. I have counter counting up and when i get to set value i want to change the colour of the text from red to green based upon another ui text input. Does anyone know how i will go about this?
Hi, welcome to the forum.
The answer partly depends on which dashboard you are using (you didn't say which)
As a general direction, you could compare the value using a switch node, when it meets the criteria you could add an appropriate class value to the msg. The class name set would then match some custom CSS that you add in a template node.
What if I need to do the comparison not to a known value, but the current value of another UI text.
I can easily track that value in a context var (which syncs with the widget), but then I can run into race conditions etc. Is there a way to query the current value of a UI widget, other than in using ui-template and querying it by its HTML Id?
There is no need for context vars. Use a Join node in key/value mode to join the required value and the current value. Then, any time either of them changes you will get a message containing both values and you can compare them.
Thanks @Colin, can you please further explain your solution.
Let's say I have a measure in one UI text, and a dynamic "max" value in another. When the measure exceeds the max value, it should become red.
We have 2 scenarios:
- A msg arrives with a new measure. It should query the current max value, and apply the right color while populating the measure field
- A msg arrives with a new "max" value. it should apply appropriate color to the measure field (if needed)
You are not thinking the 'node-red' way. The values are not in the ui-text nodes they are in messages sent by those nodes. Configure the nodes to set appropriate topic values in their messages, and feed them both into a Join node configured like this
Enter values in the text nodes and see what comes out of the Join node.
Note that if you send the output of the Join node through a comparison flow and then back to one of the text nodes to change the colour then make sure you have message pass through not selected in the text node or you may get a never ending loop.
Of course, Thanks Colin.
I'm probably missing something. Can you look at the attached sample flow. It has a "max" widget and a "temperature" widget. When a number is injected to "Temperature", it should be red if greater than the value of "Max", or green otherwise. Can you show me how to modify the flow per your 'join' logic.
Thanks.
[
{
"id": "1403c040b52a7f01",
"type": "ui-text",
"z": "c13589f7d02d4ffe",
"group": "be4cdfe0774dbbc6",
"order": 1,
"width": "2",
"height": "1",
"name": "",
"label": "Max",
"format": "{{msg.payload}}",
"layout": "row-left",
"style": false,
"font": "",
"fontSize": 16,
"color": "#717171",
"wrapText": false,
"className": "",
"x": 310,
"y": 220,
"wires": []
},
{
"id": "700c628c51fd93a1",
"type": "ui-text",
"z": "c13589f7d02d4ffe",
"group": "be4cdfe0774dbbc6",
"order": 2,
"width": "2",
"height": "1",
"name": "",
"label": "Temperature",
"format": "{{msg.payload}}",
"layout": "row-left",
"style": false,
"font": "",
"fontSize": 16,
"color": "#717171",
"wrapText": false,
"className": "",
"x": 330,
"y": 280,
"wires": []
},
{
"id": "1ec7f42b1028291b",
"type": "inject",
"z": "c13589f7d02d4ffe",
"name": "",
"props": [
{
"p": "payload"
}
],
"repeat": "",
"crontab": "",
"once": false,
"onceDelay": 0.1,
"topic": "",
"payload": "",
"payloadType": "num",
"x": 110,
"y": 220,
"wires": [
[
"1403c040b52a7f01"
]
]
},
{
"id": "6700ac91277d466b",
"type": "inject",
"z": "c13589f7d02d4ffe",
"name": "",
"props": [
{
"p": "payload"
}
],
"repeat": "",
"crontab": "",
"once": false,
"onceDelay": 0.1,
"topic": "",
"payload": "",
"payloadType": "num",
"x": 110,
"y": 280,
"wires": [
[
"d845561f81c4e63e"
]
]
},
{
"id": "d845561f81c4e63e",
"type": "function",
"z": "c13589f7d02d4ffe",
"name": "function 6",
"func": "const max = 80; // replace with value of \"Max\" widget\nmsg.ui_update = {};\nif (msg.payload > max)\n msg.ui_update.class = \"setRed\";\nelse\n msg.ui_update.class = \"setGreen\";\nreturn msg;",
"outputs": 1,
"timeout": 0,
"noerr": 0,
"initialize": "",
"finalize": "",
"libs": [],
"x": 205,
"y": 280,
"wires": [
[
"700c628c51fd93a1"
]
],
"l": false
},
{
"id": "cadfe85bd627377b",
"type": "ui-template",
"z": "c13589f7d02d4ffe",
"group": "",
"page": "c81900ecf6761ebb",
"ui": "",
"name": "Color classes",
"order": 0,
"width": 0,
"height": 0,
"head": "",
"format": " .setRed {\n color: red;\n }\n .setGreen {\n color: green;\n }",
"storeOutMessages": true,
"passthru": false,
"resendOnRefresh": true,
"templateScope": "page:style",
"className": "d-none",
"x": 340,
"y": 340,
"wires": [
[]
]
},
{
"id": "be4cdfe0774dbbc6",
"type": "ui-group",
"name": "Group 1",
"page": "c81900ecf6761ebb",
"width": "4",
"height": "1",
"order": 1,
"showTitle": true,
"className": "",
"visible": "true",
"disabled": "false",
"groupType": "default"
},
{
"id": "c81900ecf6761ebb",
"type": "ui-page",
"name": "Dashboard-Test",
"ui": "b7fd8a2cce8052cc",
"path": "/test",
"icon": "home",
"layout": "grid",
"theme": "b7b1935fbb33bbc8",
"breakpoints": [
{
"name": "Default",
"px": "0",
"cols": "3"
},
{
"name": "Tablet",
"px": "576",
"cols": "6"
},
{
"name": "Small Desktop",
"px": "768",
"cols": "9"
},
{
"name": "Desktop",
"px": "1024",
"cols": "12"
}
],
"order": 1,
"className": "",
"visible": "true",
"disabled": "false"
},
{
"id": "b7fd8a2cce8052cc",
"type": "ui-base",
"name": "ui",
"path": "/dashboard",
"appIcon": "",
"includeClientData": true,
"acceptsClientConfig": [
"ui-notification",
"ui-dropdown",
"ui-control"
],
"showPathInSidebar": false,
"headerContent": "page",
"navigationStyle": "default",
"titleBarStyle": "default",
"showReconnectNotification": true,
"notificationDisplayTime": 5,
"showDisconnectNotification": true,
"allowInstall": true
},
{
"id": "b7b1935fbb33bbc8",
"type": "ui-theme",
"name": "Default theme",
"colors": {
"surface": "#ffffff",
"primary": "#0094ce",
"bgPage": "#eeeeee",
"groupBg": "#ffffff",
"groupOutline": "#cccccc"
},
"sizes": {
"pagePadding": "12px",
"groupGap": "12px",
"groupBorderRadius": "4px",
"widgetGap": "12px"
}
}
]
You need to start with the inputs, which are the counter value and the set value. I don't see those in your flow. Those are the two message feeds that you need to join.
Edit, if the two inject nodes are to be the set value and the counter then give the nodes names and values, and also set topic values. Then feed them into a Join node as I suggested above and see what comes out.
