Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Overview

The Displays Draw refers to integrated environment for design and develop the application displays. Integrated by the Drawing for visual design and CodeBehind for behavior coding.

On this page:

Table of Contents
maxLevel3


Drawing

To access the Drawing, on Solution Explorer click on Displays → Draw. Here you design the interfaces for your application using the drawing tools. 

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

Object toolbar


Panels

Components panel

On the left

Tags panel

On the right

Drawing Properties

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 are a context-sensitive menu that appears when right-clicking on a graphical element within the Drawing Tools workspace.

Appearance

Display Settings

Display Properties allow users to customize the appearance and behavior of their displays, including size, background color, and grid settings. Users can also set display modes to control how the display appears during runtime, such as full-screen, windowed, or embedded within another display.

Dynamics Popup

Dynamics popup is a context-sensitive menu 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.

Displays Modes

The software platform offers various display modes to accommodate different application requirements. Users can choose from full-screen, windowed, or embedded display modes, depending on their specific needs and preferences. Each mode provides a different level of interaction and presentation, allowing users to create applications tailored to their unique solution requirements.

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 recommended, 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.

Finally, 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.

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.

Common Properties

The Common Properties Tab is a centralized location within the Drawing Tools interface that allows users to access and modify the properties of selected graphical elements easily. This tab streamlines the process of customizing the appearance, behavior, and interactions of elements within the display. 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.

Properties and Dynamics Popup

The Properties and Dynamics Popup is a context-sensitive menu that appears when right-clicking on a graphical element within the Drawing Tools workspace. This menu enables users to configure the properties 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.

Displays Documents 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.

Display Properties

Display Properties allow users to customize the appearance and behavior of their displays, including size, background color, and grid settings. Users can also set display modes to control how the display appears during runtime, such as full-screen, windowed, or embedded within another display.

Displays Modes

The software platform offers various display modes to accommodate different application requirements. Users can choose from full-screen, windowed, or embedded display modes, depending on their specific needs and preferences. Each mode provides a different level of interaction and presentation, allowing users to create applications tailored to their unique solution requirements.

Toolbars and Properties

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.

Industrial Icons

Industrial Icons provide a set of frequently used symbols that can be easily incorporated into solutions, allowing users to create modern, consistent layouts. By adding these icons to displays and resizing them, developers can ensure a professional appearance and optimize the development process. For further information refer the the child page Industrial Icons Third-party User Controls.


In this section:

Page Tree
root@parent
spacesV10