Display either text1 in black or text2 in red

Dashboard
1

Hello, I am still a beginner:
voila: I have a function with an if / else test which gives me either a "TATA" message or a "RORO" message and I would like if it is the tata message to display it in black or if it is the roro message display it in red.
at the same location in the dasboard. thank you
here is the little program to illustrate

[
    {
        "id": "4ab3cb90.f07ccc",
        "type": "tab",
        "label": "Flow 1",
        "disabled": false,
        "info": ""
    },
    {
        "id": "a10b8dce.8e39e",
        "type": "function",
        "z": "4ab3cb90.f07ccc",
        "name": "calcul",
        "func": "let toto=\"1\"\nif (toto==\"0\") {\n    msg.payload = \"TATA\"\n}\nelse{\n   msg.payload = \"RORO\" \n}\nreturn msg;",
        "outputs": 1,
        "noerr": 0,
        "x": 250,
        "y": 120,
        "wires": [
            [
                "9f03c6.20d5e438",
                "b8503ac.0a7bdc8"
            ]
        ]
    },
    {
        "id": "b8503ac.0a7bdc8",
        "type": "ui_template",
        "z": "4ab3cb90.f07ccc",
        "group": "11d854fd.c64afb",
        "name": "",
        "order": 16,
        "width": 0,
        "height": 0,
        "format": "<span style=\"color:#F89606;font-size:45px;font-weight:bold\">{{msg.payload}}</span>",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "resendOnRefresh": true,
        "templateScope": "local",
        "x": 420,
        "y": 180,
        "wires": [
            []
        ]
    },
    {
        "id": "9f03c6.20d5e438",
        "type": "debug",
        "z": "4ab3cb90.f07ccc",
        "name": "",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "false",
        "x": 430,
        "y": 120,
        "wires": []
    },
    {
        "id": "f0fc4f92.6806e",
        "type": "inject",
        "z": "4ab3cb90.f07ccc",
        "name": "",
        "topic": "",
        "payload": "",
        "payloadType": "date",
        "repeat": "5",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "x": 110,
        "y": 120,
        "wires": [
            [
                "a10b8dce.8e39e"
            ]
        ]
    },
    {
        "id": "11d854fd.c64afb",
        "type": "ui_group",
        "z": "",
        "name": "heure",
        "tab": "9f36b601.175468",
        "order": 1,
        "disp": false,
        "width": 25,
        "collapse": false
    },
    {
        "id": "9f36b601.175468",
        "type": "ui_tab",
        "z": "",
        "name": "Station Météo",
        "icon": "dashboard",
        "order": 1,
        "disabled": false,
        "hidden": false
    }
]
2

something like this

[{"id":"af3819.e664c7e8","type":"function","z":"7a8aed7.7a4bf94","name":"calcul","func":"let toto=\"0\";\nif (toto==\"0\") {\n    msg.payload = \"TATA\";\n    msg.color = \"#000000\";\n}\nelse{\n   msg.payload = \"RORO\";\n   msg.color =\"#ff0000\";\n}\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":250,"y":120,"wires":[["26f36a92.89b276","2620c186.ca792e"]]},{"id":"26f36a92.89b276","type":"debug","z":"7a8aed7.7a4bf94","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":510,"y":120,"wires":[]},{"id":"2620c186.ca792e","type":"ui_template","z":"7a8aed7.7a4bf94","group":"165e1e1a.e752fa","name":"","order":16,"width":0,"height":0,"format":"<span style=\"color:{{msg.color}};font-size:45px;font-weight:bold\">{{msg.payload}}</span>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":420,"y":180,"wires":[[]]},{"id":"3bf9e72e.769cd8","type":"inject","z":"7a8aed7.7a4bf94","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":100,"y":120,"wires":[["af3819.e664c7e8"]]},{"id":"165e1e1a.e752fa","type":"ui_group","z":"","name":"Default","tab":"f9b58883.fa613","order":1,"disp":true,"width":"12","collapse":false},{"id":"f9b58883.fa613","type":"ui_tab","z":"","name":"Home","icon":"dashboard","order":1,"disabled":false,"hidden":false}]
3

Yes ! it works thanks!
I spent more than 1 hour without finding!
thank you so much

4

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