Versions Compared

Old Version 115

changes.mady.by.user admin

Saved on

compared with

New Version Current

changes.mady.by.user admin

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.


HTML
<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 Displays Module Display 's features:

  • Allows the creation of .NET WPF and HTML5 applications from a unified drawing tool.
  • The same configuration can execute in both WPF and Web web clients.
    • Create Responsive Dashboards 
  • Create responsive dashboards as well as HMI process screens.
  • Allows user-defined layouts, creating
    • Displays
  • displays composed
    • by many
  • of multiple frames.
    • Large
  • A large set of
    • Smart Symbols, High Performance Graphical symbols
  • smart symbols, high-performance graphical symbols, and extensible components are included.
  • Support for
    • Themes
  • theme skins, language localization,
    • Language Localization and Units Metric systems
  • and units metric system conversion.
  • Automatically connects
    • Data Templates
  • data templates with
    • Symbols
  • symbols.
  • Displays are dynamically created from the
    • Asset Model, for Self-Aware
  • asset model for self-aware SCADA applications.

This documentation section explains the tools available on the Displays Module. The drawing of displays is on the next documentation section: Drawing the User Interface.

On this page:

Table of Contents
maxLevel3
minLevel2
stylenone

Key Concepts and Terms

PanelbgColor#ffffff

Display / Screen

A

Display

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

such as a title or an image, or dynamic, such as a gauge or a color status indicator.

Panel
bgColor#ffffff

In the context of this documentation, the terms display and screen can be used interchangeably when referring to a user interface window. When referring to the configuration objects or the module, the term "Display" is used.

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.

PanelbgColor#ffffff

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. 

PanelbgColor#ffffff

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.

PanelbgColor

#ffffff

PanelType

A Panel is

Panels are containers for organizing the

displays

display’s graphical elements.

 The

The PanelType defines how those elements will be organized. Our platform supports Canvas and Dashboard as PanelTypes.

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

a grid with responsive size, columns

are rows are responsive, which the

and rows. The graphical elements

adjusting

adjust accordingly.

Understanding the Displays Module

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

Desktop and Web sharing the same configuration

The Display Modules Displays Module allows the creation of screens to run in on Windows Desktops, desktops using WPF (Windows Presentation Foundation) technology , or in Web web browsers , using HTML5 and WebAssembly technologies.

Although you  can can create displays that requires are intended to open in only in one or another environment, our platform support supports the Portable option, where the exact same configuration can be used by both by Windows/WPF clients , or and Web/HTML5 clients.

Users don't need to create two different kinds types of screens for Windows and Web web clients. Using the Portable option for the rendering engine creates displays that will automatically function in both Desktop desktop and Webweb environments. This  feature enabled feature enables our users from previous  release releases to use the screen screens they created over the years to on Windows Desktops desktops and open them directly in Web web browsers with no rework nor or modifications. 

For Windows WPF, you can access the displays using the Rich Client (installed on the client computer) or a Smart Client (ClickOnce, no installation required) loading from supported browsers.

For Web HTML5, no installation is required; you can use it on desktop or mobile devices with any browser compatible with HTML5/WebAssembly (which most browsers currently are).→ Read more about Display Client Types

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 represents a process diagram. When resize resized, the elements keep their relative position.


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

Image Added

When using Process Screen process screens, there are various ways to specific specify the responsiveness for the resizeresizing, like such as stretching proportionally , or other options, that . That behavior is defined in the Drawing drawing tool , or the DisplaySettingsDisplay Settings.

When using DashboardDashboards, you are automatically creating responsive UI interface.

→ See more on Responsive Creating Dashboards.

Windows Specific Features

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

Those features include;

  • Easily setup for Multi-Monitor applications.

  • Process Control execution mode disables the Windows Task Switch.

Those requirements are useful for enterprise Network Operations Centers and Operations Control Rooms. To activate this feature, navigate to Displays Client Settings

Designer and Runtime Themes

An extensive set of

Light

light and

Dark Themes

dark themes, including

High

high-

Contrast ones

contrast options, provides

the

better comfort and visibility when creating the solution, as well as for operators.

The

Built

built-in tools

enables

enable the easy creation of

Solutions

solutions that will be delivered with theme support,

with no extra effort for it.

Image Removed

requiring no extra effort.

Image Added

Localization and Internationalization

The platform allows the easy creation of solutions that, without the need of modifications, can run in various settings for language and internationalization.

It is possible for two Operators to access the same server, using distinct choices of UI language and Engineering Units, and changing its settings for their local User Interface.


Smart Symbols

Image Added

Smart Symbols

The Drawing tool includes a library of around 2,000 Smart Symbols, graphical elements typically used in industrial applications. Many of these symbols are more than just vector images; they also have dynamic behavior that allows direct mapping to your tags and assets. It includes also a set of Industrial Icons, specially designed for the typical visuals on process displays.

High Performance HMI

The well-known book High Performance HMI proposed a set of standards for HMI design. Our platform fully enables the creation of solutions that support those standards, including High-Performance Graphical (HPG) palettes in its themes and hundreds of ready-to-use symbols created following those specifications.

Advanced Components and Controls

For advanced graphical interfaces, such as GanttCharts, TrendCharts, DataGrids, PdfViewers and more, a set of Graphical Components for WPF and Web is included. Additionally, third-party controls can easily be used in the solution.

Self-aware Applications and Dynamic Displays

Previous generations of SCADA and HMI typically had the drawing and mapping of their data fixed to the tags and process variables. At most, they allowed the same drawing to point to different assets, as long as the assets were similar. Our platform, being a new generation, also allows the dynamic creation of complete graphic displays according to the data being connected.

These data-centric applications can have their user interface created automatically based on the assets found in the data model. Typically, these applications are organized around a unified namespace, an MQTT broker, or OPC UA servers.

Using the TagProvider feature, our platform can establish a dynamic connection with those systems, selecting the best UI elements according the data found on the connected servers.

Image Added

Learn more about data-driver user interface on the Tutorial MQTT and Dynamic Displays.

Displays Module Configuration

Configuring Displays

The Objects and Tools to create and manage Displays are organize organized 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 with all Image Files imported to the Solution File.  More information on Displays Images.

Symbols

Table will with 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 operators to 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 Image Removed 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 Image Removed 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

Table of Contents
maxLevel4
minLevel3
include#

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:

Page Tree
root@self
spacesV10

...