Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

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
maxLevel3


Toolbars

Descrição

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

Undo

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

Redo

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

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.

Copy

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

Paste

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

Delete

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

Print

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

Save Document on Git folder

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

Import Document from Git folder

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

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.

Next Reference

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

Previous Reference

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

New Tag

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

Tag Properties

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

Object Selection

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

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.

Feedback

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

Documentation

Acess the documentation on the website.


Document toolbar

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

Action

Description

Save

Retains the current modifications made to the document, ensuring no loss of recent edits.

Save As

Allows users to store the document under a different name or location, creating a duplicate.

New Document

Initiates a fresh, blank document for a new start.

Preview Document

Provides a visual representation for users to review the document's final appearance.

Tree View Document

Displays the document's content in a hierarchical format for structured navigation.

Discard Changes

Reverts the document to its last saved state, discarding unsaved modifications.


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

 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.


Object toolbar

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

Command

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.

Group

Binds multiple elements together to be treated as one.

Ungroup

Separates elements that were grouped together.

Union

Combines two or more shapes into a single shape.

Intersect

Creates a shape from the overlapping areas of two shapes.

Exclude

Creates a shape by removing the overlapping areas of two shapes.

Exclusive-Or

Forms a shape from the non-overlapping parts of two shapes.

AlignLeft

Aligns selected elements to the left.

AlignHorizontalCenter

Aligns selected elements to the horizontal center.

AlignRight

Aligns selected elements to the right.

AlignTop

Aligns selected elements to the top.

AlignVerticalCenter

Aligns selected elements to the vertical center.

AlignBottom

Aligns selected elements to the bottom.

Move To The Front

Moves selected elements to the front of the layer stack.

Move To The Back

Moves selected elements to the back of the layer stack.

Change Z-Order

Adjusts the layering order of selected elements.

Resize Width

Resizes the width of selected elements.

Resize Height

Resizes the height of selected elements.

Rotate Clockwise

Click this option the rotate clockwise.

SpaceEvenlyHorizontal

Evenly spaces selected elements horizontally.

SpaceEvenlyVertical

Evenly spaces selected elements vertically.

FlipHorizontally

Flips the selected elements horizontally.

Flip Vertically

Flips the selected elements vertically.

Lock element

Prevents changes to the selected element.

Unlock element

Allows changes to a previously locked element.

Unlock All Elements

Allows changes to all previously locked elements.

Show All Elements

Reveals all elements, including hidden ones.

Hide Selected Element

Hides the currently selected element.


Components sidebar

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

Definition

Purpose

Function

Usage

Description
AlarmAreasA 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.
AssetsTreeA UI component
for asset modeling.

Displaying asset structures.

Show asset structure.

Drag
that displays asset hierarchies, giving a clear view of asset structures. To use, drag and drop onto the draw area.
DataGrid
Tabular
A tabular UI component
.Showing
essential for showing structured data
.Display
in rows
,
and columns with sorting/filtering capabilities.
Drag and drop
onto the draw areaDrag and drop
to use.
BarChart

Graphical representation tool.

Visualizing data in bars.

Compare data sets using bars.

A graphical tool for visualizing data using bars to compare data sets. Use by dragging and dropping onto the draw area.
DrillingChart
Data
A specialized visualization tool
.Displaying
for displaying drilling trends
.Give
, providing insights into drilling operations.
Drag and drop
onto the draw area
to use.
GanttChart
Visualization
A tool for visualizing and tracking project tasks
.

Tracking project tasks.

Show tasks,
, showcasing tasks and their dependencies on a timeline.
Drag and drop
onto the draw areaComparing
to use.
PieChart

Circular data visualization tool.

A circular tool that visualizes data, dividing it into slices to compare parts of a whole.

Represent data in slices of a circle.

Drag and drop
onto the draw areaAnalyzing
to use.
TrendChart

Data trend visualization tool.

A tool designed to analyze time-based data patterns
.Plot
by plotting data points on a time axis.
Drag
Simply drag and drop
onto the draw area
to use.
XY ChartA Cartesian chart
.Comparing
for comparing two variables
.Plot data
by plotting them on X and Y axes.
Drag and drop Represent
Use by dragging and dropping onto the draw area.
ChildDisplay

UI for nested structures.

Showing nested hierarchies.

A UI tool that shows nested hierarchies, effectively representing parent-child UI relations.
Drag and drop
onto the draw areaRender web elements
to use.
HTML5Control

Embedded web content tool.

Displaying HTML5 content.

A tool for embedding and displaying HTML5 content with CSS and JS support.
Showing
Drag and drop onto the draw area for usage.
PdfViewer

Document viewer.

A specialized viewer for displaying PDF documents
.Display PDF content
.
Show and manage
Drag and drop onto the draw area to use.
ReportViewer

Reporting tool.

Displaying reports.

A dynamic tool for displaying and managing structured reports.
Drag and drop Drag and drop onto the draw area
Use by dragging and dropping onto the draw area.
WebBrowser

Embedded browser.

Web browsing.

Render and navigate web pages.

Drag and drop
An embedded browser for web content rendering and navigation. Simply drag and drop to use.
WPFControl

Embedded WPF content tool.

Displaying WPF elements.

Render and manage WPF components.

A tool for embedding and displaying WPF elements and components. Use by dragging and dropping onto the draw area.
ArcPointerCircularA UI element designed for circular pointers
.Indicating
, used to indicate values on circular displays.

Point to values on circular gauges.

Drag and drop
onto the draw area
to use.
CenterValueCircular
Central value
A display feature for circular gauges
.Showing
that showcases core values
on circular gauges.

Display the central value in circular gauges.

centrally. Drag and drop onto the draw area for usage.
CircularGauge
Round
A gauge
UI
component
.Visualizing
that visualizes data in a circular
manner.

Show data values within a circular form.

format. Drag and drop
onto the draw areaDisplaying
to use.
Compass

Navigation tool.

A navigation tool essential for displaying directional information
.Indicate directions
.
Drag and drop onto the draw area to use.
LinearGauge
Straight
A straight-line gauge
UI component.

Displaying data linearly.

Represent data values on a straight scale.

Drag and drop onto the draw area
component useful for displaying data in a linear fashion. Drag and drop to use.
SemiCircleCircular
Half
A half-round gauge
.Displaying
that displays data in a semi-circular
manner.Represent data in a half-circle
format.
Drag and drop onto the draw area to use.
BrushEditorA UI
for editing graphical brushes.

Customizing brush styles.

Edit and visualize
editor for customizing and visualizing graphical brush designs.
Drag and drop onto the draw area to use.
Button
Interactive
An interactive UI element
.

Triggering actions.

Execute
that triggers specified actions when pressed.
Drag and drop
Use by dragging and dropping onto the draw area.
CheckBox
Togglable
A togglable UI component
.

Selections and toggling.

Allow
used for binary choices.
Drag and drop onto the draw area for usage.
ComboBox
Drop
A drop-down list component
.Selecting
that lets users select an item from a list.

Display a list and let users choose an item.

Drag and drop
onto the draw areaLet users
to use.
DatePicker

Date selection tool.

Picking dates.

A tool designed for users to select specific dates.
Allow
Drag and drop onto the draw area for usage.
DateTimePicker

Date and time selection tool.

Picking date and time.

A combined tool for users to select specific dates and times.
Drag and drop
onto the draw area
to use.
ListBox
List
A list display component
.

Showcasing lists.

Display a list of
that showcases items for user interaction.
Drag and drop
onto the draw area
to use.
MaskedTextBox
Formatted
A text input
component.

Inputting text in a specific format.

Accept text
tool that accepts input in a predefined pattern or format.
Drag and drop onto the draw area to use.
NumericTextBox
Number
A text input component
.Inputting
tailored for numerical values
.Allow users to type in numbers
.
Drag and drop onto the draw area to use.
PushButton
Activatable
An activatable UI element
.

Triggering actions.

Execute specified
that executes specific actions upon activation.
Drag and drop
onto the draw area
to use.
RadioButton
Selectable
A UI component
.Making
for making single choices from
a set.Allow selection among
a set, ensuring only one can be active at a time.
Drag and drop
onto the draw area
to use.
Slider
Value
A value selection tool on a scale
.

Adjusting values.

Let users adjust a value
, allowing users to adjust values within a range.
Drag and drop
onto the draw areaShow
to use.
TextBlock

Static text display component.

Displaying uneditable text.

A component for displaying uneditable, static text content.
Allow users to
Drag and drop onto the draw area for usage.
TextBox

Text input UI component.

Inputting and editing text.

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

Time selection tool.

Picking times.

A specialized tool allowing users to select specific hours and minutes.
Drag and drop
onto the draw area
to use.
Menu

List of choices component.

Offering a list of actions/choices.

Display a list of selectable items/actions.

Represent a single
A list of selectable items or actions presented to the user. Drag and drop onto the draw area for usage.
MenuItem

Individual item in a menu.

Individual choice within a menu.

An individual selectable item within a menu.
Add Offer interface to navigate
Typically added to a Menu component for functionality.
PageSelector

Navigation tool.

Changing between pages.

A navigation tool for transitioning between different pages or views.
Drag and drop
onto the draw area
to use.
MapsGMap
Geographical
A geographical map component
.

Displaying geographical information.

Show geographical
for displaying location data using the GMap provider.
Drag and drop
onto the draw areaShow
to use.
RangeCircularGauge

Range indicator for circular gauges.

Visualizing range on circular gauges.

A gauge feature that showcases a specified range within circular gauges.
Render
Drag and drop onto the draw area to use.
Circle

Geometrical shape component.

Displaying a circle.

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

Oval shape component.

Displaying an oval.

Render an oval shape.

An oval-shaped component for visualization. Drag and drop onto the draw area for usage.
Hexagon
Six
A six-sided
shape component.

Displaying a hexagon.

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

Displaying a rectangle.

Render
geometric component for displaying a rectangular shape.
Drag
Simply drag and drop onto the draw area for usage.



In this section:

Page Tree
root@parent
spacesV10