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 | ||
---|---|---|
|
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). | |
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 |
|
 Direct Selection Tool |
|
 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. |
 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. |
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 | |
---|---|
AlarmAreas | A UI element for alarm |
Organizing alarms.
organization used for alarms management. It displays the alarm tree. |
Simply drag and drop onto the draw area. |
AlarmViewer |
An alarm window designed for alarms visualization. |
Viewing alarms.
It efficiently displays alarms within an interface. |
Drag and drop |
to use. | |
AssetsTree | A UI component |
Displaying asset structures.
Show asset structure.
that displays asset hierarchies, giving a clear view of asset structures. To use, drag and drop onto the draw area. |
DataGrid |
A tabular UI component |
essential for showing structured data |
in rows |
and columns with sorting/filtering capabilities. |
Drag 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 |
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 |
Tracking project tasks.
, showcasing tasks and their dependencies on a timeline. |
Drag and drop |
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 |
to use. |
TrendChart |
Data trend visualization tool.
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 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 |
to use. |
HTML5Control |
Embedded web content tool.
Displaying HTML5 content.
A tool for embedding and displaying HTML5 content with CSS and JS support. |
Drag and drop onto the draw area for usage. |
PdfViewer |
Document viewer.
A specialized viewer for displaying PDF documents |
. |
Drag and drop onto the draw area to use. |
ReportViewer |
Reporting tool.
Displaying reports.
A dynamic tool for displaying and managing structured reports. |
Use by dragging and dropping onto the draw area. |
WebBrowser |
Embedded browser.
Web browsing.
Render and navigate web pages.
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. | |
ArcPointerCircular | A UI element designed for circular pointers |
, used to indicate values on circular displays. |
Point to values on circular gauges.
Drag and drop |
to use. |
CenterValueCircular |
A display feature for circular gauges |
that showcases core values |
Display the central value in circular gauges.
centrally. Drag and drop onto the draw area for usage. |
CircularGauge |
A gauge |
component |
that visualizes data in a circular |
Show data values within a circular form.
format. Drag and drop |
to use. |
Compass |
Navigation tool.
A navigation tool essential for displaying directional information |
. |
Drag and drop onto the draw area to use. |
LinearGauge |
A straight-line gauge |
Displaying data linearly.
Represent data values on a straight scale.
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. | |
BrushEditor | A UI |
Customizing brush styles.
editor for customizing and visualizing graphical brush designs. |
Drag and drop onto the draw area to use. |
Button |
An interactive UI element |
Triggering actions.
that triggers specified actions when pressed. |
Use by dragging and dropping onto the draw area. |
CheckBox |
A togglable UI component |
Selections and toggling.
used for binary choices. |
Drag and drop onto the draw area for usage. |
ComboBox |
A drop-down list component |
that lets users select an item from a list. |
Display a list and let users choose an item.
Drag and drop |
to use. |
DatePicker |
Date selection tool.
Picking dates.
A tool designed for users to select specific dates. |
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 |
to use. |
ListBox |
A list display component |
Showcasing lists.
that showcases items for user interaction. |
Drag and drop |
to use. |
MaskedTextBox |
A text input |
Inputting text in a specific format.
tool that accepts input in a predefined pattern or format. |
Drag and drop onto the draw area to use. |
NumericTextBox |
A text input component |
tailored for numerical values |
. |
Drag and drop onto the draw area to use. |
PushButton |
An activatable UI element |
Triggering actions.
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 |
Adjusting values.
, allowing users to adjust values within a range. |
Drag and drop |
to use. |
TextBlock |
Static text display component.
Displaying uneditable text.
A component for displaying uneditable, static text content. |
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. |
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 |
to use. |
Menu |
List of choices component.
Offering a list of actions/choices.
Display a list of selectable items/actions.
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. |
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 |
to use. |
MapsGMap |
A geographical map component |
Displaying geographical information.
for displaying location data using the GMap provider. |
Drag and drop |
to use. |
RangeCircularGauge |
Range indicator for circular gauges.
Visualizing range on circular gauges.
A gauge feature that showcases a specified range within circular gauges. |
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 |
A six-sided |
Displaying a hexagon.
geometric component used to display a hexagonal shape. |
Drag and drop onto the draw area to use. |
Rectangle |
A four-sided |
Displaying a rectangle.
geometric component for displaying a rectangular shape. |
Simply drag and drop onto the draw area for usage. |
In this section:
Page Tree | ||||
---|---|---|---|---|
|