Usages of standard dashboard nodes¶

The dashboard nodes are available in Visual Flow Creator to edit the node properties as per the requirements. You can set the state of dashboard widgets by sending messages to the corresponding nodes. You can read or react to values set by users of the dashboard by appending nodes to the outputs of the dashboard nodes.

Note

Industrial IoT is not responsible for the complex dashboard nodes adopted from third party like Vega, Heat map, etc. For more information about the third party dashboard nodes, refer to their official websites.

Button node¶

The "button" node will generate a message with payload and topic defined in node settings. By default, the button sends a string with message id as payload. Clicking the button results in generating the message loaded in the payload.

The size, color and label of the button is edited to design a useful flow. The following graphic shows the output of button node in the dashboard window.

The "dropdown" node allows you to define multiple possible data values and select one of them. Supported data types are string, number and boolean.

You can customize the dropdown menu by editing the node properties. The "options" field in the node properties allows you to add the required options to design the dropdown menu. The following graphic shows the output of dashboard node in the dashoard window.

Dropdown output

Switch node¶

The "switch" node returns any kind of value (string/ number/ boolean/ json) when it changes state.

The following graphic shows the output of switch node in the dashboard window. The switch node is defined with two switches, one in the "off" mode and the other in the "on" mode.

Output dashboard

Slider node¶

The "slider" node allows you to set the value of the horizontal slider by sending a message to the node. You can react to a user's change to a slider by listening to the output message of the slider node. In order to both set the value and react to the new value, you can select "If msg arrives on input, pass through to output" in the node properties. A slider is defined in terms of the following parameters:

A minimum value
A maximum value
A step value

Input messages are converted to a number. The minimum value is used if conversion fails, and this will update the user interface or dashboard window. If the value changes, it will be passed to the output.

The following graphic shows the output of slider node in the dashboard window.

Slider output

Numeric node¶

The "numeric" node allows you to use the numeric node to define a range of values in steps with a minimum value and a maximum value.

The following graphic shows the output of numeric node in the dashboard window.

Numeric output

Text input node¶

Text-input

The "text input" node allows you to add a text input to the dashboard window. The text input node supports the following modes:

Regular text
Email address
Password
Number
Telephone input
Color picker
Time picker
Week picker
Month picker

-The following graphic shows the output of text input node in the dashboard window. The text input node is defined with the label "Enter your name here".

Text input output

Data picker node¶

Date picker

The "date picker" node allows you to pick dates from the widget.

The following graphic shows the output of date picker node in the dashboard window. The date picker node is defined with the label "Departure date".

Date picker output

Colour picker node¶

Colour picker

The "colour picker" node uses the color selector of the system and returns the color in rgb, hex, hex8, hsv or hsl format. Transparency is also supported for all except hex.

The following graphic shows the output of colour picker node in the dashboard window. The colour picker node is defined with the label "Add colour". Click the color box and a dropdown to choose color will appear. You can then choose the required color.

Colour picker output

Form node¶

The "form" node helps you to accumulate multiple form elements and then submit them on a single click as an object.

The following graphic shows the output of form node in the dashboard window. The form node is defined with the label "Registration form". You can edit the node properties of the "form" and design the form in the "form elements" section according to requirements.

Registration form

Text node¶

The "text" node is a read-only widget where you can configure the label and value.

The following graphic shows the output of text node in the dashboard window. The text node is defined with the label "Your address". You can customize the text box label for a read-only message.

Text output

Gauge node¶

The "gauge" node is of four types:

Standard gauge
Donut
Compass
Level

You can define the ranges with different colors for the gauge nodes.

The following graphic shows the output of gauge node in the dashboard window. The "gauge" dashboard widget can be customized to appear as one of four possible types.

Gauge output

Chart node¶

The "chart" node can be designed in the following formats:

Line
Bar
Pie

Chart nodes are helpful for multiple data readings. Charts are useful for representations and comparisons of numeric and quantitative information.

The following graphic shows the output of chart node in the dashboard window.

Chart output

Notification node¶

The "notification" node creates user alerts as popup notifications.

The following graphic shows the output of notification node in the dashboard window.

Notification output

In the following example, the notification is configured to be displayed on the bottom right. You get the following message in the dashboard window:

Dashboard window

UI control node¶

The "ui control" node allows some dynamic control of the dashboard. Sending a msg.payload of the tab number (from 0) or tab_name will switch to that tab. It refreshes the current opened page if the message contains an empty or unset "tab" property.

The following graphic shows the output of UI control node in the dashboard window.

UI control output

Let us consider the following flow with the defined dashboard groups in the sidebar:

The input node is defined with string "+1". This opens the next tab incrementally in the dashboard window.

Graph window

Similarly, if you define the input node with string "-1", the dashboard window will change to the previous tab, in a reverse order.

When you perform some activity in the dashboard window, this node connected with debug node will display the message of payload and loggedInUser details in the message payload.

ui-control-message-output

Template node¶

The "template" node allows you to create and define your own widgets. You can design the widgets within the framework using HTML, JavaScript. You can also override builds in CSS styles.

You can create a template and save it in the library for re-use.

The following graphic shows the output of "template" node in the dashboard window.

Let us consider the simple code given below:

simple_code

You get the following message in the dashboard window:

Template output

Using image node¶

The "image" node allows you to add an image or video to the dashboard in the user interface. It supports different types of image formats. The image file can be uploaded using Insights Hub Monitor. The path represents the File API path to image resource.

Procedure¶

To upload the image file to image node, follow these steps:

From the node palette, drag and drop the following nodes from the respective palette to the working area.
- Inject node
- Slider node
- Image node
- Gauge node
Connect the nodes in a flow as shown below:
Double click on "inject" node to edit the properties. For more information, refer to Editing nodes.
Double click on the image node to edit the node properties.
- Enter the "Name".
- In the "Group" section, you can select any one of the following options from the dropdown menu.
- Select the image "Size".
- In the "Type" section, you can select any one of the following options from the dropdown menu.
- To select the path of the image, click .
- To open Insights hub Monitor application, click
- Click "Done".
Save and execute the flow.

The following graphic shows the output of "image" node in the dashboard window.

View dashboard output

Note

The image should be available in Insights Hub Monitor application before using it to image node.

Using JS/CSS node¶

The "JS/CSS" node allows you to embed custom JS and/or CSS files to the VFC Dashboard. All JS/CSS files will be embedded according theirs sequence numbers. The .js or .css file can be uploaded using Insights Hub Monitor.

Procedure¶

To upload the .js or .css file to JS/CSS node, follow these steps:

From the node palette, drag and drop the JS/CSS node to the working area.
Double click on the JSS/CSS node to edit the node properties.
- Enter the "Label".
- To select the file, click "Select File".
- To open Insights Hub Monitor application, click
- Check the box to use Insights Hub Monitor in "JS/CSS" node.
- Choose the sequential number.
- Enter the "Name".
- Click "Done".
Save the below code in .css file and upload the file to Insights Hub Monitor.

  #nr-dashboard-toolbar {
          background: rgb(2,0,36);
          background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(41,121,9,1) 35%, rgba(0,206,255,1) 100%);
  }

The above code will change the tab ribbon color from blue to gradient as shown below:

output CSS

Note

The file should be available in Insights Hub Monitor application before using it to JS/CSS node.
Define the sequence number to order the files which will be embedded into the HTML page.

Use Insights Hub Monitor and Operations Insight plugin to load the dashboard for all the users. Now, it is possible to create the dashboards from one user to another user.

Note

The scripts are loaded with a delay after the page loads, you can use the below example code to load the page with a delay.

Example code:

html <script> setTimeout (() => {$('#myID').html('Hi')}; }, 100); </script> <div ng-bind-html="msg.payload" id="myID"> </div>

Using IFrame node¶

The "IFrame" node allows you to embed an external webpage in Visual Flow Creator dashboard.

Note

Adhere to the Content Security Policy (CSP) of the external websites for the protection against attacks, malicious content and other mitigates issues.

Procedure¶

To embed the external webpage in Visual Flow Creator dashboard using iFrame node, follow these steps:

From the node palette, drag and drop the iframe node from the node palette to the working area.
Double click on the iFrame node to edit the properties.
- Enter the "Name".
- In the "Group" section, you can select any one of the following options from the dropdown menu.
- Select the image "Size".
- Click "Done".

The following graphic shows the output of "IFrame" node in the dashboard window.

Output IFrame

Using minerva node¶

The "minerva" node allows you to add the web widgets to the dashboard. It includes the following widgets:

Bullet Chart
Reference Band
Recursive Pattern
Cyclic Angle Time Spiral
Smart Color Designer
DBSCAN Param
DBSCAN Scoring
Ranked Stream Graph
Confusion Matrix

Each widget will be configured using data taken from msg.payload. For more information about the widgets, refer to the info tab of minerva node.

Procedure¶

To add the web widgets to the dashboard, follow these steps:

From the node palette, drag and drop the following nodes from the respective palette to the working area.
- UI control node
- Function node
- Minerva node
Connect the nodes in a flow as shown below:

Double click on the function node to edit the properties.

Enter the "Name".
Enter the "Code".

Code

    {
    "data": [
        {
            "timestamp": "2016-04-05 00:00:30.976",
            "id": "671121446"
        },
        {
            "timestamp": "2016-04-05 00:00:33.984",
            "id": "1000005"
        },
        {
            "timestamp": "2016-04-05 00:00:33.988",
            "id": "1000005"
        },
        {
            "timestamp": "2016-04-05 00:00:35.98",
            "id": "671121446"
        },
        {
            "timestamp": "2016-04-05 00:00:39.992",
            "id": "671121446"
        },
        {
            "timestamp": "2016-04-05 00:00:42.996",
            "id": "679477920"
        },
        {
            "timestamp": "2016-04-05 00:00:44",
            "id": "679477924"
        },
        {
            "timestamp": "2016-04-05 00:01:50.004",
            "id": "679477929"
        },
        {
            "timestamp": "2016-04-05 00:01:57.008",
            "id": "679477921"
        },
        {
            "timestamp": "2016-04-05 00:02:38.012",
            "id": "679477928"
        },
        {
            "timestamp": "2016-04-05 00:03:29.016",
            "id": "687964883"
        },
        {
            "timestamp": "2016-04-05 00:04:02.02",
            "id": "1000005"
        },
        {
            "timestamp": "2016-04-05 00:04:02.024",
            "id": "1000005"
        }
    ],
    "options": {
        "height": "400px",
        "variableStreamWidth": false,
        "nrOfPeriods": 7,
        "nrOfRanks": 6,
        "periodWidth": 70,
        "averageStreamWidth": 60,
        "extensionsHeight": 100,
        "colorscheme": [
            "#33a02c",
            "#a6cee3",
            "#fb9a99",
            "#b2df8a",
            "#fdbf6f",
            "#1f78b4",
            "#e31a1c",
            "#ffff99",
            "#cab2d6",
            "#ff7f00",
            "#b15928",
            "#6a3d9a",
            "#8dd3c7",
            "#ffffb3",
            "#bebada",
            "#fb8072",
            "#80b1d3",
            "#fdb462",
            "#fccde5",
            "#b3de69",
            "#ffed6f",
            "#d9d9d9",
            "#bc80bd",
            "#ccebc5"
        ]
    }
  }

Click "Done".

Double click on the minerva node to edit the properties.
- In the "Group" section, you can select any one of the following options from the dropdown menu.
- Select the image "Size".
- Enter the "Name".
- In the "Chart Type", you can select any one of the following options from the dropdown menu.
- Enter the "Name".
- Click "Done".
Save and execute the flow.

The following graphic shows the output of "minerva" node in the dashboard window.

Minerva output

Using heat map node¶

The "heat map" node allows you to create a graphical representation of the data, where the individual values contained in a matrix are represented as colors. For more information, refer to the info tab of heat map node.

Procedure¶

To execute the example flow using heatmap node, follow these steps:

From the node palette, drag and drop the following nodes from the respective palette to the working area.
- Inject node
- Button node
- Function node
- Heat map node
Connect the nodes in a flow as shown below:
Double click on "inject" node to edit the properties. For more information, refer to Editing nodes.

Double click on the function node to edit the properties.

Enter the "Name".

Enter the "Code".

  var len = 200;
  msg.payload = [];
  while (len--){
  var value = Math.floor(Math.random()*100);
  msg.payload.push(value);
  }
  return msg;

Double click on the heat map node to edit the properties.
- In the "Group" section, you can select any one of the following options from the dropdown menu.
- Select the image "Size".
- Enter the "Grid size".
- Check the box to specify the minimum and maximum values.
- In the "Grid values" section, you can select any one of the following options from the dropdown menu.
- In the "Legend" section, you can select any one of the following options from the dropdown menu.
- In the "Background" section, you can select any one of the following options from the dropdown menu.
- Choose the Radius, Opacity and Blur values.
- Enter the "Name".
- Click "Done".
Save and execute the flow.

The following graphic shows the output of "Heat map" node in the dashboard window.

Output

Using led node¶

The "led" node allows you to create a simple LED status indicator for the Dashboard. For more information, refer to the info tab of LED node.

Procedure¶

To execute the example flow using LED node, follow these steps:

From the node palette, drag and drop the following nodes from the respective palette to the working area.
- Two inject node
- LED node
Double click on "inject" node to edit the properties. For more information, refer to Editing nodes.
Connect the nodes in a flow as shown below:
Double click on the led node to edit the properties.
- In the "Group" section, you can select any one of the following options from the dropdown menu.
- Select the image "Size".
- Enter the "Default label".
- In the "Label Placement" and "Label Alignment" section, you can select any one of the following options from the dropdown menu.
- In the "Colors for value of msg.payload" section, you can select the "msg.payload" value from dropdown list and enter the color. To add more colors, click .
- Check the box to allow color for value map in msg.
- Enter the "Name".
- Click "Done".
Save and execute the flow.

The following graphic shows the output of "led" node in the dashboard window.

LED output

Using linear gauge node¶

The "linear gauge" node allows you to create a linear gauge with high or low limits and animated sliding pointer. For more information, refer to the info tab of linear gauge node.

Procedure¶

To execute the example flow using linear gauge node, follow these steps:

From the node palette, drag and drop the following nodes from the respective palette to the working area.
- Inject node
- Button node
- Three function nodes
- Three linear gauge nodes
- Debug node
Connect the nodes in a flow as shown below:
Double click on "inject" node to edit the properties. For more information, refer to Editing nodes.

Double click on the function node (Tank #1) to edit the properties.

Enter the "Name".

Enter the "Code".

  msg.payload = 80;
  msg.highlimit = 150;
  msg.lowlimit = 10;
  msg.setpoint = 75;
  return msg;

Click "Done".

Double click on the function node (Tank #2) to edit the properties.

Enter the "Name".

Enter the "Code".

  msg.payload = 35;
  msg.highlimit = 50;
  msg.lowlimit = 12;
  msg.setpoint = 45;
  return msg;

Click "Done".

Double click on the function node (Tank #3) to edit the properties.

Enter the "Name".

Enter the "Code".

  msg.payload = 56;
  msg.highlimit = 250;
  msg.lowlimit = 5;
  msg.setpoint = 88;
  return msg;

Click "Done".

Double click on the linear gauge node (Tank #1) to edit the properties.
- In the "Group" section, you can select any one of the following options from the dropdown menu.
- Select the image "Size".
- Select the colors in "High Area Level", "Middle Area Level" and "Low Area Level" sections.
- Enter the "Unit".
- Enter the "Name".
- Click "Done".
Double click on the linear gauge node (Tank #2) to edit the properties.
- In the "Group" section, you can select any one of the following options from the dropdown menu.
- Select the image "Size".
- Select the colors in "High Area Level", "Middle Area Level" and "Low Area Level" sections.
- Enter the "Unit".
- Enter the "Name".
- Click "Done".
Double click on the linear gauge node (Tank #3) to edit the properties.
- In the "Group" section, you can select any one of the following options from the dropdown menu.
- Select the image "Size".
- Select the colors in "High Area Level", "Middle Area Level" and "Low Area Level" sections.
- Enter the "Unit".
- Enter the "Name".
- Click "Done".
Save and execute the flow.

The following graphic shows the output of "linear gauge" node in the dashboard window.

Data

Using microphone node¶

The "microphone" node allows you to create an audio to be recorded and allows speech recognition from the dashboard. For more information, refer to the info tab of microphone node.

Procedure¶

To execute the example flow using microphone node, follow these steps:

From the node palette, drag and drop the following nodes from the respective palette to the working area.
- Microphone node
- Debug node
Connect the nodes in a flow as shown below:
Save and execute the flow.

The following graphic shows the output of "microphone" node in the dashboard window.

Microphone output

Using statechart node¶

The "statechart" node allows you to create a bar chart to visualize numeric values in relation, together with state represented by color. For more information, refer to the info tab of statechart node.

Procedure¶

To execute the example flow using statechart node, follow these steps:

From the node palette, drag and drop the following nodes from the respective palette to the working area.
- Inject node
- Function node
- Statechart node
Connect the nodes in a flow as shown below:
Double click on "inject" node to edit the properties. For more information, refer to Editing nodes.

Double click on the function node to edit the properties.

Enter the "Name".

Enter the "Code".

  msg.payload = [{
    series: "2010",
    value: 300000,
    state: true
  },
  {
    series: "2012",
    value: 400000,
    state: true
  },
  {
    series: "2014",
    value: 500000,
    state: true
  },
  {
    series: "2016",
    value: 600000,
    state: true
  },
  {
    series: "2018",
    value: 700000,
    state: true
  },
  {
    series:"2020",
    value: 800000,
    state: true
  }]
  return msg;

Click "Done".

Double click on the statechart node to edit the properties.
- In the "Group" section, you can select any one of the following options from the dropdown menu.
- Select the image "Size".
- Enter the "Label" and "Series".
- Check the box of "Values" and "Bar colors" and edit the changes based on the requirement.
- In the "Text options" section, you can select any one of the following options from the dropdown menu.
- Enter the "Name".
- Click "Done".
Save and execute the flow.

The following graphic shows the output of "statechart" node in the dashboard window.

Output statechart

Note

The default color theme can be changed using "Bar Colors" and "Text options" in "State chart" node properties.

Using table node¶

The "table" node allows you to display the data as a table in the dashboard. For more information, refer to the info tab of table node.

Procedure¶

To execute the example flow using table node, follow these steps:

From the node palette, drag and drop the following nodes from the respective palette to the working area.
- Inject node
- Function node
- Table node
Connect the nodes in a flow as shown below:
Double click on "inject" node to edit the properties. For more information, refer to Editing nodes.

Double click on the function node to edit the properties.

Enter the "Name".

Enter the "Code".

  msg.payload = [
    {
      "Name": "Steve",  
      "Age": "33",
      "Place": "Paris",
      "Country": "France"
    },
    {
      "Name": "Sofia",
      "Age": "30",
      "Place": "Barcelona",
      "Country": "Spain"
    }
  ];
  return msg;

Click "Done".

Double click on the table node to edit the properties.
- To edit the "Group" section, click .
- Select the image "Size".
- Enter the "Name".
- Click "Done".
Save and execute the flow.

The following graphic shows the output of "table" node in the dashboard window.

Output

Using list node¶

The "list" node allows you to create a list of the items. For more information, refer to the info tab of list node.

Procedure¶

To execute the example flow using list node, follow these steps:

From the node palette, drag and drop the following nodes from the respective palette to the working area.
- Inject node
- List node
- Debug node
Connect the nodes in a flow as shown below:

Double click on the inject node to edit the properties. For more information, refer to Editing nodes.

Payload (JSON):

  [
    {
      "title": "<b>Asset Manager</b>", 
      "description": "This is description of <fontcolor=\"blue\"><b>AssetManager</b></b>.", 
      "icon": "https://siemens.mindsphere.io/en/docs/mindaccess/_jcr_content/root/container/division/content/dynamiccard/head/image.coreimg.svg/1596115731456/asset-manager-docsteaserkiosk-640x384.svg"
    },
    {
      "title": "<b>Insights Hub Monitor</b>", 
      "description": "This is description of <font color=\"Grey\"><b>FleetManager</b></font>.", 
      "icon": "https://siemens.mindsphere.io/en/docs/mindaccess/_jcr_content/root/container/division/content/dynamiccard_copy_920548260/head/image.coreimg.svg/1597391606440/fleet-manager-docsteaserkiosk-640x384.svg"
    },
    {
      "title": "<b>Settings</b>",
      "description": "This is description of <font color=\"red\"><b>Settings</b></font>.",  
      "icon": "https://siemens.mindsphere.io/en/docs/mindaccess/_jcr_content/root/container/division/content/dynamiccard_copy/head/image.coreimg.svg/1596115743466/settings-docsteaserkiosk-640x384-2.svg"
    }
  ]

Double click on the list node to edit the properties.
- To edit the "Group" section, click .
- Select the image "Size".
- In the "List Type" and "Action" sections, you can select any one of the following options from the dropdown menu.
- Check the box to allow HTML in the displayed text.
- Enter the "Topic" and "Name".
- Click "Done".
Save and execute the flow.

The following graphic shows the output of "list" node in the dashboard window.

Output list

Using vega node¶

The "vega" node allows you to create a declarative data visualization using Vega visualization grammar. It also supports the Vega-lite specification. For more information, refer to the info tab of vega node.

Note

If you select "Only one browser" for a node in a flow, the node will handle each of the dashboards separately. For each browser, the communications originating from the node will be exclusively handled. If "Only one browser" is not selected, the node will share all the dashboard communication with every open browser from that user. For more information about an example on usage of one and multiple browsers, refer to Application examples on node properties.

Procedure¶

To execute the example flow using vega node, follow these steps:

From the node palette, drag and drop the following nodes from the respective palette to the working area.
- Inject node
- Vega node
Connect the nodes in a flow as shown below:
Double click on the inject node to edit the properties. For more information, refer to Editing nodes.
- Payload (JSON):
??? Code
```
                                                                                                                                                                                         
```
class=linenos data-linenos=" 1 "> { "$schema": "https://vega.github.io/schema/vega/v5.json", "description": "An annotated line chart of the population of Falkensee, Germany.", "width": 500, "height": 250, "padding": 5, "config": { "title": { "fontSize": 16 } }, "title": { "text": {"signal": "'Population of Falkensee from ' + years[0] + ' to ' + years[1]"} }, "data": [ { "name": "table", "values": [ {"year": 1875, "population": 1309}, {"year": 1890, "population": 1558}, {"year": 1910, "population": 4512}, {"year": 1925, "population": 8180}, {"year": 1933, "population": 15915}, {"year": 1939, "population": 24824}, {"year": 1946, "population": 28275}, {"year": 1950, "population": 29189}, {"year": 1964, "population": 29881}, {"year": 1971, "population": 26007}, {"year": 1981, "population": 24029}, {"year": 1985, "population": 23340}, {"year": 1989, "population": 22307}, {"year": 1990, "population": 22087}, {"year": 1991, "population": 22139}, {"year": 1992, "population": 22105}, {"year": 1993, "population": 22242}, {"year": 1994, "population": 22801}, {"year": 1995, "population": 24273}, {"year": 1996, "population": 25640}, {"year": 1997, "population": 27393}, {"year": 1998, "population": 29505}, {"year": 1999, "population": 32124}, {"year": 2000, "population": 33791}, {"year": 2001, "population": 35297}, {"year": 2002, "population": 36179}, {"year": 2003, "population": 36829}, {"year": 2004, "population": 37493}, {"year": 2005, "population": 38376}, {"year": 2006, "population": 39008}, {"year": 2007, "population": 39366}, {"year": 2008, "population": 39821}, {"year": 2009, "population": 40179}, {"year": 2010, "population": 40511}, {"year": 2011, "population": 40465}, {"year": 2012, "population": 40905}, {"year": 2013, "population": 41258}, {"year": 2014, "population": 41777} ], "transform": [ { "type": "extent", "field": "year", "signal": "years" } ] }, { "name": "annotation", "values": [ { "start": 1933, "end": 1945, "text": "Nazi Rule" }, { "start": 1948, "end": 1989, "text": "GDR (East Germany)" } ] } ], "scales": [ { "name": "x", "type": "linear", "range": "width", "zero": false, "domain": {"data": "table", "field": "year"} }, { "name": "y", "type": "linear", "range": "height", "nice": true, "zero": true, "domain": {"data": "table", "field": "population"} }, { "name": "color", "type": "ordinal", "domain": {"data": "annotation", "field": "text"}, "range": ["black", "red"] } ], "axes": [ { "orient": "left", "scale": "y", "title": "Population", "titlePadding": 10, "grid": true }, { "orient": "bottom", "scale": "x", "format": "d", "title": "Year", "tickCount": 15 } ], "marks": [ { "type": "rect", "from": {"data": "annotation"}, "encode": { "enter": { "x": {"scale": "x", "field": "start"}, "x2": {"scale": "x", "field": "end"}, "y": {"value": 0}, "y2": {"signal": "height"}, "fill": {"scale": "color", "field": "text"}, "opacity": {"value": 0.2} } } }, { "type": "line", "from": {"data": "table"}, "encode": { "enter": { "interpolate": {"value": "monotone"}, "x": {"scale": "x", "field": "year"}, "y": {"scale": "y", "field": "population"}, "stroke": {"value": "steelblue"}, "strokeWidth": {"value": 3} } } }, { "type": "symbol", "from": {"data": "table"}, "encode": { "enter": { "x": {"scale": "x", "field": "year"}, "y": {"scale": "y", "field": "population"}, "stroke": {"value": "steelblue"}, "strokeWidth": {"value": 1.5}, "fill": {"value": "white"}, "size": {"value": 30} } } } ], "legends": [ { "fill": "color", "title": "Period", "orient": "top-left", "offset": 8, "encode": { "symbols": { "update": { "strokeWidth": {"value": 0}, "shape": {"value": "square"}, "opacity": {"value": 0.3} } } } } ] }
Save and execute the flow.

The following graphic shows the output of "vega" node in the dashboard window.

Output vega

Using image/video node¶

imagevideonode

The "image/video" node allows you to add an image or video to the dashboard. You can select the image/video source file from the “Select file” dialog or define using message property path.

Procedure¶

To execute the example flow using image/video node, follow these steps:

From the node palette, drag and drop the following nodes from the respective palette to the working area.
- Two button nodes
- Two function nodes
- One image/video node
Connect the nodes in a flow as shown below:
Double click on the function node (FUN) to edit the properties.
- Enter the "Name".
- Message property path (FUN):
```
  msg.path = '/api/iotfile/v3/files/78ae02303cd448b997a08cdfd83e00d4/ForBiggerFun.mp4';
  return msg;
```
- Click "Done".
Double click on the function node (Blazes) to edit the properties.
- Enter the "Name".
- Message property path (Blazes):
```
  msg.path = '/api/iotfile/v3/files/78ae02303cd448b997a08cdfd83e00d4/ForBiggerBlazes.mp4';
  return msg;
```
- Click "Done".
Double click on the image/video node to edit the properties.
- Enter the "Name".
- To edit the "Group" section, click .
- Select the image "Size".
- Enter the "Label".
- In the "Type" section, you can select any one of the following options from the dropdown menu.
- To select the path, click .
- Click "Done".
Save and execute the flow.

Note

If the "Video" type is selected:
- Controls: It allows you to switch "On" or "Off" the controls of the audio file on the VFC dashboard. If you switch to "Off", the controls will be not visible on VFC dashboard.
- Autoplay: It allows you to switch "On" or "Off" the autoplay of the video file on the VFC dashboard.

The following graphic shows the output of "image/video" node in the dashboard window. Click the "FUN" or "BLAZES" buttons to play the videos from the source.

imagevideooutput

Using audio node¶

audionode

The "audio" node allows you to add an audio player to the dashboard. You can select the audio source file from the “Select file” dialog or define using message property path.

Procedure¶

To execute the example flow using audio node, follow these steps:

From the node palette, drag and drop the following nodes from the respective palette to the working area.
- Button node
- Function node
- Audio node
Connect the nodes in a flow as shown below:

Double click on the function node to edit the properties.

Enter the "Name".

Message property path (PLAY):

  msg.path = '/api/iotfile/v3/files/ebdeb4028b664e2baeab95a546f8b84f/file_example_MP3_1MG.mp3';
  return msg;

Click "Done".

Double click on the audio node to edit the properties.
- Enter the "Name".
- To edit the "Group" section, click .
- Select the image "Size".
- Enter the "Label".
- In the "Controls" and "Autoplay" sections, you can select any one of the following options from the dropdown menu.
- To select the path, click .
- Click "Done".

Note

Controls: It allows you to switch "On" or "Off" the controls of the audio file on the VFC dashboard. If you switch to "Off", the controls will be not visible on VFC dashboard.
Autoplay: It allows you to switch "On" or "Off" the autoplay of the audio file on the VFC dashboard.

5.Save and execute the flow.

The following graphic shows the output of "audio" node in the dashboard window. Click the "PLAY" button to play the audio from the source.

audiooutput

Using etable node¶

etablenode

The "etable" node allows you to display the data in an interactive table format on Visual Flow Creator dashboard. This etable node displays the table data based on Tabulator library.

Procedure¶

To execute the example flow using etable node, follow these steps:

From the node palette, drag and drop the following nodes from the respective palette to the working area.
- Inject node
- Function node
- etable node
- Debug node
- Text node
Connect the nodes in a flow as shown below:
Double click on "inject" node to edit the properties. For more information, refer to Editing nodes.

Double click on the function node to edit the properties.

Enter the "Name".

Enter the "Code".

  var machine1 = 'Generator';
  var machine2 = 'Pump';

  msg.payload = [
  {"AssetType":machine1, progress:95, dom:"14/01/2022", rating:4},
  {"AssetType":machine2, progress:90, dom:"15/02/2022", rating:3}];
  return msg;

Click "Done".

Double click on the etable node to edit the properties.

To edit the "Group" section, click .
Select the image "Size".
Enter the "Name".

To enter the JSON code in the "Options" section, click edit .

  {
      "movableColumns": true,
      "movableRows": true,
      "layout": "fitColumns",
      "pagination": "local",
      "height": "700px"
  }

To enter the JSON code in the "PayloadColumns" section, click edit .

  [
    {
        "title": "AssetType",
        "field": "AssetType",
        "width": "10%",
        "editor": false
    },
    {
        "title": "AssetProgress",
        "field": "progress",
        "formatter": "progress",
        "sorter": "number"
    },
    {
        "title": "Date Of Manufacture",
        "field": "dom",
        "sorter": "date",
        "hozAlign": "center",
        "width": "30%",
        "editor": false
    },
    {
        "title": "Rating",
        "field": "rating",
        "formatter": "star",
        "hozAlign": "center",
        "width": "30%",
        "editor": true
    }
  ]

Click "Done".

Save and execute the flow.

The following graphic shows the output of "etable" node in the dashboard window.

etableoutput

Last update: August 6, 2024

Usages of standard dashboard nodes¶

Button node¶

Dropdown node¶

Switch node¶

Slider node¶

Numeric node¶

Text input node¶

Data picker node¶

Colour picker node¶

Form node¶

Text node¶

Gauge node¶

Chart node¶

Notification node¶

UI control node¶

Template node¶

Using image node¶

Procedure¶

Using JS/CSS node¶

Procedure¶

Using IFrame node¶

Procedure¶

Using minerva node¶

Procedure¶

Using heat map node¶

Procedure¶

Using led node¶

Procedure¶

Using linear gauge node¶

Procedure¶

Using microphone node¶

Procedure¶

Using statechart node¶

Procedure¶

Using table node¶

Procedure¶

Using list node¶

Procedure¶

Using vega node¶

Procedure¶

Using image/video node¶

Procedure¶

Using audio node¶

Procedure¶

Using etable node¶

Procedure¶