Page History

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. You can keep the default settings, on the Confirmation Dialog to create a TagProvider, 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, to create automatically 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 are, hit the Map to Symbol, 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 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.

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: