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 Display features:
- Allows the creation of .NET WPF, HTML5 and native iOS pages from a unified drawing tool.
- 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 composed by many frames.
- Large set of Smart Symbols, High Performance Graphical symbols and extensible components included.
- Automatically connects Data Templates with Symbols.
- Support for Themes skins, Language Localization and Units Metric systems conversion.
- Displays dynamically created from the Asset Model, for Self-aware SCADA applications.
Key Concepts
Display
A Display is a window or frame of your application's User Interface. A display can have multiple graphical elements in it. The elements of a display can be static, that is, they always show with the same appearance like a Title or an Image, or be dynamic like a gauge or a color status indicator.
Layout
Layouts allow the organization of the User Interface in frames or panels, acting as container for your Displays. For instance, a typical layout is composed by a Top Display that is always the same with navigation button, and an area below where different displays can be shown.
\IMG\Layout
Display Mode
Pages, dialogs, and pop-up are different display modes, they share some common, but each one have a specific particularly or behavior. They are commonly used in application development to build intuitive and dinamics user-interfaces.
You can define it when creating a new display.
You can change the display mode later in Display Settings in the drawing area.
And finally, you can modify the Display mode on Mode Column in the Display List.
Page
A Page is a Display that always remains open or opens, replacing the previous display, constituting an independent unit of information or functionality within an application. In summary, it is a screen that allows users to perform a specific action, in which access to the page is given from a navigation menu or through other links within the application.
Dialog
A Dialog is a display that opens on top of all other displays and stays open, blocking the use of other displays until the User closes it.
A dialog is a small window that appears on top of the main application window and requires user input before it can be dismissed. It is typically used to prompt users for confirmation or additional information before proceeding with an action.
Dialogs can be modal, meaning the User cannot interact with the main application window until the dialog is closed.
Popup
A Popup is a small window that opens over a page, remaining on top, but the Users can still interact with the other pages. It displays additional information or functionality. And it can be triggered by a user action, such as clicking on a button or link, or they can appear automatically based on certain conditions.
Popups can be modal or non-modal, often containing forms, menus, or other interactive components.
PopupWindow
A PopupWindow opens a completely independent Window with its border to show the display.
A small, separate window appears on top of the main application window. It can display additional information or provide quick access to specific functionality, but they are not intended to be used for extended periods.
Dashboards
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 where the UI components are placed on a grid, according to 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:
|
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:
|
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:
|
Mouse Cursor Visible | Select for the mouse pointer to be visible. |
Verify Tag Quality on Client Displays |
|
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 Displays → List.
- 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. |
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
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.
Display Settings configuration fields | |
|---|---|
Field | Description |
Mode | Select the Mode of display you want to create:
|
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. |
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:
|
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:
|
HorizontalAlign | Select the horizontal alignment for this layout:
|
VerticalAlign | Select the vertical alignment for this layout:
|
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...