| 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 Display module is a graphical tool Displays Module allows you to create User Interface displays, with extensive set of fully customizable Symbols and componentsInterfaces.
Available Displays Some of the Displays Module's features:
- Cross-Platform development allowing the Allows the creation of .NET WPF and HTML5 from applications from a unified drawing tool..
- The same configuration can execute in both WPF and web clients.
- Create responsive dashboards as well as Create Responsive Dashboards as well HMI process screens.
Easily setup for Multi-Monitor applications.
Process Control execution mode disables the Windows Task Switch.
- 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.
Automatically connects Data Templates with Symbols.
- Support for Themes theme skins, Language Localization and Units Metric systems conversionlanguage localization, and units metric system conversion.
- Automatically connects data templates with 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 | ||||||
|---|---|---|---|---|---|---|
|
Key Concepts and Terms
Display
Definition. Purpose. Função. Funcionamento. Application. Usage
Client
Definition. Purpose. Função. Funcionamento. Application. Usage
Redering engine
Definition. Purpose. Função. Funcionamento. Application. Usage.
Panel types
Definition. Purpose. Função. Funcionamento. Application. Usage
Understanding Displays
FrameworX technology stack includes a compete set of tools to create and deploy real-time displays for advanced process control and visualization.
Display Technologies and Client Types
HTML5 Client
Runs directly from the Web-Browser with no installation of any software required (nor any active-x controls!). The partial-trust security guarantees it runs in a completely isolated secure environment.
.NET Client
The .NET displays are created using WPF (Windows Presentation Foundation) and can only be used in Windows Computers. There are two ways to access those displays: RichClient and SmartClient.
Rich clients: runs as a desktop application, allows blocking the Windows task-switch. This is ideal for process control applications that need high performance and enhanced security.
Smart clients: uses Click-Once technology. Installs and updates on remote clients with a single click from a browser and is automatically updated on the remote clients when it is updated on the server. It uses all the power of the remote computer yet retains the advantages of a centralized installation. The same displays created on Windows computers are automatically rendered to run natively on iPads or iPhones, combining the rich user experience and security of a native app with the benefits of having only one project configuration.
Remote Server technologies
Runs using remote desktop connection or Terminal server or other thin client technology. Currently, this option is less used and not included in the installation, but our software platform is still compatible with third-party tools enabling that technology.
Check Displays Client Type for additional information.
Web and Mobile
FrameworX and a easy to use layout designer, which allows to define your Desktop and Mobile views form the same interface.
That features expedites the creation of responsive and device dependente application, which will automatically open the best option based on the form factor from the requesting user.
Dashboards and Process screens
A dashboard is a visual representation of data that provides an overview of key performance indicators (KPIs) and other important information. It is typically used to monitor real-time data, keep an eye on the trends, and track progress toward specific goals. Dashboards often use charts, graphs, tables, and other visual elements to display data in a clear and concise manner. So, on this software framework, a Dashboard refers to a responsive and dynamic User Interface/ 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, such as a title or an image, or dynamic, such as a gauge or a color status indicator.
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.
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
Panels are containers for organizing the display’s graphical elements. 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 a grid with responsive size, columns and rows. The graphical elements adjust accordingly.
Understanding the Displays Module
The Displays Module implements the user interface for the execution of your solution. The drawing of a display itself is covered in the next chapter, "Drawing User Interfaces." First, it is necessary to understand the various concepts and features related to creating and using the User Interface Displays.
Desktop and Web sharing the same configuration
The Displays Module allows the creation of screens to run on Windows desktops using WPF (Windows Presentation Foundation) technology or in web browsers using HTML5 and WebAssembly technologies.
Although you can create displays that are intended to open in only one environment, our platform supports the Portable option, where the exact same configuration can be used by both Windows/WPF clients and Web/HTML5 clients.
Users don't need to create two different types 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 environments. This feature enables our users from previous releases to use the screens they created over the years on Windows desktops and open them directly in web browsers with no rework 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).
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 resized, 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 ways to specify the responsiveness for resizing, such as stretching proportionally or other options. That behavior is defined in the drawing tool or the Display Settings.
When using Dashboards, you are automatically creating responsive UI interface.
Windows Specific Features
Although the platform tries to keep the Windows/WPF and Web/HTML5 experiences of the displays as similar as possible, there are features available only when running WPF displays 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 and dark themes, including high-contrast options, provides better comfort and visibility when creating the solution, as well as for operators.
The built-in tools enable the easy creation of solutions that will be delivered with theme support, requiring no extra effort.
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
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.
Learn more about data-driver user interface on the Tutorial MQTT and Dynamic Displays.
Displays Module Configuration
The Objects and Tools to create and manage Displays are 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 with all Image Files imported to the Solution File. More information on Displays Images.
Symbols
Table 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 operators to see Values in different metric system. More information on Displays Units Conversion
Implementing responsive design principles
Working with grid layouts to create adaptable and flexible user interfaces
Responsive Dashboard Pages enable users to create displays that automatically adjust their layout and appearance based on the display size and resolution. This ensures that solutions maintain a consistent and professional appearance across various devices and screen sizes, facilitating accessibility and ease of use.
In modern industrial environments, operators often need to interact with HMI SCADA systems from a variety of devices and environments. They may use a desktop computer in a control room, or a tablet on the factory floor, or while they are off-site. This demands responsive design for applications with the software platform.
Responsive design ensures that the application interface dynamically adjusts based on the screen size, resolution, and orientation of the device being used. This helps to maintain a consistent and professional appearance across multiple devices, ensuring that operators can effectively interact with the application, regardless of their device or location.
A Process Screen represent a process diagram. When resize the elements keep their relative position.
Configuring Displays
List
The List interface allows managing and organizing displays, fine-tuning for compatibility with native Windows or HTML5, and enabling users to access and customize display properties. Read more by checking the Displays List.
Draw
The Draw interface provides features for graphic design and coding the solution displays. It offers several tools to implement the logic and the visual, speeding up building intuitive user interfaces. For more information, please visit Draw workspace.
Layouts
The Layouts interface designs the page presentations on various devices. They allow customization for different screen sizes, ensuring displays are responsive and adaptable. This feature optimizes user interfaces across desktop and mobile platforms. For more details, visit Layouts.
Client Settings
Client Settings offers global and platform-specific customization for display behavior and appearance. These settings include Portable Settings for all clients and specific options for Windows WPF clients, ensuring a consistent user experience across different client types. For details, refer to Client Settings.
Images
The Images data grid works as a repository for managing image files used in displays into solutions for importing and applying images as icons, backgrounds, or dynamic elements. For a complete reference, please visit Images.
Symbols
Smart Symbols offer versatile and dynamic capabilities for display creation. These symbols include a library of over 500 pre-designed symbols tailored for the software platform, which also supports a user-created library. A key feature is their synchronization capability: changes made to a symbol in the library automatically update across all displays using that symbol. Local Symbols with dynamic properties can be directly mapped to tags in displays and set as default graphical representations for these tags.
All symbols are vector-based, ensuring they resize intelligently across various displays. This design supports both .NET and HTML5 displays, guaranteeing a consistent user experience. Additionally, symbols can hold multiple data references or input parameters, enhancing their utility. This feature allows for easy replication and application in different contexts while seamlessly linking to data-driven actions like color changes or state indications. Read more by visiting Symbols.
Themes
Theme colors enable the creation of pages and objects with custom visuals based on the selected theme. In the Draw environment, the Brush Editor offers the option to utilize theme colors. The runtime theme is determined by the @Client.Theme property. For more details, visit Themes.
Localization
Localization table enables operators using remote displays to interact with the interface in their chosen language. Translations can be defined through this configuration and the selected language applied on the client side using either the @Client.Localization property or the SetLocalization method. Localization tailors the content on the display to accommodate different languages and regional preferences. For more information, please visit Localization.
Units Conversion
The Units Conversion feature allows for the creation of automatic systems that adjust the engineering units displayed based on the operator's preference or requirement. By accessing the @Client.Units property, the operator can switch the displayed measurement units, such as from the Imperial to the Metric system. For instance, a project can be developed using the US measurement system (Imperial units), but the operator has the ability to input and view values in the Metric system. This automates the measurement conversion process, making it easier to operate across different unit standards without the need for manual calculations or external tools. For more information, please visit Units Conversion.
Working with Displays
Drawing 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. Explore how to do it by checking Draw the User Interface.
Enabling Multi-Monitor Support
The multiple monitor feature enhances solutions to support various screens, useful for enterprise Network Operations Centers and Operations Control Rooms. To activate this feature, navigate to Displays → Client Settings and select 'Enable MultipleMonitor', available exclusively for Rich Clients. For read more about the feature, refer to Client Settings.
Troubleshooting and Best Practices
| Table of Contents | ||||||
|---|---|---|---|---|---|---|
|
Common #Issues and Solutions
Content
Best Practices and #Recommendations
Use Responsive Dashboards on designing responsive interfaces for client displays, ensuring that the HMI and dashboard components adapt to different screen sizes, resolutions, and orientations. It will cover design principles and best practices for creating responsive layouts, such as using flexible grids, scalable images, and media queries. The focus will be on ensuring that the FactoryStudio 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:
| Page Tree | ||||
|---|---|---|---|---|
|
...