Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

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:

Table of Contents

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.

...

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
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
    Anchor
    table
    table
    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.

    Image Modified

  6. Click the Image Modified 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.

    Info
    titleNode-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.

...