node-red-dashboard provides an easy to access web UI for Node-Red. It uses Angular, Angular Material and JQuery all of which are available to work with. Most of the available nodes are fairly simple to use but the Template node is available to use for those times when the simple nodes are not enough. Using the Template node can be easy, see the documentation. However, it can get difficult very quickly.
I put this flow together to illustrate how to access the msg object that is passed to the Template node from a JavaScript block within the template. This gives you access to the msg object in the browser.
Node that interactions with the Dashboards you create happen in two parts. The first is when you initially load the Dashboard UI. This is a single page app (SPA) so all of the Dashboard nodes you've used will all contribute to the UI. You will get some initial data populated at this time.
The second part is when you send a new msg to one of the Dashboard nodes. This data is passed to the Dashboard SPA using websockets and triggers Angular to update its data model which updates the appropriate HTML elements in the app.
While that works well for most HTML elements, it doesn't help for script blocks you may have defined in the template. Script blocks (<script>...</script>) cannot be passed data in the usual way. For example, a simplistic template might be:
<h2>{{msg.topic}}</h2>
<div>{{msg.payload}}</div>Whenever you pass a new msg to the node, the display will update accordingly. But you cannot do:
<script>
console.log({{msg.payload}});
</script>That will only produce an error or nothing at all.
Thankfully, there is a way to access the msg from script and also to run scripts when the msg changes though it isn't exactly an obvious process! The following code will enable you to see what is going on and should be enough to let you write your own scripts:
<h3>Testing dynamic scripts with Dashboard 2.0</h3>
{{msg.payload}}
<script>
(function(scope) {
console.log('Position 1');
console.dir(scope);
scope.$watch('msg.payload', function(data) {
console.log('Position 2');
console.dir(data);
});
})(scope);
</script>Push some data into the template, switch to the Dashboard UI page and open your browser's console with F12.
You will see on the console output "Position 1" followed by the letter "b" (I've no idea why "b"!), this is the scope object and you can see that the scope object APPEARS to contain the msg object. Not so quick! Actually, when calling the console.dir(scope); line, the msg object does NOT exist, it appears to only because of the way the browser outputs the console commands. The reason for this is understood by looking at the next part.
What this does is to set a watch on the scope object for a sub-object scope.msg.payload, you will note from the console output that this is actually triggered twice and only on the second time is scope.msg.payload actually defined.
I'm not entirely certain why this happens but I think it is something to do with the way that Angular works. So don't forget to check that the watched object contains something useful before relying on it being there.
Anyway, the bottom line is that you can use the watch function to monitor the msg.payload (or of course the whole msg or something else suitable). The function will be triggered whenever you update the msg. Try having two inject nodes into the same template with different payloads and you will see what I mean. Each time you trigger, you will get a new console message - but ONLY if the payload actually changes, sending the same text twice for example will only trigger the function once.
You may have noted that using {{msg.payload}} in your Template only produces text and not formatted HTML, if you pass in HTML, it will be output verbatim.
Normally, getting Angular to output HTML is simply a case of wrapping in triple brackets {{{msg.payload}}} but this doesn't seem to work with Dashboard.
Instead, use the alternative syntax:
<div ng-bind-html="msg.payload"></div>
I would not have figured this out on my own. Thank you for this info.
Now I'm stuck on one last thing: how can I update the msg.payload from JavaScript so it shows up in node-red? Any help would be greatly appreciated.