MQTT TagProvider Tutorial

Using the Data Explorer MQTT Tools

Go to Data Explorer → MQTT Tools to start. You can connect to your own broker, if you wish, but our system has a native SpartkplugB MQTT Built-In Broker that you can use.

Out platform also offers a MQTT Publisher Simulator, that has customizable data being published. Simply click both of the green "start" buttons to start the Broker and Simulator.

Once you've done so, click Connect to see and browse the generated data.

TagProvider connection with MQTT Broker

In order to make the Broker data available to the Application, follow the steps:

1-Create the TagProvider connection

Go To Unified Namespace → Assets Tree, use the new TagProvider icon (image) to create a MQTT Connection

<Image New Connection mqtt>

As you are using the built-in local broker from the local computer, you keep all the default settings, and just press ok.

2- Add the data to the AssetTree

Use the New Folder Icon, to create a Folder in the AssetTree where you want to show the MQTT Data

You can filter to starting showing only from a certain node, in this case, let's just show all the data.

<iamge>

That's all!! You can explore the contents of the Broker using the AssetTree page, and yo ready to use that data in displays, or other ares of the application. 

New Display With AssetTree and Symbols

1- Go to Draw  and select the MainPage

2-Insert a TAssetsTree component (Located under the Modules section of the list of components). No configuration required, the default settings are what we need.

4. Add a TextBox (icon) using the vertical toolbar. Add the value Client.SelectedAsset to the linked value, and update its label to AssetPath

4. Add a TextBox (icon) using the vertical toolbar. Add the value Asset(Client.SelectedAsset) to the linked value to AssetValue

3, Insert a CircularGauge (Located under Gauges).  

Double click at the object to show its configuration, at the LinkedValue, add client.SelectedAssetc Click at the <..> button to open the ObjectSelection Window. Navigate down the until you a find a Voltage property. 

Modify the Maximum Range to 12, and the Header to Voltage.

<add image of Gauge Configuratoin>

4. Insert another Gauge, but this time map the Linked property to Asset(Client.SelectedAsset)

Running the Solution

Before we add more content, let's run the Solution to verify how we are going so far. 

Go To Runtime → Startup and press START button, or use the top menu, to execution Action → Startup

The RIchClient will execute and shall show the AssetTree. As you navigate on the tree, some fields will have a new value, the ones mapped to Client.SelectedAsset. Other that are mapped to one specific attribute will remain with that link.

You can  just minimize those windows, going back to the Designer, as the platform supports online configuration.

Add a DataGrid and a TrendChart

1- Add a DataGrid component to the display. Double click at the object, and Map the DataSource to the value client.SelectedAsset

2. Add a TrendChart component to the displays. Use the plus button to create a new pen, map the column TagName to  the value client.SelectedAsset

Save the Display, and go back to see the changes on the Displays on the running solution.

ADD TIP on Online Configuration checkbox, Dev mode

In runtime, your Asset Tree and its components will look like the image below.

The IO element mapped with the ASSET(” CompleteAssetName ”) syntax will be resolved similar to the TK.GetObjectValue and will display the current value of the specific Tag it was mapped to.

The SelectedAsset and SelectedLevel Tags will also change according to the element you click on

Advanced Bonus: Self-aware Dynamic Pages

Component and Template Project

This component/Template project was developed so that the platform automatically recognizes the levels, the Tags organization (Children and Parents) and/or the ExternalTags (one or more) configured in your project according to the Asset data structure, enabling the page navigation or the generation of a dynamic screen in RunTime with the child symbols of the chosen node in the AssetTree if their templates match any of the platform Templates and, necessarily, have a symbol with the same name in our symbol library to be generated.

To do so, the user must configure the following steps:

•        Define the navigation for each level of the assets tree.
•        Create the templates compatible with the Asset data structure from the final nodes.
•        Create the graphic symbols that will use this data model.

Navigation

In the CodeBehind from “AssetTreeViewPage” display, there is a switch/case with an indication of each asset level. You can insert a specific display opening method for each level or make a call for dynamic creation of the symbols based on the asset model of this level.

In the code below, level 1 opens the MainPage page, level 2 opens the AssetSecondLevelPage, and level 3 makes the call for the dynamic symbols creation:

Then, change the "Desktop Initial Page" for the "HTML5_AssetMonitor" (you can also change the Mobile Initial Page, if you use mobile).

To wrapper HTML5 pages, the stretch functionality needs to be disabled. You can on any page enable one of the anchor checkboxes for any object which will automatically disable stretching, enabling the object wrapper. In this specific case (AssetMonitoring), we need to enable the anchor of an object that will be present in any of the apparent screens along with the HTML5_DynamicSymbolPage screen, itself included.

Also, the component comes with a Tag UI bound to it, this Tag consists of two more Tags: UI.InitalLevel and UI.Symbols, that are responsible for setting up the initial Level of the AssetTreeView and Storing all the templates of the project’s symbols in it for later comparison, respectively

The Tag.UI.InitalLevel comes with a StartValue of “FirstLevel” referent to the example that comes along with the template/component. If you want to set up an Initial Level on your Tree, you just need to change the StartValue field of this Tag.UI.InitialLevel to the respectively first level name in your project. Also, you can leave it empty to get All the tags from Root accordingly to the AssetViewer configuration in your display.

.NET Displays

// User can modify already defined levels, add new levels and include source-code to each level

private void DefinePageToLevel(int numOfLevel)

{

         switch (numOfLevel)

         {

         case 1:   // defines what will happen if first level is selected (if commented the default code is executed)

                        @Display.MainPage.Open();

                        break;

                       

         case 2:                  // defines what will happen if second level is selected

                        @Display.AssetSecondLevelPage.Open();

                        break;

 

         case 3:                  // defines what will happen if third level is selected

        

                        // Calls a class method in assync mode, Symbols is the class, GetSymbols is the method,

                        // callback is the method executed in the return

                        // This method will compare the fullAssetPath's content with the Template's and create

                        // symbols mapping to the asset in case of matches

                        TK.BeginExecuteClassMethodOnServer("Symbols", "GetSymbols", this.Callback, null, new object[] {currentSelectedAsset});

                        break;

                       

         default:   // defines what will happen if a non-defined case is selected

                        break;

         } // switch

}

Using the Library to Crete new Displays

Create a new Display, using the Library template: AssetsTreeSidebar.

Create a new Displays, using the library template: AssetsTreeDynamicContent

Data Template Creation

To add a new symbol that will be dynamically created in the RunTime of this project, an important step is the Template.

The template must have the same name as the associated graphic symbol object, and the system will use these members' names inside the template to compare and match with the Asset tree data structure. This is how to know what kind of Data Model and symbol will be created dynamically.

By default, the component has some templates created to be used as examples: Level, Heater, and Pump.

Our component works by analyzing the templates that exist in the Project and making a Dictionary with them relating each Template name with its child’s Names and trying to match any other object with the same child properties within the node you choose from your AssetTree to know which symbols will be created and which Tag or Communication Point to link them.

The process to generate a new Template is:

You will have to know exactly which properties this symbol will contain. For example, let us analyze a Pump, supposing that it contains three properties: one holding its state called Status; the other containing its name called Name; and the last containing whether it is operating in automatic mode or manual called ManualButton. This way we have the following Pump:

• Pump

• Name

• ManualButton

• Status

Your Template should follow these exact same names, so the template Name should be “Pump” and it should contain the properties: Name, ManualButton and Status, so that every pump symbol in your project will follow these exact same Names and Properties.

Symbol Graphic Creation

Now that we have created our model, we can start working on our symbol. To create a symbol, you must not deviate from the already established standards for creating symbols in the platform. It is recommended to develop the symbol that best adapts to its situation with the geometry that the user pre-defines as well as the effects and colors.

The most important step in creating the symbols is how to fill in their executor fields (expressions) to dynamically execute the corresponding function after they are created on the screen. The best syntax we recommend for our Users is, following our Pump example:

Thus, the symbol will receive the label “#Asset:” dynamically during its creation on the screen replacing the “<DynSelectedAsset>”, receiving all the information of the corresponding path by linking it to its proper Tag.

The Pump, Heater and Level symbols are just like the example in the component, so try to insert and edit this symbol to follow the same simple standard when creating the real symbol project.

Pages

This part is not related to the dynamic page where the graphical symbols will be created dynamically. Eventually, the user can modify the color background or the page size to be compatible with different layouts. The dynamic page is “DynamicSymbolPage”.

About the other pages used to show synoptic, areas, lines, or any other with static objects using dynamic values from the select asset node, the component has an example page called “AssetSecondLevel” with some examples of how to show an output value from selected asset, or how to Toggle an asset value, etc.

Basically, the user needs to use the following syntax:

ASSET(Client.SelectedAssetPath + "LineSpeed")

The last string name is where the asset property must be shown, in this example “LineSpeed”.

You can have buttons to navigate to a specific position of the AssetTree setting the path in the internal variable Client.SelectedAsset.

To navigate to a specific node from the current selected asset, you can use this syntax:

Client.SelectedAsset = Client.SelectedAssetPath + "ThirdLevel2"

Creating a New Layout

Go to Displays-Layouts, create a new Layout, using the AssetsTreeSidebar for the LeftPanel, and the AssetsTreeDynamicContent for the content, and Header for the TopBar. 

<iamge

Navigating the Layouts

Open the Header Page, and add two buttons, with texts  Main and DynamicData.

Select the first button (Main), double click for property, at Dynamics, add an Action, OpenLayout, select the StartupLayout

Select the second button (DynamicData), double click for property, at Dynamics, add an Action, OpenLayout, select the new Layout you just created

Verify the Results

Go the running Displays and use the command button on the Header to the Dynamic pages.

Navigate the AssetTree until the Path Line1, the contents of the Dynamic Page will be updated using Symbols that matches the properties on the data found on the asset tree.

In this section: