Replace Dashboard button with uibuilder button

General
1

I am moving from Dashboard to uibuilder for the user interface. Now I need to replace my Dashboard button with uibuilder button. So that it can continue to trigger my other nodes connected to the dashboard button.
My example Flow:

[{"id":"f3c48170.d695b8","type":"ui_text","z":"1222844e.dd0a4c","group":"27877987.9558de","order":1,"width":0,"height":0,"name":"","label":"Card Remaining","format":"{{msg.payload}}","layout":"row-spread","x":420,"y":2260,"wires":[]},{"id":"95bb4648.968fa8","type":"ui_text_input","z":"1222844e.dd0a4c","name":"","label":"Please enter RFID card no:","tooltip":"","group":"27877987.9558de","order":2,"width":0,"height":0,"passthru":true,"mode":"text","delay":300,"topic":"sensor_data","x":1180,"y":2340,"wires":[[]]},{"id":"574f75d4.c327cc","type":"function","z":"1222844e.dd0a4c","name":"Switching","func":"//var x = flow.get('card_required');\nvar counter_m = msg.payload;\n    counter_m = counter_m- 1;\n    if(counter_m < 0){\n        msg.payload = counter_m;\n    }\n\nmsg.payload = counter_m;\nflow.set('counter_m',msg.payload);\nvar i=1;\nflow.set('tempOP',i);\nreturn msg;\n\n","outputs":1,"noerr":0,"x":520,"y":2160,"wires":[["dddbd1ac.3232b"]]},{"id":"5c75f0a8.4b7918","type":"switch","z":"1222844e.dd0a4c","name":"Switch","property":"payload","propertyType":"msg","rules":[{"t":"gt","v":"0","vt":"num"},{"t":"lte","v":"0","vt":"num"}],"checkall":"true","repair":false,"outputs":2,"x":590,"y":2320,"wires":[["f3c48170.d695b8","574f75d4.c327cc","ba9c8d7d.ced4d"],["2a0f247c.b70b84"]]},{"id":"dddbd1ac.3232b","type":"ui_button","z":"1222844e.dd0a4c","name":"","group":"27877987.9558de","order":0,"width":0,"height":0,"passthru":false,"label":"Card Submit ","tooltip":"","color":"","bgcolor":"","icon":"","payload":"counter_m","payloadType":"flow","topic":"","x":730,"y":2160,"wires":[["5c75f0a8.4b7918","fc1235ed.20cdd8"]]},{"id":"2a0f247c.b70b84","type":"change","z":"1222844e.dd0a4c","name":"","rules":[{"t":"set","p":"enabled","pt":"msg","to":"false","tot":"bool"}],"action":"","property":"","from":"","to":"","reg":false,"x":700,"y":2380,"wires":[["dddbd1ac.3232b"]]},{"id":"246107d4.346468","type":"change","z":"1222844e.dd0a4c","name":"","rules":[{"t":"set","p":"enabled","pt":"msg","to":"true","tot":"bool"}],"action":"","property":"","from":"","to":"","reg":false,"x":500,"y":2100,"wires":[["dddbd1ac.3232b"]]},{"id":"ba9c8d7d.ced4d","type":"function","z":"1222844e.dd0a4c","name":"","func":"var counter = flow.get('counter_m');\nvar card= msg.payload;\nflow.set('card_number',card);\n msg.payload = card;\nreturn msg;\n\n","outputs":1,"noerr":0,"x":990,"y":2340,"wires":[["95bb4648.968fa8"]]},{"id":"88b8febc.f7096","type":"function","z":"1222844e.dd0a4c","name":"Quantity Count","func":"flow.set('card_required_m',msg.payload);\nreturn msg;\n","outputs":1,"noerr":0,"x":280,"y":2160,"wires":[["f3c48170.d695b8","246107d4.346468","574f75d4.c327cc"]]},{"id":"10325ecf.b03a59","type":"mqtt in","z":"1222844e.dd0a4c","name":"","topic":"totalrfid/medium","qos":"2","datatype":"auto","broker":"f98a1211.7bb178","x":100,"y":2160,"wires":[["88b8febc.f7096"]]},{"id":"dfd0e046.9a063","type":"mqtt in","z":"1222844e.dd0a4c","name":"","topic":"operatorETS/CardNo","qos":"2","datatype":"auto","broker":"f98a1211.7bb178","x":800,"y":2260,"wires":[["ba9c8d7d.ced4d"]]},{"id":"5af0b8fa.0f5778","type":"mysql","z":"1222844e.dd0a4c","mydb":"47c5bd75.739af4","name":"MYSQL","x":1460,"y":2180,"wires":[["54e272fa.1a82dc"]]},{"id":"54e272fa.1a82dc","type":"debug","z":"1222844e.dd0a4c","name":"","active":true,"console":"false","complete":"false","x":1610,"y":2180,"wires":[]},{"id":"7ece52e2.3a719c","type":"function","z":"1222844e.dd0a4c","name":"tbl_ets_demo_process","func":"\nvar A = flow.get('tempOP');\nvar B = flow.get('operatorETSCardNo');\nvar C = flow.get('Order_ID');\nvar D = flow.get('Bsize');\n  \nvar newMsg = {\n \"topic\": \"INSERT INTO tbl_ets_demo_process (`OperationID`,`CardNo`,`SampleRefNo`,`CardQty`) VALUES ( \" + A + \",\" + B + \", \" + C + \",\" + D + \")\"\n}\nA = A+1;\nflow.set('tempOP',A);\nreturn [newMsg];\n//INSERT INTO `processed_input`(`order_id`, `total_small_size`, ` total_medium_size`, ` total_large_size`, ` total_xl_size`, `small_card_qty`, `medium_card_qty`, `large_card_qty`, `xl_card_qty`) VALUES ([value-1],[value-2],[value-3],[value-4],[value-5],[value-6],[value-7],[value-8],[value-9])\n\n//INSERT INTO `operator_input`(`order_id`, `buyer_name`, `color`, `small_size`, `medium_size`, `large_size`, `xl_size`, `no_of_ply`, `bundle_size`) VALUES ([value-1],[value-2],[value-3],[value-4],[value-5],[value-6],[value-7],[value-8],[value-9])","outputs":1,"noerr":0,"x":1280,"y":2180,"wires":[["5af0b8fa.0f5778"]]},{"id":"b7a5643.a14c498","type":"while-loop","z":"1222844e.dd0a4c","name":"while-loop","condi":"msg.payload > 0","x":1040,"y":2160,"wires":[["1c28f3c4.9d330c"],["1e616e9.a26b091","7ece52e2.3a719c"]]},{"id":"1e616e9.a26b091","type":"change","z":"1222844e.dd0a4c","name":"msg.payload--","rules":[{"t":"set","p":"payload","pt":"msg","to":"$number(msg.payload) -1","tot":"jsonata"}],"action":"","property":"","from":"","to":"","reg":false,"x":1040,"y":2240,"wires":[["b7a5643.a14c498"]]},{"id":"fc1235ed.20cdd8","type":"function","z":"1222844e.dd0a4c","name":"","func":"\nvar card=flow.get('opID');\nmsg.payload = card;\n\nreturn [msg];\n","outputs":1,"noerr":0,"x":890,"y":2160,"wires":[["b7a5643.a14c498"]]},{"id":"1c28f3c4.9d330c","type":"function","z":"1222844e.dd0a4c","name":"Count Reset","func":"\nvar A = flow.get('tempOP');\nA = 1;\nflow.set('tempOP',A);\nmsg.payload = A;\n\nreturn msg;\n","outputs":1,"noerr":0,"x":1250,"y":2140,"wires":[["5dda7b7c.63c014"]]},{"id":"5dda7b7c.63c014","type":"debug","z":"1222844e.dd0a4c","name":"","active":false,"console":"false","complete":"false","x":1450,"y":2120,"wires":[]},{"id":"27877987.9558de","type":"ui_group","z":"","name":"Medium Size","tab":"2fb75c1d.35a72c","order":6,"disp":true,"width":"6","collapse":false},{"id":"f98a1211.7bb178","type":"mqtt-broker","z":"","name":"","broker":"localhost","port":"1883","clientid":"","usetls":false,"compatmode":true,"keepalive":"60","cleansession":true,"birthTopic":"","birthQos":"0","birthRetain":"false","birthPayload":"","closeTopic":"","closeQos":"0","closeRetain":"false","closePayload":"","willTopic":"","willQos":"0","willRetain":"false","willPayload":""},{"id":"47c5bd75.739af4","type":"MySQLdatabase","z":"","host":"localhost","port":"3306","db":"etsiot","tz":""},{"id":"2fb75c1d.35a72c","type":"ui_tab","z":"","name":"Issue Card","icon":"dashboard","order":1,"disabled":false,"hidden":false}]

uibuilder interface:

image
image.png782×441 8.07 KB

I am getting different values from different button press:
image

Thanks in advance.

2

What is your question ?

3

I want to trigger/replace dashboard button with uibuilder button press. How can I do it?

4

From the help for the Dashboard button:

If set to pass through mode a message arriving on the input will act like pressing the button. The output payload will be as defined in the node configuration.

So unless you've added a Dashboard Template node with a script that does processing of the Dashboard button in the front-end (e.g. the users browser), you don't need to do anything other than connect the output of uibuilder to whatever your Dashboard button is connected to.

image
image1057×143 11.7 KB

Add this to the methods section of your uibuilder index.js:

        sendMe: function() {
            uibuilder.send({topic:'sentFromUibuilder',payload:'BUTTONPRESSED'})
        },

and this to index.html:

<b-button pill variant="secondary" v-on:click="sendMe">Send Me</b-button>

Here is the example flow:

[{"id":"903c5b81.6c3188","type":"inject","z":"18cb249f.38bafb","name":"","topic":"TESTING-UIB","payload":"{\"fan_kleine_kamer\":{\"onoff\":\"off\",\"value\":\"Off\"}}","payloadType":"json","repeat":"60","crontab":"","once":true,"onceDelay":0.1,"x":190,"y":580,"wires":[["963f6e2c.6d318"]]},{"id":"1002cdc9.9a0522","type":"debug","z":"18cb249f.38bafb","name":"","active":false,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","x":670,"y":560,"wires":[]},{"id":"963f6e2c.6d318","type":"uibuilder","z":"18cb249f.38bafb","name":"uib1","topic":"","url":"uib","fwdInMessages":false,"allowScripts":false,"allowStyles":true,"copyIndex":true,"showfolder":false,"x":510,"y":580,"wires":[["1002cdc9.9a0522","b2f1eaa2.6a0d18"],["33d6816c.a2ecde"]]},{"id":"33d6816c.a2ecde","type":"debug","z":"18cb249f.38bafb","name":"","active":false,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","x":670,"y":600,"wires":[]},{"id":"6e0aeacb.f85b34","type":"link in","z":"18cb249f.38bafb","name":"uib","links":["338fe20e.adb5ce"],"x":335,"y":540,"wires":[["963f6e2c.6d318"]]},{"id":"c5a714c6.580c98","type":"ui_button","z":"18cb249f.38bafb","name":"","group":"291887c4.c02358","order":3,"width":0,"height":0,"passthru":false,"label":"Test","tooltip":"","color":"","bgcolor":"","icon":"","payload":"BUTTONPRESSED","payloadType":"str","topic":"SentFromDashboardButton","x":810,"y":520,"wires":[["b2f1eaa2.6a0d18"]]},{"id":"b2f1eaa2.6a0d18","type":"debug","z":"18cb249f.38bafb","name":"DO SOMETHING CRAZY","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","x":1010,"y":560,"wires":[]},{"id":"291887c4.c02358","type":"ui_group","z":"","name":"Default","tab":"408c6142.3e537","disp":true,"width":"6","collapse":false},{"id":"408c6142.3e537","type":"ui_tab","z":"","name":"TEST","icon":"dashboard","order":1,"disabled":false,"hidden":false}]

