Page History

Overview

This section presents how to navigate and use the most common tools in the main design area — , the Draw Environment! Like an artist's palette and tools, you can use this area to build almost anything you can imagine.

On this page:

Table of Contents

maxLevel	3

Terminology

The Draw area has the following controls to create, format, and configure displays:

Top Toolbar

Solution toolbar

Document Toolbar

Draw toolbar

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

Document Toolbar

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

Vertical toolbar

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

Horizontal

Object toolbar

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

Element

Drawing Properties

The area on the left side displays the Graphical Element Properties. These settings may differ based on the type of object selected. The Appearance parameters dictate the brush style and color used when drawing objects in the display. Clicking the Fill option allows you to specify the colors, gradients, or objects used to fill the graphics.

Image Removed

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.

Configuring the Toolbars and Properties

Top Toolbar

Icon	Command	Description

Image Removed

Image Added

Undo

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

Image Removed

Image Added

Redo

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

Image Removed

Image Added

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

Image Added

Copy

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

Image Removed

Image Added

Paste

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

Image Removed

Image Added

Delete

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

Image Removed

Image Added

Print

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

Image Removed

Image Added

Export

Save Document on Git folder

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

Image Removed

Image Added

Import Document from Git folder

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

Image Removed

Image Added

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

Image Added

Next Reference

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

Image Removed

Image Added

Previous Reference

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

Image Removed

Image Added

New Tag

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

Image Removed

Image Added

Tag Properties

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

Image Removed

Image Added

Object Selection

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

Image Removed

Image Added

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

Image Added

Feedback

Give your opinion in the feedback tab of

the Tatsoft website.

Image Removed

Documentation

Acess the documentation on the website.

the Tatsoft website.
Image Added	Documentation	Acess the documentation on the website.

Document toolbar

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

Icon	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
	Edit properties
	Rectangle
	Ellipse

Vertical Toolbar

Icon	Command	Description
Image Modified	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.
Image Modified	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 Modified	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.
Image Modified	Edit Properties	Opens properties dialog window of the selected object
Image Modified	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.
Image Modified	Rectangle	Creates a rectangle object.
Image Modified	Ellipse	Creates an ellipse object.
Image Modified	Polygon	Creates a polygon object.
Image Modified	Connectors
Image Modified	PolyLine	Creates a polyline object.
Image Modified	GridLine	Creates a gridline object.
Image Modified	Button	Creates a button object.
Image Modified	LabelBox	Creates a label box.
Image Modified	TextTool
Image Modified	Text Output	Creates a text output object.
Image Modified	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.
Image Modified	Industrial icons	Insert an industrial icons to be used in the project.
Image Modified	Insert an Image	Insert an image to be used in the project.
Image Modified	Insert a Component	Insert a component in the draw.
Image Modified	Open Symbol Library	The symbol library includes both built-in and user-defined symbols.
Image Modified	Add Symbol	Creates New Symbol with Selected Elements.
Image Modified	Edit Symbol	Edit Selected Symbol.
Image Removed	Break Symbol	Break apart Selected Symbol to its elements.

IconCommandDescription

Image Removed

Undo

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

Selected Symbol.
Image Added	Break Symbol	Break apart Selected Symbol to its elements

Image Removed

Redo

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

.

Icon	Components	Description
Assets
Image Modified	AlarmWindow	Creates an alarm window. Position the alarm window and double-click it to configure the alarm window settings. For more information, see Configuring an Alarm Window.
Image Modified	Alarm Areas	Creates an Alarm Area control that allows you to view the existing alarm tree.
Image Modified	Assets Tree	This component allows you to view the same structure in Runtime that is defined in the Engineering Environment. To do so, go to your Draw Environment, and select the Assets Tree component from the toolbar.
Image Modified	DataGrid	Creates a data grid window. Position the data grid window and double-click it to configure the data grid window settings. For more information, see Configuring a DataGrid Window.
Image Modified	TreeView	The Tree View object is a user interface component in that provides a hierarchical view of information, typically used for navigating nested lists or structures. It's primarily used to allow users to select tags from an organized and expandable tree-like structure, with options for filtering the tags and customizing their display names.
Charts
Image Modified	3DPipeViewer	Creates a 3D Pipe Viewer object. For more information, see the 3D Pipe Viewer section in the User Interface Controls.
Image Modified	BarChart	Creates a Bar Chart object. For more information, see the Bar Chart section in the User Interface Controls.
Image Modified	DrillingChart	Creates a drilling chart trend window. Position the trend window and double-click it to configure the trend window settings. For more information, see Configuring the Trend Window.
Image Modified	PieChart	Creates a Pie Chart object. For more information, see the Pie Chart section in the User Interface Controls.
Image Modified	TrendChart	Creates a trend window. Position the trend window and double-click it to configure the trend window settings. For more information, see Configuring the Trend Window.
Image Modified	XY Chart	Creates a XY trend window.
	CustomPieChart	Creates an Advanced Pie Chart object.
	GanttChart	Gantt Chart for WPF is a MS Project-like Project Viewer with built-in grid, schedule and resource assignment constraints. Some of the key features of Gantt control are: drag support for increasing and decreasing the Start and Finish Date of the Task, Drag and Drop support for the task within a row and automatic data synchronization between Grid and Chart. For more information, see the Gantt Control.
	Timeline
Containers
Image Modified	ChildDisplay
Image Modified	HTML5 Control	The HTML5 Control object is a user interface component that provides a way to apply CSS styles and JavaScript functionality to elements within HTML5 applications. It is primarily used for customization and interactivity enhancement of web pages or elements within the application.
Image Modified	PDFViewer	Creates a PDF Viewer object.
Image Modified	ReportViewer	Creates a Report Viewer object.
Image Modified	WebBrowser	Creates a Web Browser object.
Image Modified	WPF Control	Creates an external WPF component.
Gauges
Image Modified	CircularGauge	The Circular Gauge control is available for HTML5 and WPF, and it allows visualizing data in the form of Circular Scale. For more information, see the [!] Circular Gauge.
Image Modified	CircularGaugeArcPointer	Creates a Circular Gauge Arc Pointer.
Image Modified	CircularGaugeCompass	Creates a Circular Gauge Compass.
Image Modified	CircularGaugeFullCircle	Creates a Circular Gauge Full Circle.
Image Modified	CircularGaugeRanges	Creates a Circular Gauge Ranges.
Image Modified	CircularGaugeSemiCircle	Creates a Circular Gauge Semi Circle.
Image Modified	LinearGauge	The Linear Gauge control allows visualizing data in the form of Linear Scale, and is designed to see a simple display of value compared to a scale and one or more ranges. Some of the key features of the Linear Gauge are: adding a scale to linear gauge using horizontal and vertical orientations, highlight the desired ranges of values in the gauge scale and adding multiple pointers to the linear scale.
	CircularGaugeControl	Creates a Circular Gauge Control.
	CircularGaugeRangeControl	Creates a Circular Gauge Range Control.
	LinearGaugeControl	Creates a Linear Gauge Control.
Input
Image Modified	Button	The Button is a simple interface component that allows users to trigger an action or execute a specific function when clicked. It is used to create interactive buttons in web applications and can be configured with options such as the expression to be executed and the label displayed on the button.
Image Modified	CheckBox	Creates a Check box.
Image Modified	ComboBox	Creates a combo box.
Image Modified	ListBox	Creates a list box.
Image Modified	RadioButton	Creates a radio button object.
Image Modified	Slider	Creates a Slider.
Image Modified	DatePicker	Creates a Date Picker.
Image Modified	DateTimePicker	Creates a Date Time Picker.
Image Modified	DateTimeTextBox	Creates a Date Picker.
Image Modified	TimeTextBox	Creates a Time Text Box.
	Button	Creates a Button object.
Image Modified	Calendar	The Calendar object serves as a user interface component for selecting and displaying dates in HTML5 and WPF applications. Its primary function is to provide an interactive, configurable calendar interface that can reflect specific dates, enable date selection, and display calendar information such as week numbers or day names based on specified settings.
	CheckBox	The Checkbox object is a user interface element in that allows users to make binary choices by either checking or unchecking the box. It is primarily used to enable or disable specific features, or to indicate whether a certain condition or option applies.
Image Modified	ColorPicker	The Color Picker object is a user interface component in that provides an interactive way for users to select and assign a specific color value. It's primarily used to allow users to customize the appearance of elements within an application or to select colors for various uses.
	ComboBox	The Combo Box object is a user interface component in HTML applications that provides a drop-down list of options for users to select from. It is primarily used to condense a large list of selectable items into a compact, user-friendly format, allowing for a single selection from a predefined set of options.
Image Modified	DatePicker	Creates a Date Picker.
Image Modified	DateTimePicker	Creates a Date Time Picker.
Image Modified	MaskedTextBox	Creates a Masked Text Box.
Image Modified	NumericTextBox	Creates a Numeric Text Box.
	RadioButton	Creates a Radio Button.
	Slider	Creates a Slider.
	TextBox	Creates a Text Box.
Image Modified	TimePicker	Creates a Time Picker.
Interaction
Image Modified	Calculator	Creates a Calculator object. For more information, see the Calculator section in the User Interface Controls.
Image Modified	FileExplorer	The File Explorer object is a user interface component for WPF applications that provides a way for users to navigate, view, and select files and directories on a computer system from within the application. Its primary function is to facilitate file access and selection for various operations within a project.
Maps
Image Modified	ESRI Map	The ESRIMap Control is a user interface component in WPF applications that provides an interactive and configurable map display, primarily for projects involving geolocation. It is designed to integrate with the ArcGIS service for base map data and supports the addition of layers from WMS (Web Map Service) services for further map details.
Image Modified	Google Map	The Google Map Control is a user interface component for WPF applications that offers an interactive map display using various map providers for Geographic Information System (GIS) projects. It is primarily used for viewing geolocation information, navigating geographical data, and obtaining map details from selected providers like Google Maps or Bing Maps.
Image Modified	Maps	The Maps object is a user interface component for HTML5 applications that provides an interactive and customizable map display using various map providers. It's primarily used to display geolocation information, allow users to navigate geographic data, and customize map visuals according to specific geographical coordinates or settings.
Navigation
Image Modified	CircularPanel	Creates a Circular Panel object. For more information, see the Circular Panel section in the User Interface Controls.
Image Modified	Menu	Creates a menuMenu.
Image Modified	MenuItem	Creates a menu itemMenu Item.
Image Modified	PageSelector	Creates a Page Selector object.Creates a menu item.

Horizontal Toolbar

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