Drawing User Interfaces
Introduction to Drawing User Interfaces
The Drawing Features provide the procedures and techniques to create and customize displays and symbols.
It includes a powerful vector drawing tools, for process diagrams and the creating of custom object and symbols. It also also allows dynamic behavior for
- On-Screen Elements with various Dynamics options.
- SmartSymbols
- User Control Components
- Display Code-Behind Programming
You access the Drawing environment, using the Navigation Displays → Draw, or the Draw shortcut icon.
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.
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
- 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 toolbar. See 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 Components
Using Drawing Smart Symbols
Users can use 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.
→ Read more about 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.
- Dynamics is the real-time behaviors that can be added to any graphical element in a display
- Dynamics allows to change element properties, such as color changes and visibility, in real-time based on Tags values.
→ Read more about Dynamics and UI Elements.
Code-Behind Programming
- 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 CodeBehind
Working with Displays
Testing the Display
In the Draw environment there is a Preview button at the toolbar, which allows a basic verification of the Display, without having to excrete the application, or with running displays. This preview will not execute the CodeBehind, and some more complex comments, such as TrendCharts will not to use all its functionality.
Another way to test the display, its just keep the solution running, preferable using the Development profile, and just save the Display and with the RichClient, or refreshing the WebClient to see the running results. When using this approach, make sure you're runnig with online configuration enables.
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 at Runtime → Start.
Enabling Built-In Tooltips
The software includes built-in tooltip functionality 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: