Change Button Colour in a Function

General
1

Hello, I have a function in which the status of an output is displayed. Now I want to change the color of the button depending on the status. For example, if the output is open, color red, if it is closed, it is green. In between, it should show yellow. Only I can't do it. If I connect the function and the button, it is constantly polled and the output changes constantly.

Function:

m = msg.payload;
t = msg.topic;

if (m =='0')
{
    return {topic:t, payload:"Tor ist zu"};
}
else if (m =='1')
{
    return {topic:t, payload:"Tor ist auf"};
}
else
{
    return {topic:t, payload:"Tor fährt"};
}
return msg;

Button
Button1722×296 38.6 KB

2

What output do you see when you connect a debug node (output: complete msg object) to the "Status Tor" node ?

3

There is a 0 or 1, see the Code from the Function.

4

Yes ? Is it a 1 or a "1" ?

5

Payload

6

So you receive an array, and the array contains a number.

m = msg.payload[0]

if (m === 0) {
    msg.payload = "Tor ist zu"
} else if (m === 1) {
    msg.payload = "Tor ist auf"
} else {
    msg.payload = "Tor fährt"
}
return msg
7

To change the colors perhaps take a look here

8

Have a look at this flow and see if it of any help.

[{"id":"11b5c675.c3f1ba","type":"function","z":"df652827.d02c3","name":"Push Button","func":"var state = context.get(\"STATE\")||0;\n\n//  Look for a !X message to get values.\nif (msg.payload != \"X\")     //Do this if the message is NOT \"X\"\n{\n    //\n    //  Background colours first.\n    //\n    context.set(\"ABGC\", msg.colourA);\n    context.set(\"BBGC\", msg.colourB);\n    //\n    //  Now do text.\n    //\n    context.set(\"Atxt\", msg.txtA);\n    context.set(\"Btxt\", msg.txtB);\n    //\n    //  Font colours.\n    //\n    context.set(\"AFC\",msg.txtclrA);\n    context.set(\"BFC\",msg.txtclrB);\n    //\n    //  Payloads.\n    //\n    context.set(\"PayloadA\", msg.payloadA);\n    context.set(\"PayloadB\", msg.payloadB);\n    //\n    //  Topic.\n    //\n    if (msg.topicSET !== null)\n    {\n        context.set(\"Topic\",msg.topicSET);\n    } else\n    {\n        context.set(\"Topic\",\"~\");\n    }\n    return;\n}\n//      Now on to the real stuff.\nif (msg.payload == \"X\")\n{\n    state = (state + 1)% 2;\n    //node.warn(state);\n    context.set(\"STATE\",state);\n}\nif (state === 0)\n{\n    //  Condition A\n    msg.payload = context.get(\"PayloadA\");\n    msg.colour = context.get(\"ABGC\");\n    msg.txt = context.get(\"Atxt\");\n    msg.fontclr = context.get(\"AFC\");\n} else\n{\n    //  Condition B\n    msg.payload = context.get(\"PayloadB\");\n    msg.colour = context.get(\"BBGC\");\n    msg.txt = context.get(\"Btxt\");\n    msg.fontclr = context.get(\"BFC\");\n}\nif (context.get(\"Topic\") == \"~\")\n{\n    msg.topic = \"\";\n} else\n{\n    msg.topic = context.get(\"Topic\");\n}\nreturn msg;\n","outputs":1,"noerr":0,"x":540,"y":300,"wires":[["3c7dc256.8e3e46"]]},{"id":"3c7dc256.8e3e46","type":"ui_button","z":"df652827.d02c3","name":"RBE Button","group":"396240c9.2d409","order":5,"width":"1","height":"1","passthru":false,"label":"{{msg.txt}}","tooltip":"","color":"{{msg.fontclr}}","bgcolor":"{{msg.colour}}","icon":"","payload":"X","payloadType":"str","topic":"","x":540,"y":250,"wires":[["11b5c675.c3f1ba"]]},{"id":"839b0fab.0972e8","type":"inject","z":"df652827.d02c3","name":"Setup","topic":"","payload":"","payloadType":"str","repeat":"","crontab":"","once":true,"onceDelay":"3","x":520,"y":160,"wires":[["c3514fad.809d8"]]},{"id":"80d7b072.b72b88","type":"comment","z":"df652827.d02c3","name":"Push Button Flow","info":"This has two states:\nA and B.\nAll future refrence is to these two state names.\n\nREQUIRED:\nInputs:\nButton background colour for state A.  msg.colurA\nButton background colour for state B.  msg.colourB\nButton text for state A.               msg.txtA\nButton text for state B.               msg.txtB\nFont colour for state A.               msg.txtclrA\nFont colour for state B.               msg.txtclrB\nPayload for state A.                   msg.payloadA\nPayload for state B.                   msg.payloadB\nTopic.                                 msg.topicSET\n\nOutputs:\nmsg.payload - this is used to control what ever you need.\nmsg.topic - this is if it is needed for control of the next node.\nmsg.colour - this sets the colour of the button.\nmsg.txt - this is the text to be displayed in the button.\nmsg.fontclr - this is the colour of the text on the button.\n","x":520,"y":110,"wires":[]},{"id":"c3514fad.809d8","type":"function","z":"df652827.d02c3","name":"Setup","func":"msg = {\n    \"colourA\": \"yellow\",\n    \"colourB\": \"blue\",\n    \"txtA\": \"SOM\",\n    \"txtB\": \"SOM-EOM\",\n    \"txtclrA\": \"black\",\n    \"txtclrB\": \"white\",\n    \"payloadA\": \"GO\",\n    \"payloadB\": \"STOP\",\n    \"topicSET\": \"CONTROL\"\n}\nreturn msg;","outputs":1,"noerr":0,"x":520,"y":210,"wires":[["11b5c675.c3f1ba"]]},{"id":"396240c9.2d409","type":"ui_group","z":"","name":"WAP","tab":"d54cd82e.537658","order":3,"disp":true,"width":"4","collapse":false},{"id":"d54cd82e.537658","type":"ui_tab","z":"","name":"Logging","icon":"dashboard","order":3,"disabled":false,"hidden":false}]