Key Concepts And Terminology

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. 

The Drawing Area and Its Features

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

<<Explanation of workspace

Accessing and customization

When clicking the Draw button  in the ProjectDesigner, the toolbars are changed to present the Drawing Tools.The Draw area is where you create and edit the displays, create and modify symbols, and do the Display CodevBehind programming.

<<contens

Features Highlights and Capabilities

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 cover:

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

Specific Tips and Best Practices

Design guidelines and recommendations for creating effective and user-friendly displays and symbols
Optimizing performance and resource usage in complex screens

Display Mode

Pages, dialogs, and pop-up are different display modes, they share some common, but each one have a specific particularly or behavior. They are commonly used in application development to build intuitive and dinamics user-interfaces.

Page

A Page is a Display that always remains open or opens, replacing the previous display, constituting an independent unit of information or functionality within an application. In summary, it is a screen that allows users to perform a specific action, in which access to the page is given from a navigation menu or through other links within the application.

Dialog

A Dialog is a display that opens on top of all other displays and stays open, blocking the use of other displays until the User closes it.

A dialog is a small window that appears on top of the main application window and requires user input before it can be dismissed. It is typically used to prompt users for confirmation or additional information before proceeding with an action. 

Dialogs can be modal, meaning the User cannot interact with the main application window until the dialog is closed.

Popup

A Popup is a small window that opens over a page, remaining on top, but the Users can still interact with the other pages. It displays additional information or functionality. And it can be triggered by a user action, such as clicking on a button or link, or they can appear automatically based on certain conditions. 

Popups can be modal or non-modal, often containing forms, menus, or other interactive components.

PopupWindow

A PopupWindow opens a completely independent Window with its border to show the display. 

A small, separate window appears on top of the main application window. It can display additional information or provide quick access to specific functionality, but they are not intended to be used for extended periods.

Toolbars and Element Properties

Learn how to navigate and use the most common tools in the main design area — the Draw Environment! Like an artist's palette and tools, you can use this area to build almost anything you can imagine!

The Draw area has the following controls to create, format, and configure displays:

• Top Toolbar — On the top, you have buttons to save the display, to select a new displays and other actions on the current display. 
• Vertical toolbar — On the left side of the Drawing tab. Use these buttons to draw shapes, add buttons, and create special windows.
• Horizontal toolbar — Across the bottom of the Drawing tab. Use these buttons to group, combine, align, and lock the selected objects.
• Element Properties — The area on the left side displays the Graphical Element Properties. These settings may differ based on the type of object selected. The Appearance parameters dictate the brush style and color used when drawing objects in the display. Clicking the Fill option allows you to specify the colors, gradients, or objects used to fill the graphics.

The Display Setting is always visible on the left side. The configuration fields of the Display, including if the Display is a Page, Dialog or Popup, were discussed in the section Displays, Remote Clients. 

Top Toolbar

Vertical Toolbar

Horizontal Toolbar

In this section...