Template UI and variables in Node-RED

Question

This is my function node:

var myfoo1 = global.get("v1");
var myfoo2 = global.get("v2");
msg.payload=[myfoo1,myfoo2];
//myfoo1 is an array of objects
//myfoo2 is also an array of objects
return msg;

This is my template UI node:

<html>
    <body>
<canvas id="myChart" width="400" height="400"></canvas>
<script>
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: myfoo1, //Don't work myfoo1
        datasets: [{
            label: '# of',
            data: myfoo2,//Don't work myfoo2
            borderWidth: 1
        }]
    },
});
</script>
</body>
</html>

In my template UI node I would use the arrays of my function node ?

Is this the template node from the Dashboard-UI package or the core template node? — hardillb, Jul 23 '18 at 19:32
What is actually your question ? Or alternatively what is exactly the problem you want to fix? — JanVdA, Jul 24 '18 at 11:33
In my template UI node I would use the arrays of my function node. — etudiante, Jul 24 '18 at 12:02

score 2 · Answer 1 · answered Jul 23 '18 at 19:44

Keep in mind that your template node is rendered once, and will then later receive messages from your function node. Your myfoo1 and myfoo2 variables won't even exist when the template is first rendered.

Your template needs to watch for those messages to arrive, then update its UI each time that happens. There's an example of this process in the template node's documentation panel:

<div id="{{'my_'+$id}}" style="{{'color:'+theme.base_color}}">
  Some text
</div>

<script>
console.log("ID",scope.$id);
console.log("THEME",scope.theme);
(function(scope) {
  scope.$watch('msg', function(msg) {
    if (msg) {
      // Do something when msg arrives
      $("#my_"+scope.$id).html(msg.payload);
    }
  });
})(scope);
</script>

By watching for incoming messages from your function node using this method, you can then refer to msg.myfoo1 or msg.myfoo2 to update your chart each time new data arrives.

Template UI and variables in Node-RED

1 Answers1