| 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 Display features:
- Allows the creation of .NET WPF
- and HTML5 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.
On this page:
| Table of Contents | ||
|---|---|---|
|
Key Concepts and Terminologies
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.
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.
| Info |
|---|
| This feature brings speed-up to your digital solution development, it allows you think more about business solution and less about codes. |
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.
Process Screens
A Process Screen represent a process diagram. When resize the elements keep their relative position.
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.
Display Technologies: .NET and HTML5
Explanation of the two graphics display technologies supported in FactoryStudio: .NET displays using WPF technology and HTML5 web assembly displays.
Display Design and Customization
Designing displays using the state-of-the-art graphical tools in Tatsoft FactoryStudio
Utilizing the extensive set of fully customizable symbols and components
Connecting data templates with symbols
Support for themes, skins, and Themes for skin change
Layouts and Multi-Monitor Support
The concept of Layouts and their role in organizing user interfaces
Designing multi-monitor applications, including enterprise NOC and control room layouts
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 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 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 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
| 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. |
Advanced Display Features and Use Cases
Self-Aware Assets Display: a use case to create displays that react automatically to changes in the data source and assets it is connected to
Process control displays and Advanced HMI
HMI touch-screens.
Responsive Dashboards: a dedicated page linked to this section, explaining in more detail how to create responsive dashboards
Mobile and Web Access
Responsive Design and Device Compatibility
Guidance on enabling mobile and web access to deployed applications, ensuring a seamless user experience across different devices and platforms.
Localization and Internationalization
Creating multilingual applications
Language switching at runtime
Using Units Conversions
Display Security and User Access Control
High-level overview of security and user access control features related to displays and remote clients, highlighting their importance in protecting and managing access to application resources
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 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
.
In this section...
| Page Tree | ||||
|---|---|---|---|---|
|