Page History

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

Definition

Layouts are structures that determine the organization of UI components on a screen. They provide scaffolding for positioning elements like menus, content sections, and modules within an application or website.

Purpose

The purpose of Layouts is to establish flow within digital spaces, guiding users through content and functionalities. They act as the blueprint for creating interfaces for interaction and engagement.

Function

Layouts serve as the backbone of UI design, orchestrating hierarchy and prominence of elements. They group items, delineate areas, and manage space to prevent clutter. Layout design breaks down information into sections, facilitating user comprehension and action.

Operation

Layouts provide a grid-based or flexible framework for UI elements. Designers and developers map components to these frameworks, which adjust and align based on rules. This arrangement ensures the interface maintains its form and function across displays.

Application

Layouts are used in digital interfaces from desktop applications to mobile apps and web pages. Their application is important in platforms like e-commerce, digital dashboards, educational software, and any interactive service that requires a clear presentation of information.

Usage

Go to Displays → Layouts.

Drawing

To access the interface for Drawing, on the Solution Explorer menu, go to Displays → Draw. Here, you design the interfaces for your application using the drawing features and tools.

Beyond the main toolbar, for Drawing are available additional control bars and panels. Check

Toolbars

On Drawing, beyond of Solution toolbar, you have the additional following toolbars:

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

Object toolbar

The Object 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 Properties.

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

On the left

Tags panel

On the right

Drawing Properties

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 Users can modify properties such as size, color, font, and visibility, as well as configure dynamic properties like animation settings and data bindings to tags. The Properties properties are a context-sensitive menu that appears when right-clicking on a graphical element within the Drawing Tools workspace.

Appearance

Display Properties allow users enable display the

Display Settings

, 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

Dynamics Popup

Dynamics popup is a context-sensitive menu configuration popup that appears when double-clicking on a graphical element to open the configuration popup. 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.

Components and User Controls

• Introduction to dynamic objects, smart symbols, and UI controls.

• Utilizing platform UI controls, Windows UI controls, and extensible components.

• Integrating external components in displays.

For more information about components and user controls, visit: User Interface Controls.

AlarmWindow

The Alarm Window component provides a dedicated display for managing and monitoring alarms. It can display alarm priority, status, and acknowledgment, allowing operators to effectively respond to alarms and maintain system safety. For further information refer the the child page AlarmWindow.

DataGrid Table

The DataGrid Table component enables users to display and interact with tabular data in their solutions. It supports sorting, filtering, and editing capabilities, allowing operators to efficiently view and manage data within the automation process. For further information refer the the child page DataGrid component.

TrendChart

The TrendChart component allows users to visualize time-based data in the form of line or bar charts. This makes it easy to monitor trends and analyze historical data, facilitating informed decision-making and process optimization. For further information refer the the child page TrendChart Window.

Map Components

Map Components provide users with the ability to integrate geospatial data into their solutions. They can display map layers, markers, and labels, enabling users to visualize and interact with geographically distributed assets and data points. For further information refer the the child page Map Components.

Gantt Control

The Gantt Control component offers a visual representation of time-based activities and events, such as schedules and maintenance tasks. Users can manage and monitor these activities within their solutions, ensuring effective planning and resource allocation. For further information refer the the child page Gantt Control.

Gauges

Gauges are graphical elements that provide a visual representation of real-time data values. Users can choose from various gauge styles, such as radial, linear, or digital, to display process data in a clear and intuitive manner. For further information refer the the child page Circular Gauge and Linear Gauge.

External Controls

External Controls allow users to integrate third-party components and libraries into their solutions, extending the functionality and capabilities of the software platform. This enables users to create customized solutions tailored to their unique solution requirements. These integrations can enhance the application's ability to process data, make predictions, and even automate certain tasks.

Additionally, there might be scenarios where specific industrial protocols or devices are not supported out of the box by software platform. In such cases, third-party libraries can be used to provide that support, extending the range of devices and systems that the application can interact with. For further information refer the the child page Third-party User Controls.

Creating New Displays in Draw Environment

To create a display on Draw:

1. Navigate to Displays / Draw.
2. Click the Image Added 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().

CodeBehind

We covered CodeBehind in development, which is used to define a set of functions connected to a display. Developers can write code in VB.Net, C# and JavaScript and switch between languages. CodeBehind can be used to define mouse input command handling methods and execute functions during opening, closing, or while the display is open.

For dialog displays, the DialogOnOK method is recommendedalso pre-defined, which is executed when the OK button is pressed. The CodeBehind section has predefined methods such as DisplayOpening(), DisplayIsOpen(), DisplayClosing(), and DialogOnOK(). Developers can also add their own .NET variables and methods to this section.

Developers should avoid using functions that do not allow partial trust execution or refer to physical file paths as displays are designed to run in distributed and web environments.

, 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 pagesFinally, developers should keep in mind that when executing CodeBehind on the client side, the display will be locked while the code is running. To avoid prolonged locking, it is recommended to use scripts (tasks and classes) or JavaScript to reduce the display lock time. For more information on Code Behind, visit: Display Code Behind.

In this section: