Draw The User Interface

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.
• Drawing Workspace.
• CodeBehind, .NET and JavaScript.
• Common Properties Tab.
• Tag Browser and Insert Tab.
• Properties and Dynamics Popup.

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.

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

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

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.

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.

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

For further information refer the the child page Industrial Icons.

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 Behavior

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

For further information refer the the child page Dynamics and UI Elements.

Using and Customizing Symbols

• 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

For further information refer the the child page Symbols and Images.

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.

HPG uses color schemes, symbols, and layout strategies to present data in a clear, concise, and easily understandable manner. Instead of bombarding operators with raw data and complex visuals, HPG presents data in context, focusing on what's most important for the operator's tasks.

In terms of operator response time, studies have shown that HPG can reduce response times by up to 41%, making operators more efficient at handling abnormal situations.

For further information refer the the child page High Performance Graphics.

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.

For further information refer the the child page Paste Tags to 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 FactoryStudio 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 within FactoryStudio. 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 projects. 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 projects. 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 projects, 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 projects, extending the functionality and capabilities of FactoryStudio. This enables users to create customized solutions tailored to their unique project 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 FactoryStudio. 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.

Code-Behind Programming

• Overview of display code-behind programming
• Writing code in VB.Net or C# 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

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

For further information refer the the child page Multiple Popups.

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.

In modern industrial environments, operators often need to interact with HMI SCADA systems from a variety of devices and environments. They may use a desktop computer in a control room, or a tablet on the factory floor, or while they are off-site. This demands responsive design for applications with FactoryStudio.

Responsive design ensures that the application interface dynamically adjusts based on the screen size, resolution, and orientation of the device being used. This helps to maintain a consistent and professional appearance across multiple devices, ensuring that operators can effectively interact with the application, regardless of their device or location.

Working with Displays 

Creating and editing displays is a fundamental process to ensure operators have efficient interaction with the FactoryStudio application. Displays can be customized with User Controls and External Components, which allow for the creation of custom user interface components and the incorporation of third-party components respectively. This allows for creating displays tailored to the specific needs of your project and users.

Testing the User Interface 

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

(review this subsection)

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.

Preparing the Application Navigation

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

Understanding the concept of application navigation is crucial for ensuring a fluid and intuitive user experience. The application navigation can be organized in various ways and can involve the utilization of Display Modes such as Pages, Dialogs, and Pop-ups. By carefully planning the navigation and applying responsive design principles, you can ensure a consistent and effective experience across all devices.

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:

This issue may occur due to misconfigurations in data sources or communication errors between systems. To resolve this, ensure that the connections between systems are properly configured, and the data sources are set up correctly.

# Performance issues

Performance issues may arise due to large numbers of graphical elements, complex animations, or inefficient scripting. To address this, optimize your displays by reducing the number of elements, simplifying animations, and using efficient code.

Best Practices and #Recommendations

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

# Organization of the data structure

A well-organized data structure ensures the efficient flow of information and minimizes errors. Organize your tags, templates, and data sources in a logical manner, making it easy for both developers and operators to understand and navigate.

Improvement: Offer more detailed guidance on how to organize tags, templates, and data sources, including examples of well-structured projects.

# Status Monitoring 

Regularly monitor the status of your HMI SCADA application to ensure its smooth operation. Implement alarms and notifications to alert operators of any abnormal conditions, and use diagnostic tools to identify and resolve issues promptly. This proactive approach can help maintain system stability and minimize downtime.

# Use of Smart Symbols and Components

Leverage the built-in smart symbols and components to create consistent and efficient displays. These pre-built elements not only save time but also promote a standardized look and feel across your project.

Improvement: Provide specific examples of smart symbols and components available in FactoryStudio and explain how they can be customized to fit the needs of a project.

# Responsive Design

Implement responsive design principles to ensure your displays adapt to different screen sizes and resolutions. This will improve user experience across various devices and platforms.

# Optimize Animations and Dynamics

While animations and dynamics can enhance the user experience, excessive or poorly optimized animations may hinder performance. Use these features judiciously and optimize them to ensure smooth operation and minimal resource usage.

# Regular Testing and Validation

Regularly test your HMI SCADA application to identify and address potential issues. Validate the functionality of your displays, ensuring they meet the intended requirements and provide accurate information to operators.

By following these best practices and recommendations, you can ensure the successful implementation and operation of your Draw Screens and Symbols in FactoryStudio.

Draw Screens and Symbols Runtime Attributes

Content

In this section...