Displays
(Desktop, Web, Mobile, and Dashboards)
Introduction to Displays Module
The Display module is a graphical tool to create User Interface displays, with extensive set of fully customizable Symbols and components.
On this page:
Key Concepts and Terms
Display
A display is the visual interface in an application, allowing users to interact with and manipulate data. Its function is to present information clearly, using text, graphics, and interactive controls. The display operates via a rendering engine, responding to user inputs. These displays are used in data visualization, control systems, and user interfaces, enabling users to input information, receive feedback, and execute actions within the application.
Client
A client is a software component that interacts with a server or services, including types such as .NET Clients, HTML5 Clients, and Remote Clients. Its role is to enable user interaction with the application, involving handling user input, displaying information, and executing logic. Clients can perform tasks locally or communicate with a server to exchange data. They are used in desktop applications, web browsers, and remote access tools, allowing users to complete tasks, access information, and manipulate data.
Rendering Engine
A rendering engine generates visual output from an application's data and logic. Examples include WPF for Windows applications, HTML5 for web applications, and Portable for cross-platform compatibility. Its purpose is to transform abstract data and instructions into visual representations. These engines interpret code, process styles and layouts, and generate the visual output for displays. They are used in developing graphical user interfaces across various platforms and technologies, aiding in the creation of visually appealing and interactive user interfaces
Panel Types
Panel types, like Canvas and Dashboards, work as containers for organizing display elements. Their purpose is to structure and arrange content within an interface. These types define how elements are positioned and organized, affecting the display's layout and design. Used in designing display layouts, they help create organized interfaces, enhancing user experience and application usability. Check out the Responsive Dashboards for more details.
Understanding the Displays Module
The displays involves an interplay between technologies, operational processes, and visual configurations. Exploring display technologies and client types provides a foundation for tailoring displays. The operational aspect organizes elements for an enhanced user experience, including screens and dashboards. Additionally, grasping display modes and stretch options for shaping how information is visually presented on the screen helps 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.
WPF and HTML5 automatic conversion
The Portable option allows the automatic conversion between WPF and HTML5 technologies. The user does not need to create two different kinds of screens for Windows and Web clients. Use the Portable option for the rendering engine to create the displays, and will automatically create them in both HTML5 and WPF. It enables running on the web browser all the displays you created for Windows/WPF.
Process screens and Dashboards
The process screens and the dashboards are specific layouts within displays. They organize specific graphical elements for different data visualization purposes. They contribute to the overall structure and design, enhancing the user experience. For more information, please refer to the Responsive Dashboards.
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, Display modes and Stretch options.
Creating New Displays
You can create a display in two sections of the software: Displays/List and Displays/Draw. These interfaces enable the creation and management of new displays.
To create a display on List:
- Navigate to Displays/List.
- Click the
button at the top to open the 'New Display' popup window. - Define the Name and Description of the display.
- Define the Rendering Engine. This configuration item has three options: Portable (available for WPF and HTML5), WPF Only, and HTML5 Only.
- Define the Panel Type for the display. This configuration item has two options: Canvas and Dashboard.
The Canvas option allows for manual positioning and sizing of elements.
The Dashboard option automatically resizes and repositions elements, organizing the display into predefined regions. It provides a structured and uniform layout, ensuring that elements adapt to different screen sizes and resolutions without manual adjustments. - Optionally, choose a Template for the display. If you do not select a template, a blank page will be created by default.
- Finally, press the OK button to finish the display creation and close the popup window.
To create a display on Draw:
- Navigate to Displays/Draw.
- Click the
button at the top to open the 'New Display' popup window. - Follow the same procedure as for Displays/List.
Configuring Displays
Manage displays by organizing records, including export, import, insertion, renaming, and removal. Design visual interfaces and control logic. Define layouts for component arrangement. Configure startup conditions, display behaviors, and user interface customization. Import external images for visual elements. Use standardized symbols for consistent design. Set colors for visual consistency. Enable multi-language support for global usability. Facilitate metric and measurement conversions.
Workflows
Creating 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.
Self-Aware Displays
The Asset Monitor component explores the asset tree and allows navigation through standard and HTML5 displays at levels. Each level can have displays for it, or use a display that populates its content with symbols linked to each sub-node in the asset tree. Discover more by checking Self-Aware Assets Displays.
Troubleshooting and Best Practices
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: