Page History

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.

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

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.

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.

Object toolbar

Across the bottom The Object toolbar is on the top 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.

Drag and Drop Components sidebar

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.

Components sidebar

Components

Description

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.

Alarm Areas

Creates an Alarm Area control that allows you to view the existing alarm tree.

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.

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.

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.

3DPipeViewer

Creates a 3D Pipe Viewer object.

For more information, see the 3D Pipe Viewer section in the User Interface Controls.

BarChart

Creates a Bar Chart object.

For more information, see the Bar Chart section in the User Interface Controls.

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.

PieChart

Creates a Pie Chart object.

For more information, see the Pie Chart section in the User Interface Controls.

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.

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

ChildDisplay

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.

PDFViewer

Creates a PDF Viewer object.

ReportViewer

Creates a Report Viewer object.

WebBrowser

Creates a Web Browser object.

WPF Control

Creates an external WPF component.

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.

CircularGaugeArcPointer

Creates a Circular Gauge Arc Pointer.

CircularGaugeCompass

Creates a Circular Gauge Compass.

CircularGaugeFullCircle

Creates a Circular Gauge Full Circle.

CircularGaugeRanges

Creates a Circular Gauge Ranges.

CircularGaugeSemiCircle

Creates a Circular Gauge Semi Circle.

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.

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.

CheckBox

Creates a Check box.

ComboBox

Creates a combo box.

ListBox

Creates a list box.

RadioButton

Creates a radio button object. 

Slider

Creates a Slider.

DatePicker

Creates a Date Picker.

DateTimePicker

Creates a Date Time Picker.

DateTimeTextBox

Creates a Date Picker.

TimeTextBox

Creates a Time Text Box.

Button

Creates a Button object.

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.

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.

DatePicker

Creates a Date Picker.

DateTimePicker

Creates a Date Time Picker.

MaskedTextBox

Creates a Masked Text Box.

NumericTextBox

Creates a Numeric Text Box.

RadioButton

Creates a Radio Button.

Slider

Creates a Slider.

TextBox

Creates a Text Box.

TimePicker

Creates a Time Picker.

Calculator

Creates a Calculator object.

For more information, see the Calculator section in the User Interface Controls.

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.

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.

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.

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.

CircularPanel

Creates a Circular Panel object.

For more information, see the Circular Panel section in the User Interface Controls.

Menu

Creates a Menu.

MenuItem

Creates a Menu Item.

PageSelector

Creates a Page Selector object.Creates a menu item.

Examples

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	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	Allows changes to all previously locked elements.
Image Added	Show all elements	Reveals all elements, including hidden ones.
Image Added	Hide selected element	Hides the currently selected element.

Panels

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

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.

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.

In this section: