Display number WHEN click on button

Share Your Nodes
1

Hi, I want to display an entered number on text ONLY WHEN I click on the button, do I have to use the function node? It did'nt work

Screenshot 2022-04-09 133314
Screenshot 2022-04-09 1333141051Ă—481 25.2 KB 

[
    {
        "id": "496670a68851d55b",
        "type": "ui_button",
        "z": "70c25f2d579744c7",
        "name": "",
        "group": "461e2ece4e14a1f0",
        "order": 2,
        "width": 0,
        "height": 0,
        "passthru": false,
        "label": "button",
        "tooltip": "",
        "color": "",
        "bgcolor": "",
        "className": "",
        "icon": "",
        "payload": "OK",
        "payloadType": "str",
        "topic": "b",
        "topicType": "str",
        "x": 110,
        "y": 220,
        "wires": [
            [
                "aff2e90292aa288f"
            ]
        ]
    },
    {
        "id": "b8f19620b704f38f",
        "type": "ui_text",
        "z": "70c25f2d579744c7",
        "group": "461e2ece4e14a1f0",
        "order": 2,
        "width": 0,
        "height": 0,
        "name": "",
        "label": "text",
        "format": "{{msg.payload}}",
        "layout": "row-spread",
        "className": "",
        "x": 590,
        "y": 320,
        "wires": []
    },
    {
        "id": "9f9380053f8d3a5c",
        "type": "ui_text_input",
        "z": "70c25f2d579744c7",
        "name": "",
        "label": "",
        "tooltip": "",
        "group": "461e2ece4e14a1f0",
        "order": 1,
        "width": 0,
        "height": 0,
        "passthru": true,
        "mode": "number",
        "delay": 300,
        "topic": "a",
        "sendOnBlur": true,
        "topicType": "str",
        "x": 130,
        "y": 340,
        "wires": [
            [
                "aff2e90292aa288f"
            ]
        ]
    },
    {
        "id": "1f986cdba2ce2069",
        "type": "debug",
        "z": "70c25f2d579744c7",
        "name": "",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "false",
        "statusVal": "",
        "statusType": "auto",
        "x": 570,
        "y": 260,
        "wires": []
    },
    {
        "id": "aff2e90292aa288f",
        "type": "function",
        "z": "70c25f2d579744c7",
        "name": "",
        "func": "if (msg.payload.b === \"OK\") {\n    msg.payload = msg.payload.a\n}\nreturn msg;",
        "outputs": 1,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 340,
        "y": 280,
        "wires": [
            [
                "1f986cdba2ce2069",
                "b8f19620b704f38f"
            ]
        ]
    },
    {
        "id": "461e2ece4e14a1f0",
        "type": "ui_group",
        "name": "Group 1",
        "tab": "ea5e7575d0f9638f",
        "order": 1,
        "disp": true,
        "width": 6
    },
    {
        "id": "ea5e7575d0f9638f",
        "type": "ui_tab",
        "name": "Tab 6",
        "icon": "dashboard",
        "order": 6
    }
]
2

Do you mean you don't want the data you enter in the 'number input' node to show up in the ui-text node until you press the button? Why not use the ui-form node in place of those two nodes?

3

Or try something like this

[{"id":"496670a68851d55b","type":"ui_button","z":"bf9e1e33.030598","name":"","group":"461e2ece4e14a1f0","order":2,"width":0,"height":0,"passthru":false,"label":"button","tooltip":"","color":"","bgcolor":"","className":"","icon":"","payload":"OK","payloadType":"str","topic":"b","topicType":"str","x":120,"y":860,"wires":[["8229ccaf.327b18"]]},{"id":"8229ccaf.327b18","type":"change","z":"bf9e1e33.030598","name":"","rules":[{"t":"set","p":"complete","pt":"msg","to":"true","tot":"bool"}],"action":"","property":"","from":"","to":"","reg":false,"x":320,"y":860,"wires":[["76160ac1.36c53c"]]},{"id":"76160ac1.36c53c","type":"join","z":"bf9e1e33.030598","name":"","mode":"custom","build":"object","property":"payload","propertyType":"msg","key":"topic","joiner":"\\n","joinerType":"str","accumulate":false,"timeout":"","count":"","reduceRight":false,"reduceExp":"","reduceInit":"","reduceInitType":"","reduceFixup":"","x":340,"y":960,"wires":[["b8f19620b704f38f","1f986cdba2ce2069"]]},{"id":"9f9380053f8d3a5c","type":"ui_text_input","z":"bf9e1e33.030598","name":"","label":"","tooltip":"","group":"461e2ece4e14a1f0","order":1,"width":0,"height":0,"passthru":true,"mode":"number","delay":300,"topic":"a","sendOnBlur":true,"className":"","topicType":"str","x":140,"y":980,"wires":[["76160ac1.36c53c"]]},{"id":"b8f19620b704f38f","type":"ui_text","z":"bf9e1e33.030598","group":"461e2ece4e14a1f0","order":2,"width":0,"height":0,"name":"","label":"text","format":"{{msg.payload.a}}","layout":"row-spread","className":"","x":600,"y":960,"wires":[]},{"id":"1f986cdba2ce2069","type":"debug","z":"bf9e1e33.030598","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":580,"y":900,"wires":[]},{"id":"461e2ece4e14a1f0","type":"ui_group","name":"Group 1","tab":"ea5e7575d0f9638f","order":1,"disp":true,"width":6},{"id":"ea5e7575d0f9638f","type":"ui_tab","name":"Tab 6","icon":"dashboard","order":6}]
1 Like
4

Also I think you misunderstand Node-red in a couple of ways.

1 If you entered a value 42 to your Number Input node, that value is passed as msg.payload to the function node and then it is gone. It does not sit there waiting for you to use it.

Untitled 1
Untitled 1892Ă—327 19.1 KB

When the button is pressed, it sends a new message with payload "OK" to the function.

If you want to do something with 42 when the button is pressed, you either have to store the value somehow (context variables) or else use a Join node to combine 42 and OK into the same message.

2 Your number input and button set msg.topic "a" and "b" so a message arrives at the function something like this
{ topic: "a", payload: 42 }
or
{ topic: "b", payload: "OK" }

But in your function you are trying to use them as msg.payload.a or msg.payload.b. That is wrong. The only data items avaliable are msg.payload and msg.topic.

3 Finally, the return msg; in your function is outside the if() block so it will always send a message of some sort to te text widget and dbug.

1 Like
5

Ok so the return msg; should always be inside the if()?

And If I want to obtain the value of an entering node(that doesn't have a fixed value like the input text or mqtt in) in the function node, what do I do?

6

No, it entirely depends on the circumstances.
In this case, @E1cid's solution does not use a function node at all, instead he has a Join node to combine the two inputs into a single message.payload { "a":16, "b":"OK"} which he can then access as msg.payload.a

Sorry, I don't understand "an entering node".

1 Like
7

@E1cid I tried the same thing but with "mqtt in" instead of text input, and gauge instead of text output, and I set the join node to count: 2 and ticked "and every subsequent message" , Why do you think it didn't work?

8

Not sure without info.
please supply the mqtt input message and the flow.

9

Here:

[
    {
        "id": "03dfac8f382b7b7b",
        "type": "ui_button",
        "z": "45090b294412914b",
        "name": "",
        "group": "461e2ece4e14a1f0",
        "order": 2,
        "width": 0,
        "height": 0,
        "passthru": false,
        "label": "button",
        "tooltip": "",
        "color": "",
        "bgcolor": "",
        "className": "",
        "icon": "",
        "payload": "OK",
        "payloadType": "str",
        "topic": "b",
        "topicType": "str",
        "x": 290,
        "y": 180,
        "wires": [
            [
                "8229ccaf.327b18"
            ]
        ]
    },
    {
        "id": "8229ccaf.327b18",
        "type": "change",
        "z": "45090b294412914b",
        "name": "",
        "rules": [
            {
                "t": "set",
                "p": "complete",
                "pt": "msg",
                "to": "true",
                "tot": "bool"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 490,
        "y": 180,
        "wires": [
            [
                "76160ac1.36c53c"
            ]
        ]
    },
    {
        "id": "76160ac1.36c53c",
        "type": "join",
        "z": "45090b294412914b",
        "name": "",
        "mode": "custom",
        "build": "object",
        "property": "payload",
        "propertyType": "msg",
        "key": "topic",
        "joiner": "\\n",
        "joinerType": "str",
        "accumulate": false,
        "timeout": "",
        "count": "",
        "reduceRight": false,
        "reduceExp": "",
        "reduceInit": "",
        "reduceInitType": "",
        "reduceFixup": "",
        "x": 510,
        "y": 280,
        "wires": [
            [
                "69ace1ccc28c8128",
                "71118f51d8a7a028"
            ]
        ]
    },
    {
        "id": "69ace1ccc28c8128",
        "type": "debug",
        "z": "45090b294412914b",
        "name": "",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "false",
        "statusVal": "",
        "statusType": "auto",
        "x": 750,
        "y": 220,
        "wires": []
    },
    {
        "id": "6576d137dcc723f1",
        "type": "mqtt in",
        "z": "45090b294412914b",
        "name": "",
        "topic": "",
        "qos": "2",
        "datatype": "auto",
        "nl": false,
        "rap": true,
        "rh": 0,
        "x": 290,
        "y": 300,
        "wires": [
            [
                "76160ac1.36c53c"
            ]
        ]
    },
    {
        "id": "71118f51d8a7a028",
        "type": "ui_gauge",
        "z": "45090b294412914b",
        "name": "",
        "order": 0,
        "width": 0,
        "height": 0,
        "gtype": "gage",
        "title": "gauge",
        "label": "units",
        "format": "{{value}}",
        "min": 0,
        "max": 10,
        "colors": [
            "#00B500",
            "#E6E600",
            "#CA3838"
        ],
        "seg1": "",
        "seg2": "",
        "className": "",
        "x": 760,
        "y": 300,
        "wires": []
    },
    {
        "id": "461e2ece4e14a1f0",
        "type": "ui_group",
        "name": "Group 1",
        "tab": "ea5e7575d0f9638f",
        "order": 1,
        "disp": true,
        "width": 6
    },
    {
        "id": "ea5e7575d0f9638f",
        "type": "ui_tab",
        "name": "Tab 6",
        "icon": "dashboard",
        "order": 6
    }
]
10

there is no topic in your mqtt node, and you have not set gauge value format to
{{msg.poyload.what_ever_mqtt_topic_is}}

11

when I wire the mqtt in with gauge directly the values diplay correctly with the value format {{value}}

Is it because of the added nodes (join) and (change) that I have to set it to {{msg.payload."topic"}} ?

12

Yes @jbudd explained above the join moves msg.payload from the mqtt node to msg.payload.the_mqtt_topic. So you have to tell the gauge node where the value is.

1 Like
13

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