2 questions in one post:) - ui messages and code

Dashboard
1

Hi everyone/anyone (especially E1cid)

Could someone possibly give me a very basic example of how to listen for messages in the ui template using 'scope.$watch'- there is an example in the help section of the node, but I can't quite understand it, which gives you some idea of who your're dealing with!

Something as simple as when a message payload is received a script is triggered and the value from the payload is passed into it.

The second question is I don't understand a lot of the answers on the forum, that is some of the answers/code provided are in recognisable html/javascript, but a lot are like this [{"id": "4e34........etc]. I know this is a stupid question, but what is this?

Kind regards and thanks for your time

Paul

2

Here is an example the complete msg is sent to the script, in the script scope.$value is set to msg.payload times 10.
this is shown in the div using {{$value}}.
Hope it helps

[{"id":"6567d73c.b95a18","type":"inject","z":"b779de97.b1b46","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"$ceil($random()*500)","payloadType":"jsonata","x":220,"y":1340,"wires":[["27576b17.de0624"]]},{"id":"27576b17.de0624","type":"ui_template","z":"b779de97.b1b46","group":"8b5cde76.edd58","name":"","order":8,"width":0,"height":0,"format":"<div>--{{$value}}--</div>\n<script>\n(function(scope) {\n  scope.$watch('msg', function(msg) {\n    if (msg) {\n      // Do something when msg arrives\n      \n      $(scope.$value = msg.payload * 100);\n    }\n  });\n})(scope);\n</script>\n\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":345,"y":1340,"wires":[["efa8201a.f96fc8"]],"l":false},{"id":"efa8201a.f96fc8","type":"debug","z":"b779de97.b1b46","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","statusVal":"","statusType":"auto","x":470,"y":1240,"wires":[]},{"id":"8b5cde76.edd58","type":"ui_group","name":"","tab":"8f03e639.85956","order":1,"disp":true,"width":"12","collapse":false},{"id":"8f03e639.85956","type":"ui_tab","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]

The second question

this is a json json - Google Search . It is the import/export format of a flow or node/s

3

Hi @paulalsmith1000

when you see some code that looks like [{"id": "4e34........etc], you are looking at Node-RED flow JSON. That is how node-red flows are encoded.

You can copy that JSON and import it into your own Node-RED instance by opening the Import Dialog (Ctrl-I, or the Import menu option).

4

Hello again

Perfect, thank you so much. Its all becoming clear!

If I could just ask 1 more question I should be able to find my own way for a while.

Could you tell me what is wrong with the below? When I inject a number I expect the picture to rotate, but alas nothing happens:

<div>
    
  <img id="img" src="http://hailshamhistoricalsociety.co.uk/images/Museum-entrance.png" />  
    
</div>


<script>
        
(function(scope) {
  scope.$watch('msg', function(msg) {
    if (msg) {
      // Do something when msg arrives
      
      $(scope.$value = msg.payload);
    }
  });
})(scope);

document.querySelector("#img").style.transform = {{$value}};
</script>

Thanks again

Paul

5

If you put console.log("some message") at various places you will see the code in if(msg){...} Runs each time a message arrives where as the document.querySelector code only runs once.

Move the document.querySelector code inside the if(msg){...} part.

6

Hi Steve

Thanks for your reply, I thought that might be the case, I tried it like this:-

[{"id":"6567d73c.b95a18","type":"inject","z":"b779de97.b1b46","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"$ceil($random()*500)","payloadType":"jsonata","x":220,"y":1340,"wires":[["27576b17.de0624"]]},{"id":"27576b17.de0624","type":"ui_template","z":"b779de97.b1b46","group":"8b5cde76.edd58","name":"","order":8,"width":0,"height":0,"format":"<div>--{{$value}}--</div>\n<script>\n(function(scope) {\n  scope.$watch('msg', function(msg) {\n    if (msg) {\n      // Do something when msg arrives\n      \n      $(scope.$value = msg.payload * 100);\n    }\n  });\n})(scope);\n</script>\n\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":345,"y":1340,"wires":[["efa8201a.f96fc8"]],"l":false},{"id":"efa8201a.f96fc8","type":"debug","z":"b779de97.b1b46","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","statusVal":"","statusType":"auto","x":470,"y":1240,"wires":[]},{"id":"8b5cde76.edd58","type":"ui_group","name":"","tab":"8f03e639.85956","order":1,"disp":true,"width":"12","collapse":false},{"id":"8f03e639.85956","type":"ui_tab","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]

It still doesn't work though sadly?

Kind regards

Paul

7

It wont, you arent doing anything with the payload...

<div>--{{$value}}--</div>
<script>
(function(scope) {
  scope.$watch('msg', function(msg) {
    if (msg) {
      // Do something when msg arrives
      
      $(scope.$value = msg.payload * 100); // << where is the document.querySelector code?
    }
  });
})(scope);
</script>

Try changing it to...

<div>
  <img id="img" src="http://hailshamhistoricalsociety.co.uk/images/Museum-entrance.png" />  
</div>
<script>
(function(scope) {
  scope.$watch('msg', function(msg) {
    if (msg && msg.topic == "rotate") {
      // Do something when msg arrives with topic "rotate"
      document.getElementById("img").style.transform = "rotate(" + msg.payload + "deg)";
    }
  });
})(scope);
</script>

Demo flow...

[{"id":"6567d73c.b95a18","type":"inject","z":"5e6c8b.7f38b374","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"rotate","payload":"$ceil($random()*500)","payloadType":"jsonata","x":738,"y":1808,"wires":[["27576b17.de0624"]]},{"id":"27576b17.de0624","type":"ui_template","z":"5e6c8b.7f38b374","group":"8b5cde76.edd58","name":"","order":8,"width":"12","height":"9","format":"<div>\n  <img id=\"img\" src=\"http://hailshamhistoricalsociety.co.uk/images/Museum-entrance.png\" />  \n</div>\n<script>\n(function(scope) {\n  scope.$watch('msg', function(msg) {\n    if (msg && msg.topic == \"rotate\") {\n      // Do something when msg arrives with topic \"rotate\"\n      document.getElementById(\"img\").style.transform = \"rotate(\" + msg.payload + \"deg)\";\n    }\n  });\n})(scope);\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":863,"y":1808,"wires":[["efa8201a.f96fc8"]],"l":false},{"id":"efa8201a.f96fc8","type":"debug","z":"5e6c8b.7f38b374","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","statusVal":"","statusType":"auto","x":998,"y":1808,"wires":[]},{"id":"8b5cde76.edd58","type":"ui_group","name":"","tab":"8f03e639.85956","order":1,"disp":true,"width":"12","collapse":false},{"id":"8f03e639.85956","type":"ui_tab","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]

image

8

Hi Steve

Wow thank you very much, that's brilliant.

(And from earlier in the thread I now know how to import the JSON)

Kindest regards and thanks for everyones help

Paul