Page History

Key Concepts and Terms

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.the components used in the interface, such as shapes, checkboxes or trend charts. 

Dynamics and Animations

Dynamics and animations are real-time behaviors changes that can be applied to graphical elements to enhance their functionality and visual appealcommunicate different messages. 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 solution 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

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

Drawing

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: Use the advanced WPF drawing features to create HTML5 pages. 

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.

Image Removed

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.

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.

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 

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.

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

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.

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

Tool Workspace

Image Added

Image AddedExpand 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 Image Addedexpand the Solution Explorer

Drawing Displays 

Using Graphical Basic Elements

Users can draw graphical basic

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.

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.

• 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

• 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

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.

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

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.

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

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.

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

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

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 allow users to integrate third-party components and libraries into their projects, extending the functionality and capabilities of FactoryStudio. This enables users to create customized solutions tailored to their unique project requirements.

→ 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

or CSharp

• , C#, and JavaScript code. This feature enables users to create complex interactions, validate user input, and implement advanced automation logic within their

projects in FactoryStudio.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

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

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 projects maintain a consistent and professional appearance across various devices and screen sizes, facilitating accessibility and ease of use.

• 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

Working with Displays 

Testing the user interface is a critical step in the development process, ensuring that your project 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 The software supports real-time execution and online changes, enabling you to make adjustments to your application while it 's 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 project 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

FactoryStudio The software 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.

(review this subsection)

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.

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.

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

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:

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

Best Practices and Recommendations