| 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's
| Easy Heading Macro | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|
|
What is the Display Module
The Display Module is a state of the art graphical tool to create User Interface Displays, with extensive set of fully customizable Symbols and components.
Some of the Module Displayfeatures:
- Allows the creation of .NET WPF
- and HTML5 applications from a unified drawing tool.
- The same configuration can execute in both WPF and web clients.
- Create responsive dashboards as well as HMI process screens
- .
- Allows user-defined layouts, creating
- displays composed
- of multiple frames.
- A large set of
- smart symbols, high-performance graphical symbols, and extensible components are included.
- Support for
- theme skins, language localization,
- and units metric system conversion.
- Automatically connects data templates with symbols.
- Displays are dynamically created from the
- 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 / Screen
A Display display is a window or frame of your application's User Interfaceor frame of your application’s user interface. A display can have multiple contain multiple graphical elements in it. The elements of a display can be static, that is, meaning they always show with appear the same appearance like a Title , such as a title or an Imageimage, or be dynamic like , 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 in user interface into frames or panels, acting as container containers for your Displays. For instance, a typical layout is composed by a Top Display that is always the same with navigation buttonincludes a top display that remains constant with navigation buttons, and an area below where different displays can be shown.
<add imaage>
Display Mode
Page
A Page is a Display that always remains open, or open by replacing the previous display.
Dialog
A Dialog is a display that opens in top of all other displays, and stays open blocking the use of other displays until the User closes it.
Popup
A Popup is a display that opens over the displays, remaining on top, but the User can still interact with the other pages.
PopupWindow
A PopupWindow opens a completely independent Window, with its own border, to show the display.
<<< Add Image >>
Dashboards
A Dashboard is a responsive User Interface. UI components are dynamically placed on a grid, according the size of the Container window.
Process Screens
A Process Screen represent a process diagram. When resize the elements keep their relative position.
Working with Displays
Multi-Monitor Support
Create your projects to support multiple monitors.
Perfect for creating enterprise NOC, other Operations Control Room layouts, or even just dual-screen desktops.
Easily design different layouts for each screen.
Quickly specify which layout you want to appear on which screen.
Multi-Monitor Configuration setup
Go to Edit → Displays → List
Type the Number of Monitors and select the initial Layout to each monitor.
Client Settings Setup
The client settings control how the application is displayed on client computers. Windows clients are configured separately from iOS clients.
To configure the desktop client settings:
- Go to Edit → Displays.
- If needed, configure the Desktop Settings for Windows client by clicking Clients.
- Enter or select information, as needed, and click OK.
.NET Clients Settings
Field
Description
Maximize When Open
Select to maximize the client window to fit the monitor.
Stretch
Select how the layout stretches when clients use the application:
- None—Layout does not resize; it displays the exact size you configured for the layout. We recommend selecting the Scrollbar option.
- Fill—Layout resizes to completely fill the available space on the client’s monitor, without regard to the layout’s aspect ratio.
- Uniform—Layout resizes proportionally to the client’s monitor size, maintaining the layout’s aspect ratio.
- UniformToFill—Layout resizes to maintain the aspect ratio and to completely fill the available space on the client’s monitor. This can result in cutting off some parts of the layout.
Scrollbar
Select to have a scrollbar display in the client window.
Title
Enter a title for the client window.
MinimizeBox
Select to display the standard minimize button.
MaximizeBox
Select to display the standard maximize button.
CloseBox
Select to display the standard close button.
ResizeBox
Select to display the standard resize handle.
Menus
Select which menus to display:
- File
- Tools
- Security
Always shows titles and menus in Test Mode
Select to always show the Minimize, Maximize, Close, and Resize buttons when running a project in Test Mode.
OnScreen KeyBoard
Select to display a virtual keyboard.
When Mouse Is Over Command Areas
Select behavior when the mouse is over an object:
- Show object edges— Creates edges on command objects
- Cursor—Select the type of cursor.
Mouse Cursor Visible
Select for the mouse pointer to be visible.
Verify Tag Quality on Client Displays
- Tag Security protection show—Select the option and character to show in place of the Tag value if the user does not have the necessary security level.
- On undefined quality show—Select the option and character to show when the PLC determines data quality is undefined.
- On OPC Bad quality show—Select the option and character to show when the OPC server determines data quality is bad.
Disable Web Commands
Select to prohibit application users from sending commands to the PLC.
Multiple windows on same computer share user logon
Users can run multiple instances of the application on the same computer. The user may need to log in as a different user from time to time. Select this option to automatically change the logged in user in all running instances of the application on the same computer.
iOS Clients Settings
Field
Description
Disable Commands
Select to prohibit application users from sending commands to the PLC.
iPad Initial Page
Select the display that iPad users see when they start the application.
iPhone Initial Page
Select the display that iPhone users see when they start the application.
Stretch Fill
Select to resize the application to fill the device screen.
iPad Landscape
Select if the alignment is landscape.
iPhone Landscape
Select if the alignment is landscape.
HTML5 Clients Settings
Field
Description
Disable Commands
Select to prohibit application users from sending commands to the PLC.
Desktop Initial Page
Select the display that desktops users see when they start the application.
Mobile Initial Page
Select the display that mobile users see when they start the application.
Selecting Displays
- Go to Edit → Displays.
- Select CardView or TableView.
Below is the list of Display properties.
Display Configuration Properties
Field
Description
Name
Read-only. Name of the Display. Configured in Draw.
ClientType
Read-only. Shows the type of the client, either NET or HTML5.
Mode
Read-only. Shows whether the display is used as a Page, a Popup, or as a Dialog. Configured in Draw.
Preview
Read-only. Shows a thumbnail of the display.
AllowSelection
Select to allow users to select the display from the PageSelector.
Width
Read-only. Display width in WPF units (one WPF unit = 1/96 inch). Configured in Draw
Height
Read-only. Display height in WPF units. Configured in Draw
Left
Read-only. Left margin, in WPF units, for Canvas layouts. Configured in Draw
Top
Read-only. Top margin, in WPF units, for Canvas layouts. Configured in Draw
Dimension
Read-only. Configured in Draw
Size
Read-only. Configured in Draw
EditSecurity
Select which categories of users have access to edit this display.
RunSecurity
Select which categories of users have access to this display in runtime.
Description
Enter a description for this display.
In order to edit a display, select the display and press the 
DRAW button.
When you are in the Drawing environment, you can also switch displays using the drop-down list in the top toolbar.
Creating a new display
To create a new Display, go to Draw → Drawing. Click Close Display and Create New One. If you do not see this button in the toolbar, make your window wider.
Select the Display Type: .NET clients (for Rich and Smart Clients); HTML5 clients; or iOS clients.
Select if the Display Resize behavior is Process Control Screen or Responsive Dashboard.
New Display configuration fields
Field
Description
Display Name
Enter a name for the display.
Description
Enter a description for the display.
.NET Smart Client
Select this option if the display is designed to be presented natively on the host platform.
HTML5
If you plan to use this display as HTML5 on browsers, select this option.
You cannot change it later.
Select this option to use the display with any browser. When you select this option, the display settings in other parts of the Draw area only show options that are compatible with the HTML5 feature.
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.
In this section:
| Page Tree | ||||
|---|---|---|---|---|
|
iPad/iPhone iOS Target
If you plan to use this display for iPad and iPhone users, select this option when you create the display.
You cannot change it later.
Select this option to be able to use this display with iPads and iPhones. When you select this option, the display settings in other parts of the Draw area only show options that are applicable to both Windows and iPads/iPhones. Select the default view for iPad and iPhone users: Landscape or Portrait.
Dashboard
By default the pages resize as Process Controls screens. Check the box to resize as a Responsive Dashboard.
Creating HTML5 pages
Create a Display selecting the “HTML5 Client” option.
Go to Run → Startup or Run → Test and execute the application.
Open the Web Browser with the following URL:
http://127.0.0.1/fs-9.3/HTML5/index.html
| Info |
|---|
You must have a Web Server running. Either the TWebServer by default installed with the product, or Microsoft IIS. |
Display Settings
On the left side of the window in the Display Settings, enter or select information, as needed. If you selected the iPad/iPhone iOS Target or HTML5 option when you created the display, not all Display Settings are available.
The first and most important field to check is the Display Mode:
- Page: (Default). When you open a page, the system automatically closes the last page that is listed last on the Displays → Layouts page.
- Popup: A popup opens over other displays that remains available to use.
- Dialog: Opens as a modal dialog disabling the other displays
- PopupWindow: Opens as a new window popup
Check the following table to all Display Settings options.
- Use the drawing tools to create the display.
- Select a button in the vertical toolbar. Place the cursor on the display area, then click and hold the left mouse button while dragging the cursor across the display area.
- To see a menu of options, right-click the drawing object. The context menu provides actions that are specific to the selected object.
- To select multiple objects, press Shift + left mouse-click on each object.
- The horizontal toolbar (at the bottom of the Drawing tab) contains buttons to group, combine, align, and lock the selected objects.
| Info |
|---|
| For more information about the drawing tools, see Designer Drawing Tools. |
Display Settings configuration fields
Field
Description
Mode
Select the Mode of display you want to create:
- Page—Default. When you open a page, the system automatically closes the last page that is last listed on the Displays → Layouts page. Only pages display in the layout.
- Popup—A popup opens over other displays. When you open a new page, by default, all popup displays are closed. The controls on other displays are available.
Dialog—A dialog opens as a modal dialog that disables the controls on all other open displays until you close the dialog. Clicking OK executes an appropriate method on the display CodeBehind.
- PopupWindow—A window popup opens on the top of other displays. When you open a new page, by default, the popup window displays are not closed. The controls on other displays are available.
Background
Select the background color for the display.
Width
Enter the width of the display, in WPF units (device-independent pixels; one WPF unit = 1/96 inch). Be sure to take into account the size of the layout.
Height
Enter the width of the display, in WPF units (device-independent pixels; one WPF unit = 1/96 inch). Be sure to take into account the size of the layout.
Border
Select the type of border.
CloseButton
Select to display the Close button. Available only for Popups, Dialogs, and PopupWindows.
Animation
Select the type of animation to use when starting this display.
Show on PageSelector Object
Select to include this display in the page selector. The page selector allows users to go directly to a different display in the application.
iPad/iPhone iOS target
Read-only. Shows whether you selected the iPad/iPhone iOS Target option when you created the display.
Placement
Select the placement of the display on the layout. Available only for Popups and Dialogs.
Target
Select whether the display appears relative to the mouse position or relative to the whole window. Available only for Popups and Dialogs.
DialogButtons
Select the buttons you want on the dialog. Available only for Dialogs.
Title
Enter a title that appears at the top the display.
Title Background
Select a color for the title background.
Stays Open on Page Change
Leave the popup window open when the user clicks something that opens a different display. Available only for Popups.
Stays Open After Losing Focus
Leave the popup window open when the user clicks a different display. Available only for Popups.
Left
Enter how far from the left of the layout the display should appear, in WPF units. Available only for Canvas layouts.
Top
Enter how far from the top of the layout the display should appear, in WPF units). Available only for Canvas layouts.
| Info |
|---|
When selecting multiple objects, the last object selected is the "master," whose properties are shown on the left. If you align the objects, the alignment is based on the master. If you change other properties, the properties are changed for all selected objects. |
Working with Layouts
A layout defines the size of the application window and the basic arrangement of display components in the runtime application. Be sure to plan how you want to use displays. For example, consider whether you want a menu bar, toolbar, or other elements to always display at the top of your application window.
You may need only one layout to handle the information in the application.
The last display listed in the Layout tab is the one that is replaced when you change the display. For example, new projects include a default layout called Startup. The MainPage display that is listed last is the default area that changes when you tell the application to open a display.
Container Window
First, specify the desired size of Windows Container. Since they are vector Graphics, the number for Height and Width are not in pixels.
The numbers in the Width and Height are used to establish the desired Aspect Ratio (proportion of Width vs Height) to run the application
Column
Description
Width
Enter the layout width in WPF units (device-independent pixels). This is the width of the runtime application.
Height
Enter the layout height in WPF units (device-independent pixels). This is the height of the runtime application.
Background
Set the background color of the layout. This is the background color of the runtime application
Creating Layouts
To create a layout
- Go to Edit → Displays → Layouts.
- Click New.
- Enter or select information, as needed.
- Click OK.
Column
Description
Layout name
Enter a name for the layout.
Layout
Select the layout type:
- DockPanel—Select to position displays in relation to the layout and other displays.
- Canvas—Select to position displays in an absolute position by entering the position in WPF units (device-independent pixels; one WPF = 1/96 inch).
Description
Enter a description of this layout.
- Click
Add Row to add a row for a display. The displays you add here are the first displays the layout uses. Enter or select information, as needed.
Column
Description
Page
Select a display you want to include in the layout. Only page displays are available for use in a layout.
Docking
Select the docking location for this display:
- Left
- Top
- Right
- Bottom
HorizontalAlign
Select the horizontal alignment for this layout:
- Left
- Center
- Right
VerticalAlign
Select the vertical alignment for this layout:
- Top
- Center
- Bottom
Margins
Set the margin for this layout.
Left
Set the left position of the layout
Top
Set the top position of the layout
Target Layout size (on Edit Displays Layouts)
Select the default resolution for new layouts in the project. This does not affect existing layouts.
Default Size when creating new Pages
Select the default resolution for new pages in the project. This does not affect existing pages.
In this section...
| Page Tree | ||||
|---|---|---|---|---|
|