You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 17 Next »

This section presents information about displays and clients.


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.

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.

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.


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 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 theDRAW 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.
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.


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

Select the default resolution for new pages in the project. This does not affect existing pages.

In this section...

  • No labels