IoTFlows
  • Welcome to IoTFlows Docs
  • IoTFlows
  • Console
  • REST API
  • Device Management & Secure Remote Access
    • 1. Connect a device to the cloud or create a virtual device
    • 2. SSH to your device over the internet
    • 3. Transfer files to your device over the internet
    • 4. Remotely access Node-RED on your device
    • 5. Create public links for local web-apps
  • Real-Time Data Streams, Alerts, and Actions
    • Create a Device API Key
    • Publish and subscribe to real-time messages with Node-RED
    • Creating an Alert Channel
    • Publish an Alert with Node-RED
    • Define and execute an Action in Node-RED
    • Python real-time SDK
    • Javascript real-time SDK
  • Cloud Node-RED Servers
    • Create a secure Cloud Node-RED Server in five minutes
    • Subscribe to data streams with a Cloud Node-RED Server
    • Integrate data streams to Node-RED dashboard
    • Integrate data streams to Slack
  • IOTFLOWS OVERVIEW
    • IoTFlows Roles and Permissions
    • Adding Team Members
  • Example Projects
    • Raspberry Pi as Gateway
      • Arduino to Raspberry Pi Serial Communication for Ultrasonic Sensor
    • Getting Started with Node-Red Dashboard
      • Installing Node-Red Dashboard
      • Accessing Node-Red Dashboard
      • 1. Creating a Page
      • 2. Adding Gauge Nodes
      • 3. Changing Dashboard Themes
      • 4. Adding Data to Gauge Nodes
      • 5. Adding a Chart Node
      • 6. Adding Data to Chart Node
      • 7. Adding a Template Node
      • 8. Adding Data to Template Node
      • 9. Adding Switch Node
      • 10. Adding Logic to Switch Node
      • 11. Adding a Slider Node
      • 12. Adding a Color Picker Node
      • 13. Adding a Numeric Node
      • 14. Adding a Button Node
      • 15. Adding Logic to a Button Node
      • Node-Red Dashboard Code
    • Publishing Data Streams from Python
    • Ultrasonic Sensor on Raspberry Pi Node-Red
  • General
    • Downloading IoTFlows Node-Red Nodes
    • Publishing Alert from Node-Red Manual
    • Publishing Data Stream from Node-Red Manual
Powered by GitBook
On this page

Was this helpful?

  1. Example Projects
  2. Getting Started with Node-Red Dashboard

7. Adding a Template Node

Previous6. Adding Data to Chart NodeNext8. Adding Data to Template Node

Last updated 4 years ago

Was this helpful?

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

<div layout="row" layout-align="start center">
  <span flex style="font-size: 15px"><b>RPM Min</b></span>
  <span flex style="font-size: 15px"><b>RPM Max</b></span>
  <span flex style="font-size: 15px"><b>Failure Prob</b></span>
  <span flex style="font-size: 15px"><b>Machine type</b></span>
</div>
<div layout="row" layout-align="start center" ng-repeat="machine in msg.payload.factory">
  <span flex style="color: green">{{machine.min}}</span>
  <span flex style="color: red">{{machine.max}}</span>
  <span flex style="color: white">{{machine.failProb}}%</span>
  <span flex style="color: white">{{machine.name}}</span>
</div>

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.