<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.

On this page:



Key Concepts and Terms


Display

A display is the visual interface in an application that allows users to adjust data.


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 data and logic.


Panel Types

Panel types, like Canvas and Dashboards, work as containers for organizing display elements. 




Understanding the Displays Module

The displays communicate between technologies, operational processes, and visual configurations. Exploring display technologies and client types provides a foundation for tailoring displays. The operational aspect organizes elements for an enhanced user experience, including screens and dashboards. Additionally, understanding display modes and stretch options for shaping how information is visually presented on the screen helps ensure adaptability and responsiveness. These components collectively contribute to a comprehensive understanding of 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 Automatic Conversion

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.

→ Read more about WPF and HTML5 Automatic Conversion.

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.

→ Read more about Responsive Dashboards.

Display Modes and Stretch Options

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

→ Read more about Display Modes and Stretch Options.



Configuring the Displays Module

Manage displays by organizing records, including exporting, importing, inserting, renaming, and removing them. Design visual interfaces and control logic, and define layouts for component arrangement. Configure startup conditions, display behaviors, and user interface customization. Import external images for visual elements and use standardized symbols for consistent design. Set colors for visual consistency, enable multi-language support for global usability, and facilitate metric and measurement conversions.

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.



Working with the Displays Module

Creating the User Interfaces

The software platform technology stack includes several features and tools to create and deploy real-time displays for advanced process control and visualization.

→ Learn How with Drawing the User Interface.

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.

Self-Aware Displays

The Asset Monitor component explores the asset tree and allows navigation through standard and HTML5 displays at different levels. Each level can have its own displays or use a display that populates its content with symbols linked to each sub-node in the asset tree.

→ Read more about Self-Aware Assets Displays.



Troubleshooting and Best Practices

** Why is there a TOC here? **

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. This section covers design principles and best practices for creating responsive layouts, such as using flexible grids, scalable images, and media queries. The focus is on ensuring that the application delivers an optimal user experience across various devices, including desktops, tablets, and mobile phones, with platform-specific considerations and recommendations for different client types.



In this section: