ProductionLine Demo

Technical Information

Component and Template Solution

This component/Template solution 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.

// 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 Create new Displays

1. Create a new Display using the Library template: AssetsTreeSidebar.
2. Create a new Display 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. 

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: