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

Dashboard
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