And here is the output:

image

5

Ooh, spot the bug!

The output from uibuilder should have included a topic!

That's annoying. Fix incoming :slight_smile:

2 Likes
6

No, panic over - I hadn't reloaded the page :grimacing:

I've updated the output image above.

7

@TotallyInformation
I think, my question is not clear enough. Please look at the following image.

image
image.png1270×237 36 KB

I have this dashboard button. Which triggers some payload to its next node. So I am going to remove this button and replace it with the uibuilder button.
Which will do the same job as this dashboard button. This is the dashboard button config:
image
image.png516×747 16 KB

So the question is How can I replace the dashboard button with the uibuilder button?
I think it's something simple but I am anyhow missing. Thanks!

8

A suitable button is included in my previous example. Take out your Dashboard button and add a uibuilder node that includes a button. Change the method function of that button to return what you like. Wire the node into the same place as your button.

I assume from the output of your Dashboard button, that you are feeding in a value that is then incremented and output straight to the flow.counter_m variable?

If you want to replicate that in uibuilder, create a data variable in index.js to hold the count, make sure that the input to the uibuilder node has something (topic maybe?) that lets uibuilderfe identify the incoming data as the counter variable, listen for that in your change function and update your data variable accordingly. All the button needs to do is +1 to that data variable and then send it back to Node-RED in the msg payload. That is all done in the method.

You will need to add a change node after the uibuilder node in order to feed the output counter to your flow variable. I would generally recommend that anyway even for Dashboard since the way you have it at the moment is quite opaque and would be hard to understand when you come back to it in 6 months.

The only other things to take note of here when converting from Dashboard to uibuilder are:

  • uibuilder uses a single node rather than Dashboards many nodes. The liberal use of link nodes is recommended.
  • because a single node is used, you must uniquely identify any data you send to uibuilder so that the front-end code knows what to do with it. Typically, you use the msg.topic to do that but you don't have to, any property can be used.
1 Like