7. Adding a Template Node
The template node is a generic node that takes valid HTML and Angular/Angular-Material directives and can be used to create a dynamic user interface element.
Next, we can drag and drop a template node into the canvas. This will be used to monitor our motors' RPMs for the water filtration system in a customized table format.
Double-click on the template node and add the following code along with making the parameter changes shown below
1
<div layout="row" layout-align="start center">
2
<span flex style="font-size: 15px"><b>RPM Min</b></span>
3
<span flex style="font-size: 15px"><b>RPM Max</b></span>
4
<span flex style="font-size: 15px"><b>Failure Prob</b></span>
5
<span flex style="font-size: 15px"><b>Machine type</b></span>
6
</div>
7
<div layout="row" layout-align="start center" ng-repeat="machine in msg.payload.factory">
8
<span flex style="color: green">{{machine.min}}</span>
9
<span flex style="color: red">{{machine.max}}</span>
10
<span flex style="color: white">{{machine.failProb}}%</span>
11
<span flex style="color: white">{{machine.name}}</span>
12
</div>
Copied!
After parameters have been changed, click Done.
This HTML code block will display a table with 4 columns and 3 rows displaying the min and max values for your motors along with the failure probability and type.
Last modified 1yr ago
Copy link