Drawing Workspace

Overview

The Displays Draw is the integrated environment for designing and developing the application displays. It encompasses Drawing for visual design and CodeBehind for behavior coding. Located in Displays / Draw, the Draw workspace allows users to create and configure graphical user interfaces and control logic, providing features, configuration tools, and many functionalities for designing visual components and programming automated processes.

Draw Workspace

The Draw workspace integrates GUI design and programming tools to develop operational interfaces. It simplifies control interface creation, allowing users to design operator panels, control modules, and process monitoring screens. The Drawing tool lays out and customizes elements like buttons and graphs, while CodeBehind scripts input handling, data display, and hardware interaction.

The explanation for the Draw panels and tools is on the next documentation section Draw (Displays and Symbols)

In this section, you'll find just an introductory summary of Toolbars and Panels.

Toolbars

In the Draw Environment, in addition to the solution toolbar, you have the following toolbars:

Document Toolbar

The Displays Documents toolbar provides quick access to various display-related functions and tools, such as creating new displays, opening existing displays, and managing display properties. It simplifies the process of creating and organizing displays, making it easier for users to navigate their solutions and maintain a structured, organized workspace.

Drawing Toolbar

The Drawing toolbar provides a set of tools for creating and modifying graphical elements within the display, such as shapes, lines, and text. Users can quickly access these tools to design custom visuals, ensuring that their displays accurately represent the automation processes and equipment they are monitoring. For more information about Toolbars and Properties, visit: Toolbars and Panels.

Panels

There are two Panels in the Drawing environment: the Components Panel on the left side and the Tags Panel on the right side. The usage of them is pretty simple: select the component or tag and drag and drop it into the Drawing area.

Components Panel (left side)

This panel serves as a repository for visual elements. It offers a range of components that can be incorporated into their application interfaces. Users select a component and drag it into the Drawing area. The Components Panel simplifies the task of adding and arranging visual elements. It supports the creation of intuitive, functional interfaces tailored to the specific needs of each application. Configuration of these components occurs post-placement. For more information about components and user controls, visit: Graphical Elements.

Tags Panel (right side)

The Tag Panel is a critical tool for linking data to visual components. It contains a list of tags representing data points in the system. Users can drag and drop these tags onto components in the Drawing area, establishing a connection between the component and the underlying data. This process enables real-time data visualization and interaction within the application interface. The Tag Panel streamlines the task of data binding, promoting effective and efficient development of data-driven applications.

Properties Sidebar (right side)

The Drawing Properties Sidebar allows users to modify and configure properties like animation settings and data bindings to tags. The properties are context-sensitive, showing the information related to the selected element in the display.

The main expanders of the Properties side bar are Appearance and Display Settings.

• Appearance: allow to customize the visual aspects of graphical elements. It provides options to adjust size, color, font, and visibility, enabling users to tailor the look of their application interfaces. 
• Display Settings: allow to customize the appearance and behavior of their displays, including size, background color, and grid settings. 

Properties Window (Settings and Dynamics)

The Properties is a context-sensitive configuration popup that appears when double-clicking on a graphical element to open. It enables users to configure the Settings and Dynamics of the selected element quickly, without needing to navigate through multiple menus or panels. The Popup offers options for modifying appearance, behavior, and interactivity, as well as quick access to the relevant animation settings and data bindings. This streamlined approach ensures that users can efficiently customize graphical elements and create dynamic, interactive displays.

Creating New Displays in Draw Environment

To create a display on Draw:

1. Navigate to Displays / Draw.
2. Click the button at the top to open the 'New Display' popup window.
3. Define the Name and Description of the display.
4. Define the Rendering Engine. This configuration item has three options: Portable (available for WPF and HTML5), WPF Only, and HTML5 Only.
5. Choose a Template for the display. If you do not select a template, a blank page will be created by default. Two types of templates must be highlighted:
   1. The Canvas option allows for manual positioning and sizing of elements.
   2. The Dashboard option automatically resizes and repositions elements, organizing the display into predefined regions. It provides a structured and uniform layout, ensuring that elements adapt to different screen sizes and resolutions without manual adjustments.
6. Finally, press the OK button to finish the display creation and close the popup window.

CodeBehind

The CodeBehind tab is where the scripts connected to the display are edited.  Developers can write code in VB.NET, C# and JavaScript (for HTML5 only pages) and switch between languages.

The CodeBehind section has predefined methods such as DisplayOpening(), DisplayIsOpen(), DisplayClosing(). For dialog displays, the DialogOnOK method is also pre-defined, which is executed when the OK button is pressed, additionally, CodeBehind handles custom mouse input command.

When programming the CodeBehind, in order to have the proper performance, asynchronous methods should be used, and loops or interactions that may block the UI should be avoided. For more information on Async programming: https://learn.microsoft.com/en-us/dotnet/csharp/asynchronous-programming/

See Display Code Behind for information on creating CodeBehind when drawing pages.

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 Drawing UI - Toolbars and Panels.

The Right side accommodates two panels:

• Tree to Allow DragDrop tags to displays. See Graphical Elements (Reference).
• 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 Drawing UI - 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 (Reference)

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: