Change Text Label via UI Button

Dashboard
1

Pretty new to Node-Red. I know it's probably a rookie mistake causing this, but i can't figure it out.

Trying to set the label of a button based on a global variable (that is being stored in a file). Also wanting to change the value based on input in a change node. for some reason, the change node ignores what comes in. msg.payload gets set on initialization, then want to set variable and change label on button click. Here is a copy of my code.

[{"id":"a167f92c.0edfb8","type":"tab","label":"Dishwasher Schedule","disabled":false,"info":"Keeps track of who has done the dishes last and who's turn it is next"},{"id":"89be00c5.ae132","type":"inject","z":"a167f92c.0edfb8","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":110,"y":100,"wires":[["c6241b0f.5338f8"]]},{"id":"883959c3.6829c8","type":"ui_button","z":"a167f92c.0edfb8","name":"","group":"e46ac3bf.a5102","order":1,"width":0,"height":0,"passthru":false,"label":"Dishwash Task Completed","tooltip":"Click When Finished Unloading and Loading Dishwasher","color":"","bgcolor":"","icon":"","payload":"","payloadType":"str","topic":"","x":520,"y":160,"wires":[["286b777b.e50488"]]},{"id":"86ea2ea9.3aa1b","type":"ui_text","z":"a167f92c.0edfb8","group":"e46ac3bf.a5102","order":2,"width":0,"height":0,"name":"Up Next","label":"Up Next","format":"{{msg.payload}}","layout":"row-spread","x":900,"y":80,"wires":[]},{"id":"c116e7dd.0779f8","type":"change","z":"a167f92c.0edfb8","name":"","rules":[{"t":"change","p":"payload","pt":"msg","from":"value1","fromt":"str","to":"value2","tot":"str"},{"t":"change","p":"payload","pt":"msg","from":"value2","fromt":"str","to":"value3","tot":"str"},{"t":"change","p":"payload","pt":"msg","from":"value3","fromt":"str","to":"value1","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":680,"y":300,"wires":[["cd8af471.2908b8","8a50cedc.bfd43"]]},{"id":"cd8af471.2908b8","type":"debug","z":"a167f92c.0edfb8","name":"","active":false,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","statusVal":"","statusType":"auto","x":930,"y":400,"wires":[]},{"id":"286b777b.e50488","type":"function","z":"a167f92c.0edfb8","name":"","func":"msg.payload = global.get(\"upnext\",\"storeInFile\");\n\nnode.warn(\"2nd Function Payload: \" + msg.payload)\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":410,"y":260,"wires":[["c116e7dd.0779f8"]]},{"id":"c6241b0f.5338f8","type":"function","z":"a167f92c.0edfb8","name":"","func":"msg.payload = global.get(\"upnext\",\"storeInFile\") || \"empty\";\nnode.warn(\"Initial Function: \" + msg.payload);\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":300,"y":100,"wires":[["86ea2ea9.3aa1b","c8e672c3.7f37d","883959c3.6829c8"]]},{"id":"8a50cedc.bfd43","type":"function","z":"a167f92c.0edfb8","name":"","func":"//flow.set(\"upnext\",msg.payload,\"storeInFile\");\nnode.warn(\"3rd Function Payload: \" + global.get(\"upnext\",\"storeInFile\"));\nmsg.payload =  global.get(\"upnext\",\"storeInFile\");\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":960,"y":280,"wires":[["86ea2ea9.3aa1b"]]},{"id":"c8e672c3.7f37d","type":"debug","z":"a167f92c.0edfb8","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":460,"y":60,"wires":[]},{"id":"9aa94744.d86908","type":"inject","z":"a167f92c.0edfb8","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":210,"y":600,"wires":[["aff9a723.46ead8"]]},{"id":"aff9a723.46ead8","type":"function","z":"a167f92c.0edfb8","name":"","func":"global.set(\"upnext\",\"value1\",\"storeInFile\");\nmsg.payload = global.get(\"upnext\",\"storeInFile\");\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":420,"y":600,"wires":[["21b70c2a.ae3684"]]},{"id":"21b70c2a.ae3684","type":"debug","z":"a167f92c.0edfb8","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":650,"y":600,"wires":[]},{"id":"e46ac3bf.a5102","type":"ui_group","name":"Schedule","tab":"8a543792.8d4b28","order":1,"disp":true,"width":8,"collapse":false},{"id":"8a543792.8d4b28","type":"ui_tab","name":"Household","icon":"fa-home","order":1,"disabled":false,"hidden":false}]
2

Hi Hawk76. Welcome to Node-Red.

I am not an expert, but here are some things to consider.

1 - The first function node:

msg.payload = global.get("upnext","storeInFile") || "empty";
node.warn("Initial Function: " + msg.payload);
return msg;

The first line doesn't make sense to me.

You are setting the msg.payload to what a global context of upnext is.
If it isn't set, it is set to empty. Fair enough.
But what is this storeInFile part?

There seems to be a lot of the magic which you are using not covered here.

Could you break it down to a more simple thing of what you want to do?

3

The storeInFile is telling Node-Red to store the data in a file so the data will be persistent across reboots and redeploys.
That is based on info from here: A guide to understanding 'Persistent Context'
Basically what i'm trying to do is create a button that my kids press when they do a chore (ie dishes,etc) and keep track of who has done it and who is next up. I want the Text Label to show who is next up based on the logic of who pressed the button (who is currently showing as next up) and who should show next. Maybe this isn't the right approach. If there is a better way, i'm certainly open other options.

Thanks

4

Sorry for the short reply, but the computer and I are having an argument about what it should and should not be doing.

This is an effort in doing what I think you want to do.

It is a bit nasty, sorry. But I think you can fix the problem it has just now.

[{"id":"20f58583.f8c112","type":"ui_button","z":"a167f92c.0edfb8","name":"New Button","group":"e46ac3bf.a5102","order":1,"width":0,"height":0,"passthru":false,"label":"{{msg.payload}}","tooltip":"Click When Finished Unloading and Loading Dishwasher","color":"","bgcolor":"","icon":"","payload":"X","payloadType":"str","topic":"","x":230,"y":630,"wires":[["5e0161ce.ab5ba8"]]},{"id":"b4613704.8bee88","type":"inject","z":"a167f92c.0edfb8","name":"Must do this first","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":250,"y":500,"wires":[["9302b57d.5e11a8"]]},{"id":"9302b57d.5e11a8","type":"function","z":"a167f92c.0edfb8","name":"","func":"var todo = {\"0\":\"Idle\",\"1\":\"Start\",\"2\":\"Run\",\"3\":\"End\"}\n\nmsg.payload = todo;\n\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":420,"y":500,"wires":[["8930dd33.14d36"]]},{"id":"8930dd33.14d36","type":"change","z":"a167f92c.0edfb8","name":"","rules":[{"t":"set","p":"todo","pt":"flow","to":"payload","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":590,"y":500,"wires":[[]]},{"id":"5e0161ce.ab5ba8","type":"function","z":"a167f92c.0edfb8","name":"counter","func":"var counter = context.get(\"COUNTER\") || 0;\n\nvar y = counter;\n\ncounter = (counter + 1) %4;\ncontext.set(\"COUNTER\",counter);\n\nmsg.payload = y;\n\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":400,"y":630,"wires":[["f9887310.8a202","f47aaa25.335f88"]]},{"id":"f47aaa25.335f88","type":"function","z":"a167f92c.0edfb8","name":"","func":"var pointer = parseInt(msg.payload);\nvar todo = flow.get(\"todo\");\nvar next = (pointer + 1) %4;\nmsg1 = {};\n\n//node.warn(pointer);\n//node.warn(flow.get(\"todo\"));\n//node.warn(todo);\n\nmsg.payload = todo[pointer];\nmsg1.payload = todo[next];\n\nreturn [msg,msg1];","outputs":2,"noerr":0,"initialize":"","finalize":"","x":400,"y":710,"wires":[["8ecbb296.62a028","20f58583.f8c112"],["4384dea7.3b976"]]},{"id":"4384dea7.3b976","type":"ui_text","z":"a167f92c.0edfb8","group":"e46ac3bf.a5102","order":2,"width":0,"height":0,"name":"Up Next","label":"Up Next","format":"{{msg.payload}}","layout":"row-spread","x":600,"y":730,"wires":[]},{"id":"e46ac3bf.a5102","type":"ui_group","name":"Schedule","tab":"8a543792.8d4b28","order":1,"disp":true,"width":8,"collapse":false},{"id":"8a543792.8d4b28","type":"ui_tab","name":"Household","icon":"fa-home","order":1,"disabled":false,"hidden":false}]

You have to click on the inject node at the start to get things going. (As said on the node)

Then the button should work as you want. I hope.

Ah! The computer is behaving itself a bit more.

Here is a better version with the initial problem resolved.

[{"id":"20f58583.f8c112","type":"ui_button","z":"a167f92c.0edfb8","name":"New Button","group":"e46ac3bf.a5102","order":1,"width":0,"height":0,"passthru":false,"label":"{{msg.payload}}","tooltip":"Click When Finished Unloading and Loading Dishwasher","color":"","bgcolor":"","icon":"","payload":"X","payloadType":"str","topic":"","x":250,"y":670,"wires":[["5e0161ce.ab5ba8"]]},{"id":"b4613704.8bee88","type":"inject","z":"a167f92c.0edfb8","name":"Must do this first","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":250,"y":500,"wires":[["9302b57d.5e11a8","c3f5e64e.983958"]]},{"id":"9302b57d.5e11a8","type":"function","z":"a167f92c.0edfb8","name":"","func":"var todo = {\"0\":\"Idle\",\"1\":\"Start\",\"2\":\"Run\",\"3\":\"End\"}\n\nmsg.payload = todo;\n\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":420,"y":500,"wires":[["8930dd33.14d36"]]},{"id":"8930dd33.14d36","type":"change","z":"a167f92c.0edfb8","name":"","rules":[{"t":"set","p":"todo","pt":"flow","to":"payload","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":590,"y":500,"wires":[[]]},{"id":"5e0161ce.ab5ba8","type":"function","z":"a167f92c.0edfb8","name":"counter","func":"var counter = context.get(\"COUNTER\") || 0;\n\nvar y = counter;\n\ncounter = (counter + 1) %4;\ncontext.set(\"COUNTER\",counter);\n\nmsg.payload = y;\n\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":420,"y":670,"wires":[["f9887310.8a202","f47aaa25.335f88"]]},{"id":"f47aaa25.335f88","type":"function","z":"a167f92c.0edfb8","name":"","func":"var pointer = parseInt(msg.payload);\nvar todo = flow.get(\"todo\");\nvar next = (pointer + 1) %4;\nmsg1 = {};\n\n//node.warn(pointer);\n//node.warn(flow.get(\"todo\"));\n//node.warn(todo);\n\nmsg.payload = todo[pointer];\nmsg1.payload = todo[next];\n\nreturn [msg,msg1];","outputs":2,"noerr":0,"initialize":"","finalize":"","x":420,"y":750,"wires":[["8ecbb296.62a028","20f58583.f8c112"],["4384dea7.3b976"]]},{"id":"4384dea7.3b976","type":"ui_text","z":"a167f92c.0edfb8","group":"e46ac3bf.a5102","order":2,"width":0,"height":0,"name":"Up Next","label":"Up Next","format":"{{msg.payload}}","layout":"row-spread","x":620,"y":770,"wires":[]},{"id":"c3f5e64e.983958","type":"function","z":"a167f92c.0edfb8","name":"Set up","func":"var todo = flow.get(\"todo\");\n\n//node.warn(pointer);\n//node.warn(flow.get(\"todo\"));\n//node.warn(todo);\n\nmsg.payload = todo[0];\n\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":240,"y":580,"wires":[["20f58583.f8c112"]]},{"id":"e46ac3bf.a5102","type":"ui_group","name":"Schedule","tab":"8a543792.8d4b28","order":1,"disp":true,"width":8,"collapse":false},{"id":"8a543792.8d4b28","type":"ui_tab","name":"Household","icon":"fa-home","order":1,"disabled":false,"hidden":false}]
5

@Trying_to_learn This is exactly what i'm wanting to do!! Thank you!!

Now, if i can figure out how to store the last value somewhere that it can be picked up if the server restarts or the flow is redeployed.

6

Sorry I can't help you with that.

But I would start a new thread on just that topic: Storing context to file system.

Or: use the file nodes and write the state to a file and read it when the button is pressed.

Something like this:

(This does not work, it is only to show a way of doing it.)

[{"id":"b4613704.8bee88","type":"inject","z":"a167f92c.0edfb8","name":"Must do this first","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":260,"y":510,"wires":[["9302b57d.5e11a8","c3f5e64e.983958","16881c8c.946503"]]},{"id":"9302b57d.5e11a8","type":"function","z":"a167f92c.0edfb8","name":"","func":"var todo = {\"0\":\"Idle\",\"1\":\"Start\",\"2\":\"Run\",\"3\":\"End\"}\n\nmsg.payload = todo;\n\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":430,"y":510,"wires":[["6e381928.a2f788","8930dd33.14d36"]]},{"id":"16881c8c.946503","type":"trigger","z":"a167f92c.0edfb8","name":"","op1":"","op2":"0","op1type":"nul","op2type":"str","duration":"5","extend":false,"overrideDelay":false,"units":"s","reset":"","bytopic":"all","topic":"topic","outputs":1,"x":125,"y":590,"wires":[["dc332642.1d94c8"]],"l":false},{"id":"6e381928.a2f788","type":"file","z":"a167f92c.0edfb8","name":"","filename":"","appendNewline":true,"createDir":false,"overwriteFile":"false","encoding":"none","x":610,"y":510,"wires":[[]]},{"id":"20f58583.f8c112","type":"ui_button","z":"a167f92c.0edfb8","name":"New Button","group":"e46ac3bf.a5102","order":1,"width":0,"height":0,"passthru":false,"label":"{{msg.payload}}","tooltip":"Click When Finished Unloading and Loading Dishwasher","color":"","bgcolor":"","icon":"","payload":"X","payloadType":"str","topic":"","x":250,"y":670,"wires":[["5e0161ce.ab5ba8"]]},{"id":"dc332642.1d94c8","type":"file in","z":"a167f92c.0edfb8","name":"","filename":"","format":"utf8","chunk":false,"sendError":false,"encoding":"none","x":230,"y":590,"wires":[["20f58583.f8c112"]]},{"id":"5e0161ce.ab5ba8","type":"function","z":"a167f92c.0edfb8","name":"counter","func":"var counter = context.get(\"COUNTER\") || 0;\n\nvar y = counter;\n\ncounter = (counter + 1) %4;\ncontext.set(\"COUNTER\",counter);\n\nmsg.payload = y;\n\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":430,"y":670,"wires":[["f9887310.8a202","f47aaa25.335f88"]]},{"id":"f47aaa25.335f88","type":"function","z":"a167f92c.0edfb8","name":"","func":"var pointer = parseInt(msg.payload);\nvar todo = flow.get(\"todo\");\nvar next = (pointer + 1) %4;\nmsg1 = {};\n\n//node.warn(pointer);\n//node.warn(flow.get(\"todo\"));\n//node.warn(todo);\n\nmsg.payload = todo[pointer];\nmsg1.payload = todo[next];\n\nreturn [msg,msg1];","outputs":2,"noerr":0,"initialize":"","finalize":"","x":430,"y":750,"wires":[["8ecbb296.62a028","20f58583.f8c112"],["4384dea7.3b976"]]},{"id":"e5384b05.f9698","type":"inject","z":"a167f92c.0edfb8","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":240,"y":630,"wires":[["5e0161ce.ab5ba8"]]},{"id":"4384dea7.3b976","type":"ui_text","z":"a167f92c.0edfb8","group":"e46ac3bf.a5102","order":2,"width":0,"height":0,"name":"Up Next","label":"Up Next","format":"{{msg.payload}}","layout":"row-spread","x":620,"y":770,"wires":[]},{"id":"e46ac3bf.a5102","type":"ui_group","name":"Schedule","tab":"8a543792.8d4b28","order":1,"disp":true,"width":8,"collapse":false},{"id":"8a543792.8d4b28","type":"ui_tab","name":"Household","icon":"fa-home","order":1,"disabled":false,"hidden":false}]
7

There are some contrib nodes that do that (search flow library) or enable file backed context in the settings file.

8

@Steve-Mcl I have the file backed context enabled, and have that working now.

Thanks @Trying_to_learn for the great example that set me on the correct path to accomplish what i was trying to do!!

1 Like
9

No problems.

All the best.

10

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