Displays and Visualization

Purpose and Key Concepts

Display

A display is the visual representation of information in an application, serving as the interface through which users interact with data and controls. Its purpose is to present information to the user in a structured and comprehensible manner. Displays function as a medium for users to view and manipulate data, incorporating elements like text, graphics, and interactive controls. They operate by rendering data using a rendering engine and responding to user input. Displays find application in various contexts such as data visualization, control systems, and user interfaces. Users interact with displays to input information, receive feedback, and perform actions within the application.

Client

A client, in the realm of software, refers to a component or application that interacts with a server or services. It can be categorized into different types like .NET Clients, HTML5 Clients, and Remote Clients. The purpose of clients is to facilitate user interaction with the application, performing tasks locally or communicating with a server to retrieve or send data. Clients handle user input, display information, and execute application logic. Operationally, clients process user input, render displays, and communicate with servers if necessary. Clients are used in a wide range of applications, including desktop applications, web browsers, and remote access tools. Users interact with clients to perform tasks, view information, and manipulate data within the application.

Redering engine

A rendering engine is tasked with generating visual output based on an application's data and logic. Rendering engines, such as WPF (Windows Presentation Foundation) for Windows applications, HTML5 for web applications, and Portable for cross-platform compatibility, may be employed. The purpose of a rendering engine is to transform abstract data and instructions into a visual representation for display. Functionally, rendering engines interpret code, process styles and layouts, and generate the final visual output for displays. Operationally, rendering engines involve interpreting markup or code, applying styles, and rendering the final output. These engines find application in developing graphical user interfaces across different platforms and technologies. Developers utilize rendering engines to create visually appealing and interactive user interfaces in their applications.

Panel types

Panel types, such as Canvas and Dashboards, pertain to specific layouts or containers within a display where elements can be organized. The purpose of panel types is to provide structure and arrangement for displaying content within a larger interface. Functionally, panel types define how elements are positioned and organized within a display, influencing the overall layout and design. Operationally, panel types involve defining rules for the positioning and arrangement of elements placed within them. Panel types are applied when designing display layouts, allowing developers to create organized and visually appealing interfaces. Developers use panel types to structure and arrange elements, enhancing the user experience and usability of the application.

Understanding Displays

Understanding displays involves a interplay between technologies, operational processes, and visual configurations. Exploring display technologies and client types provides a foundation for tailoring displays. The operational aspect, including screens and dashboards, organizes elements for an enhanced user experience. Additionally, grasping display modes and stretch options for shaping how information is visually presented on the screen, helps to ensure adaptability and responsiveness. In essence, these components collectively contribute to a comprehensive understanding of displays.

Displays technologies and clients types

Displays leverage various technologies and support different client types, such as .NET Clients and HTML5 Clients. Understanding these technologies and client variations is necessary for tailoring displays to specific platform requirements and user experiences. For more details, explore Display Client Types.

Process screens and Dashboards

The operational aspect of displays involves the processing of user input and the utilization of rendering engines. Screens and dashboards, as specific layouts within displays, play a role in organizing elements. They contribute to the overall structure and design, enhancing the user experience. For insights, refer to the Panel Types.

Displays modes and Stretch options

Display modes and stretch options influence how information is presented on the screen. Whether configuring modes for specific contexts or stretching elements for responsiveness, these options impact the visual output. For read more, Displays modes and Stretch options.

Configuring Displays

The Display configuration encompass the following:

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

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

The software platform technology stack includes several features and tools to create and deploy real-time displays for advanced process control and visualization. Explore how to do it by checking Draw the User Interface.

Enabling Multi-Monitor Support

The multiple monitor feature enhances solutions to support various screens, useful for enterprise Network Operations Centers and Operations Control Rooms. To activate this feature, navigate to Displays → Client Settings and select 'Enable MultipleMonitor', available exclusively for Rich Clients. For read more about the feature, refer to Client Settings.

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: