<style>
.text-span-6 {
    background-image: linear-gradient(99deg, rgba(170, 163, 239, .5), rgba(125, 203, 207, .5));
    border-radius: 50px;
    padding-left: 15px;
    padding-right: 15px;
}

#title-text {
display: none;
}

.panelgradient {
    background-image: linear-gradient(180deg, #d5def0, whitesmoke);
    border-radius: 8px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 4rem;
    display: flex;
    position: relative;
}

</style>


<div class ="panelgradient">

<h1 style="text-align: center;">Displays <br> (Desktop and Web)</h1>

</div>



Introduction to the Displays Module

The Displays Module allows you to create User Interfaces.

Some of the Module Display features:

  • Allows the creation of .NET WPF and HTML5 from a unified drawing tool.

  • The same configuration can execute in both WPF and Web clients.

  • Create Responsive Dashboards as well HMI process screens.

  • Allows user defined layouts creating Displays composed by many frames.

  • Large set of Smart Symbols, High Performance Graphical symbols and extensible components included.

  • Support for Themes skins, Language Localization and Units Metric systems conversion.

  • Automatically connects Data Templates with Symbols.
  • Displays dynamically created from the Asset Model, for Self-Aware SCADA applications.

On this page:



Key Concepts and Terms


Display

A Display is a window or frame of your application’s user interface. A display can contain multiple graphical elements. The elements of a display can be static, meaning they always appear the same, like a title or an image, or dynamic, such as a gauge or a color status indicator.


Layout

Layouts allow the organization of the user interface into frames or panels, acting as containers for your Displays. For instance, a typical layout includes a top display that remains constant with navigation buttons, and an area below where different displays can be shown.


Client

A client is a software component that interacts with a server or services, including types such as .NET Clients, HTML5 Clients, and Remote Clients. 


Rendering Engine

A rendering engine generates visual output from an application's display drawing. In our context, the Engine can be WPF, HTML5, or Portable meaning that the same displays can be rendered to WPF or HTML5 clients.


PanelType

A Panel is containers for organizing the displays graphical elements.  The PanelType defines how those elements will be organized.

Our Platform support Canvas and Dashboard as PanelTypes.

Canvas (or Process Screens): The elements are in a drawing surface, where each element has its specific location and size.

Grid (or Dashboard Screens): The elements are placed in Grid, which size, columns are rows are responsive, which the graphical elements adjusting accordingly.




Understanding the Displays Module

The Displays Module implements the UserInterface for the execution of your solution. The Drawing of a display itself  is in the next chapter, Drawing User Interfaces, first is necessary to understand various concepts, features around creating and using the User Interface Displays.

Display Technologies and Client Types

Displays leverage various technologies and support different client types, such as .NET Clients and HTML5 Clients. Understanding these technologies and client variations is necessary for tailoring displays to specific platform requirements and user experiences.

→ Read more about Display Client Types

WPF and HTML5 sharing same configuration

The Portable option allows automatic conversion between WPF and HTML5 technologies. Users do not need to create two different kinds of screens for Windows and Web clients. Using the Portable option for the rendering engine creates displays that will automatically function in both HTML5 and WPF. This enables running on the web browser all the displays you created for Windows/WPF.

Process Screens and Dashboards

Process screens and dashboards are specific layouts within displays that organize graphical elements for different data visualization purposes. They contribute to the overall structure and design, enhancing the user experience.

A Process Screen represent a process diagram. When resize the elements keep their relative position. 

→ Read more about Responsive Dashboards

A Process Screen represent a process diagram. When resize the elements keep their relative position.

A Dashboard a data presentation where the UI components are placed on a grid, according to the size of the Container window. 

Display Modes and Stretch Options

Display modes and stretch options influence how information is presented on the screen. Whether configuring modes for specific fixed contexts or allowing stretching elements for responsiveness, these options impact the visual output.

→ Read more about Display Modes and Stretch Options. ????

Windows Specific Features

Although the platform tries to keep the Windows/WPF and Web/HTML5 experiences of the displays as similar as possible, that are features available only when running WPF displays in Windows, due intrinsic limitations of the web browser. 

Those features include;

  • Easily setup for Multi-Monitor applications.

  • Process Control execution mode disables the Windows Task Switch.



Configuring Displays

The Objects and Tools to create and manage Displays are organize in the following sections:

Displays List

The Displays List page shows the current set of Displays of the solution. More information in Displays List

Displays Draw

Built-in graphical editor for Displays. Go to Displays Draw for an overview, and go to Drawing the User Interface for information on all the drawing tools

Layouts

Organize Displays into frames. More information on Displays Layouts

Client Settings

Setup startup and execution settings, when using the displays. More information on Displays Client Settings

Images

Table will all Image Files imported to the Solution File.  More information on Displays Images

Symbols

Table will all Symbols imported to the Solution File, or created within.  More information on Displays Symbols

Themes

Show the available Themes and allows customizations. More information on Displays Themes

Localization 

Define Translation Dictionaries, allowing different operator to run their displays in different languages. More information on Displays Localization

Units Conversion

Define Dictionaries for Metric System conversion, allowing different operator so see Values in different metric system. More information on Displays Units Conversion

Creating New Displays

You can create a display in two sections of the software: Displays/List and Displays/Draw. These interfaces enable the creation and management of new displays.

To create a display on List:

  1. Navigate to Displays/List.
  2. Click the  button at the top to open the 'New Display' popup window.
  3. Define the Name and Description of the display.
  4. Define the Rendering Engine. This configuration item has three options: Portable (available for WPF and HTML5), WPF Only, and HTML5 Only.
  5. Define the Panel Type for the display. This configuration item has two options: Canvas and Dashboard.
    The Canvas option allows for manual positioning and sizing of elements.
    The Dashboard option automatically resizes and repositions elements, organizing the display into predefined regions. It provides a structured and uniform layout, ensuring that elements adapt to different screen sizes and resolutions without manual adjustments.
  6. Optionally, choose a Template for the display. If you do not select a template, a blank page will be created by default.
  7. Finally, press the OK button to finish the display creation and close the popup window.

To create a display on Draw:

  1. Navigate to Displays/Draw.
  2. Click the  button at the top to open the 'New Display' popup window.
  3. Follow the same procedure as for Displays/List.

The Drawing the User Interface section of the Users covers the information about the drawing tools and CodeBehind editing. 



Working with the Displays Module

Enabling Multi-Monitor Support

The multiple monitor feature enhances solutions to support various screens, which is useful for enterprise Network Operations Centers and Operations Control Rooms. To activate this feature, navigate to Displays → Client Settings and select Enable MultipleMonitor. This option is available exclusively for Rich Clients.

→ Read more about Client Settings.



Best Practices and Troubleshooting

Best Practices and Recommendations

Use responsive dashboards when designing interfaces for client displays, ensuring that the HMI and dashboard components adapt to different screen sizes, resolutions, and orientations.



In this section: