Key Concepts and Terms

Graphical Element

Graphical elements are the components used in the interface, such as shapes, checkboxes 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 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 toolbar.

→ 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 Components

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

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

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

In this section: