Class 4 - Webflows

Owned by Nina Cardillo
Last updated: 07-Jan-2024
6 min read

In this class, you will become familiar with webflows, which is a flow that utilizes Node-RED dashboards to create a web page for visualizing data, creating instrumentation panels, or presenting the front-end of any system.

This section consists of the following:

VAV Instrumentation Dashboard with UI Control Elements

Node-RED provides a palette of dashboard nodes (see the figure below for all of the available nodes on the palette) that can be dragged onto the workspace to create web pages. Control elements can be added to flows enabling VAV functionality. In Exercise 4.1, you will import a webflow that shows a BACnet and LON room sensor, as well as a VAV controller, and also have the ability to control/switch the occupancy state.

Chrome is the recommended web browser for Node-RED webflows (dashboards). Other web browsers, such as Firefox or Microsoft Edge, may encounter problems with connection loss messages, issues with Node-RED charts not populating correctly, and the disappearance of Node-RED web pages.


The exercise in this class provides hands-on experience with a switch control element. If you are using the Starter Kit, you will also be able to change the BACnet and LON sensor switches and visually observe corresponding UI changes on the dashboard.

Dashboard node palette, shown by node types

Each node type may have a different node message (msg) format for its value. As a result, you cannot connect IAP Input node directly to a dashboard chart node without first changing the msg format. 

For example, the IAP Input and IAP Output nodes' datapoint value is in the node msg.payload.data field. However, some of the dashboard nodes, such as chart nodes, have the node value in msg.payload field.  To change the msg format, you can use the change node or function node.

The figure below shows how to display a scalar datapoint into dashboard chart, gauge, and text nodes.

  • To see the datapoint in a chart, change node in order to convert the IAP Input node msg.payload.data to msg.payload.
  • To see the nvoCount IAP Input node value in a gauge, use the same change node to change the msg value format from msg.payload.data to msg.payload, and also change the value format in the gauge to msg.payload.  
  • To see the datapoint value in a text node, change the text node value format to msg.payload.data.

To change an input datapoint's value using a slider or text node, convert the slider or text node msg.payload to msg.payload.data, and add a msg.topic, which can be anything. You can use the change or function node for this conversion. To use a change node, add two rules as shown in the figure below.

Exercise 4.1 – Room Web-controller Device Webflow

For this exercise, you will be interacting with an imported flow using the Sequencing widget.

Note: For all datapoints that are being used, be sure to enable monitoring and polling in the Datapoints Properties widget → MONITORING AND LOGGING CONFIGURATION settings, and set Poll Interval to 10 seconds and Publish Minimum Delta Value to Always.

To get started, perform the following step:

  1. Verify that Exercise 3.1 is enabled in the Sequencing widget (if not, enable Exercise 3.1 and click Deploy).

  2. Download Exercise 4.1  from the SmartServer GitHub Repository → Node-RED Tutorial folder and import it into the Sequencing widget.

  3. Click Deploy to save the flow.

    The flow for this exercise will look similar to the following in your workspace:


    The inject nodes (which appear as ev/user:false and ev/user:) on this flow are used to ensure that the VAV status and UI status are initially set to Off.

  4. While you will not be creating a webflow from scratch like you did in the previous exercises and adding nodes to the workspace, you will need to set the IAP Input and Output nodes in this exercise to Fixed and select the targeted datapoint for each node using the Edit iap-input node or Edit iap-output node view. 

    The table that follows specifies the datapoint that should be selected for each node as well as more descriptive (device type and datapoint) IAP node names. 

    For each IAP node, you need to:

    1. Double-click the IAP Input and Output node (doing so opens the Edit iap-input node or Edit iap-output node view shown below).

    2. Set the IAP Input or Output node name.

    3. Select the targeted datapoint.

    4. Select Fixed.
    5. Click Done to save your changes.

    IAP Node Datapoint
    SC100 nvoTemp Sensor (LON Temp)

    nvoTempSensor    [DIO-01/TempSensor/0/nvoTempSensor]

    SC100 0/nvoDI (Occ) (LON Occ)nvoDI   [DIO-01/Digital Input/0/nvoDI]
    VT7200 AV 7 Room Temp (Bacnet Temp)

    Room Temperature    [Tstat-01/AV/7/Room Temperature]

    For this datapoint, also select View all datapoints.

    VT7200 BI 1 Status (Occ) (Bacnet Occ)BI 1 Status  [Tstat-01/BI/29/BI 1 Status]
    VAV_sim nvoEffectSetpt (VAV Eff. Setpoint)
    VAV_sim nvoEffectOccup (VAV Eff. Occ.)
    VAV_sim nviSpaceTemp (Space Temp.)
    VAV_sim nviApplicMode (VAV Mode)
  5. Click Deploy to save your changes. Your flow will look similar to the following in your workspace.



  6. Click the  button on the Sequencing widget.

    The dashboard view appears.



    On this display, the VAV area is designated by the red box around room 1, containing both the LON and BACnet sensor. The UI switch is set to Off as determined by the inject node configuration.

    Node-RED Dashboards

    Dashboards in Node-RED can be designed to display more information in a variety of visual formats (e.g., charts, graphs, etc.). See the Node-RED dashboard documentation for more information.

  7. Click anywhere in the VAV area to expand the view for more information. (Click the VAV details view to close this display.)



    You can also hover your mouse over one of the devices to expand the device view (shown below for the BACnet sensor).



  8. Now set the UI switch from Off to On to change VAV occupancy state.



    You will notice that the VAV area on the dashboard changes to green, reflecting an occupied state.

  9. Check the FT 6050 EVB device LCD display.

    You should observe that the Clg% starts to increase (going up to 100), indicating that the damper is open. When the switch is set to Off, the Clg% immediately returns to 0.



  10. If you are using a Starter Kit with working devices, you can change the BACnet and LON occupancy switches and observe the dashboard visualization changes from red/green.

    In this case, the LON device switch UI1 is switched from Off to On, changing the BACnet device color to green. 



  11. Click the button to return to the Sequencing widget flow workspace.

Congratulations! You have completed the programming tutorial for the Sequencing Widget – Node-RED Onboarding!

You can find more information on building your own custom Node-RED nodes at https://nodered.org/docs/creating-nodes/.