Displays
(Desktop and Web)
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.
This documentation section explains the tools available on the Display Module, the drawing itself of displays is on the next documentation section: Drawing the User Interface.
On this page:
Key Concepts and Terms
Display / Screen
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.
For the context of the documentation, the terms display and screen can use as equivalent, when referring to an user interface window. When referring 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.
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.
Desktop and Web sharing the same configuration
The Display Modules allows the creation of screens to run in Windows Desktops, using WPF (Windows Presentation Foundation) technology, or in Web browsers, using HTML5 and WebAssembly technologies.
Although you can create displays that requires to open only in one or another environment, our platform support the Portable option, where the exact same configuration can be used both by Windows/WPF clients, or Web/HTML5 clients.
Users don't 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 Desktop and Web. This feature enabled our users from previous release to use the screen they created over years to Windows Desktops and open directly in Web browsers with rework nor modifications.
→ 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 the elements keep their relative position.
A Dashboard Screen is for data presentation where the UI components are placed on a grid, according to the size of the Container window.
When using Process screens, there are various to specific the responsiveness for the resize, like stretching proportionally, or other options, that behavior is defined in the Drawing tool, or the DisplaySettings.
When using Dashboards, you are automatically creating responsive UI interface. See more on Responsive 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 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.
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 and Dark Themes, including High-Contrast ones, provides the better comfort and visibility when creating the solution, as well for operators.
The Built-in tools enables the easy creation of Solutions that will be delivered with theme support, with no extra effort for it.
Localization and Internationalization
The platforms allows easy creation of solutions that, no modifications, can run in various settings for language and internationalization.
It is possible to two Operators accessing the same server, to use their own and distinct choices of UI language and Engineering Units, changing its settings for his local User Interface.
Smart Symbols and Hight Performance HMI
Smart Symbols
The Drawing tool includes a library of around 2.000 SmartSymbols, graphical elements typically used on industrial applications. Many of those Symbols, are more than just a vector image, it has also dynamic behavior that allows a 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 know book High Performance HMI proposed a set of standards on HMI design. Our platform fully enables the creation of solutions support that standards, including HighPerformance Graphical (HPG) pallets on its themes, and hundreds of read-to use Symbols creating following those specifications.
Advanced Components and Controls
For advanced graphical interfaces, such Gantt and TrendChart, DataGrids, PdfViewer and other, a set of Graphical Components, for both WPF and Web is included. Additionally third-party controls can easily be used in the solution.
Display Module Configuration
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
In this section: