Overview
This section presents how to navigate and use the most common tools in the main design area, the Draw Environment.
On this page:
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.
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 |
|
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.
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. |
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 |
---|---|---|---|---|
AlarmAreas | UI element for alarm representation. | Organizing alarms. | Show the alarm tree. | Drag and drop onto the draw area. |
AlarmViewer | UI element for alarms. | Viewing alarms. | Display alarms in an interface. | Drag and drop onto the draw area. |
AssetsTree | UI component for asset hierarchies. | Displaying asset structures. | Show asset structure. | Drag and drop onto the draw area. |
DataGrid | Tabular UI component. | Showing structured data. | Display rows, columns with sorting/filtering. | Drag and drop onto the draw area. |
BarChart | Graphical representation tool. | Visualizing data in bars. | Compare data sets using bars. | Drag and drop onto the draw area. |
DrillingChart | Data visualization tool. | Displaying drilling trends. | Give insights into drilling operations. | Drag and drop onto the draw area. |
GanttChart | Visualization tool for project tasks. | Tracking project tasks. | Show tasks, dependencies on a timeline. | Drag and drop onto the draw area. |
PieChart | Circular data visualization tool. | Comparing parts of a whole. | Represent data in slices of a circle. | Drag and drop onto the draw area. |
TrendChart | Data trend visualization tool. | Analyzing time-based patterns. | Plot data points on a time axis. | Drag and drop onto the draw area. |
XY Chart | Cartesian chart. | Comparing two variables. | Plot data on X and Y axes. | Drag and drop onto the draw area. |
ChildDisplay | UI for nested structures. | Showing nested hierarchies. | Represent parent-child UI relations. | Drag and drop onto the draw area. |
HTML5Control | Embedded web content tool. | Displaying HTML5 content. | Render web elements with CSS and JS. | Drag and drop onto the draw area. |
PdfViewer | Document viewer. | Showing PDF documents. | Display PDF content. | Drag and drop onto the draw area. |
ReportViewer | Reporting tool. | Displaying reports. | Show and manage structured reports. | Drag and drop onto the draw area. |
WebBrowser | Embedded browser. | Web browsing. | Render and navigate web pages. | Drag and drop onto the draw area. |
WPFControl | Embedded WPF content tool. | Displaying WPF elements. | Render and manage WPF components. | Drag and drop onto the draw area. |
ArcPointerCircular | UI element for circular pointers. | Indicating values on circular displays. | Point to values on circular gauges. | Drag and drop onto the draw area. |
CenterValueCircular | Central value display for circular gauges. | Showing core values on circular gauges. | Display the central value in circular gauges. | Drag and drop onto the draw area. |
CircularGauge | Round gauge UI component. | Visualizing data in a circular manner. | Show data values within a circular form. | Drag and drop onto the draw area. |
Compass | Navigation tool. | Displaying directional information. | Indicate directions. | Drag and drop onto the draw area. |
LinearGauge | Straight-line gauge UI component. | Displaying data linearly. | Represent data values on a straight scale. | Drag and drop onto the draw area. |
SemiCircleCircular | Half-round gauge. | Displaying data in a semi-circular manner. | Represent data in a half-circle format. | Drag and drop onto the draw area. |
BrushEditor | UI for editing graphical brushes. | Customizing brush styles. | Edit and visualize graphical brush designs. | Drag and drop onto the draw area. |
Button | Interactive UI element. | Triggering actions. | Execute specified actions when pressed. | Drag and drop onto the draw area. |
CheckBox | Togglable UI component. | Selections and toggling. | Allow binary choices. | Drag and drop onto the draw area. |
ComboBox | Drop-down list component. | Selecting from a list. | Display a list and let users choose an item. | Drag and drop onto the draw area. |
DatePicker | Date selection tool. | Picking dates. | Let users select specific dates. | Drag and drop onto the draw area. |
DateTimePicker | Date and time selection tool. | Picking date and time. | Allow users to select specific dates and times. | Drag and drop onto the draw area. |
ListBox | List display component. | Showcasing lists. | Display a list of items for user interaction. | Drag and drop onto the draw area. |
MaskedTextBox | Formatted text input component. | Inputting text in a specific format. | Accept text input in a predefined pattern. | Drag and drop onto the draw area. |
NumericTextBox | Number input component. | Inputting numerical values. | Allow users to type in numbers. | Drag and drop onto the draw area. |
PushButton | Activatable UI element. | Triggering actions. | Execute specified actions upon activation. | Drag and drop onto the draw area. |
RadioButton | Selectable UI component. | Making single choices from a set. | Allow selection among a set, only one can be active. | Drag and drop onto the draw area. |
Slider | Value selection tool on a scale. | Adjusting values. | Let users adjust a value within a range. | Drag and drop onto the draw area. |
TextBlock | Static text display component. | Displaying uneditable text. | Show static text content. | Drag and drop onto the draw area. |
TextBox | Text input UI component. | Inputting and editing text. | Allow users to type and modify text. | Drag and drop onto the draw area. |
TimePicker | Time selection tool. | Picking times. | Let users select specific hours and minutes. | Drag and drop onto the draw area. |
Menu | List of choices component. | Offering a list of actions/choices. | Display a list of selectable items/actions. | Drag and drop onto the draw area. |
MenuItem | Individual item in a menu. | Individual choice within a menu. | Represent a single selectable item within a menu. | Add to a Menu component. |
PageSelector | Navigation tool. | Changing between pages. | Offer interface to navigate between different pages. | Drag and drop onto the draw area. |
MapsGMap | Geographical map component. | Displaying geographical information. | Show geographical data using the GMap provider. | Drag and drop onto the draw area. |
RangeCircularGauge | Range indicator for circular gauges. | Visualizing range on circular gauges. | Show a specified range within circular gauges. | Drag and drop onto the draw area. |
Circle | Geometrical shape component. | Displaying a circle. | Render a circular shape. | Drag and drop onto the draw area. |
Ellipse | Oval shape component. | Displaying an oval. | Render an oval shape. | Drag and drop onto the draw area. |
Hexagon | Six-sided shape component. | Displaying a hexagon. | Render a hexagonal shape. | Drag and drop onto the draw area. |
Rectangle | Four-sided shape component. | Displaying a rectangle. | Render a rectangular shape. | Drag and drop onto the draw area. |
In this section: