Draw Screens and Symbols

Purpose and Key Concepts

Graphical Element

When drawing displays, any object placed on the screen is defined as a Graphical Element. It can be simple objects like a rectangle, or controls like a CheckBox or TrendChart.

Dynamics

In the context of the Drawing tool, Dynamics are real-time behaviors you can use on a Graphical Element. For instance, you can add the Dynamic of Color Change to Rectangle and define the real-time Tag that will drive the color change.

Smart Symbols

Smart Symbols — or Symbols for short — is a platform feature that combines graphical Elements with Dynamics properties and connection to the real-time Tags and templates.

The Symbols vastly expedite the creation of Operator Users Interfaces, and simplify the maintenance, as changes on the Symbols propagate automatically to the Displays using it.

Components and User Controls

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

Image Resources

Image files imported to the Project. The Image Resources can be applied as background color, or even as a Dynamic color change, to any Graphical Element. 

Understading the Drawing Area

In this section will present:

Overview of the drawing area in Tatsoft FactoryStudio

Accessing the drawing tools and customizing the environment

Features Highlights and Capabilities

Drawing Area 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 

Features Highlights

Some features available in the Drawing tool include:

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

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

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