Dashboard Nodes

Estimated reading time: 15 minutes

Dashboard Nodes are for setting up dashboards with Flows that can display charts and show notifications. For further information about Flow dashboards and how to view them, check out the Flows Dashboard Basics page.

OT Link Platform Flows currently supports the following Dashboard nodes:


Audio Node

This node will play text-to-speech audio of messages sent through the msg.payload object. Audio will play even when the dashboard is minimized.



[
  {
    "id":"49eb0187.36d948",
    "type":"ui_audio",
    "z":"13d2197.347db67",
    "name":"","voice":"",
    "always":"","x":260,
    "y":60,
    "wires":[]
  }
]


UI Control Node

Follows UI Control instructions from the msg.payload object. You can send "" to refresh the page or {tab:"(tab_name)"} to change dashboard tabs, for example.



[
  {
    "id":"6949dea5.55f2e",
    "type":"ui_ui_control",
    "z":"13d2197.347db67",
    "name":"",
    "x":80,
    "y":60,
    "wires":[[]]
  }
]



Button Node

This node generates a button on the dashboard that displays the message written in the Payload field when clicked.



[
  {
    "id":"b7f6a8bd.3392e",
    "type":"ui_button",
    "z":"13d2197.347db67",
    "name":"",
    "group":"df9cd232.fb1438",
    "order":0,
    "width":0,
    "height":0,
    "passthru":false,
    "label":"button",
    "color":"",
    "bgcolor":"",
    "icon":"",
    "payload":"",
    "payloadType":"str",
    "topic":"",
    "x":180,
    "y":60,
    "wires":[[]]
  },
  {
    "id":"df9cd232.fb1438",
    "type":"ui_group",
    "z":"",
    "name":"Default",
    "tab":"b5ee012.4b2b68",
    "disp":true,
    "width":"6",
    "collapse":false
  },
  {
    "id":"b5ee012.4b2b68",
    "type":"ui_tab",
    "z":"",
    "name":"Home",
    "icon":"dashboard"
  }
]

Template Node

Write HTML in a template node to generate any user interface possible with standard HTML on the dashboard.



[
  {
    "id":"a9d6b082.71bc2",
    "type":"ui_template",
    "z":"13d2197.347db67",
    "group":"df9cd232.fb1438",
    "name":"",
    "order":0,
    "width":0,
    "height":0,
    "format":"<div ng-bind-html=\"msg.payload\"></div>",
    "storeOutMessages":true,
    "fwdInMessages":true,
    "templateScope":"local",
    "x":360,
    "y":60,
    "wires":[[]]
  },
  {
    "id":"df9cd232.fb1438",
    "type":"ui_group",
    "z":"",
    "name":"Default",
    "tab":"b5ee012.4b2b68",
    "disp":true,
    "width":"6",
    "collapse":false
  },
  {
    "id":"b5ee012.4b2b68",
    "type":"ui_tab",
    "z":"",
    "name":"Home",
    "icon":"dashboard"
  }
]

Show Notification Node

Shows notifications as popups on the dashboard interface. msg.payload will be the popup message, msg.topic will be the title, and msg.highlight will set the optional border highlight color.



[
  {
    "id":"ef1b635b.9abaa",
    "type":"ui_toast",
    "z":"13d2197.347db67",
    "position":"top right",
    "displayTime":"3",
    "highlight":"",
    "outputs":0,
    "ok":"OK",
    "cancel":"",
    "topic":"",
    "name":"",
    "x":460,
    "y":60,
    "wires":[]
  }
]

Switch Node

This node adds an On/Off switch to the dashboard interface. The switch node will generate a msg.payload object with the specified On/Off payload values when users toggle the switch On/Off. You can update the widget through the msg.payload object and you can set the switch label through msg.topic.


[
  {
    "id":"1c2b8383.75e85c",
    "type":"ui_switch",
    "z":"13d2197.347db67",
    "name":"",
    "label":"switch",
    "group":"df9cd232.fb1438",
    "order":0,
    "width":0,
    "height":0,
    "passthru":true,
    "decouple":"false",
    "topic":"",
    "style":"",
    "onvalue":"true",
    "onvalueType":"bool",
    "onicon":"",
    "oncolor":"",
    "offvalue":"false",
    "offvalueType":"bool",
    "officon":"",
    "offcolor":"",
    "x":560,"y":60,
    "wires":[[]]
  },
  {
    "id":"df9cd232.fb1438",
    "type":"ui_group",
    "z":"",
    "name":"Default",
    "tab":"b5ee012.4b2b68",
    "disp":true,
    "width":"6",
    "collapse":false
  },
  {
    "id":"b5ee012.4b2b68",
    "type":"ui_tab",
    "z":"",
    "name":"Home",
    "icon":"dashboard"
  }
]

Gauge Node

This node displays a gauge type widget on the dashboard. It will format numbers passed through msg.payload into a gauge style widget. The gauge contain different sectors and the needle will move to different sectors depending on the Range and value passed into the widget through msg.payload.



[
  {
    "id":"9ac5a700.e89be",
    "type":"ui_gauge",
    "z":"13d2197.347db67",
    "name":"",
    "group":"df9cd232.fb1438",
    "order":0,
    "width":0,
    "height":0,
    "gtype":"gage",
    "title":"Gauge",
    "label":"units",
    "format":"",
    "min":0,
    "max":10,
    "colors":["#00b500",
    "#e6e600",
    "#ca3838"],
    "seg1":"",
    "seg2":"",
    "x":80,
    "y":160,
    "wires[]
  },
  {
    "id":"df9cd232.fb1438",
    "type":"ui_group",
    "z":"",
    "name":"Default",
    "tab":"b5ee012.4b2b68",
    "disp":true,
    "width":"6",
    "collapse":false
  },
  {
    "id":"b5ee012.4b2b68",
    "type":"ui_tab",
    "z":"",
    "name":"Home",
    "icon":"dashboard"
  }
]

Numeric Node

This node adds a numeric input widget to the dashboard. You can configure a range, value format, and label for users to interact with.


[
  {
    "id":"2a87920d.dd4a26",
    "type":"ui_numeric",
    "z":"13d2197.347db67",
    "name":"",
    "label":"numeric",
    "group":"df9cd232.fb1438",
    "order":0,
    "width":0,
    "height":0,
    "passthru":true,
    "topic":"",
    "format":"",
    "min":0,
    "max":10,
    "step":1,
    "x":180,
    "y":160,
    "wires":[[]]
  },
  {
    "id":"df9cd232.fb1438",
    "type":"ui_group",
    "z":"",
    "name":"Default",
    "tab":"b5ee012.4b2b68",
    "disp":true,
    "width":"6",
    "collapse":false
  },
  {
    "id":"b5ee012.4b2b68",
    "type":"ui_tab",
    "z":"",
    "name":"Home",
    "icon":"dashboard"
  }
]

Form Node

This node will show a form that users can enter values into. Form elements define the values that users can enter into the form and whether or not the user is required to enter them.


[
  {
    "id":"e9df393d.e20ab8",
    "type":"ui_form",
    "z":"13d2197.347db67",
    "name":"",
    "label":"",
    "group":"df9cd232.fb1438",
    "order":0,
    "width":0,
    "height":0,
    "options":
      [
        {
          "label":"",
          "value":"",
          "type":"text",
          "required":true
         }
      ],
    "formValue":
      {
        "":""
      },
    "payload":"",
    "topic":"",
    "x":260,
    "y":160,
    "wires":[[]]
  },
  {
    "id":"df9cd232.fb1438",
    "type":"ui_group",
    "z":"",
    "name":"Default",
    "tab":"b5ee012.4b2b68",
    "disp":true,
    "width":"6",
    "collapse":false
  },
  {
    "id":"b5ee012.4b2b68",
    "type":"ui_tab",
    "z":"",
    "name":"Home",
    "icon":"dashboard"
  }
]

Date Node

Adds a date picking widget to the dashboard. You can choose different formats in the Dshboard>Site tab at the bottom of the Flows page.


[
  {
    "id":"c586e610.b07fa",
    "type":"ui_date_picker",
    "z":"13d2197.347db67",
    "name":"",
    "label":"date",
    "group":"df9cd232.fb1438",
    "order":0,
    "width":0,
    "height":0,
    "passthru":true,
    "topic":"",
    "x":360,
    "y":160,
    "wires":[[]]
  },
  {
    "id":"df9cd232.fb1438",
    "type":"ui_group",
    "z":"",
    "name":"Default",
    "tab":"b5ee012.4b2b68",
    "disp":true,
    "width":"6",
    "collapse":false
  },
  {
    "id":"b5ee012.4b2b68",
    "type":"ui_tab",
    "z":"",
    "name":"Home",
    "icon":"dashboard"
  }
]

Text Input Node

Adds a text input field to the dashboard. It can be regular text, email, or color picker format. Text that users enter will be output in the msg.payload object.


[
  {
    "id":"f1025423.8ad608",
    "type":"ui_text_input",
    "z":"13d2197.347db67",
    "name":"",
    "label":"",
    "group":"df9cd232.fb1438",
    "order":0,
    "width":0,
    "height":0,
    "passthru":true,
    "mode":"text",
    "delay":300,
    "topic":"",
    "x":460,
    "y":160,
    "wires":[[]]
  },
  {
    "id":"df9cd232.fb1438",
    "type":"ui_group",
    "z":"","name":"Default",
    "tab":"b5ee012.4b2b68",
    "disp":true,
    "width":"6",
    "collapse":false
  },
  {
    "id":"b5ee012.4b2b68",
    "type":"ui_tab",
    "z":"",
    "name":"Home",
    "icon":"dashboard"
  }
]

Dropdown Node

This node creates a drop-down menu for dashboard users. You can add as many label / value pairs to the menu as you wish.


[
  {
    "id":"70cc1457.501164",
    "type":"ui_dropdown",
    "z":"13d2197.347db67",
    "name":"",
    "label":"",
    "place":"Select option",
    "group":"df9cd232.fb1438",
    "order":0,
    "width":0,
    "height":0,
    "passthru":true,
    "options":
      [
        {
          "label":"",
          "value":"",
          "type":"str"
        }
      ],
    "payload":"",
    "topic":"",
    "x":560,
    "y":160,
    "wires":[[]]
  },
  {
    "id":"df9cd232.fb1438",
    "type":"ui_group",
    "z":"",
    "name":"Default",
    "tab":"b5ee012.4b2b68",
    "disp":true,
    "width":"6",
    "collapse":false
  },
  {
    "id":"b5ee012.4b2b68",
    "type":"ui_tab",
    "z":"",
    "name":"Home",
    "icon":"dashboard"
  }
]

Slider Node

This node creates a slider widget on the dashboard. Users can change the slider to any value in between the configured min and max values.


[
  {
    "id":"4c517eb.7a9c4",
    "type":"ui_slider",
    "z":"13d2197.347db67",
    "name":"",
    "label":"slider",
    "group":"df9cd232.fb1438",
    "order":0,"width":0,
    "height":0,
    "passthru":true,
    "topic":"",
    "min":0,
    "max":10,
    "step":1,
    "x":80,
    "y":260,
    "wires":[[]]
  },
  {
    "id":"df9cd232.fb1438",
    "type":"ui_group",
    "z":"",
    "name":"Default",
    "tab":"b5ee012.4b2b68",
    "disp":true,
    "width":"6",
    "collapse":false
  },
  {
    "id":"b5ee012.4b2b68",
    "type":"ui_tab",
    "z":"",
    "name":"Home",
    "icon":"dashboard"
  }
]

Colour Picker Node

This node adds a colour picker widget to the dashboard that allows users to pick colors. The color will be output from this node in the specified color format.


[
  {
    "id":"e734b1c8.535c5",
    "type":"ui_colour_picker",
    "z":"13d2197.347db67",
    "name":"",
    "label":"",
    "group":"df9cd232.fb1438",
    "format":"hex",
    "outformat":"string",
    "showSwatch":true,
    "showPicker":false,
    "showValue":false,
    "showAlpha":false,
    "showLightness":true,
    "dynOutput":"false",
    "order":0,
    "width":0,
    "height":0,
    "passthru":true,
    "topic":"",
    "x":180,
    "y":260,
    "wires":[[]]
  },
  {
    "id":"df9cd232.fb1438",
    "type":"ui_group",
    "z":"",
    "name":"Default",
    "tab":"b5ee012.4b2b68",
    "disp":true,
    "width":"6",
    "collapse":false
  },
  {
    "id":"b5ee012.4b2b68",
    "type":"ui_tab",
    "z":"",
    "name":"Home",
    "icon":"dashboard"
  }
]

Text Node

This node adds a non-editable text field to the dashboard. Messages sent through the msg.payload object will change the text field to the specified value.


[
  {
    "id":"1eb85167.75960f",
    "type":"ui_text",
    "z":"13d2197.347db67",
    "group":"df9cd232.fb1438",
    "order":0,
    "width":0,
    "height":0,
    "name":"",
    "label":"text",
    "format":"
      {
        {
          msg.payload
        }
      }",
    "layout":"row-spread",
    "x":260,
    "y":260,
    "wires":[]
  },
  {
    "id":"df9cd232.fb1438",
    "type":"ui_group",
    "z":"",
    "name":"Default",
    "tab":"b5ee012.4b2b68",
    "disp":true,
    "width":"6",
    "collapse":false
  },
  {
    "id":"b5ee012.4b2b68",
    "type":"ui_tab",
    "z":"",
    "name":"Home",
    "icon":"dashboard"
  }
]

Chart Node

This node adds a chart to the dashboard. The chart uses values sent through msg.payload for display. Charts support up to nine different series of values.


[
  {
    "id":"a98b4b3.4f581b8",
    "type":"ui_chart",
    "z":"13d2197.347db67",
    "name":"",
    "group":"df9cd232.fb1438",
    "order":0,
    "width":0,
    "height":0,
    "label":"chart",
    "chartType":"line",
    "legend":"false",
    "xformat":"HH:mm:ss",
    "interpolate":"linear",
    "nodata":"",
    "dot":false,
    "ymin":"",
    "ymax":"",
    "removeOlder":1,
    "removeOlderPoints":"",
    "removeOlderUnit":"3600",
    "cutout":0,
    "useOneColor":false,
    "colors":
      ["#1f77b4", "#aec7e8",
       "#ff7f0e", "#2ca02c",
       "#98df8a", "#d62728",
       "#ff9896", "#9467bd",
       "#c5b0d5"],
    "useOldStyle":false,
    "x":360,
    "y":260,
    "wires":[[],[]]
  },
  {
    "id":"df9cd232.fb1438",
    "type":"ui_group",
    "z":"",
    "name":"Default",
    "tab":"b5ee012.4b2b68",
    "disp":true,
    "width":"6",
    "collapse":false
  },
  {
    "id":"b5ee012.4b2b68",
    "type":"ui_tab",
    "z":"",
    "name":"Home",
    "icon":"dashboard"
  }
]