Node-RED Dashboard – A Custom Network Monitoring Dashboard

4 min

Do you want to create your very own Node-RED Dashboard? In this article, we’ll explain how you can easily create a custom Node-RED dashboard. We’ll also show you how to create a Node-RED dashboard that displays camera snapshots, Round-trip Delay (RTD), and SNMP sensor data charts.

In this tutorial, we’ll cover the following topics:

What is a Node-RED Domotz?

Node-red-domotz is a Node-RED plugin providing easy access to the Domotz Public API. It offers a convenient way to explore the APIs, automate flows, create custom dashboards, and integrate Domotz data with external tools. Getting the most out of Node-red-domotz and our public API, doesn’t require you to have extensive programming skills. This tutorial will help you get started with Node-red-domotz. You’ll learn how to build a custom Node-RED dashboard example for network monitoring and management.

How to install Node-RED

For the Node-RED installation instructions please refer to the official guide.

How to install the Domotz node

To install the Domotz node , search for node-red-contrib-domotz from the “manage palette” menu of Node-RED and install it. 

In addition, we recommend installing the  node-red-dashboard plugin too, because you’ll need to use it in this tutorial.

How to create your first node

After you complete the installation, the domotz-api node should be available in the palette. You can then drag it into the workspace.

Node Red Dashboard creating the Domotz palette

For the node to be functional you need to configure the access info using your API-Key and your endpoint. Bear in mind  that we support multiple access keys. Thus, you can manage multiple accounts from the same workspace:

Node Red Domotz node configuration

Once you configure the access info, you can select any API method from the dropdown list:

Node Red api methods

The next step is to retrieve the IDs of all the available agents. For this purpose,  select agent.listAgents and click ‘Deploy’. You should see a green marker next to the node if the configuration access is valid:

valid configuration Node Red

Now create an inject node to trigger the API call and a debug node to display the output. 

You can easily configure the inject node to send a periodic trigger, enabling auto-refresh of the data. Again, deploy and click inject. 

In the debug space, you will see the API output from which you can extract all the available information about your agents.

node debug output

How to create a customized Node-RED dashboard

Now that you have deployed a Domotz node, let’s see how we can parse the output to create a custom dashboard displaying camera snapshots, Round-Trip Delay (RTD), and SNMP charts. Check out our article about what SNMP is and how it works to learn more.

The API methods of the following examples require some additional configuration. For example agent, device, and SNMP sensor IDs. Make sure you have them ready, you can retrieve them using agent.listAgents, as seen before, device.listDevices and eyes.listEyesSNMP. You can specify the IDs directly in the node’s configuration window or pass them in the input message (e.g., using and injector node with a payload like this {"params": {"agent_id": "123456"}})

How to create an SNMP data chart

You can use SNMP monitoring to remotely monitor all sorts of device and sensor data. In addition, you can use an SNMP data chart for SNMP server room temperature monitoring. You can easily configure Domotz network monitoring software to provide data when SNMP temperature and humidity values rise or fall. 

Select eyes.getEyesSNMPHistory, configure it with the right agent, device and sensor ID and connect its main output to a function node to a chart widget. Then connect the function node to a chart widget. The following function code transforms the input data sequence (msg.payload.message) in the format the chart requires:

data = [
    {
        'series': ['CPU % 5 min'],
        'data': [
            [],
        ],
        'labels': ['CPU % 5 min'],
    },
];

dataIn = msg.payload.message;

for (var i = 0; i < dataIn.length; i++) {
    sample = dataIn[i];
    ts = sample.timestamp;
    data[0]['data'][0].push({'x': ts, 'y': sample.value});
}

msg = {
    payload: data,
};

return [msg];

The following images display the wiring and the resulting chart.

SNMP data wiring - network monitoring dashboard
SNMP data Chart for Node Red Dashboard example

How to create a Round Trip Delay chart

Round-Trip delay monitoring helps you  measure device response time and packet loss stats. Learn more by reading our guide on Using Round Trip Delay (RTD) to analyze your Wi-Fi Network.

For metrics.getDeviceRTDHistory, you can use a similar approach. The difference is that this time you have three different data series to display: maximum, minimum, and median:

data = [
    {
        'series': ['median', 'min', 'max'],
        'data': [
            [],
            [],
            [],
        ],
        'labels': ['median', 'min', 'max'],
    },
];

dataIn = msg.payload.message;

for (var i = 0; i < dataIn.length; i++) {
    sample = dataIn[i];
    ts = sample.timestamp;
    data[0]['data'][0].push({'x': ts, 'y': sample.median});
    data[0]['data'][1].push({'x': ts, 'y': sample.min});
    data[0]['data'][2].push({'x': ts, 'y': sample.max});
}

msg = {
    payload: data,
};

return [msg];
Node red dashboard example of Round Trip Delay RTD Chart

Lights, action…camera! Your custom Node RED Dashboard with security camera footage

Every custom Node-RED network monitoring dashboard needs  Security Camera footage! The multimedia.onvifSnapshot allows you to take a snapshot from an ONVIF camera. 

To display the image in our dashboard you don’t  need a specific function node. You can perform the data parsing in a template node, which connects directly  to the main output of the snapshot node. The following code, (you can add  to the template node) waits for a new message, creates a Blob from the binary data, and sets it as the source of an image tag:

<div>
    <style>
        img {
            border: 1px solid #ddd;
            border-radius: 4px;
            padding: 5px;
            width: 400px;
        }
    </style>

    <script>
        (function (scope) {
            scope.$watch('msg', function (msg) {
                if (msg) {
                    var b = new Blob([msg.payload.message], {type: 'image/jpeg'});
                    scope.image = URL.createObjectURL(b);
                }
            });
        })(scope);

    </script>
    <img ng-src="{{image}}"/>
</div>
onvif snapshot wiring
Node Red Dashboard example custom security camera footage Onvif

 

Your very own Node-RED dashboard example

Now you know how to create your very own Node-RED dashboard. In this tutorial, we’ve seen how to create a custom network monitoring dashboard using data the Domotz API extracts. With little programming effort, the Domotz Node-RED package allows you to interact easily with the Domotz API. 

You can also include all kinds of information in your Node-RED dashboards  like SNMP sensor data, ONVIF Security Camera snapshots, and Round-Trip delay data. Moreover, there are still many additional things you can add to your custom dashboard. For ideas about what else to include, check out our list of the top 10 IoT devices MSPs are monitoring and managing.

In the next tutorial, we’ll cover how to leverage Domotz Webhooks and the Public API to create automatic responses to network event notifications.

Further reading:

Share via Social Networks

You might also like…

Read more top posts in this category

Ready to get started with Domotz?

  • Powerful
  • Automated
  • Simple
  • Affordable
Start Your Free Trial Contact Sales