Page History

Overview

This section presents how to navigate and use the most common tools in the main design area, the Draw Environment.

On this page:

Table of Contents

maxLevel	3

Toolbars

Descrição

page lists a suite of tools for design and interface creation for data visualization, such as dashboards, process displays, HMIs, and SCADA systems. It offers precise selection tools, versatile drawing capabilities for shapes and graphics, and advanced symbol management, text, and button design features that ensure clear and efficient graphical representations using real-time data.

On this page:

Table of Contents

maxLevel	3
style	none

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.

Action		Description
Image Added	Save	Retains the current modifications made to the document, ensuring no loss of recent edits.
Image Added	Save As	Allows users to store the document under a different name or location, creating a duplicate.
Image Added	New Document	Initiates a fresh, blank document for a new start.
Image Added	Preview Document	Provides a visual representation for users to review the document's final appearance.
Image Added	Tree View Document	Displays the document's content in a hierarchical format for structured navigation.
Image Added	Discard Changes	Reverts the document to its last saved state, discarding unsaved modifications.

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.

Solution toolbar

On the top, you have buttons to save the display, to select a new displays and other actions on the current display.

Icon

Command

Description

Image Removed

Undo

Undoes an operation/change. This button is available until you save changes.

Image Removed

Redo

Redoes a previously undone operation/change. This button is available until you save changes.

Image Removed

Cut

Cuts a selected row (DataGrid) or objects (Drawing). This command will delete any select row or object in order to paste it somewhere else.

Image Removed

Copy

Copies a selected row (DataGrid) or objects (Drawing).

Image Removed

Paste

Pastes a row (DataGrid) or objects (Drawing) that was copied or cut previously.

Image Removed

Delete

Deletes selected row (DataGrid) or objects (Drawing).

Image Removed

Print

Prints current table (DataGrid) or display (Drawing).

Image Removed

Save Document on Git folder

Exports content to an external file as .csv (Tables) or .jpg (Displays) file.

Image Removed

Import Document from Git folder

Imports an external file to the current table. See Copying and Pasting Rows for more details.

Image Removed

Find Elements

The Find Elements button on the toolbar accesses the object cross reference, which lets you find where objects are used in the Project and go directly to each location.

Image Removed

Next Reference

Navigates to the subsequent reference or item in a given list or sequence.

Image Removed

Previous Reference

Navigates to the preceding reference or item in a given list or sequence.

Image Removed

New Tag

Allows creation of a new tag in the real-time database.

Image Removed

Tag Properties

Shows the properties of the tag selected in the text box.

Image Removed

Object Selection

Enables the user to choose a specific item from a set of objects or elements within the interface.

Image Removed

Open a New Window to the Selected Document

Opens the document or file currently selected in a new window, allowing for parallel viewing or editing alongside the current content.

Image Removed

Feedback

Give your opinion in the feedback tab of the Tatsoft website.

Image Removed

Documentation

Acess the documentation on the website.

Document toolbar

Underneath there is the buttons to select new displays, or save, preview and document actions.

Command

Description

Save

Save As

New document

Preview document

Tree View document

Discard changes

Draw toolbar

On the left side of the Drawing tab. Use these buttons to draw shapes, add buttons, and create special windows.

Command

Description

Selection Tool

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

object from a group of selected objects.
Click on an open area of the display and highlight several elements to select a group of

selected objectsClick

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

Direct Selection Tool

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.

Hand Tool

The Hand tool can be used to modify the view window. Click once on the display background and hold down the left mouse button. Then, move the display to the desired position.

Edit Properties

Opens properties dialog window of the selected object

Geometric objects tools

Right-click to end the use of each tool.
To add, modify, and/or remove points after creating a polygon or polyline, use the Direct Selection Tool.

Rectangle

Creates a rectangle object.

Ellipse

Creates an ellipse object.

Polygon

Creates a polygon object.

Connectors

PolyLine

Creates a polyline object.

GridLine

Creates a gridline object.

Button

Creates a button object.

LabelBox

Creates a label box.

TextTool

Text Output

Creates a text output object.

Text Box

Creates a text input/output (I/O) object.
To link the I/O object with a tag, double-click the I/O object. Under the Dynamic configuration window, select the TextIO dynamic.

Industrial icons

Insert an industrial icons to be used in the project.

Insert an Image

Insert an image to be used in the project.

Insert a Component

Insert a component in the draw.

Open Symbol Library

The symbol library includes both built-in and user-defined symbols.

Add Symbol

Creates New Symbol with Selected Elements.

Edit Symbol

Edit Selected Symbol.

Break Symbol

Break apart Selected Symbol to its elements.

. 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

Object toolbar

Across the bottom of the Drawing tab. Use these buttons to group, combine, align, and lock the selected objects.

Commands

Description

Expand Components Panel

Expand and collapse components panel.

Grid definition

Adjusts the underlying grid used for aligning elements.

	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

all elements	Allows changes to all previously locked elements.
Image Added	Show

All Elements

all elements	Reveals all elements, including hidden ones.
Image Added	Hide

Selected Element

selected element

Hides the currently selected element.

Panels

Components

sidebar

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.

Component

DefinitionPurposeFunctionUsage

Description
AlarmAreas	A UI element for alarm

representation.Organizing alarms.Show

organization used for alarms management. It displays the alarm tree.

Drag

Simply drag and drop onto the draw area.

AlarmViewer

UI element

An alarm window designed for alarms visualization.

Viewing alarms.Display alarms in

It efficiently displays alarms within an interface.

Drag and drop

onto the draw area

to use.
AssetsTree	A UI component

for

that displays asset hierarchies

.Displaying

, giving a clear view of asset structures.

Show asset structure.Drag

To use, drag and drop onto the draw area.

DataGrid

Tabular

A tabular UI component

.Showing structured data.Display rows, columns with sorting/filtering.

essential for showing structured data in rows and columns with sorting/filtering capabilities. Drag and drop to use.
BarChart	A graphical tool for visualizing data using bars to compare data sets. Use by dragging and dropping

Drag and drop

onto the draw area.

BarChartGraphical representation tool.Visualizing data in bars.Compare data sets using bars.Drag and drop onto the draw area.DrillingChartData visualization tool.Displaying drilling trends.Give insights into drilling operations.Drag and drop onto the draw area.GanttChartVisualization tool for project tasks.Tracking project tasks.Show tasks, dependencies on a timeline.

DrillingChart	A specialized visualization tool for displaying drilling trends, providing insights into drilling operations. Drag and drop to use.
GanttChart	A tool for visualizing and tracking project tasks, showcasing tasks and their dependencies on a timeline. Drag and drop to use.
PieChart	A circular tool that visualizes data, dividing it into slices to compare parts of a whole. Drag and drop to use.
TrendChart	A tool designed to analyze time-based data patterns by plotting data points on a time axis. Simply drag and drop to use.
XY Chart	A Cartesian chart for comparing two variables by plotting them on X and Y axes. Use by dragging and dropping

Drag and drop

onto the draw area.

PieChartCircular data visualization tool.Comparing parts of a whole.Represent data in slices of a circle.Drag and drop onto the draw area.TrendChartData trend visualization tool.Analyzing time-based patterns.Plot data points on a time axis.

ChildDisplay	A UI tool that shows nested hierarchies, effectively representing parent-child UI relations. Drag and drop to use.
HTML5Control	A tool for embedding and displaying HTML5 content with CSS and JS support. Drag and drop onto the draw area for usage.

XY ChartCartesian chart.Comparing two variables.Plot data on X and Y axes.

PdfViewer

A specialized viewer for displaying PDF documents. Drag and drop onto the draw area to use.

ChildDisplay

ReportViewer

UI for nested structures.Showing nested hierarchies.Represent parent-child UI relations.

A dynamic tool for displaying and managing structured reports. Use by dragging and dropping onto the draw area.
WebBrowser	An embedded browser for web content rendering and navigation. Simply drag and drop to use.
WPFControl	A tool for embedding and displaying WPF elements and components. Use by dragging and dropping

Drag and drop

onto the draw area.

HTML5ControlEmbedded web content tool.Displaying HTML5 content.Render web elements with CSS and JS.Drag and drop onto the draw area.PdfViewerDocument viewer.Showing PDF documents.Display PDF content.

ArcPointerCircular	A UI element designed for circular pointers, used to indicate values on circular displays. Drag and drop to use.
CenterValueCircular	A display feature for circular gauges that showcases core values centrally. Drag and drop onto the draw area for usage.

ReportViewerReporting tool.Displaying reports.Show and manage structured reports.Drag and drop onto the draw area.WebBrowserEmbedded browser.Web browsing.Render and navigate web pages.

CircularGauge	A gauge component that visualizes data in a circular format. Drag and drop to use.
Compass	A navigation tool essential for displaying directional information. Drag and drop onto the draw area

.WPFControlEmbedded WPF content tool.Displaying WPF elements.Render and manage WPF components.

to use.
LinearGauge	A straight-line gauge component useful for displaying data in a linear fashion. Drag and drop to use.
SemiCircleCircular	A half-round gauge that displays data in a semi-circular format. Drag and drop onto the draw area to use.

ArcPointerCircular

BrushEditor

A UI

element for circular pointers.Indicating values on circular displays.Point to values on circular gauges.

editor for customizing and visualizing graphical brush designs. Drag and drop onto the draw area to use.

CenterValueCircularCentral value display for circular gauges.Showing core values on circular gauges.Display the central value in circular gauges.

Button	An interactive UI element that triggers specified actions when pressed. Use by dragging and dropping onto the draw area.
CheckBox	A togglable UI component used for binary choices. Drag and drop onto the draw area for usage.

CircularGaugeRound gauge UI component.Visualizing data in a circular manner.Show data values within a circular form.

ComboBox	A drop-down list component that lets users select an item from a list. Drag and drop to use.
DatePicker	A tool designed for users to select specific dates. Drag and drop onto the draw area for usage.

Compass

DateTimePicker

Navigation tool.Displaying directional information.Indicate directions.Drag and drop onto the draw area.LinearGaugeStraight-line gauge UI component.Displaying data linearly.Represent data values on a straight scale.

A combined tool for users to select specific dates and times. Drag and drop to use.
ListBox	A list display component that showcases items for user interaction. Drag and drop to use.
MaskedTextBox	A text input tool that accepts input in a predefined pattern or format. Drag and drop onto the draw area to use.

SemiCircleCircularHalf-round gauge.Displaying data in a semi-circular manner.Represent data in a half-circle format.

NumericTextBox

A text input component tailored for numerical values. Drag and drop onto the draw area to use.

BrushEditor

PushButton

UI for editing graphical brushes.Customizing brush styles.Edit and visualize graphical brush designs.Drag and drop onto the draw area.

An activatable UI element that executes specific actions upon activation. Drag and drop to use.
RadioButton	A UI component for making single choices from a set, ensuring only one can be active at a time. Drag and drop to use.
Slider	A value selection tool on a scale, allowing users to adjust values within a range. Drag and drop to use.
TextBlock	A component for displaying uneditable, static text content.

ButtonInteractive UI element.Triggering actions.Execute specified actions when pressed.

Drag and drop onto the draw area for usage.

CheckBox

TextBox

Togglable UI component.Selections and toggling.Allow binary choices.

A text input UI tool that lets users type and modify text. Drag and drop onto the draw area to use.

ComboBoxDrop-down list component.Selecting from a list.Display a list and let users choose an item.

TimePicker	A specialized tool allowing users to select specific hours and minutes. Drag and drop to use.
Menu	A list of selectable items or actions presented to the user. Drag and drop onto the draw area for usage.

DatePickerDate selection tool.Picking dates.Let users select specific dates.Drag and drop onto the draw area.DateTimePickerDate and time selection tool.Picking date and time.Allow users to select specific dates and times.Drag and drop onto the draw area.ListBoxList display component.Showcasing lists.Display a list of items for user interaction.

MenuItem	An individual selectable item within a menu. Typically added to a Menu component for functionality.
PageSelector	A navigation tool for transitioning between different pages or views. Drag and drop to use.
MapsGMap	A geographical map component for displaying location data using the GMap provider. Drag and drop to use.
RangeCircularGauge	A gauge feature that showcases a specified range within circular gauges. Drag and drop onto the draw area to use.

MaskedTextBoxFormatted text input component.Inputting text in a specific format.Accept text input in a predefined pattern.

Circle

A geometrical component used for displaying a circular shape. Drag and drop onto the draw area to use.

NumericTextBoxNumber input component.Inputting numerical values.Allow users to type in numbers.

Ellipse

An oval-shaped component for visualization. Drag and drop onto the draw area for usage.

PushButtonActivatable UI element.Triggering actions.Execute specified actions upon activation.

Hexagon

A six-sided geometric component used to display a hexagonal shape. Drag and drop onto the draw area to use.

RadioButtonSelectable UI component.Making single choices from a set.Allow selection among a set, only one can be active.

Rectangle

A four-sided geometric component for displaying a rectangular shape. Simply drag

Drag

and drop onto the draw area

.SliderValue selection tool on a scale.Adjusting values.Let users adjust a value within a range.Drag and drop onto the draw area.TextBlockStatic text display component.Displaying uneditable text.Show static text content.Drag and drop onto the draw area.TextBoxText input UI component.Inputting and editing text.Allow users to type and modify text.Drag and drop onto the draw area.TimePickerTime selection tool.Picking times.Let users select specific hours and minutes.Drag and drop onto the draw area.MenuList of choices component.Offering a list of actions/choices.Display a list of selectable items/actions.Drag and drop onto the draw area.MenuItemIndividual item in a menu.Individual choice within a menu.Represent a single selectable item within a menu.Add to a Menu component.PageSelectorNavigation tool.Changing between pages.Offer interface to navigate between different pages.Drag and drop onto the draw area.MapsGMapGeographical map component.Displaying geographical information.Show geographical data using the GMap provider.Drag and drop onto the draw area.RangeCircularGaugeRange indicator for circular gauges.Visualizing range on circular gauges.Show a specified range within circular gauges.Drag and drop onto the draw area.CircleGeometrical shape component.Displaying a circle.Render a circular shape.Drag and drop onto the draw area.EllipseOval shape component.Displaying an oval.Render an oval shape.Drag and drop onto the draw area.HexagonSix-sided shape component.Displaying a hexagon.Render a hexagonal shape.Drag and drop onto the draw area.RectangleFour-sided shape component.Displaying a rectangle.Render a rectangular shape.Drag and drop onto the draw area

for usage.

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.

Button to Expand or Restore Panel Width

Image Added

Filter for Tag names

Image Added

Button to Collapse All Tags on Panel

Image Added

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.

Property section	Description
Appearance	Customize object look using themes and properties: Fill, Line, Opacity. Includes TextShadow option.
Border Radius	Adjust corner curvature with X (horizontal) and Y (vertical) values.
Connections	Decide if an object connects elements. Checkbox to enable/disable.
Contents Align	Manage content alignment within an object: options like left, right, and center.
Display Settings	Set object presentation: Page, Popup modes. Customize background, size, borders.
Dynamics Clipboard	Tools for dynamic properties. Buttons to fetch and apply configurations.
Layout	Set position and size using parameters: Left, Top, Width, Height.
Replace Tags/Strings	Replace tags and strings. Selections from object namespaces with multiple replace options.
Text	Manage text content and appearance. Options include font, localization, and text wrapping.
Transform	Apply visual effects: DropShadow, Rotation, Skew. Customizable parameters for each effect.
Type	Classify objects for categorization within larger systems.

In this section:

Page Tree

root	@parent
spaces	V10

Space shortcuts

Page tree

Versions Compared

Old Version 44

New Version Current

Key

Overview

Toolbars

Toolbars

Document toolbar

Drawing toolbar

Solution toolbar

Document toolbar

Draw toolbar

Object toolbar

Object toolbar

Panels

Components

Panels

Tags Panel

Drawing Properties