Draw Screens and Symbols

Purpose and Key Concepts

Graphical Element

Graphical elements are fundamental building blocks in creating displays. They can range from simple shapes like rectangles to more complex controls such as CheckBox or TrendCharts. These elements can be customized and combined to design intuitive and visually appealing interfaces that effectively convey information to the user.

Dynamics and Animations

Dynamics and animations are real-time behaviors that can be applied to graphical elements to enhance their functionality and visual appeal. For example, a rectangle's color can be changed dynamically based on the value of a real-time tag. This feature enables the creation of interactive displays that respond to live data and user input, providing a more engaging user experience.

Image Resources

Image resources are imported image files that can be used in your project as graphical elements. These resources can be applied as backgrounds, dynamic color changes, or as standalone elements within your display. Image resources help you create visually appealing interfaces by incorporating logos, custom icons, and other relevant imagery.

Industrial Icons

Industrial icons are a pre-built set of icons designed specifically for use in industrial automation applications. These icons represent common elements and actions within the industry, such as Home, Alarms, Warnings, Chart, Gauge, Settings, Search, and more. By using these icons, you can create consistent and modern layouts while saving time and ensuring a professional look for your projects.

Smart Symbols

Smart symbols are graphical elements that combine visual representation with dynamic properties and connections to real-time tags and templates. They simplify the process of creating operator user interfaces and streamline maintenance, as changes made to the symbols automatically propagate to displays using them. This feature accelerates the development and promotes consistency across your project.

Components and User Controls

In context of the drawing tools... <add definition >>

Components and user controls refer to the customizable objects and elements used in the drawing tools 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. They offer flexibility and scalability in designing user interfaces to meet the unique needs of your project.

.Net CodeBehind

.NET CodeBehind is a programming feature that allows you to write custom code in VB.NET or C# for your project. This code can be used to define event handling methods, perform calculations, or manage application behavior based on user input or real-time data. CodeBehind allows for advanced customization of your project, enhancing its functionality and adaptability to specific requirements.

JavaScript CodeBehind

JavaScript CodeBehind is similar to .NET CodeBehind but uses JavaScript as the programming language, and it is particularly geared towards web programming. It enables you to write custom code for your web-based project, providing another option for developers who prefer working with JavaScript. This feature allows you to create interactive displays, manage application behavior, and define event handling methods, further customizing your project to meet specific needs.

Understading the Drawing Area

In this section will present:

Features Highlights

Some features available in the Drawing tool include:

• Symbols are fully customizable and new symbols can be created from the green field.
• The concept of open Dynamic properties brings the flexibility to deliver any UNI requirement. 
• Advanced components for Trending, Alarms, DataGrids, Gantt, Maps, BarCharts and many others.
• Third-party components can be easily integrated, and new built-in components are frequently created.
  <<<<.please review the content of this paragraph>>>>
• Image files can be imported into the Project as Resources, so you do not need to keep the image file anymore.
• The Image Resources can be applied as a painting Brush to any element.
• Import XAML and AUTOCAD drawings into the system as a vector object. 
• Many Productivity tools, like Copy-Paste dynamic properties, edit multiple objects, search replace tags.
• Select the objects in the display, or use the ObjectTree View.
• Flexible Grid Snapping and zoom settings. 

Cross Platform Development

• Cross-Platform: Use the advanced WPF drawing features to create HTML5 pages. 

Drawing Workspace

When clicking the Draw button  in the ProjectDesigner, the toolbars are changed to present the Drawing Tools. You can also reach this environment from Displays > List, by a double click on a display row, or using the Open Outde icon M=<Image> on the main toolbar.

This is the overview of the workspace.

For further information refer the the child page Toolbars and Properties.

Toolbars and Properties: Describes toolbar and properties dialogs in further details.

Code Behind workspace 

<<Explanation of The CODE BEHIND TAB AND IMAGE and link to the chapter 

Code Behind, .NET and JavaScript

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

Common Properties Tab

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.

Tag Browser and Insert Tab

The Tag Browser and Insert Tab provide a convenient and efficient way for users to search for tags, components, and symbols and insert them into the display. The Tag Browser allows users to filter and navigate through the available tags within the project, simplifying the process of finding and selecting relevant tags. The Insert Tab offers a categorized list of available components and symbols, streamlining the process of adding these elements to the display. This integrated approach ensures that users can quickly and easily create and customize displays within the FactoryStudio environment.

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.

Overview of the drawing area in Tatsoft FactoryStudio

Accessing the drawing tools and customizing the environment

Features Highlights and Capabilities

Drawing Displays 

Typical Workflow

The typical workflow for drawing displays in FactoryStudio involves creating a new display, selecting and configuring graphical elements, adding dynamic behavior, using and customizing symbols, implementing components and user controls, and applying code-behind programming. This process ensures that users can create customized, interactive HMI SCADA displays tailored to their specific automation project requirements.

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

FactoryStudio 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 project 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.

Industrial Icons

Industrial Icons provide a set of frequently used symbols that can be easily incorporated into FactoryStudio projects, 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.

Drawing Graphical Elements

Users can draw graphical elements such as shapes, lines, text, and images using the drawing tools provided by FactoryStudio. These elements can be customized in terms of appearance, size, and position, allowing users to create visually appealing and informative displays.

Adding Dynamic Behaviour

FactoryStudio enables users to add dynamic behavior to graphical elements by configuring animations, data bindings, and user interactions. This capability ensures that displays provide real-time feedback and accurate representations of the automation process, facilitating effective monitoring and control.

Using and Customizing Symbols

High Performance Graphics

