Overview
This page lists a suite of tools for design and interface creation for data visualization, such as dashboards, process displays, HMIs, and SCADA systems. It offers precise selection tools, versatile drawing capabilities for shapes and graphics, and advanced symbol management, text, and button design features that ensure clear and efficient graphical representations using real-time data.
On this page:
| Table of Contents | ||
|---|---|---|
|
Workspace Navigation Menu
Navigation was designed to make workflows even more intuitive, simple and fast. The Navigation Menu is composed of Quick Access, Quick Navigation, Solution Explorer, Breadcrumb Navigation and Filter options, you can collapse or expand the navigation menu. When expanded it shows the Solution Explorer where you can search for a specific configuration or navigate for solution settings.
Quick
accessBy clicking on the logo on the top left, it opens a menu where you can access Solution Management, documentation, forum, and video training related to design, development, and solution deployment on the software platform.
Switch to allows users to quickly switch between different interfaces, applications, or modes. Designed for quick navigation and enhancing user experience by saving time. | |
Go to Solutions Management | Directs users to a section or interface where they can manage solutions. This could include adding, editing, deleting, or viewing details of various solutions, depending on the context of the application. |
Runtime .NET Displays | Refers to an interface or functionality that showcases the real-time or "runtime" displays or outputs generated using the .NET framework. Useful for developers or users working with .NET-based applications to monitor or debug their work. |
Runtime HTML5 Pages | An interface that displays pages or outputs rendered in real-time using HTML5. It's a way to preview or inspect HTML5-based web pages or applications during their runtime. |
Discover allows users to explore or find new features, content, or functionalities. Can also be a search or recommendation tool, helping users find relevant information or tools. | |
Documentation site | Directs users to a website or portal where they can find detailed documentation about the product, software, or service. A resource for users to get information, guidelines, and tutorials. |
Users Forum | A platform or section where users can interact with each other, ask questions, share insights, and provide solutions. Forums are community-driven and allow users to discuss various topics related to the product or service. |
Training Videos | Leads to a library or collection of video content designed to train or educate users about certain features or functionalities. Training videos are visual aids that help users understand and utilize the product or service better. |
navigation
The Quick Navigation bar includes "Home," which directs to the Solution Designer, "Tags" for accessing the Asset Tree in the Unified Namespace, and "Draw" for editing on Displays. "Runtime" starts platform processes. The bar also has navigation controls: "back" to return, "forward" to proceed, and "history" to see past navigation.
Shortcut | Description | |
| Home | Redirects users to the Solution Designer home page. |
| Tags | Takes the user to the Asset Tree within the Unified Namespace. It is where your assets can be viewed and managed. |
| Draw | Navigates users to the Draw section on Displays. It is where users can create, edit, or visualize graphical representations or designs. |
| Runtime | Directs the user to the Startup section of the Runtime. It is where users can initiate, run, or monitor processes or applications. |
| Navigation back | Allows users to go back to the previous page or section they were on. |
| Navigation forward | Lets users navigate forward if they've previously used the back button. |
| Navigation history | Presents users with a list of their recent navigation actions, allowing them to quickly jump to a specific page or section they visited earlier.Show navigation historyPresents users with a list of their recent navigation actions, allowing them to quickly jump to a specific page or section they visited earlier. |
Solution Explorer and Breadcrumb Navigation
The Solution Explorer allows users to navigate through the solution configuration interfaces. Each module in the Solution Explorer gathers configurations focused on a specific solution aspect. To navigate within the configuration interfaces of each module, users can either use the Solution Explorer by clicking to expand the modules menu and selecting the configuration interface or by the Breadcrumb navigation found in the upper right corner of the window, allowing internal navigation on the solution module. But if you are looking for a particular configuration, remember there's a search bar on the top of Solution Explorer.
Solution Explorer | Breadcrumb Navigation |
Solution | Settings | Categories | Import Tags | Import Plugin | Export | History |
Runtime | Startup | Execution Profiles | Diagnostics | Build and Publish |
Unified Namespace | Asset Tree | Tags | Templates | Enumerations | Retentive Values | Connections monitor |
Devices | Protocols | Channels | Nodes | Points | Access Types | Devices monitor |
Alarms | Items | Groups | Areas | Global | Settings | Alarms monitor |
Historian | Historian Tags | Historian Tables | Archive Location | Historian monitor |
Datasets | Databases | Queries | Query Editor | Tables | Files | Datasets monitor |
Reports | Forms | Forms Editor | WebData | WebData Editor | Reports monitor |
Scripts | Tasks | Classes | Code Editor | Expressions | References | Scripts monitor |
Security | Users | Permissions | Policies | Runtime Users | Security monitor |
Displays | List | Draw | Layouts | Client Settings | Images | Themes | Localization | Units Conversion |
Data Explorer | MQTT tools | OPC Tools | PLC Finder | SQL Query Builder |
Track Changes | Recent Changes | Version Control | Cross Reference | Use Count | Unused Objects |
Solution toolbar
On the top, you have buttons where users can undo or redo actions, manipulate rows or objects with cut, copy, paste, and delete functions, and interact with Git for document synchronization. There are also functionalities for searching and navigating references, handling database tags, editing tags properties, and directly accessing documentation or providing feedback. The table provides a concise reference for the commands and their associated functionalities.
Action | 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 | Commits and pushes the current document to a designated Git repository folder, saving its state and making it available for version tracking. |
| Import Document from Git folder | Pulls a document from a designated Git repository folder into the current application, facilitating synchronization and collaboration. |
| 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 the 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 | Access the documentation on the website. |
Filter options
Filter option | Description |
|---|---|
Show All Modules and Features | |
Basic Modules Features | |
Application Modules | |
Unified Namespace and Process Modules |
Draw Workspace: toolbars, panels and properties
The Solution 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 of the Solution toolbar there are the basic actions buttons such as for save modifications and add new displays. The table outlines key document actions, from saving and creating new documents to previewing content hierarchies.
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. |
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 | |
| Selection tool | Select individual or multiple objects; access "Dynamics configuration" with a double-click.
|
| Direct Selection tool |
|
| Hand tool | Drag to adjust the view. |
| Edit Properties | Display property dialog for chosen object. |
| Rectangle | Draw a rectangle. |
| Ellipse | Draw an ellipse. |
| Polygon | Draw a polygon. |
 | PolyLine | Draw a polyline. |
| GridLine | Add a gridline. |
| Button with Themes Colors | Generate a button with theme-based colors. |
| PushButton with Custom Colors | Generate a pushbutton with custom colors. |
| Textblock Output | Introduce a text output section. |
| TextBox Input or Output | 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. |
| Create a New Symbol with Selected Elements | Convert chosen elements into a new symbol. |
| Edit Selected Symbol | Access properties of the chosen symbol. |
| Break apart Selected Symbols to its elements | Decompose the symbol into its foundational elements. |
Object toolbar
The Object toolbar is on the top of the Draw area. This toolbar allows users to adjust and align elements on a screen, with capabilities ranging from modifying the grid for alignment to zooming in or out for better 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 | |
| Expand Components Panel | Expand components panel. |
| Collapse Components Panel | 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 Panel
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 | Description |
AlarmAreas | A UI element for alarm 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. It efficiently displays alarms within an interface. Drag and drop to use. |
AssetsTree | A UI component 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 | 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, showcasing tasks and their dependencies on a timeline. Drag and drop to use. |
PieChart | A circular tool that visualizes data, dividing it into slices to compare parts of a whole. Drag and drop to use. |
TrendChart | 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 | A UI tool that shows nested hierarchies, effectively representing parent-child UI relations. Drag and drop to use. |
HTML5Control | A tool for embedding and displaying HTML5 content with CSS and JS support. Drag and drop onto the draw area for usage. |
PdfViewer | A specialized viewer for displaying PDF documents. Drag and drop onto the draw area to use. |
ReportViewer | A dynamic tool for displaying and managing structured reports. Use by dragging and dropping onto the draw area. |
WebBrowser | An embedded browser for web content rendering and navigation. Simply drag and drop to use. |
WPFControl | 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. Drag and drop to use. |
CenterValueCircular | A display feature for circular gauges that showcases core values centrally. Drag and drop onto the draw area for usage. |
CircularGauge | A gauge component that visualizes data in a circular format. Drag and drop to use. |
Compass | A navigation tool essential for displaying directional information. Drag and drop onto the draw area to use. |
LinearGauge | A straight-line gauge 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 editor for customizing and visualizing graphical brush designs. Drag and drop onto the draw area to use. |
Button | An interactive UI element that triggers specified actions when pressed. Use by dragging and dropping onto the draw area. |
CheckBox | A togglable UI component 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. Drag and drop to use. |
DatePicker | A tool designed for users to select specific dates. Drag and drop onto the draw area for usage. |
DateTimePicker | A combined tool for users to select specific dates and times. Drag and drop to use. |
ListBox | A list display component that showcases items for user interaction. Drag and drop to use. |
MaskedTextBox | A text input 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 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, allowing users to adjust values within a range. Drag and drop to use. |
TextBlock | A component for displaying uneditable, static text content. Drag and drop onto the draw area for usage. |
TextBox | A text input UI tool that lets users type and modify text. Drag and drop onto the draw area to use. |
TimePicker | A specialized tool allowing users to select specific hours and minutes. Drag and drop to use. |
Menu | A list of selectable items or actions presented to the user. Drag and drop onto the draw area for usage. |
MenuItem | An individual selectable item within a menu. Typically added to a Menu component for functionality. |
PageSelector | A navigation tool for transitioning between different pages or views. Drag and drop to use. |
MapsGMap | A geographical map component for displaying location data using the GMap provider. Drag and drop to use. |
RangeCircularGauge | A gauge feature that showcases a specified range within circular gauges. Drag and drop onto the draw area to use. |
Circle | A geometrical component used for displaying a circular shape. Drag and drop onto the draw area to use. |
Ellipse | An oval-shaped component for visualization. Drag and drop onto the draw area for usage. |
Hexagon | A six-sided geometric component used to display a hexagonal shape. Drag and drop onto the draw area to use. |
Rectangle | A four-sided geometric component for displaying a rectangular shape. Simply drag and drop onto the draw area for usage. |
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.
Property section | Description |
Appearance | Customize object look using themes and properties: Fill, Line, Opacity. Includes TextShadow option. |
Border Radius | Adjust corner curvature with X (horizontal) and Y (vertical) values. |
Connections | Decide if an object connects elements. Checkbox to enable/disable. |
Contents Align | Manage content alignment within an object: options like left, right, and center. |
Display Settings | Set object presentation: Page, Popup modes. Customize background, size, borders. |
Dynamics Clipboard | Tools for dynamic properties. Buttons to fetch and apply configurations. |
Layout | Set position and size using parameters: Left, Top, Width, Height. |
Replace Tags/Strings | Replace tags and strings. Selections from object namespaces with multiple replace options. |
Text | Manage text content and appearance. Options include font, localization, and text wrapping. |
Transform | Apply visual effects: DropShadow, Rotation, Skew. Customizable parameters for each effect. |
Type | Classify objects for categorization within larger systems. |
In this section:
| Page Tree | ||||
|---|---|---|---|---|
|