Make text boxes blink in red/green depending on condition

Dashboard
1

Hi there. I want my dashboard to display a set of values which can blink in either red or green depending on certain condition. Below is the sample:

image
image801Ă—482 37.6 KB

This is the Omron HMI showing 12 states of oven with their temperatures at ###. I want to use a format like this, but just add the blinking colour to the respective oven boxes during run/stop operation.

Below is my current node-red dashboard:

image
image1600Ă—700 16.5 KB

Looking out for suggestions and assistance...

2

Edit - I thought this was working but it's not. ... OK, fixed.

Hi @jagades. What's cooking?
One possibility:

Untitled 6
Untitled 61000Ă—549 41.2 KB 

[{"id":"6b7503f72b16f50f","type":"tab","label":"Flow 1","disabled":false,"info":"","env":[]},{"id":"da7b88224af0b621","type":"group","z":"6b7503f72b16f50f","style":{"stroke":"#999999","stroke-opacity":"1","fill":"none","fill-opacity":"1","label":true,"label-position":"nw","color":"#a4a4a4"},"nodes":["69d56adbeb4dde09","a5b93ea2dffc2c53","0e34e7f518b4b274","f53d99a361c84124","359ad4902f66b32d","6ddb102aef41db9c"],"x":234,"y":-1,"w":482,"h":162},{"id":"e0215670b3ffd214","type":"inject","z":"6b7503f72b16f50f","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"99.9","payloadType":"num","x":130,"y":180,"wires":[["ec1f5b031f1e12e5"]]},{"id":"c55c284c29b29f3f","type":"ui_text","z":"6b7503f72b16f50f","group":"9d7bb24dba64fb9d","order":0,"width":"2","height":"1","name":"","label":"Oven 1","format":"{{msg.payload}}","layout":"col-center","className":"","x":420,"y":240,"wires":[]},{"id":"fb175f262cd9cb63","type":"ui_template","z":"6b7503f72b16f50f","group":"9d7bb24dba64fb9d","name":"","order":1,"width":0,"height":0,"format":"<style>\n.nr-dashboard-text.green {\n    animation: blinkinggreen 1s infinite;\n}\n.nr-dashboard-text.red {\nanimation: blinkingred 1s infinite;\n}\n.nr-dashboard-text {\n    border: 2px solid #666;\n}\n@keyframes blinkinggreen {\n  0% {\n    background-color: #fafafa0;\n  }\n  100% {\n    background-color: #00ff00;\n  }\n}\n@keyframes blinkingred {\n  0% {\n    background-color: #fafafa;\n  }\n100% {\n      background-color: #ff0000;\n    }\n}\n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"global","className":"","x":900,"y":80,"wires":[[]]},{"id":"21ca73ee091a96bf","type":"inject","z":"6b7503f72b16f50f","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"101","payloadType":"num","x":130,"y":220,"wires":[["ec1f5b031f1e12e5"]]},{"id":"1836b248fa3ff21c","type":"inject","z":"6b7503f72b16f50f","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"450","payloadType":"num","x":130,"y":260,"wires":[["ec1f5b031f1e12e5"]]},{"id":"075516155c1b833c","type":"inject","z":"6b7503f72b16f50f","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"451","payloadType":"num","x":130,"y":300,"wires":[["ec1f5b031f1e12e5"]]},{"id":"5a4235ade42ce319","type":"inject","z":"6b7503f72b16f50f","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"99.9","payloadType":"num","x":610,"y":180,"wires":[["096e573821225775"]]},{"id":"d908f6613b78b7da","type":"ui_text","z":"6b7503f72b16f50f","group":"9d7bb24dba64fb9d","order":0,"width":"2","height":"1","name":"","label":"Oven 2","format":"{{msg.payload}}","layout":"col-center","className":"","x":900,"y":240,"wires":[]},{"id":"0131c867e19cb897","type":"inject","z":"6b7503f72b16f50f","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"101","payloadType":"num","x":610,"y":220,"wires":[["096e573821225775"]]},{"id":"7b8e638f9f068820","type":"inject","z":"6b7503f72b16f50f","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"450","payloadType":"num","x":610,"y":260,"wires":[["096e573821225775"]]},{"id":"d48ae9af9aca92d9","type":"inject","z":"6b7503f72b16f50f","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"451","payloadType":"num","x":610,"y":300,"wires":[["096e573821225775"]]},{"id":"69d56adbeb4dde09","type":"link in","z":"6b7503f72b16f50f","g":"da7b88224af0b621","name":"link in 1","links":[],"x":275,"y":80,"wires":[["a5b93ea2dffc2c53"]]},{"id":"a5b93ea2dffc2c53","type":"switch","z":"6b7503f72b16f50f","g":"da7b88224af0b621","name":"","property":"payload","propertyType":"msg","rules":[{"t":"lt","v":"100","vt":"str"},{"t":"btwn","v":"100","vt":"num","v2":"450","v2t":"num"},{"t":"gt","v":"450","vt":"str"}],"checkall":"true","repair":false,"outputs":3,"x":370,"y":80,"wires":[["0e34e7f518b4b274"],["6ddb102aef41db9c"],["f53d99a361c84124"]]},{"id":"0e34e7f518b4b274","type":"change","z":"6b7503f72b16f50f","g":"da7b88224af0b621","name":"","rules":[{"t":"set","p":"className","pt":"msg","to":"green","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":530,"y":40,"wires":[["359ad4902f66b32d"]]},{"id":"f53d99a361c84124","type":"change","z":"6b7503f72b16f50f","g":"da7b88224af0b621","name":"","rules":[{"t":"set","p":"className","pt":"msg","to":"red","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":530,"y":120,"wires":[["359ad4902f66b32d"]]},{"id":"359ad4902f66b32d","type":"link out","z":"6b7503f72b16f50f","g":"da7b88224af0b621","name":"link out 1","mode":"return","links":[],"x":675,"y":80,"wires":[]},{"id":"ec1f5b031f1e12e5","type":"link call","z":"6b7503f72b16f50f","name":"","links":["69d56adbeb4dde09"],"linkType":"static","timeout":"30","x":280,"y":240,"wires":[["c55c284c29b29f3f"]]},{"id":"096e573821225775","type":"link call","z":"6b7503f72b16f50f","name":"","links":["69d56adbeb4dde09"],"linkType":"static","timeout":"30","x":760,"y":240,"wires":[["d908f6613b78b7da"]]},{"id":"7127685b5bd9a609","type":"inject","z":"6b7503f72b16f50f","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"99.9","payloadType":"num","x":130,"y":360,"wires":[["6f995ab8ac0956e5"]]},{"id":"577d1bc1b40e7014","type":"ui_text","z":"6b7503f72b16f50f","group":"9d7bb24dba64fb9d","order":0,"width":"2","height":"1","name":"","label":"Oven 3","format":"{{msg.payload}}","layout":"col-center","className":"","x":420,"y":420,"wires":[]},{"id":"4d48c2d29b768fe8","type":"inject","z":"6b7503f72b16f50f","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"101","payloadType":"num","x":130,"y":400,"wires":[["6f995ab8ac0956e5"]]},{"id":"127e2558825b45bc","type":"inject","z":"6b7503f72b16f50f","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"450","payloadType":"num","x":130,"y":440,"wires":[["6f995ab8ac0956e5"]]},{"id":"57d31a942fdfa7b4","type":"inject","z":"6b7503f72b16f50f","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"451","payloadType":"num","x":130,"y":480,"wires":[["6f995ab8ac0956e5"]]},{"id":"a1413d7cd29a36f5","type":"inject","z":"6b7503f72b16f50f","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"99.9","payloadType":"num","x":610,"y":360,"wires":[["aa904c2209543aeb"]]},{"id":"6a7419949dee8f5f","type":"ui_text","z":"6b7503f72b16f50f","group":"9d7bb24dba64fb9d","order":0,"width":"2","height":"1","name":"","label":"Oven 4","format":"{{msg.payload}}","layout":"col-center","className":"","x":900,"y":420,"wires":[]},{"id":"8a0e50943cb3a87c","type":"inject","z":"6b7503f72b16f50f","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"101","payloadType":"num","x":610,"y":400,"wires":[["aa904c2209543aeb"]]},{"id":"7d356f9454f77b31","type":"inject","z":"6b7503f72b16f50f","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"450","payloadType":"num","x":610,"y":440,"wires":[["aa904c2209543aeb"]]},{"id":"4b85bd74e5e93e47","type":"inject","z":"6b7503f72b16f50f","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"451","payloadType":"num","x":610,"y":480,"wires":[["aa904c2209543aeb"]]},{"id":"6f995ab8ac0956e5","type":"link call","z":"6b7503f72b16f50f","name":"","links":["69d56adbeb4dde09"],"linkType":"static","timeout":"30","x":280,"y":420,"wires":[["577d1bc1b40e7014"]]},{"id":"aa904c2209543aeb","type":"link call","z":"6b7503f72b16f50f","name":"","links":["69d56adbeb4dde09"],"linkType":"static","timeout":"30","x":760,"y":420,"wires":[["6a7419949dee8f5f"]]},{"id":"6ddb102aef41db9c","type":"change","z":"6b7503f72b16f50f","g":"da7b88224af0b621","name":"","rules":[{"t":"set","p":"className","pt":"msg","to":"nothing","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":530,"y":80,"wires":[["359ad4902f66b32d"]]},{"id":"9d7bb24dba64fb9d","type":"ui_group","name":"Default","tab":"24fb5c805e063a65","order":1,"disp":true,"width":"12","collapse":false,"className":""},{"id":"24fb5c805e063a65","type":"ui_tab","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]

A snapshot at full blink...
Untitled 5

3

Recording #3
Yes, this works as intended, but how do I apply this for my case? I have msg.payload that reads and deliver the data to the dashboard.

I'll share my flow below

[
    {
        "id": "ba40178493839cb7",
        "type": "tab",
        "label": "Flow 1",
        "disabled": false,
        "info": "",
        "env": []
    },
    {
        "id": "033c373046a2da30",
        "type": "C-Mode Command",
        "z": "ba40178493839cb7",
        "name": "CP2E",
        "plcSeries": "CSJP",
        "hostNumber": 0,
        "headerCode": "RD",
        "p1": "0",
        "p2": "12",
        "p3": "",
        "x": 270,
        "y": 100,
        "wires": [
            [
                "92dcb68ff10007a0"
            ]
        ]
    },
    {
        "id": "64c03284f8f31ee0",
        "type": "C-Mode Response",
        "z": "ba40178493839cb7",
        "name": "",
        "x": 570,
        "y": 100,
        "wires": [
            [
                "dc2cec39514b5748"
            ]
        ]
    },
    {
        "id": "91eb937ee4e89c68",
        "type": "inject",
        "z": "ba40178493839cb7",
        "name": "",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "1",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "",
        "payloadType": "date",
        "x": 110,
        "y": 100,
        "wires": [
            [
                "033c373046a2da30"
            ]
        ]
    },
    {
        "id": "4ba084247ffa13ea",
        "type": "debug",
        "z": "ba40178493839cb7",
        "name": "debug 7",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "payload",
        "targetType": "msg",
        "statusVal": "",
        "statusType": "auto",
        "x": 540,
        "y": 280,
        "wires": []
    },
    {
        "id": "92dcb68ff10007a0",
        "type": "serial request",
        "z": "ba40178493839cb7",
        "name": "",
        "serial": "893956afe4c6c260",
        "x": 400,
        "y": 100,
        "wires": [
            [
                "64c03284f8f31ee0"
            ]
        ]
    },
    {
        "id": "4a9d8cb4d0c90c8c",
        "type": "ui_text",
        "z": "ba40178493839cb7",
        "group": "efcc13e5a5b82fc5",
        "order": 2,
        "width": "2",
        "height": "2",
        "name": "",
        "label": "<font size=6>Oven 1",
        "format": "{{msg.payload.asInteger1[0]}}",
        "layout": "col-center",
        "className": "",
        "x": 580,
        "y": 380,
        "wires": []
    },
    {
        "id": "dc2cec39514b5748",
        "type": "buffer-parser",
        "z": "ba40178493839cb7",
        "name": "",
        "data": "payload.buffer",
        "dataType": "msg",
        "specification": "spec",
        "specificationType": "ui",
        "items": [
            {
                "type": "int16be",
                "name": "asInteger1",
                "offset": 0,
                "length": 12,
                "offsetbit": 0,
                "scale": "1",
                "mask": ""
            },
            {
                "type": "hex",
                "name": "asHex1",
                "offset": 0,
                "length": 2,
                "offsetbit": 0,
                "scale": "1",
                "mask": ""
            },
            {
                "type": "hex",
                "name": "asHex2",
                "offset": 0,
                "length": 3,
                "offsetbit": 0,
                "scale": "1",
                "mask": ""
            },
            {
                "type": "hex",
                "name": "hex3",
                "offset": 0,
                "length": 4,
                "offsetbit": 0,
                "scale": "1",
                "mask": ""
            },
            {
                "type": "hex",
                "name": "hex4",
                "offset": 0,
                "length": 5,
                "offsetbit": 0,
                "scale": "1",
                "mask": ""
            },
            {
                "type": "hex",
                "name": "hex5",
                "offset": 0,
                "length": 6,
                "offsetbit": 0,
                "scale": "1",
                "mask": ""
            }
        ],
        "swap1": "",
        "swap2": "",
        "swap3": "",
        "swap1Type": "swap",
        "swap2Type": "swap",
        "swap3Type": "swap",
        "msgProperty": "payload",
        "msgPropertyType": "str",
        "resultType": "keyvalue",
        "resultTypeType": "return",
        "multipleResult": false,
        "fanOutMultipleResult": false,
        "setTopic": true,
        "outputs": 1,
        "x": 170,
        "y": 340,
        "wires": [
            [
                "4ba084247ffa13ea",
                "4a9d8cb4d0c90c8c",
                "f14369720473e9f7",
                "34f847f2bbe15d3b",
                "f022d5898a696ebf",
                "0b2ad89132104852",
                "042c5d8445576637",
                "f77a6d4e6acb8a58",
                "3e5216204600adf7",
                "494dbbc109ff3992",
                "3bcdec2a17238e0c",
                "4be0a557693b5c35",
                "5832bd24f1a404ad",
                "03439064148ae32c"
            ]
        ]
    },
    {
        "id": "f14369720473e9f7",
        "type": "ui_text",
        "z": "ba40178493839cb7",
        "group": "efcc13e5a5b82fc5",
        "order": 4,
        "width": "2",
        "height": "2",
        "name": "",
        "label": "<font size=6>Oven 2",
        "format": "{{msg.payload.asInteger1[1]}}",
        "layout": "col-center",
        "className": "",
        "x": 580,
        "y": 420,
        "wires": []
    },
    {
        "id": "03439064148ae32c",
        "type": "ui_button",
        "z": "ba40178493839cb7",
        "name": "",
        "group": "efcc13e5a5b82fc5",
        "order": 15,
        "width": "9",
        "height": "1",
        "passthru": false,
        "label": "Refresh",
        "tooltip": "",
        "color": "",
        "bgcolor": "red",
        "className": "",
        "icon": "autorenew",
        "payload": "0",
        "payloadType": "num",
        "topic": "topic",
        "topicType": "msg",
        "x": 180,
        "y": 440,
        "wires": [
            [
                "f14369720473e9f7",
                "34f847f2bbe15d3b",
                "f022d5898a696ebf",
                "0b2ad89132104852",
                "042c5d8445576637",
                "f77a6d4e6acb8a58",
                "3e5216204600adf7",
                "494dbbc109ff3992",
                "3bcdec2a17238e0c",
                "4be0a557693b5c35",
                "5832bd24f1a404ad",
                "4a9d8cb4d0c90c8c"
            ]
        ]
    },
    {
        "id": "34f847f2bbe15d3b",
        "type": "ui_text",
        "z": "ba40178493839cb7",
        "group": "efcc13e5a5b82fc5",
        "order": 5,
        "width": "2",
        "height": "2",
        "name": "",
        "label": "<font size=6>Oven 3",
        "format": "{{msg.payload.asInteger1[2]}}",
        "layout": "col-center",
        "className": "",
        "x": 580,
        "y": 460,
        "wires": []
    },
    {
        "id": "f022d5898a696ebf",
        "type": "ui_text",
        "z": "ba40178493839cb7",
        "group": "efcc13e5a5b82fc5",
        "order": 6,
        "width": "2",
        "height": "2",
        "name": "",
        "label": "<font size=6>Oven 4",
        "format": "{{msg.payload.asInteger1[3]}}",
        "layout": "col-center",
        "className": "",
        "x": 580,
        "y": 500,
        "wires": []
    },
    {
        "id": "0b2ad89132104852",
        "type": "ui_text",
        "z": "ba40178493839cb7",
        "group": "efcc13e5a5b82fc5",
        "order": 7,
        "width": "2",
        "height": "2",
        "name": "",
        "label": "<font size=6>Oven 5",
        "format": "{{msg.payload.asInteger1[4]}}",
        "layout": "col-center",
        "className": "",
        "x": 580,
        "y": 540,
        "wires": []
    },
    {
        "id": "042c5d8445576637",
        "type": "ui_text",
        "z": "ba40178493839cb7",
        "group": "efcc13e5a5b82fc5",
        "order": 8,
        "width": "2",
        "height": "2",
        "name": "",
        "label": "<font size=6>Oven 6",
        "format": "{{msg.payload.asInteger1[5]}}",
        "layout": "col-center",
        "className": "",
        "x": 580,
        "y": 580,
        "wires": []
    },
    {
        "id": "f77a6d4e6acb8a58",
        "type": "ui_text",
        "z": "ba40178493839cb7",
        "group": "efcc13e5a5b82fc5",
        "order": 9,
        "width": "2",
        "height": "2",
        "name": "",
        "label": "<font size=6>Oven 7",
        "format": "{{msg.payload.asInteger1[6]}}",
        "layout": "col-center",
        "className": "",
        "x": 580,
        "y": 620,
        "wires": []
    },
    {
        "id": "3e5216204600adf7",
        "type": "ui_text",
        "z": "ba40178493839cb7",
        "group": "efcc13e5a5b82fc5",
        "order": 10,
        "width": "2",
        "height": "2",
        "name": "",
        "label": "<font size=6>Oven 8",
        "format": "{{msg.payload.asInteger1[7]}}",
        "layout": "col-center",
        "className": "",
        "x": 580,
        "y": 660,
        "wires": []
    },
    {
        "id": "494dbbc109ff3992",
        "type": "ui_text",
        "z": "ba40178493839cb7",
        "group": "efcc13e5a5b82fc5",
        "order": 11,
        "width": "2",
        "height": "2",
        "name": "",
        "label": "<font size=6>Oven 9",
        "format": "{{msg.payload.asInteger1[8]}}",
        "layout": "col-center",
        "className": "",
        "x": 580,
        "y": 700,
        "wires": []
    },
    {
        "id": "3bcdec2a17238e0c",
        "type": "ui_text",
        "z": "ba40178493839cb7",
        "group": "efcc13e5a5b82fc5",
        "order": 12,
        "width": "2",
        "height": "2",
        "name": "",
        "label": "<font size=6>Oven 10",
        "format": "{{msg.payload.asInteger1[9]}}",
        "layout": "col-center",
        "className": "",
        "x": 580,
        "y": 740,
        "wires": []
    },
    {
        "id": "4be0a557693b5c35",
        "type": "ui_text",
        "z": "ba40178493839cb7",
        "group": "efcc13e5a5b82fc5",
        "order": 13,
        "width": "2",
        "height": "2",
        "name": "",
        "label": "<font size=6>Oven 11",
        "format": "{{msg.payload.asInteger1[10]}}",
        "layout": "col-center",
        "className": "",
        "x": 580,
        "y": 780,
        "wires": []
    },
    {
        "id": "5832bd24f1a404ad",
        "type": "ui_text",
        "z": "ba40178493839cb7",
        "group": "efcc13e5a5b82fc5",
        "order": 14,
        "width": "2",
        "height": "2",
        "name": "",
        "label": "<font size=6>Oven 12",
        "format": "{{msg.payload.asInteger1[11]}}",
        "layout": "col-center",
        "className": "",
        "x": 580,
        "y": 820,
        "wires": []
    },
    {
        "id": "44d5fc2dac950cbd",
        "type": "ui_template",
        "z": "ba40178493839cb7",
        "group": "eee0579406adab47",
        "name": "",
        "order": 1,
        "width": 0,
        "height": 0,
        "format": "<style>\n.nr-dashboard-text.green {\n    animation: blinkinggreen 1s infinite;\n}\n.nr-dashboard-text.red {\nanimation: blinkingred 1s infinite;\n}\n.nr-dashboard-text {\n    border: 2px solid #666;\n}\n@keyframes blinkinggreen {\n  0% {\n    background-color: #fafafa0;\n  }\n  100% {\n    background-color: #00ff00;\n  }\n}\n@keyframes blinkingred {\n  0% {\n    background-color: #fafafa;\n  }\n100% {\n      background-color: #ff0000;\n    }\n}\n</style>",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "resendOnRefresh": true,
        "templateScope": "global",
        "className": "",
        "x": 760,
        "y": 220,
        "wires": [
            []
        ]
    },
    {
        "id": "893956afe4c6c260",
        "type": "serial-port",
        "z": "ba40178493839cb7",
        "serialport": "COM11",
        "serialbaud": "9600",
        "databits": "7",
        "parity": "even",
        "stopbits": "2",
        "waitfor": "",
        "dtr": "none",
        "rts": "none",
        "cts": "none",
        "dsr": "none",
        "newline": "\\n",
        "bin": "false",
        "out": "char",
        "addchar": "",
        "responsetimeout": "1000"
    },
    {
        "id": "efcc13e5a5b82fc5",
        "type": "ui_group",
        "name": "Oven Monitoring Dashboard",
        "tab": "d6f687902eee7759",
        "order": 2,
        "disp": true,
        "width": "8",
        "collapse": false,
        "className": ""
    },
    {
        "id": "eee0579406adab47",
        "type": "ui_group",
        "name": "Default",
        "tab": "24fb5c805e063a65",
        "order": 1,
        "disp": true,
        "width": "12",
        "collapse": false,
        "className": ""
    },
    {
        "id": "d6f687902eee7759",
        "type": "ui_tab",
        "name": "Home",
        "icon": "dashboard",
        "order": 1,
        "disabled": false,
        "hidden": false
    },
    {
        "id": "24fb5c805e063a65",
        "type": "ui_tab",
        "name": "Home",
        "icon": "dashboard",
        "disabled": false,
        "hidden": false
    }
]

image
image1599Ă—738 29 KB

This is my dashboard now, but I don't know how the borders between the oven text boxes appeared, but it looks more organized than before. I think the borders appeared after I deployed @jbudd 's flow

4

I think my suggestion depends on each text widget having it's own message with payload and className.
But you seem to have everything in a single message, with an array msg.payload.asInteger1[ ] ?

I would consider splitting it into discrete messages so that you can pass each one through the link call "subroutine" to give it the required className. I'm not sure precisely how because I don't have your data.

It's in the template CSS:

.nr-dashboard-text {
    border: 2px solid #666;
}
1 Like
5

I apologise, but may I know what does the className term mean, and what does this do prior to my goal?

6

From the help text of the dashboard text widget:

If a Class is specified, it will be added to the parent card. This way you can style the card and the elements inside it with custom CSS. The Class can be set at runtime by setting a msg.className string property.

9

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

11

Hi again. I have to apologize first of all that I have mistakenly interpret that setting 2 different CSS class names will solve the issue of changing colour according to a range of temperature. I just realized that the colour has been infinitely blinking without even checking the values, because there weren't any condition set to check the values before setting a specific colour for a text box.

Back to the case discussed, the msg.payload read from the PLC is causing an issue and the value could not be displayed by the text box when timestamp is injected. I tried placing a debug node and found no issue in the value being read from the PLC.

Example:--

image
image1262Ă—770 104 KB

Temporarily I'm testing only for Oven 16 (the 1st text box).

This was the result of the debug node :--
image

But, when I try to fake the data by directly injecting a numbered timestamp, the value can be displayed link call function works(colour can vary correctly based on condition being set).

My question:--

  1. Where am I making a mistake? Why the text box couldn't read the number passed from the PLC when it has to go through the link call function?
    Looking forward for help/assistance.
12

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