High Performance Graphics (HPG) are a set of pre-designed symbols that follow best practices for design, ensuring clear and efficient communication of information to operators. Users can customize these symbols to match their specific project requirements, ensuring a consistent and effective visual language across their projects.

Paste Tags to Displays

FactoryStudio allows users to easily paste tags onto their displays, automatically generating appropriate symbols and data bindings. This feature streamlines the process of creating data-driven visuals, enabling users to quickly build informative displays that accurately represent their automation processes.

Components and User Controls

AlarmWndow

The Alarm Window component provides a dedicated display for managing and monitoring alarms within FactoryStudio. It can display alarm priority, status, and acknowledgment, allowing operators to effectively respond to alarms and maintain system safety.

DataGrid Table

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

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.

Map Components

Map Components provide users with the ability to integrate geospatial data into their projects. They can display map layers, markers, and labels, enabling users to visualize and interact with geographically distributed assets and data points.

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 HMI SCADA applications, ensuring effective planning and resource allocation.

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.

External Controls

External Controls allow users to integrate third-party components and libraries into their HMI SCADA applications, extending the functionality and capabilities of FactoryStudio. This enables users to create customized solutions tailored to their unique project requirements.

Code-Behind Programming

Code-behind programming allows users to add custom functionality and behaviors to their displays using .NET or CSharp and JavaScript code. This feature enables users to create complex interactions, validate user input, and implement advanced automation logic within their HMI SCADA applications.

Opening Multiple Popups

FactoryStudio supports opening multiple popups within a single display, allowing users to create context-sensitive information overlays and dialogs. This feature enhances the user experience by providing relevant information and controls based on the operator's current task or selection.

Responsive Dashboard Pages

Responsive Dashboard Pages enable users to create displays that automatically adjust their layout and appearance based on the display size and resolution. This ensures that HMI SCADA applications maintain a consistent and professional appearance across various devices and screen sizes, facilitating accessibility and ease of use.

Working with Displays 

Testing the User Interface 

Testing the user interface is a critical step in the development process, ensuring that your HMI SCADA application is both functional and user-friendly. FactoryStudio provides an intuitive environment for testing and refining the UI, allowing you to identify and resolve any issues before deployment. To test the user interface, you can run the project in Debug mode, interact with the application, and verify that the graphical elements respond correctly to user input and real-time data.

Execution and Online Changes

FactoryStudio supports real-time execution and online changes, enabling you to make adjustments to your application while it's 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 project execution. This minimizes downtime and ensures that your application remains responsive to user needs.

Enabling Built-In Tooltip

FactoryStudio includes built-in tooltip functionality that can be enabled for various elements within the application. Tooltips provide helpful information to users by displaying a brief description of an element's function when the mouse hovers over it. To enable tooltips, you can configure the Tooltip property for each element in the Properties panel. Tooltips can be customized with relevant text and formatting to improve the user experience.

Creating Displays on Runtime

In some cases, you may need to create displays dynamically during runtime to accommodate specific requirements or user interactions. FactoryStudio allows you to create displays programmatically using .NET or JavaScript code-behind. This enables you to generate customized displays based on user input, data-driven conditions, or other factors that may change during the application's execution.

Using Shortcuts (verfiew Shift-click autotrend)

FactoryStudio supports various keyboard shortcuts to facilitate efficient navigation and interaction within the application. For instance, using the Shift-click autotrend shortcut allows users to quickly access trending data for selected tags. By leveraging these shortcuts, operators can streamline their workflows and reduce the time required to access essential information and functionality within the application.

In summary, FactoryStudio provides a comprehensive suite of tools and features for designing, implementing, and managing HMI SCADA applications. The platform's extensive capabilities ensure that your application is efficient, responsive, and user-friendly, meeting the needs of both operators and system integrators.

Working with Graphical Elements

This section will covers:

Understanding the concept of graphical elements
Creating and editing basic shapes, text, images, and controls
Configuring element properties and behavior

Adding Dynamics to Screen Elements

• Introduction to real-time behaviors (dynamics) for screen elements
• Configuring dynamic properties, such as color changes and visibility
• Binding screen elements to real-time tags and templates

Symbols, Images, and Repositories

• Understanding the concept of smart symbols
• Exploring images, Symbol Factory library, and Local Symbols Gallery
• Using built-in symbols and components.
• Pasting Tags directly to Displays and clipboard operations.  
• Creating and managing custom symbols and components
• Importing and exporting symbols and components

User Controls and External Components

Introduction to dynamic objects, smart symbols, and UI controls
Utilizing platform UI controls, Windows UI controls, and extensible components
Integrating external components in FactoryStudio displays

Preparing the Application Navigation

Understanding the concept of application navigation
Organizing the navigation of pages for users
Display Modes: Pages, Dialogs, and Popups

Responsive Design and Dashboard Layouts

Implementing responsive design principles
Working with grid layouts to create adaptable and flexible user interfaces

Code-Behind Programming

Overview of display code-behind programming
Writing code in VB.Net or CSharp and automatic language conversion
Defining event handling methods for mouse and input commands
Utilizing pre-defined methods for handling display opening, closing, and dialog actions

Troubleshooting and Best Practices

Troubleshooting and Common #Issues

Some common issues that may arise while working with the Draw Screens and Symbols include:

# Inconsistency or missing data from external systems:

# Performance issues

Best Practices and #Recommendations

To get the most out of the Draw Screens and Symbols, follow these best practices:

# Organization of the data structure

# Status Monitoring 

List of Keyboard shortcuts

Design guidelines and recommendations for creating effective and user-friendly displays and symbols

Optimizing performance and resource usage in complex screens

Best Practices and Recommendations

In this section...