Button text not visible on first load

ebolisa · 1 October 2021 07:19

Hi,

I'd appreciate some guidance on this issue.

I've a button which, for some reasons, doesn't show its text when loading for the first time the page. The text comes up once actioned the button and stays on.
How do I modify it.

TIA

[
    {
        "id": "a8fd423c.f1f4f",
        "type": "rpi-gpio out",
        "z": "df2b4f99.163318",
        "name": "relayS",
        "pin": "33",
        "set": "",
        "level": "0",
        "freq": "",
        "out": "out",
        "x": 810,
        "y": 340,
        "wires": []
    },
    {
        "id": "7f19db02.fc5264",
        "type": "ui_button",
        "z": "df2b4f99.163318",
        "name": "btnS",
        "group": "b7650ad6.bcc6",
        "order": 1,
        "width": "3",
        "height": "1",
        "passthru": false,
        "label": "{{msg.icon}}",
        "tooltip": "",
        "color": "white",
        "bgcolor": "{{msg.colour}}",
        "icon": "",
        "payload": "X",
        "payloadType": "str",
        "topic": "",
        "x": 570,
        "y": 280,
        "wires": [
            [
                "4bed650f.761c1c"
            ]
        ]
    },
    {
        "id": "4bed650f.761c1c",
        "type": "function",
        "z": "df2b4f99.163318",
        "name": "With icon on press",
        "func": "if (msg.payload == \"X\")\n{\n    //\n    //node.warn(\"X received\");\n    msg.payload = \"1\";\n\n    //msg.icon = '<font color = \"white\"><i class=\"material-icons md-48\"> check_circle_outline style:\"color:black\"></i></font>'\n    //msg.icon = '<i class=\"material-icons\"> check_circle_outline style:\"color:\"black\">';\n    //msg.icon = '<i class=\"material-icons\"> check_circle_outline</i>'\n    //msg.icon = '<font color = \"white\"><i class=\"material-icons\"> check_circle_outline</i></font>'\n    //msg  = {icon: '<font color = \"black\" i class=\"fa fa-book fa-2x\"></i>',\"payload\": \"Button pressed\"};\n}\nelse\n{\n    msg.payload = \"0\";\n    msg.icon  = \"Lavadora S\";\n    //msg  = {icon: '<font color = \"white\" i class=\"fa fa-book fa-2x\"></i>',\"payload\": \"Button released\"};\n}\nreturn msg;",
        "outputs": 1,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "x": 590,
        "y": 360,
        "wires": [
            [
                "7f19db02.fc5264",
                "b5e515d.94727e8",
                "a8fd423c.f1f4f"
            ]
        ]
    },
    {
        "id": "b5e515d.94727e8",
        "type": "switch",
        "z": "df2b4f99.163318",
        "name": "",
        "property": "payload",
        "propertyType": "msg",
        "rules": [
            {
                "t": "eq",
                "v": "1",
                "vt": "num"
            }
        ],
        "checkall": "true",
        "repair": false,
        "outputs": 1,
        "x": 810,
        "y": 400,
        "wires": [
            [
                "34f617a0.51a2e8"
            ]
        ]
    },
    {
        "id": "34f617a0.51a2e8",
        "type": "trigger",
        "z": "df2b4f99.163318",
        "name": "",
        "op1": "",
        "op2": "Z",
        "op1type": "nul",
        "op2type": "str",
        "duration": "1",
        "extend": false,
        "overrideDelay": false,
        "units": "s",
        "reset": "",
        "bytopic": "all",
        "topic": "topic",
        "outputs": 1,
        "x": 620,
        "y": 500,
        "wires": [
            [
                "4bed650f.761c1c"
            ]
        ]
    },
    {
        "id": "b7650ad6.bcc6",
        "type": "ui_group",
        "name": "Control",
        "tab": "ef5d65ce.36e6b",
        "order": 1,
        "disp": true,
        "width": "6",
        "collapse": true
    },
    {
        "id": "ef5d65ce.36e6b",
        "type": "ui_tab",
        "name": "Washup",
        "icon": "dashboard",
        "disabled": false,
        "hidden": false
    }
]

Gunner · 1 October 2021 07:27

That is because you haven't done anything to cause the flow to start... until button press. Add in a single shot inject node to get it started

ebolisa · 1 October 2021 07:45

@Gunner. Thank you, it makes sense.

BTW, I learned a lot from you using your Blynk codes. I'm also leaving that project and exploring alternatives as Blynk v.2.0 doesn't support Python well.

ebolisa · 1 October 2021 07:56

Ok, I tried it but still not showing the text.

[
    {
        "id": "a8fd423c.f1f4f",
        "type": "rpi-gpio out",
        "z": "df2b4f99.163318",
        "name": "relayS",
        "pin": "33",
        "set": "",
        "level": "0",
        "freq": "",
        "out": "out",
        "x": 810,
        "y": 340,
        "wires": []
    },
    {
        "id": "7f19db02.fc5264",
        "type": "ui_button",
        "z": "df2b4f99.163318",
        "name": "btnS",
        "group": "b7650ad6.bcc6",
        "order": 1,
        "width": "3",
        "height": "1",
        "passthru": false,
        "label": "{{msg.icon}}",
        "tooltip": "",
        "color": "white",
        "bgcolor": "{{msg.colour}}",
        "icon": "",
        "payload": "X",
        "payloadType": "str",
        "topic": "",
        "x": 570,
        "y": 280,
        "wires": [
            [
                "4bed650f.761c1c"
            ]
        ]
    },
    {
        "id": "4bed650f.761c1c",
        "type": "function",
        "z": "df2b4f99.163318",
        "name": "With icon on press",
        "func": "if (msg.payload == \"X\")\n{\n    //\n    //node.warn(\"X received\");\n    msg.payload = \"1\";\n\n    //msg.icon = '<font color = \"white\"><i class=\"material-icons md-48\"> check_circle_outline style:\"color:black\"></i></font>'\n    //msg.icon = '<i class=\"material-icons\"> check_circle_outline style:\"color:\"black\">';\n    //msg.icon = '<i class=\"material-icons\"> check_circle_outline</i>'\n    //msg.icon = '<font color = \"white\"><i class=\"material-icons\"> check_circle_outline</i></font>'\n    //msg  = {icon: '<font color = \"black\" i class=\"fa fa-book fa-2x\"></i>',\"payload\": \"Button pressed\"};\n}\nelse\n{\n    msg.payload = \"0\";\n    msg.icon  = \"Lavadora S\";\n    //msg  = {icon: '<font color = \"white\" i class=\"fa fa-book fa-2x\"></i>',\"payload\": \"Button released\"};\n}\nreturn msg;",
        "outputs": 1,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "x": 590,
        "y": 360,
        "wires": [
            [
                "7f19db02.fc5264",
                "b5e515d.94727e8",
                "a8fd423c.f1f4f"
            ]
        ]
    },
    {
        "id": "b5e515d.94727e8",
        "type": "switch",
        "z": "df2b4f99.163318",
        "name": "",
        "property": "payload",
        "propertyType": "msg",
        "rules": [
            {
                "t": "eq",
                "v": "1",
                "vt": "num"
            }
        ],
        "checkall": "true",
        "repair": false,
        "outputs": 1,
        "x": 810,
        "y": 400,
        "wires": [
            [
                "34f617a0.51a2e8"
            ]
        ]
    },
    {
        "id": "34f617a0.51a2e8",
        "type": "trigger",
        "z": "df2b4f99.163318",
        "name": "",
        "op1": "",
        "op2": "Z",
        "op1type": "nul",
        "op2type": "str",
        "duration": "1",
        "extend": false,
        "overrideDelay": false,
        "units": "s",
        "reset": "",
        "bytopic": "all",
        "topic": "topic",
        "outputs": 1,
        "x": 620,
        "y": 500,
        "wires": [
            [
                "4bed650f.761c1c"
            ]
        ]
    },
    {
        "id": "f37771e39b154c0d",
        "type": "inject",
        "z": "df2b4f99.163318",
        "name": "tick 1",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": "",
        "topic": "tempC",
        "payloadType": "str",
        "x": 470,
        "y": 540,
        "wires": [
            [
                "7f19db02.fc5264"
            ]
        ]
    },
    {
        "id": "b7650ad6.bcc6",
        "type": "ui_group",
        "name": "Control",
        "tab": "ef5d65ce.36e6b",
        "order": 1,
        "disp": true,
        "width": "6",
        "collapse": true
    },
    {
        "id": "ef5d65ce.36e6b",
        "type": "ui_tab",
        "name": "Washup",
        "icon": "dashboard",
        "disabled": false,
        "hidden": false
    }
]

zenofmud · 1 October 2021 09:39

I'm going to let you discover the issue yourself but give you a hint. What msg property is being used for the label and what msg properties are you sening it in the inject?

ebolisa · 1 October 2021 10:08

"Lavadora S"? In the label I've {{msg.icon}} which is "Lavadora S" in the function. So, I changed the inject node to reflect it with no avail.

Steve-Mcl · 1 October 2021 10:12

Attach a debug node set to show complete message after the function what do you see in msg.icon?

Hint, your function conditionally sets msg.icon based on the incoming payload.

ebolisa · 1 October 2021 10:29

Ok, this' what I see:
output of inject: "Lavadora S" (as expected)
output of switch: Nothing!
output of function: Nothing!

zenofmud · 1 October 2021 10:32

Let's see your current flow

Steve-Mcl · 1 October 2021 10:41

exactly my point. Look at the values and figure out why the msg isn't getting where it's supposed to

ebolisa · 1 October 2021 10:42

The only thing I'm trying to do here is a simple push-button which activates a relay for only a second. I just created a new clean flow in case the rest of the code was affecting the button.

[
    {
        "id": "d2d5d2de2e29a4b5",
        "type": "tab",
        "label": "Flow 1",
        "disabled": false,
        "info": ""
    },
    {
        "id": "7f19db02.fc5264",
        "type": "ui_button",
        "z": "d2d5d2de2e29a4b5",
        "name": "btnS",
        "group": "b7650ad6.bcc6",
        "order": 1,
        "width": "3",
        "height": "1",
        "passthru": false,
        "label": "{{msg.icon}}",
        "tooltip": "",
        "color": "white",
        "bgcolor": "{{msg.colour}}",
        "className": "",
        "icon": "",
        "payload": "X",
        "payloadType": "str",
        "topic": "",
        "topicType": "str",
        "x": 390,
        "y": 60,
        "wires": [
            [
                "4bed650f.761c1c",
                "38cf180271591a5e"
            ]
        ]
    },
    {
        "id": "4bed650f.761c1c",
        "type": "function",
        "z": "d2d5d2de2e29a4b5",
        "name": "With icon on press",
        "func": "if (msg.payload == \"X\")\n{\n    //\n    //node.warn(\"X received\");\n    msg.payload = \"0\";\n\n    //msg.icon = '<font color = \"white\"><i class=\"material-icons md-48\"> check_circle_outline style:\"color:black\"></i></font>'\n    //msg.icon = '<i class=\"material-icons\"> check_circle_outline style:\"color:\"black\">';\n    //msg.icon = '<i class=\"material-icons\"> check_circle_outline</i>'\n    //msg.icon = '<font color = \"white\"><i class=\"material-icons\"> check_circle_outline</i></font>'\n    //msg  = {icon: '<font color = \"black\" i class=\"fa fa-book fa-2x\"></i>',\"payload\": \"Button pressed\"};\n}\nelse\n{\n    msg.payload = \"1\";\n    msg.icon  = \"Lavadora S\";\n    //msg  = {icon: '<font color = \"white\" i class=\"fa fa-book fa-2x\"></i>',\"payload\": \"Button released\"};\n}\nreturn msg;",
        "outputs": 1,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 410,
        "y": 140,
        "wires": [
            [
                "b5e515d.94727e8",
                "7f19db02.fc5264"
            ]
        ]
    },
    {
        "id": "b5e515d.94727e8",
        "type": "switch",
        "z": "d2d5d2de2e29a4b5",
        "name": "",
        "property": "payload",
        "propertyType": "msg",
        "rules": [
            {
                "t": "eq",
                "v": "1",
                "vt": "num"
            }
        ],
        "checkall": "true",
        "repair": false,
        "outputs": 1,
        "x": 610,
        "y": 200,
        "wires": [
            [
                "34f617a0.51a2e8"
            ]
        ]
    },
    {
        "id": "34f617a0.51a2e8",
        "type": "trigger",
        "z": "d2d5d2de2e29a4b5",
        "name": "",
        "op1": "",
        "op2": "Z",
        "op1type": "nul",
        "op2type": "str",
        "duration": "1",
        "extend": false,
        "overrideDelay": false,
        "units": "s",
        "reset": "",
        "bytopic": "all",
        "topic": "topic",
        "outputs": 1,
        "x": 420,
        "y": 300,
        "wires": [
            [
                "4bed650f.761c1c"
            ]
        ]
    },
    {
        "id": "38cf180271591a5e",
        "type": "debug",
        "z": "d2d5d2de2e29a4b5",
        "name": "",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "true",
        "targetType": "full",
        "statusVal": "",
        "statusType": "auto",
        "x": 690,
        "y": 140,
        "wires": []
    },
    {
        "id": "56a729ec83d2fc27",
        "type": "inject",
        "z": "d2d5d2de2e29a4b5",
        "name": "",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": true,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "\"Lavadora S\"",
        "payloadType": "str",
        "x": 170,
        "y": 60,
        "wires": [
            [
                "7f19db02.fc5264"
            ]
        ]
    },
    {
        "id": "b7650ad6.bcc6",
        "type": "ui_group",
        "name": "Control",
        "tab": "ef5d65ce.36e6b",
        "order": 1,
        "disp": true,
        "width": "6",
        "collapse": true
    },
    {
        "id": "ef5d65ce.36e6b",
        "type": "ui_tab",
        "name": "Washup",
        "icon": "dashboard",
        "disabled": false,
        "hidden": false
    }
]

ebolisa · 1 October 2021 10:46

I understand but the output of the payload for the button is "X" and that is not shown either

zenofmud · 1 October 2021 10:47

Look at your inject note. What msg proberty are you setting Lavadora S` to and what msg property is the button label expectring to see the value in?

ebolisa · 1 October 2021 10:51

The string "X" but... no go.

ebolisa · 1 October 2021 10:56

However, if I inject "X" to the function, it starts to loop with:

msg : Object
object
_msgid: "45b5662835d1e281"
payload: "1"
topic: ""
icon: "Lavadora S"

zenofmud · 1 October 2021 10:58

in the ui-button node what are you using to display the label - What did you enter in the label configuration?
looking at that what part of the msg are you using?
go to the inject node and look at what part of the msg you are putting 'Lavadora S` in.

ebolisa · 1 October 2021 11:02

This' what I have:

zenofmud · 1 October 2021 11:05

So - once again - what msg property is the button using?
Is that property being set in the inject node?

The answer is staring at you.

ebolisa · 1 October 2021 11:12

You mean I should use "{{msg.icon}}" in the inject node? I'm not seeing the tree in the forest, sorry. I've been dealing with this issue some time now and I didn't realize the complex is to create a simple push-button.

zenofmud · 1 October 2021 11:14

If you are using msg.icon in the button, in the inject node you have to set msg.icon to some value. You are putting your label in msg.payload so it won’t be used.

Just to let you know, I have done something like this more than once asnd always groan when I realise I've done it again

Topic		Replies	Views
Button texts don't show occasionally / go missing Dashboard	2	613	30 October 2020
Weird issue: Button Texts go missing Dashboard	7	760	28 September 2020
Set button label at startup and change it when pressed and back after a set time (SOLVED) Dashboard	7	2626	4 November 2020
Dashboard Button Keeping Appearance when Changing Tabs Dashboard node-red-dashboard	10	317	5 May 2022
I can change a button label but not the color Dashboard dashboard-2	4	46	22 October 2024

Button text not visible on first load

Related topics