Overview
This Tutorial will introduce the concept of Dynamic Displays, which allows to create in runtime displays reactive the data context.
In this application, we will connect to a MQTT Broker and create an example of Seft-Aware-SCADA, or DynamicDisplays, which are adaptive the the data source, meaning the exactly same display will show data from different assets based on the selected asset from the remote source.
Configuration Outline
- Create a New Solution using the AssetTreeView template.
- Start the MQTT Broker and the MQTT Simulator, at DataExplorer
- At US AssetTree create a MQTT TagProvider, and a AssetFolder linked to the TagProvider data.
- Create the DataTemplates and SmartSymbols consistent to the solution data model.
- Run the Solution, and enjoy your Smart Solution with a Dynamic Display!
Bonus Activity: Explore the Library templates used, in order to understand the potential for advanced customizations.
On this page:
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
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: