<style>
.text-span-6 {
    background-image: linear-gradient(99deg, rgba(170, 163, 239, .5), rgba(125, 203, 207, .5));
    border-radius: 50px;
    padding-left: 15px;
    padding-right: 15px;
}

#title-text {
display: none;
}

.panelgradient {
    background-image: linear-gradient(180deg, #d5def0, whitesmoke);
    border-radius: 8px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 4rem;
    display: flex;
    position: relative;
}

</style>


<div class ="panelgradient">

<h1 style="text-align: center;">Drawing User Interfaces</h1>

</div>



Introduction to Drawing User Interfaces

The Drawing Features provide the procedures and techniques to create and customize displays and symbols.

It allows dynamic behavior for

  • On-Screen Elements
  • Symbols
  • User Control Components
  • Display Code-Behind Programming

On this page:



Key Concepts and Terms


Graphical Element

Graphical elements are the components used in the interface, such as shapes, check boxes or trend charts. 


Dynamics and Animations

Dynamics and animations are real-time changes that can be applied to graphical elements to communicate different messages. For example, a rectangle's color can be changed dynamically based on the value of a real-time tag. 



Image Resources

Image resources are imported image files that can be used in your solution as graphical elements. 


Industrial Icons

Industrial icons are a pre-built set of icons designed specifically for use in industrial automation applications. 



Smart Symbols

Smart symbols are graphical elements that combine visual representation with dynamic properties and connections to real-time tags and templates. 


Components and User Controls

Components and user controls refer to the customizable objects and elements used 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.



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


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 

Using Graphical Elements

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

→ Read more about Graphical Elements.

Drawing Smart Symbols

Users can draw smart symbols using shapes, lines, text, and images with the drawing tools provided in the Drawing Workspace. These symbols can be customized in terms of appearance, size, and position, enabling users to create visually appealing and informative displays.

→ Read more about Smart Symbols.

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.

→ Read more about Inserting 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

→ Read more about Dynamics and UI Elements.

Customizing and Using Symbols

  • Understanding the concept of smart symbols
  • Exploring the 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

→ Read more about 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, C#, and JavaScript code. This feature enables users to create complex interactions, validate user input, and implement advanced automation logic within their solutions.

→ Read more about Display Code Behind.

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.

→ Read more about Multiple Popups.



Working with Displays

Creating Displays

Creating displays ensures operators have efficient interaction with the application. Displays can be customized with user controls and external components, allowing for the creation of custom user interface components and the incorporation of third-party components. This customization allows for displays tailored to the specific needs of your solution and users.

Fine-Tuning Display Settings

Fine-tune display settings, including dimensions, to ensure optimal performance and user experience.

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, 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 is 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 Tooltips

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, 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 at Runtime

In some cases, you may need to create displays dynamically during runtime to accommodate specific requirements or user interactions. The 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 (e.g., Shift-Click Auto Trend)

The software platform supports various keyboard shortcuts to facilitate efficient navigation and interaction within the application. For instance, using the Shift-click auto trend 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.



Troubleshooting and Best Practices

Troubleshooting and Common Issues

Some common issues that may arise while working with 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 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 the 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: