How To Use Tags To Organize Data In Mango

Mango Automation is a web-based multi-platform software application that allows users to access and control electronic sensors, PLCs, controllers, databases or web services, through multiple protocols simultaneously. Mango provides an interface with which you can create and configure various Data Sources (data sources), while providing management of access to users, data logging, alarms and automation.

If you want to know more about Mango Automation, check here.

Let’s say that we want to monitor three HVAC systems (hvac-1, hvac-2, and hvac-3)at different locations, two of them on Site 1 (hvac-1 and hvac-2) and the last one on Site 2. Each HVAC will have next variables:

• Current
• Voltage
• Temperature
• Outside temperature
• Temperature set point
• Fan state (ON/OFF)

First, we need to go to Bulk data point edit page and create a tag to group HVAC data points into sites. So, we click on the + button, next to select tags dropdown:

A pop-up window will be opened, and we will create a siteName tag:

At the end of the table, you will see a new column called Tag ‘siteName’. Now, we select the hvac-1 and hvac-2 data points, and we will assign a site name of Site 1.

And for hvac-3 we will assign a site name of Site 2.

We will do the same for a hvacName tag to assign a name for each HVAC system.

Now, we will create a new module and a component to show the data by site. You can check How To Develop Custom Views With AngularJS Components In Mango Automation to know how to create them in more detail. I’ll explain it real quick.

In the public folder, in File Stores, we will create the next structure inside the tagsTest folder:

- tagsTest
   - tagsTest.js
   - components
      - hvacsOverview.js
      - hvacsOverview.html
      - hvacDetails.js
      - hvacDetails.html

• tagsTest.js will be the AngularJS module.
• hvacsOverview.js and hvacsOverview.html will be an overview component.
• hvacDetails.js and hvacDetails.html will be a detailed view of every HVAC system.

Bellow is the starter code of hvacsOverview component:

hvacsOverview.js

define(['angular', 'require'], function(angular, require) {
'use strict';
hvacsOverviewController.inject = ['$scope'];
function hvacsOverviewController($scope) {
    this.$onInit = () => {
        
    };
}
return {
    bindings: {},
    controller: hvacsOverviewController,
    templateUrl: require.toUrl('./hvacsOverview.html')
};
    
});

hvacsOverview.html

<h1>Overview</h1>

Bellow is the starter code of hvacDetails component:

hvacDetails.js

define(['angular', 'require'], function(angular, require) {
'use strict';
hvacDetailsController.inject = ['$scope'];
function hvacDetailsController($scope) {
    this.$onInit = () => {
        
    };
}
return {
    bindings: {},
    controller: hvacDetailsController,
    templateUrl: require.toUrl('./hvacDetails.html')
};
    
});

hvacDetails.html

<h1>Details</h1>

Next is the starter code of the module:

The module will load the hvacsOverview and hvacDetails components, and then it will add three menu items for them.

NOTE: Remember to add this module, to User module field in UI Settings.

You will see something like this:

Now, let’s start working on the Overview page. In this view, we will see an overview of HVAC systems filtered by the site.

The Overview component will have the next code:

hvacsOverview.js

So, we have some interesting methods:

• $onInit: This method runs when the component has started. In this case, it runs the refreshSites() method.
• refreshSites: It runs a handy service, which is called maDataPointTags. This service will return us an array with all the possible values for a specific tag. For siteName tag, the possible values are Site 1 and Site 2. Then, we add a new ALL value to this array to use it on a dropdown list in the view. This method will help us to filter data by site. Finally, we run siteChanged method.
• siteChanged: It takes care of updating the siteName param in the URL on the view every time that the user changes a site, and runs getHvacNames().
• getHvacNames: It uses maDataPointTags to get an array with all possible hvacName values on a selected site. Next, it runs refreshHvacs() method.
• refreshHvacs: This method will return an array with all the points that belong to a selected site. Then, it runs orderPoints() method.
• orderPoints: It finally order the data points so that we can show them in the view easier.

In the end, we get an hvacs object like this, depending on the site that we have selected:

{
    'HVAC 1': {
        'temp': tempDatapoint...,
        'outsiteTemp': outsiteTempDatapoint...,
        'setPoint': setPointDatapoint...,
        'amps': ampsDatapoint...,
        'volts': voltsDatapoint...,
        'fan': fanDatapoint...,
    },
    'HVAC 2': {
        'temp': tempDatapoint...,
        'outsiteTemp': outsiteTempDatapoint...,
        'setPoint': setPointDatapoint...,
        'amps': ampsDatapoint...,
        'volts': voltsDatapoint...,
        'fan': fanDatapoint...,
    },
    ...
}

Now, the component HTML file hvacsOverview.html will look like this:

The <md-select> component will use as options the same sites array that we got on the refreshSites method. We use the hvacs object to show the HVACs data that we want, inside a <md-card> component.

Finally, we will see the next view:

And depending on what we select, we will see different data:

Now, we will work in the hvacDetails view, here is the code of the component:

This component is similar to hvacsOverview. The main difference is that now we have to dropdowns, one for sites and other for hvacs. Here is the HTML template code:

This component will give us a view like this:

If you want to know more about Mango Charts library, please check this article.

Mango tags are really powerful to organize data, it helps us to make optimized queries to the database, so we can develop better UIs for our projects.

See you in the next article!