| HTML |
|---|
<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>Draw<br>(Displays Userand Interfaces<Symbols)</h1>
</div> |
Introduction to Drawing User Interfaces
The Drawing Features provide the procedures and techniques to create and customize displays and symbols.
It includes powerful vector drawing tools for process diagrams and the creation of custom objects and symbols. It also allows dynamic behavior for:
- On-Screen Elementsscreen elements with various dynamic options
- Smart Symbols
- User Control Components
- Display Code-Behind Programming
You can access the Drawing environment , using the Navigation navigation path Displays → Draw , or the Draw shortcut icon on top of the Solution Explorer.
On this page:
| Table of Contents | ||||||
|---|---|---|---|---|---|---|
|
Key Concepts and Terms
Graphical Element
Graphical elements are the components used in the interface, such as shapes,
check boxescheckboxes or trend charts.
panel| bgColor | #ffffff |
|---|
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.
| bgColor | #ffffff |
|---|
Smart Symbols
Smart symbols are graphical elements that combine visual representation with dynamic properties and connections to real-time tags and templates.
| bgColor | #ffffff |
|---|
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.
| bgColor | #ffffff |
|---|
.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
.| bgColor | #ffffff |
|---|
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 Tool Workspace
Expand or Collapse the Solution Explorer
The Left side panels allows the selection of graphical elements to add the display
The Toolbars are detailed on page Toolbars and Panels.
The Right side accommodates two panels:
- Tree to Allow DragDrop tags to displays. See Graphical Components.
- Drawing Properties, which shows the attributes for the selected element and for the current display.
In order to inspire the properties one element on the displays, execute a double click with mouse on the element.
Navigation
- Select other pages using the top ComboBox
- Use the top-right side short-cuts to other Displays Module tools
- Use the icons on the left side to go back to other modules (by default, last section used of the module) or expand the Solution Explorer
Drawing Displays
Using Graphical Basic Elements
Users can draw graphical basic 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 displaystoolbar.
→ Read more about Toolbars and Panels.
Using Components or Controls
Users can add components for advanced functionally, such as DataGrid, AssetTreeView, TrendChart, Gauges, PdfViewer, and various others.
→ Read more about Graphical Elements.Components
DrawingUsing 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 displaysuse the extensive Symbol Library, or create new Symbols based on the Library, or with the drawing primitives and adding the dynamic behavior directly.
→ 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 Insert Tags to To Displays.
AddingCustomize 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.
- Dynamics is the real-time behaviors that can be added to any graphical element in a display
- Dynamics allows to change element
- Introduction to real-time behaviors (dynamics) for screen elements
- Configuring dynamic properties, such as color changes and visibilityBinding screen elements to , in real-time tags and templatesbased on Tags values.
→ 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 operationsCreating and managing custom symbols and components
- Importing and exporting symbols and components
→ Read more about Symbols and Images.
Code-Behind Programming
Code-Behind Programming
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 Display
In the Draw environment, there is a Preview button on the toolbar, which allows for basic verification of the display without having to exit the application or run the displays. This preview will not execute the CodeBehind, and some more complex components, such as TrendCharts, will not utilize all their functionality.
Another way to test the display is to keep the solution running, preferably using the Development profile, and simply save the display. You can then use the Rich Client or refresh the Web Client to see the running results. When using this approach, make sure you're running with online configuration enabledTesting 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. That configuration is done at Runtime → Start.
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
| Table of Contents | ||||||
|---|---|---|---|---|---|---|
|
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.
when running in WPF, which when enabled will show automatically in Runtime information about the object where the mouse is over. The automated tooltip is enabled with the property.
@Client.TooltipOptions
Typically you can setup that property on the Displays CodeBehind, or ScriptTask-ClientStartup, or change it manually with the PropertyWatch tool.
The values for that property are:
Value | Description |
|---|---|
0 | No message |
1 | Show the Tag name, if any, connected with that graphical element |
2 | Show the TagName and Value |
3 | Show TagName, Value and Description |
4 | Show TagName, Value, Description and DevicePoint mapping |
In this section:
| Page Tree | ||||
|---|---|---|---|---|
|
...