Page History

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

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

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

The toolbar at the top provides functionalities like undoing, redoing, Git synchronization, and tag management. Directly below, the Document toolbar focuses on actions related to document management, such as saving and previewing content hierarchies. On the left, the Drawing toolbar offers tools for creating and manipulating graphical elements, from drawing basic shapes to configuring dynamics. At the top of the Draw area is the Object toolbar, which is designed for adjusting and aligning screen elements, with options ranging from zooming to layering and locking elements. The Components Panel is a guide to User Interface components, allowing users to drag and drop tools like charts and buttons onto their workspace. Lastly, the Drawing Properties table aids in customizing objects and detailing sections like appearance, layout, and content formatting to help users define every aspect of their designs.

Document toolbar

On the Draw Environment, underneath the Solution toolbar there are basic actions buttons such as those for saving modifications and adding new displays. The table outlines key document actions, from saving and creating new documents to previewing content hierarchies.

Drawing toolbar

The Drawing toolbar is on the left side of the Draw area. Use these buttons to draw shapes, add buttons, create alarm windows, and more. The tools offer functionalities for selecting and manipulating graphical elements. The "Selection tool" facilitates the selection of individual or multiple objects and provides access to the "Dynamics configuration." The "Direct Selection tool" allows users to modify the properties of objects within a group and handle polyline points. The "Hand tool" adjusts the view through dragging. There are also tools for drawing basic shapes such as rectangles, ellipses, polygons, and polylines. Users can add gridlines, design buttons, manage text input/output, and work with symbols – creating, editing, or decomposing them into foundational elements.

Tool		Description
Image Added	Selection tool	Select individual or multiple objects; access "Dynamics configuration" with a double-click. Click on an object to select it. CTRL+click selects multiple objects and object groups. Hold the CTRL key as you click on each object. Shift+click to choose a main object from a group of selected objects. Click on an open area of the display and highlight several elements to select a group of elements. Double-click on an object to open the "Dynamics configuration" window that provides settings for dynamic object properties. Tip title Multiple Elements Selection When multiple elements are selected, the one with the BLUE adorners is the Primary Selection. It is the last object to be included in the selection. When performing alignment or resizing commands, that object serves as the reference, and some properties in the sidebar are applied only to this primarily selected object.
Image Added	Direct Selection tool	Use this tool to select an object inside a group and modify its properties. Click on the object once to select it. You can also add, remove, and modify the points in a Polyline with the Direct Selection Tool. To move the point, click on the point to select it and hold down the left mouse button. Drag the point to its new position. Double-click on a point to add a new point adjacent to the selected point. Right-click on a point to delete the selected point.
Image Added	Hand tool	Drag to adjust the view.
Image Added	Edit Properties	Display property dialog for chosen object.
Image Added	Rectangle	Draw a rectangle.
Image Added	Ellipse	Draw an ellipse.
Image Added	Polygon	Draw a polygon.
Image Added	PolyLine	Draw a polyline.
Image Added	GridLine	Add a gridline.
Image Added	Button with Themes Colors	Generate a button with theme-based colors.
Image Added	PushButton with Custom Colors	Generate a pushbutton with custom colors.
Image Added	Textblock Output	Introduce a text output section.
Image Added	TextBox Input or Output	Creates a text input/output (I/O) object. To link the I/O object with a tag, double-click the I/O object and change its Linked Value
Image Added	Create a New Symbol with Selected Elements	Convert chosen elements into a new symbol.
Image Added	Edit Selected Symbol	Access properties of the chosen symbol.
Image Added	Break apart Selected Symbols to its elements	Decompose the symbol into its foundational elements.

Object toolbar

The Object toolbar is on the top of the Draw area. This toolbar allows users to adjust and align elements on the screen, offering capabilities ranging from grid adjustments for alignment to zooming in or out for improved viewability. Users can group or ungroup elements, merge shapes in various ways (Union, Intersect, Exclude, Exclusive-Or), and align them based on different parameters (left, center, right, top, bottom). Layering is facilitated through options to move elements frontward or backward and adjust their Z-order. Resizing and rotation options, along with horizontal and vertical flipping, offer further customization. Finally, there are functions to lock or unlock elements, ensuring design integrity, and options to show or hide specific elements for better work clarity.

Control		Description
Image Added	Expand Components Panel	Expand components panel.
Image Added	Collapse Components Panel	Collapse components panel.
Image Added	Grid definition	Adjusts the underlying grid used for aligning elements. Show/Hide Gridlines: You can choose to turn grids on and off. You can also adjust spacing (between grids) and thumb size. Snap to Gridlines: This option disallows free movement of the objects - they'll necessary match the gridlines. Show/Hide Rulers: You can turn on rulers to help guide your design.
Image Added	Screen Zoom	Allows for zooming in or out on the screen view.
Image Added	Group	Binds multiple elements together to be treated as one.
Image Added	Ungroup Resizing Children	Separates elements that were grouped together, keeping the children objects with their current sizes
Image Added	Ungroup Restoring Sizes	Ungroup the elements, restoring the children objects to their original sizes.
Image Added	Union	Combines two or more shapes into a single shape.
Image Added	Intersect	Creates a shape from the overlapping areas of two shapes.
Image Added	Exclude	Creates a shape by removing the overlapping areas of two shapes.
Image Added	Exclusive-Or	Forms a shape from the non-overlapping parts of two shapes.
Image Added	AlignLeft	Aligns selected elements to the left.
Image Added	AlignHorizontalCenter	Aligns selected elements to the horizontal center.
Image Added	AlignRight	Aligns selected elements to the right.
Image Added	AlignTop	Aligns selected elements to the top.
Image Added	AlignVerticalCenter	Aligns selected elements to the vertical center.
Image Added	AlignBottom	Aligns selected elements to the bottom.
Image Added	Move To The Front	Moves selected elements to the front of the layer stack.
Image Added	Move To The Back	Moves selected elements to the back of the layer stack.
Image Added	Change Z-Order	Adjusts the layering order of selected elements.
Image Added	Resize Width	Resizes the width of selected elements.
Image Added	Resize Height	Resizes the height of selected elements.
Image Added	Rotate Clockwise	Click this option the rotate clockwise.
Image Added	SpaceEvenlyHorizontal	Evenly spaces selected elements horizontally.
Image Added	SpaceEvenlyVertical	Evenly spaces selected elements vertically.
Image Added	FlipHorizontally	Flips the selected elements horizontally.
Image Added	Flip Vertically	Flips the selected elements vertically.
Image Added	Lock element	Prevents changes to the selected element.
Image Added	Unlock element	Allows changes to a previously locked element.
Image Added	Unlock all elements	Allows changes to all previously locked elements.
Image Added	Show all elements	Reveals all elements, including hidden ones.
Image Added	Hide selected element	Hides the currently selected element.

Panels

Components Panels

This table provides a comprehensive overview of the User Interface (UI) components, ranging from data visualization tools like charts and gauges to standard interaction elements such as buttons and text boxes. Technically, each component has a distinct function, whether it's rendering graphical data, facilitating user input, or displaying information in structured formats. Functionally, users can easily integrate these components into their design by dragging and dropping them onto the draw area, allowing for an efficient design experience.

Tags Panel

The Tags Panel allows you to drag and drop data points onto displays, quickly design real-time, data-driven interfaces with low coding, organize and manage data tags for efficient application development, and easily customize dashboards for monitoring and analytics purposes.

Drawing Properties

The table provides an overview of Drawing Properties sections utilized in object customization on draw environment. "Appearance" dictates the visual style, while "Border Radius" defines corner curvature. "Connections" indicates connectivity capabilities, and "Contents Align" manages internal content alignment. "Display Settings" prescribes the object's presentation mode, and "Dynamics Clipboard" offers tools for dynamic configurations. "Layout" establishes position and dimensions, while "Replace Tags/Strings" facilitates tag and string substitutions. The "Text" section handles content formatting, "Transform" applies visual effects, and "Type" determines the object's classification within systems. Each section encompasses specific parameters or options tailored to its purpose.

In this section:

In this section...