Page History

Summary

Technical Information

This Demo demo showcases, among othersother features, 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 while sharing the displayssame layouts.
• Manage the display navigation according based on the selected asset and User user context.
• Integrate Dashboard dashboard pages with Canvas (process diagram pages) with for a fully responsive User user experience.
• Create an Area display that automatically will expand expands to show all Lines found in lines within that area (UNS children).
• Create Build a display using Reference Tags ,  to to automatically map automatically to the selected Local Taglocal tag.
• Create a display using the Asset() syntax , to dynamically map automatically to a dynamic an external asset.
• Allow Enable connections from Windows Native Graphics (WPF), HTTP, and HTTPS from on the same server.
• Leveraging Leverage Execution Profiles to allow the same application to run from the Cloud Server on both a cloud server and locally with the proper appropriate settings. 
• Use of Utilize client-side Tags tags and Scripts scripts for advanced  UI. In this case managing SolarPanel UI—managing Solar Panel and Production assets , and while simplifying the UI development. 
• Implement server-Use of Server side scripts for data calculations (in this case, simulationsimulations, similar though the same concept applies to analytics).

Organizing Displays Layouts

A good start starting point for solutions that will deploy User Interfaces ir deploying user interfaces is to organize the main layouts. 

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

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

• The Header Edit was set to Stretch,

Image Removed

• .
• The left-side Menu is positioned below the Header and is resizable.
• These settings are configured under DisplaysLayouts within the Panels section.

Image Added

Next, Then we defined which pages will would be used for the Header, Menu, menu and initial pagescontent.

The Layout feature can automatically detect whether  The Layout features is able to automatically recognize if the client is opening in on a Portrait portrait or Landscape landscape mobile device. That allows to customize the page used in , allowing customized page selection for each context.  If the If no customization is left emptyspecified, the display listed in the PAGE column will be used.  

To disable a if you want to prevent the use of that panel, add the character an "_"  in character in the corresponding cell. In this solution, we used that to avoid having a left applied this to remove the left-side Menu when opening for in Portrait Mobile mode.

Defining the UNS (Unified Namespace)

As a general rule, the definition of defining the UNS is the best way to start a solution. That This definition includes, :

• Determining which data sources will be used

The MyLine tag is used on in the OEEDashboard and LineDashboard displays, pointing to the selected asset. 

The UI tag is a common good best practice when creating solutions, as it holds all internal variables used to manage the User Interface. The PlaceHolder is just a pre-defined predefined client tag useful for temporary data and teststesting.

Dynamic External TagProviders

This Solution solution also uses assetassets, which whose definition and count , is are dynamically queries queried from an external data source. In this case, we use a an MQTT broker, .

When the application starts (at the Script ServerStartup), our built-in MQTT broker and the built-in MQTTspB simulator are put in executionexecuted. 

The solution will connect with connects to the Broker, and all discovered assets found are place placed under the SolarPanels node SolarPanels in the UNSin the UNS.

Data Transformation using Scripts

In fact, it’s even easier, as you can also add Python code. The platform natively supports server-side scripts with multi-tasking and client-side scripts that activate based on the open displays.

Server-side scripts are defined in Scripts-Tasks. They use only tags and server-domain objects and are available for all remote clients.

In this solution, the Server Tags represent the Production Line assets (e.g., Press103), and server-side scripts run a simulation on that data.

Client-side scripts are embedded in the open displays. In addition to the display loaded in the Layout, displays can have ChildWindows. All code from all loaded displays executes on the client side, whether in Windows or a browser.

In this solution, the CodeBehind of the MenuTree display handles navigation automation based on the selected asset.

The SITES display consists of two ChildDisplays:

• SitesMap
• Another display that dynamically changes based on the selected site.

When switching Displays and ChildDisplays, you are dynamically loading the scripts that should be executed on the client side.

Excellence in User Interface

This solution demonstrates features that deliver the best possible experience for users and operators.

Fully Responsive, Including Canvas

It is common for dashboards to be responsive. In a dashboard, the display layout consists of cells, which automatically adjust when resizing the client area or opening on a different device to best fit the available space.

FrameworX not only enables the creation of responsive dashboards but takes it a step further by allowing you to build responsive Canvas-based process diagrams, enabling advanced user interfaces with both dashboards and drawing containers.

Here are some examples of responsive displays in this solution, created using Responsive Canvas—something that would be time-consuming to achieve with dashboards alone, and wouldn't replicate the same user experience:

• SiteDallas, SiteMaps, Network, and Features

Even some displays that resemble dashboards are sometimes easier to create using freeform drawing tools. For example, the OEEDashboard page consists of two Canvas drawings:

• OEELeft
• OEERight

An example of a traditional cell-based dashboard can be found on the LineDashboard page.

Themes, with No Extra Programming 

By keeping your solution consistent with default colors for graphical elements, and selecting new ones from the Themes palette, you can make your solution theme-ready with zero programming required.

Performance with Milliseconds Update. 

The combination of FrameworX's proprietary optimizations, WebAssembly technology, and .NET for CodeBehind delivers the best possible performance.

For example, the Home Page of this solution includes two animations using the Client.Millisecond property to showcase real-time updates.

Reference Information

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

In this section: