Set button label at startup and change it when pressed and back after a set time (SOLVED)

[ebolisa]

Hi,

I've a push button label controlled by a function. When the button is pressed, it displays a text/icon and after a second, displays a different text/icon.

When the UI page is loaded, the button doesn't display anything unless, it's pressed. How do I show a default text when the page is loaded?

TIA

[
    {
        "id": "ee1479b1.ec6d68",
        "type": "ui_button",
        "z": "df2b4f99.163318",
        "name": "btnCx",
        "group": "c5612050.2ced2",
        "order": 10,
        "width": "3",
        "height": "1",
        "passthru": false,
        "label": "{{msg.icon}}",
        "tooltip": "",
        "color": "white",
        "bgcolor": "{{msg.colour}}",
        "icon": "",
        "payload": "ON",
        "payloadType": "str",
        "topic": "",
        "x": 290,
        "y": 2120,
        "wires": [
            [
                "b1b14787.e6082"
            ]
        ]
    },
    {
        "id": "b1b14787.e6082",
        "type": "function",
        "z": "df2b4f99.163318",
        "name": "With icon on press",
        "func": "if (msg.payload == \"ON\")\n{\n    //if 'ON' is received, trigger relay;\n    msg.payload = \"0\";\n\n    msg.icon = '<font color = \"white\"><i class=\"material-icons\"> check_circle_outline</i></font>'\n}\nelse\n{\n    msg.payload = \"1\";\n    msg.icon  = \"Centralita\";\n}\nreturn msg;",
        "outputs": 1,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "x": 310,
        "y": 2200,
        "wires": [
            [
                "ee1479b1.ec6d68",
                "f753a14e.3c19c"
            ]
        ]
    },
    {
        "id": "f753a14e.3c19c",
        "type": "trigger",
        "z": "df2b4f99.163318",
        "name": "",
        "op1": "0",
        "op2": "OFF",
        "op1type": "str",
        "op2type": "str",
        "duration": "1",
        "extend": false,
        "overrideDelay": false,
        "units": "s",
        "reset": "",
        "bytopic": "all",
        "topic": "topic",
        "outputs": 1,
        "x": 280,
        "y": 2260,
        "wires": [
            [
                "b1b14787.e6082"
            ]
        ]
    },
    {
        "id": "c5612050.2ced2",
        "type": "ui_group",
        "z": "",
        "name": "Control",
        "tab": "2332b0a1.2f261",
        "order": 2,
        "disp": true,
        "width": "6",
        "collapse": false
    },
    {
        "id": "2332b0a1.2f261",
        "type": "ui_tab",
        "z": "",
        "name": "Home",
        "icon": "dashboard",
        "disabled": false,
        "hidden": false
    }
]

[zenofmud]

You have two issues here

1. you don't have anything to initialize the button (it shows up empty when you start NR) and
2. you have created a loop. - to see this put a debug node on the output of the function node and see what happens.

If the output of the function node is fed to the relay, what do you think will happen to the relay?

[ebolisa]

Hi,

The code is doing what I want it to do. It flips the button label text after activating the relay for a second.

So my problem is issue 1, the button does not initialize when the page is loaded the first time. Beside that, it works fine.

How do I initialize it?

Thanks for helping.

[zenofmud]

Add an insert node and set msg.icon to the string in your function.

But be warned you have a loop. When you press the button a msg is sent to the function. The function sends out a msg to the button and to the delay. The delay sends a msg to the function which sends out a msg to the button and to the delay...

Put a debug node on the output of the function, press the button and see what happens

[ebolisa]

Thanks Paul, will try when I get at home.

The idea behind the loop was to generate a push button instead of a switch. Probably was a bad idea doing it this way.

[zenofmud]

So here is a way to do it. Import this flow

[{"id":"d172fd38.95bd28","type":"ui_button","z":"a3da46a5.bf0908","name":"btnCx","group":"9b5bfaf.72c8088","order":10,"width":"3","height":"1","passthru":false,"label":"{{msg.icon}}","tooltip":"","color":"white","bgcolor":"{{msg.colour}}","icon":"","payload":"ON","payloadType":"str","topic":"","x":110,"y":180,"wires":[["5de7a76e.fd5978","2a5bc083.774478"]]},{"id":"9bc5f0f9.7b838","type":"debug","z":"a3da46a5.bf0908","name":"Turn Relay ON/OFF","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":770,"y":160,"wires":[]},{"id":"45567ed5.3256e8","type":"inject","z":"a3da46a5.bf0908","name":"set button to 'Centralia' on startup","props":[{"p":"icon","v":"<font color = \"white\"><i> Centralita </i></font>","vt":"str"}],"repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"","x":220,"y":40,"wires":[["9fdffbb6.eef928"]]},{"id":"5de7a76e.fd5978","type":"switch","z":"a3da46a5.bf0908","name":"Only pass 'ON'","property":"payload","propertyType":"msg","rules":[{"t":"eq","v":"ON","vt":"str"}],"checkall":"false","repair":false,"outputs":1,"x":140,"y":240,"wires":[["95b40794.d76b4"]]},{"id":"95b40794.d76b4","type":"change","z":"a3da46a5.bf0908","name":"payload ==> 0 icon=>Check box","rules":[{"t":"set","p":"payload","pt":"msg","to":"0","tot":"str"},{"t":"set","p":"icon","pt":"msg","to":"<font color = \"white\"><i class=\"material-icons\"> check_circle_outline</i></font>","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":200,"y":300,"wires":[["eb96edec.bcd498","2a9a4771.e2b698","6b369c22.c55fa4"]]},{"id":"fb6fdd8.6d12ca","type":"change","z":"a3da46a5.bf0908","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"1","tot":"str"},{"t":"set","p":"icon","pt":"msg","to":"Centralita","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":140,"y":420,"wires":[["641bb359.41960c","1518b954.eb4417"]]},{"id":"eb96edec.bcd498","type":"trigger","z":"a3da46a5.bf0908","name":"Wait 1 second and turn relay OFF","op1":"","op2":"1","op1type":"nul","op2type":"str","duration":"1","extend":false,"units":"s","reset":"","bytopic":"all","topic":"topic","outputs":1,"x":200,"y":360,"wires":[["fb6fdd8.6d12ca"]]},{"id":"2a5bc083.774478","type":"debug","z":"a3da46a5.bf0908","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":510,"y":120,"wires":[]},{"id":"209f055c.95da5a","type":"link in","z":"a3da46a5.bf0908","name":"Button","links":["9fdffbb6.eef928","641bb359.41960c","2a9a4771.e2b698"],"x":110,"y":120,"wires":[["d172fd38.95bd28"]],"l":true},{"id":"9fdffbb6.eef928","type":"link out","z":"a3da46a5.bf0908","name":"to Button","links":["209f055c.95da5a"],"x":520,"y":40,"wires":[],"l":true},{"id":"641bb359.41960c","type":"link out","z":"a3da46a5.bf0908","name":"to Button","links":["209f055c.95da5a"],"x":520,"y":440,"wires":[],"l":true},{"id":"2a9a4771.e2b698","type":"link out","z":"a3da46a5.bf0908","name":"to Button","links":["209f055c.95da5a"],"x":520,"y":320,"wires":[],"l":true},{"id":"2b28fc23.47c36c","type":"link in","z":"a3da46a5.bf0908","name":"Relay","links":["6b369c22.c55fa4","1518b954.eb4417"],"x":730,"y":100,"wires":[["9bc5f0f9.7b838"]],"l":true},{"id":"1518b954.eb4417","type":"link out","z":"a3da46a5.bf0908","name":"to Relay","links":["2b28fc23.47c36c"],"x":520,"y":400,"wires":[],"l":true},{"id":"6b369c22.c55fa4","type":"link out","z":"a3da46a5.bf0908","name":"to Relay","links":["2b28fc23.47c36c"],"x":520,"y":280,"wires":[],"l":true},{"id":"9b5bfaf.72c8088","type":"ui_group","z":"","name":"Control","tab":"93341d64.5a6ab","order":2,"disp":true,"width":"6","collapse":false},{"id":"93341d64.5a6ab","type":"ui_tab","z":"","name":"Home","icon":"dashboard","order":1,"disabled":false,"hidden":false}]

I've added link nodes to make it neater.

The top part runs at startup or on a deploy and sends the label 'Cetralia' to the button.
When you press the button the msg is tested in a switch node and only will allow a 'ON' msg to pass on.
Next the msg goes to a change node that sets the payload to a '0' and the icon to a check box. This msg is sent to the r elay (repsented by the debug node), the button (to show the check box' and to a trigger node
the trigger node does nothing with the original msg and waits 1 second then sends the msg to a change node.
The change node sets the payload to a '1' and the icon 'Centralia' and passes this back to the button to change the label.

Hope this helps and youi understand what is going on.

{EDIT} Note: I've changed the title to reflect what you wanted done.

[ebolisa]

Thank you very much for your time, Paul!!

Because I'm dealing with over 12 buttons/relays, at the end, I decided to use a simple way to toggle the switches: