Demo v10

Summary

Technical Information

This Demo showcases, among others, the following features:

• Create a local UNS, with tags and templates.
• Map an external TagProvider (MQTT in this case) for dynamic assets.
• Organize the displays for Desktop, Tablet and Mobile sharing the displays.
• Manage the display navigation according the selected asset and User context.
• Integrate Dashboard pages with Canvas (process diagram pages) with a fully responsive User experience.
• Create an Area display that automatically will expand to show all Lines found in that area (UNS children).
• Create a display using Reference Tags,  to map automatically to the selected Local Tag.
• Create a display using Asset() syntax, to map automatically to a dynamic external asset.
• Allow connections from Windows Native Graphics (WPF), HTTP and HTTPS from the same server.
• Leveraging Execution Profiles to allow same application to run from the Cloud Server and locally with the proper settings. 
• Use of client side Tags and Scripts for advanced  UI. In this case managing SolarPanel and Production assets, and simplifying the UI development. 
• Use of Server side scripts for data calculations (in this case, simulation, similar concept applies to analytics).

Organizing Displays Layouts

A good start for solutions that will deploy User Interfaces ir to organize the main layouts. 

The Layout used on startup is defined in Displays-ClientSettings, and for this solution, we named it "Startup"

We defined the Startup Layout with a Header, a left side Menu, and the main contents area.

The Header Edit was set to Stretch, so it will use the entire width of the display, and the left Menu is position underneath it with a resized enabled. Those settings are in top of the DisplaysLayouts configuration at the Panels configuration:

Then we defined which pages will be used for the Header, menu and initial pages.  The Layout features is able to automatically recognize if the client is opening in a Portrait or Landscape mobile device. That allows to customize the page used in each context.  If the customization is left empty, the display in the PAGE column will be used.  

if you want to prevent the use of that panel, add the character "_"  in the cell. In this solution, we used that to avoid having a left Menu when opening for Portrait Mobile.

The starting a RichClient, SmartClient a WebPage in a desktop computer, the "Page" column is used. 

When a client opens a web connection to the server, the replacements will be applied according it a Mobile (portrait mode) or a Mobile Landscape (Tablet or Pad).

In this solution, all displays are shared by all devices. We customized only the header pages for better navigation experience. 

Defining the UNS (Unified Namespace)

As a general rule, the definition of the UNS is the best way to start a solution. That definition includes, which data sources will be used, which Tags will be created locally, will assets will be used external dynamic TagProviders.

For this Demo, we defined two sets of data:

1. LocalTags for ProductionLines,  
2. External TagProvider for SolarPanels

Local Tags and DataTemplates

In order to easily create a data model, we defied the DataTemplates OEE and Operation, respectively with the OEE information and operation status for the line, and created a LINE DataTemplate with the OEE and Operation members. 

That allows to just create one single Tag, like, Press103 of type LINE, and it will have all the attributes used in this demo. 

Reference Information

→ See Tags and Templates for more information on defining a local UNS

In this section: