Draw The User Interface

Purpose and Key Concepts

Graphical Element

Graphical elements are fundamental building blocks in creating displays. They can range from simple shapes like rectangles to more complex controls such as CheckBox or TrendCharts. These elements can be customized and combined to design intuitive and visually appealing interfaces that effectively convey information to the user.

Dynamics and Animations

Dynamics and animations are real-time behaviors that can be applied to graphical elements to enhance their functionality and visual appeal. For example, a rectangle's color can be changed dynamically based on the value of a real-time tag. This feature enables the creation of interactive displays that respond to live data and user input, providing a more engaging user experience.

Image Resources

Image resources are imported image files that can be used in your solution as graphical elements. These resources can be applied as backgrounds, dynamic color changes, or as standalone elements within your display. Image resources help you create visually appealing interfaces by incorporating logos, custom icons, and other relevant imagery.

Industrial Icons

Industrial icons are a pre-built set of icons designed specifically for use in industrial automation applications. These icons represent common elements and actions within the industry, such as Home, Alarms, Warnings, Chart, Gauge, Settings, Search, and more. By using these icons, you can create consistent and modern layouts while saving time and ensuring a professional look for your solutions.

Smart Symbols

Smart symbols are graphical elements that combine visual representation with dynamic properties and connections to real-time tags and templates. They simplify the process of creating operator user interfaces and streamline maintenance, as changes made to the symbols automatically propagate to displays using them. This feature accelerates the development and promotes consistency across your solution.

Components and User Controls

In context of the drawing tools, components and user controls refer to the customizable objects and elements used in the drawing tools to create interactive displays. These objects can range from pre-built controls, like alarm windows and trend charts, to custom-designed components tailored to your specific application requirements. They offer flexibility and scalability in designing user interfaces to meet the unique needs of your solution.

.NET CodeBehind

.NET CodeBehind is a programming feature that allows you to write custom code in VB.NET or C# for your solution. This code can be used to define event handling methods, perform calculations, or manage application behavior based on user input or real-time data. CodeBehind allows for advanced customization of your solution, enhancing its functionality and adaptability to specific requirements.

JavaScript CodeBehind

JavaScript CodeBehind is similar to .NET CodeBehind but uses JavaScript as the programming language, and it is particularly geared towards web programming. It enables you to write custom code for your web-based solution, providing another option for developers who prefer working with JavaScript. This feature allows you to create interactive displays, manage application behavior, and define event handling methods, further customizing your solution to meet specific needs.

Drawing Displays

Drawing Graphical Elements

Users can draw graphical elements such as shapes, lines, text, and images using the drawing tools provided on Drawing Workspace. These elements can be customized in terms of appearance, size, and position, allowing users to create visually appealing and informative displays. Check out the Graphical Elements for more information.

Adding Tags to Displays

The software platform allows users to easily paste tags onto their displays, automatically generating appropriate symbols and data bindings. This feature streamlines the process of creating data-driven visuals, enabling users to quickly build informative displays that accurately represent their automation processes. For further information refer the the child page Insert Tags to Displays.

Adding Dynamic Behavior

The software platform enables users to add dynamic behavior to graphical elements by configuring animations, data bindings, and user interactions. This capability ensures that displays provide real-time feedback and accurate representations of the automation process, facilitating effective monitoring and control.

• Introduction to real-time behaviors (dynamics) for screen elements

• Configuring dynamic properties, such as color changes and visibility

• Binding screen elements to real-time tags and templates

For further information refer the the child page Dynamics and UI Elements.

Customizing and using Symbols

• Understanding the concept of smart symbols

• Exploring Symbol Factory library and Local Symbols Gallery

• Using built-in symbols and components.

• Pasting Tags directly to Displays and clipboard operations.  

• Creating and managing custom symbols and components

• Importing and exporting symbols and components

For further information refer the the child page Symbols and Images.

Code-Behind Programming

• Overview of display code-behind programming

• Writing code in VB.Net or C# and automatic language conversion

• Defining event handling methods for mouse and input commands

• Utilizing pre-defined methods for handling display opening, closing, and dialog actions

Code-behind programming allows users to add custom functionality and behaviors to their displays using .NET or CSharp and JavaScript code. This feature enables users to create complex interactions, validate user input, and implement advanced automation logic within their solutions. See Display Code Behind for learn more.

Opening Multiple Popups

The software platform supports opening multiple popups within a single display, allowing users to create context-sensitive information overlays and dialogs. This feature enhances the user experience by providing relevant information and controls based on the operator's current task or selection. For further information refer the the child page Multiple Popups.

Working with Displays 

Creating displays is a process to ensure operators have efficient interaction with the application. Displays can be customized with User Controls and External Components, which allow for the creation of custom user interface components and the incorporation of third-party components respectively. This allows for creating displays tailored to the specific needs of your solution and users.

Fine-tuning Displays Settings

Display settings, dimension, 

Testing the User Interface 

Testing the user interface is a critical step in the development process, ensuring that your solution is both functional and user-friendly. The software platform provides an intuitive environment for testing and refining the UI, allowing you to identify and resolve any issues before deployment. To test the user interface, you can run the solution in Debug mode, interact with the application, and verify that the graphical elements respond correctly to user input and real-time data.

Execution and Online Changes

The software supports real-time execution and online changes, enabling you to make adjustments to your application while it's running. This feature facilitates rapid development and allows you to quickly respond to changing requirements or system conditions. With online changes, you can modify displays, adjust tag values, and update component properties without stopping the solution execution. This minimizes downtime and ensures that your application remains responsive to user needs.

Enabling Built-In Tooltip

The software platform includes built-in tooltip functionality that can be enabled for various elements within the application. Tooltips provide helpful information to users by displaying a brief description of an element's function when the mouse hovers over it. To enable tooltips, you can configure the Tooltip property for each element in the Properties panel. Tooltips can be customized with relevant text and formatting to improve the user experience.

Creating Displays on Runtime

In some cases, you may need to create displays dynamically during runtime to accommodate specific requirements or user interactions. Th software platform allows you to create displays programmatically using .NET or JavaScript code-behind. This enables you to generate customized displays based on user input, data-driven conditions, or other factors that may change during the application's execution.

Using Shortcuts (verfiew Shift-click autotrend)

The software platform supports various keyboard shortcuts to facilitate efficient navigation and interaction within the application. For instance, using the Shift-click autotrend shortcut allows users to quickly access trending data for selected tags. By leveraging these shortcuts, operators can streamline their workflows and reduce the time required to access essential information and functionality within the application.

In summary, the software platform provides a comprehensive suite of tools and features for designing, implementing, and managing HMI SCADA applications. The platform's extensive capabilities ensure that your application is efficient, responsive, and user-friendly, meeting the needs of both operators and system integrators.

Troubleshooting and Best Practices

Troubleshooting and Common #Issues

Some common issues that may arise while working with the Draw Screens and Symbols include:

# Inconsistency or missing data from external systems:

This issue may occur due to misconfigurations in data sources or communication errors between systems. To resolve this, ensure that the connections between systems are properly configured, and the data sources are set up correctly.

# Performance issues

Performance issues may arise due to large numbers of graphical elements, complex animations, or inefficient scripting. To address this, optimize your displays by reducing the number of elements, simplifying animations, and using efficient code.

Best Practices and #Recommendations

To get the most out of the Draw Screens and Symbols, follow these best practices:

# Status Monitoring 

Regularly monitor the status of your HMI SCADA application to ensure its smooth operation. Implement alarms and notifications to alert operators of any abnormal conditions, and use diagnostic tools to identify and resolve issues promptly. This proactive approach can help maintain system stability and minimize downtime.

# Use of Smart Symbols and Components

Leverage the built-in smart symbols and components to create consistent and efficient displays. These pre-built elements not only save time but also promote a standardized look and feel across your solution.

# Responsive Design

Implement responsive design principles to ensure your displays adapt to different screen sizes and resolutions. This will improve user experience across various devices and platforms.

# Optimize Animations and Dynamics

While animations and dynamics can enhance the user experience, excessive or poorly optimized animations may hinder performance. Use these features judiciously and optimize them to ensure smooth operation and minimal resource usage.

# Regular Testing and Validation

Regularly test your HMI SCADA application to identify and address potential issues. Validate the functionality of your displays, ensuring they meet the intended requirements and provide accurate information to operators.

By following these best practices and recommendations, you can ensure the successful implementation and operation of your Draw Screens and Symbols.

In this section: