Displays and Visualization

Purpose and Key Concepts

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

Display Technologies and Client Types

Dashboards and Process screens

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

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 Displays Draw.

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

Starting Client Displays

Enabling Multi-Monitor Support

Troubleshooting and Best Practices

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:

Dashboards and process screens

Dashboard

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. Check Responsive Dashboards for additional information.

Process Screen

A Process Screen represent a process diagram. When resize the elements keep their relative position.

Display Technologies

Supported graphics display technologies:

HTML5 Web Assembly Displays

.NET Displays using WPF technology

For the details explanation on those Client types, go to the child section Display Client Types.

.NET and HTML5Web HTML5 Clients

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 Clients

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.

Using Terminal 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. 

Configuring the Display module

Configuration Workflow

Creating Displays and Layouts

Check Creating Displays and Layouts for additional information.

Selecting Initial Layout and Settings

Working with Layouts

Organizing your User Interface provides much clear and consistent presentation of the User Interface to user of your project Solution. 

The Flexible Drawing tool of FactoryStudio allow to create two types of Layouts, Dockpanels and Canvas.

DockPanel Layouts

<<Brief explanation and image Examples>>

Canvas Layouts

<<Brief explanation and image Examples>>

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.

Drawing the Displays User InterfaceTatsoft FrameworX technology stack includes a compete set of tools to create and deploy real-time displays for advanced process control and visualization.The key features of those tools include:

• Drawing tools, built-in start-of-art to create HTML5 and .NET user interfaces.

• Smart Symbols and Components, customizable and extensible.

• Out-of-the box easy connection on Data Templates and Symbols.

• Support for Theme changes.

• Support for Localization and Internationalization. 

Designing displays using the state-of-the-art graphical tools in Tatsoft FactoryStudio

<< This section should be similar to the Support for Themes section, but Pointing to sections on the next Chapter, Drawing Screens.<< It can have a bit more information than the Themes>><< Out-of-the box easy connection on Data Templates and Symbols<< Support

Utilizing the extensive set of fully customizable symbols and components

<< This section should be similar to the Support for Themes section, but Pointing to sections on the next Chapter, Drawing Screens.<< It can have a bit more information than the Themes>>

Connecting data templates with symbols

Content

Support for Themes,  skin change on runtime displays. 

Using the built-n Themes support, it is easy to create applications with dynamic change of color schema for various uses cases:

• Change between AdvancedHMI and classic HMI pages

• Light and Dark modes for the Operator User Interface

• You own requirements and creativity!

For Detailed Information on Themes, go to child section Themes.<< Add images for examples for AdvacedHMI e Classic, they can be from the 9.2 demo, and something simple from Light and Dark. 

Managing Themes

ContentCheck Themes for additional information.

Localization and Internationalization

FrameworX allows easy creating of Project that, without no modifications, can run in various settings for language and internationalization. It is possible to two Operators accessing the same server, to use their own and distinct choices of UI language and Engineering Units, changing its settings for his local User Interface.The linked section Localization explains the following concepts and its configuration:

• Creating multilingual applications

• Language switching at runtime

• Using Units Conversions

Working with the Display module

Runtime Execution

Content

User Roles and Security

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.

<< Here again this text must created, with some or ALL high level explanation in this same page, or links to child pages or other parts of the documentation >>

Starting Client Displays

Content

Planning Layouts and Navigation

Content