Page History

Requirements

This tutorial assumes that the basic Solution Configuration tutorial has already been executed. 

Therefore, the detailed description of some operations, like creating new solutions, won't be included in this tutorial.

It's not mandatory, but it is recommended to first complete the MQTT TagProvider Tutorial.

Configuration Outline

1. Create a New Solution using the AssetTreeView template.
2. Go to Data Explorer / MQTT Tools. Start the MQTT Broker and the  MQTT Simulator

2. Still at Data Explorer, use the Export command to create the MQTT TagProvider, and

1. the Data Template for the Solar Panel
2. Go to Unified Namespace / Data Templates and associate a symbol with the Template.
3. Run the Solution, and enjoy your Smart Solution with a Dynamic Display!

Bonus Activity: Explore the Library of templates

, in order to understand the potential for advanced customizations.

Configuration Steps

Create a new Solution

At the Solutions Manager tool, create a new solution, using the AssetTreeView template.

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.

Image Removed

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

Image Removed 

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. 

the BuiltIn MQTT Broker and the MQTT Simulator.

Open the nodes of TreeView, until you find and select GROUPID, the hit the Export To Solution Button. On the Confirmation Dialog to create a TagProvider, you can keep the default settings, and press OK.

Open the nodes of the TreeView until you locate you open Panel1, showing the Data Structure for SolarPanel, then hit the Export to Solution button. This will automatically create a Data Template for that structure.

Connecting a SmartSymbol to a DataTemplate

Go to Unified Namespace / Data Templates. 

Select the DataTemplate just created. At the top area, hit the Map to Symbol button. Then, navigate in the library to find the symbol /HMI/FacePlates/SolarPanel

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 solution to verify how we are going so farprogressing. 

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

The RIchClient Rich Client will execute and shall show the AssetTreeshould display the Asset Tree. As you navigate on the tree, some fields will have a new valuevalues, the ones specifically those mapped to Client.SelectedAsset. Other Others that are mapped to one a specific attribute will remain with that retain their link.

You can  just simply minimize those windows , going back and return 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.

Image Removed

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

Next Steps

In this Tutorial, the DataTemplate and Symbol is only the SolarPanel. The same concept can be applied to create dynamic displays combining multiple data structures and symbols.

See that in action at the Solution Examples / Production Line Demo

Advanced Bonus: Self-aware Dynamic Pages

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

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: