How to auto detect payload using UI template

General
1

Hello,
I'm using node-red UI template, I have created a web page in wish I send a msg.payload and a msg.topic that should be displayed on my web page.
the probleme is when I click a button to send a new payload, the web page stay the same and don't make a change untill I reload the whole page, here is the sript:

<script>
 <script>
(function(scope) {
  scope.$watch('msg', function(msg) {
    if (msg) {
      var x = document.getElementsByClassName("grid-container");
        x[4].setAttribute('src', msg.payload); 
      $("#my_"+scope.$id).html(msg.payload);
    }
  });
})(scope);
        

</script>

(admin edit: wrap code in backticks)

2

Script is MIA

3

Hi Gunner,
i cannot understand what do you mean by "Script is MIA' ?

4

He probably responded right after you first posted and before you edited the post to add the script.

When you say

are you clicking a button in the editor or on the dashboard?

1 Like
5

Zenofmud,
I'm using a button from Dashboard.

6

It would be useful if you provided a flow with an example of what is happening

7

Missing in Action :slight_smile: You hadn't formatted the script using the </> icon in the editor, so it somehow didn't show... a moderator later fixed that

Please do the same thing with the </> when posting your flow.

8

here is the JSON code:
[{"id":"17b225.849d7ddb","type":"tab","label":"MY FLOW","disabled":false,"info":""},{"id":"6fd3a097.203b4","type":"function","z":"17b225.849d7ddb","name":"","func":"\nvar called_number = flow.get("called_number")||1;\nvar sender = msg.topic;\n\n\nif (msg.payload === "RESET") {\n // set its value locally\n called_number= 0;\n} else if (msg.payload === "INCREMENT") {\n called_number++;\n} else if (msg.payload === "DECREMENT") {\n called_number--;\n}\n else if (msg.payload === "RECALL") {\n called_number = called_number;\n}\n \n\nflow.set('called_number',called_number);\n\n\nmsg.payload = called_number;\nmsg.topic = sender;\n\n\nreturn [msg,msg];\n","outputs":2,"noerr":0,"initialize":"","finalize":"","libs":,"x":500,"y":220,"wires":[["49ee934f.00564c","d7cf85d7.f4c4d8"],["49ee934f.00564c","d7cf85d7.f4c4d8"]]},{"id":"aafb1f67.edb04","type":"ui_button","z":"17b225.849d7ddb","name":"DECREMENT","group":"7d4ccedf.77128","order":1,"width":"6","height":"2","passthru":true,"label":"BACK","tooltip":"","color":"","bgcolor":"BLUE","icon":"","payload":"DECREMENT","payloadType":"str","topic":"3","topicType":"str","x":140.5,"y":230,"wires":[["6fd3a097.203b4"]]},{"id":"b22edb44.a68ee8","type":"ui_button","z":"17b225.849d7ddb","name":"INCREMENT","group":"7d4ccedf.77128","order":1,"width":"6","height":"2","passthru":true,"label":"NEXT","tooltip":"","color":"","bgcolor":"GREEN","icon":"","payload":"INCREMENT","payloadType":"str","topic":"1","topicType":"str","x":123.5,"y":157,"wires":[["6fd3a097.203b4"]],"info":"** NEXT_ NEXT_**"},{"id":"83578137.813b2","type":"ui_button","z":"17b225.849d7ddb","name":"RECALL","group":"7d4ccedf.77128","order":1,"width":"6","height":"2","passthru":true,"label":"RECALL","tooltip":"","color":"","bgcolor":"ORANGE","icon":"","payload":"RECALL","payloadType":"str","topic":"2","topicType":"str","x":117.5,"y":193,"wires":[["6fd3a097.203b4"]]},{"id":"49ee934f.00564c","type":"ui_template","z":"17b225.849d7ddb","group":"6d065ea9.ec5f4","name":"","order":1,"width":0,"height":0,"format":"\n\n\n\n\n* {\n box-sizing: border-box;\n}\n\n.grid-container {\n display: grid;\n grid-template-columns: auto auto auto ;\n grid-gap: 10px;\n background-color:gray; /#2196F3;/\n padding: 10px;\n}\n\n.grid-container > div {\n background-color: rgba(255, 255, 255, 0.8);\n text-align: center;\n padding: 20px 0;\n font-size: 60px;\n}\n\n\n\n\n\n\n<h1 id =" welcome">MY HOME PAGE\n\n\n\n<div class="grid-container">\n <div class="item1">{{msg.topic}}\n <div class="item2">{{msg.payload}}\n \n\n\n\n\n\n\n\n\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":768.5,"y":128,"wires":[]},{"id":"d7cf85d7.f4c4d8","type":"debug","z":"17b225.849d7ddb","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":690,"y":240,"wires":},{"id":"7d4ccedf.77128","type":"ui_group","name":"Caller","tab":"1c81a733.812339","order":1,"disp":true,"width":"6","collapse":false},{"id":"6d065ea9.ec5f4","type":"ui_group","name":"Default","tab":"98d52966.1afc88","order":1,"disp":true,"width":"6","collapse":false},{"id":"1c81a733.812339","type":"ui_tab","name":"BUTTONS","icon":"dashboard","disabled":false,"hidden":false},{"id":"98d52966.1afc88","type":"ui_tab","name":"MYTAB","icon":"dashboard","disabled":false,"hidden":false}]

9

Apparently ability to follow directions is also MIA :thinking:

10

After looking at your flow, I need to ask you a few questions
1 - why don't you use a ui_text node to display the data and customize it with CSS?
2 - why are you sending two msg's out of the function node?
3 - why does the dashboard display two numeric blocks when msg.payload only goes to one?
4 - Why is the script in your first post different than what you have sent in your flow?
5 - How much HTML experience do you have.
6 - How much experience do you have with 'Angular/Angular-Material directives'?

Be sure to answer ALL of the questions. Thanks!

11

Zenofmud,
1 - why don't you use a ui_text node to display the data and customize it with CSS?
Actually, I did it but I didnot succeeded because I have mutiple dashboard component and I don't know how to style each by each with CSS.
2 - why are you sending two msg's out of the function node?
3- why does the dashboard display two numeric blocks when msg.payload only goes to one?
The first output sends msg.payload, the second sends the msg.topic (I worked with this solution because at first of the project I tried to use two ui_text, one for payload the second for topic)
4- Why is the script in your first post different than what you have sent in your flow?
I tried to simplifu things for others to understand what I exactly need and give help
5- How much HTML experience do you have.
I'm familiar with html and I can understand code that I receive or I write
6-- How much experience do you have with 'Angular/Angular-Material directives'?
I have no idea about Angular and that's why

12

And what is the answer to number 2?

One thing you need to know is that you are NOT building a web page you are building part of the web page NR is creating. If you want to build a web page and control everything then you should take a look at node-red-contrib-uibuilder.

If using node-red-dashboard, in the ui-template node you don't want , and statements

Your script section has two statements

the function node is sending the same msg out the two outputs and tehy go to the same nodes, so the nodes are getting the same message twice.

You need to do some research on angular, and if you want to use the ui-template node, this video is a good starting point.

Here is a rough example of using ui-text nodes to do what you want

[{"id":"17b225.849d7ddb","type":"tab","label":"MY FLOW","disabled":false,"info":""},{"id":"6fd3a097.203b4","type":"function","z":"17b225.849d7ddb","name":"","func":"\nvar called_number = flow.get(\"called_number\")||1;\nvar sender = msg.topic;\n\n\nif (msg.payload === \"RESET\") {\n   // set its value locally\n   called_number= 0;\n} else if  (msg.payload === \"INCREMENT\") {\n   called_number++;\n} else if (msg.payload === \"DECREMENT\") {\n   called_number--;\n}\n  else if (msg.payload === \"RECALL\") {\n   called_number = called_number;\n}\n  \n\nflow.set('called_number',called_number);\n\n\nmsg.payload = called_number;\nmsg.topic = sender;\n\n\nreturn msg;\n","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":500,"y":220,"wires":[["49ee934f.00564c","d7cf85d7.f4c4d8","21b1e7d2.1d8818","afd178c3.e98708"]]},{"id":"aafb1f67.edb04","type":"ui_button","z":"17b225.849d7ddb","name":"DECREMENT","group":"7d4ccedf.77128","order":1,"width":"6","height":"2","passthru":true,"label":"BACK","tooltip":"","color":"","bgcolor":"BLUE","icon":"","payload":"DECREMENT","payloadType":"str","topic":"3","topicType":"str","x":140.5,"y":230,"wires":[["6fd3a097.203b4"]]},{"id":"b22edb44.a68ee8","type":"ui_button","z":"17b225.849d7ddb","name":"INCREMENT","group":"7d4ccedf.77128","order":2,"width":"6","height":"2","passthru":true,"label":"NEXT","tooltip":"","color":"","bgcolor":"GREEN","icon":"","payload":"INCREMENT","payloadType":"str","topic":"1","topicType":"str","x":123.5,"y":157,"wires":[["6fd3a097.203b4"]],"info":"** NEXT_ NEXT_**"},{"id":"83578137.813b2","type":"ui_button","z":"17b225.849d7ddb","name":"RECALL","group":"7d4ccedf.77128","order":3,"width":"6","height":"2","passthru":true,"label":"RECALL","tooltip":"","color":"","bgcolor":"ORANGE","icon":"","payload":"RECALL","payloadType":"str","topic":"2","topicType":"str","x":117.5,"y":193,"wires":[["6fd3a097.203b4"]]},{"id":"49ee934f.00564c","type":"ui_template","z":"17b225.849d7ddb","group":"6d065ea9.ec5f4","name":"","order":1,"width":0,"height":0,"format":"\n<style>\n* {\n  box-sizing: border-box;\n}\n#MYTAB_info_cards {\n  display: grid;\n  grid-template-columns: auto auto auto ;\n  grid-gap: 10px;\n  background-color:gray; /*#2196F3;*/\n  padding: 10px;\n}\n.nr-dashboard-text {\n  background-color: rgba(255, 255, 255, 0.8);\n  text-align: center;\n  padding: 20px 0;\n  font-size: 60px;\n}\n\n</style>\n\n<h1 id =\" welcome\">MY HOME PAGE</h1>\n\n\n\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":700,"y":100,"wires":[[]]},{"id":"d7cf85d7.f4c4d8","type":"debug","z":"17b225.849d7ddb","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":530,"y":320,"wires":[]},{"id":"21b1e7d2.1d8818","type":"ui_text","z":"17b225.849d7ddb","group":"6d065ea9.ec5f4","order":3,"width":"2","height":"2","name":"counter","label":"","format":"{{msg.payload}}","layout":"col-center","x":880,"y":180,"wires":[]},{"id":"53e8f11.d646d9","type":"ui_text","z":"17b225.849d7ddb","group":"6d065ea9.ec5f4","order":2,"width":"2","height":"2","name":"caller","label":"","format":"{{msg.payload}}","layout":"col-center","x":750,"y":160,"wires":[]},{"id":"afd178c3.e98708","type":"change","z":"17b225.849d7ddb","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"topic","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":720,"y":240,"wires":[["53e8f11.d646d9"]]},{"id":"7d4ccedf.77128","type":"ui_group","name":"Caller","tab":"1c81a733.812339","order":1,"disp":true,"width":"6","collapse":false},{"id":"6d065ea9.ec5f4","type":"ui_group","name":"Default","tab":"98d52966.1afc88","order":1,"disp":true,"width":"6","collapse":false},{"id":"1c81a733.812339","type":"ui_tab","name":"BUTTONS","icon":"dashboard","disabled":false,"hidden":false},{"id":"98d52966.1afc88","type":"ui_tab","name":"MYTAB","icon":"dashboard","disabled":false,"hidden":false}]
13

thank you zenofmud,
this was the first thing I did and got bad results as ui_text cannot not be customised (you cannot display only Label or only Value, you have to display them both so in my project I have 10 ui_text to be used and should be arranged as a table so I need only one label that should be displayed)
I think better is to learn Angular, use UI builder or switch to another tools than NR
I attached here the table that I would display on my webpage that Chromium will display on startup, we will then connect other pc to the same LAN of Raspberry pi and each pc open NR dashboard, when a click on any button, the Chromium web page must detect this click and display the msg.payload and msg.topic immediately on the table as show on the picture attached.

NR
NR1366Ă—768 14.4 KB

14

I replaced a dashboard button with an inject node, it works well means the value on the web page changes immediately when I click on the inject node but when I click on the dashboard button, it did not change untill I make a refresh for the web page.

15

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