Page History

Easy Heading Macro

headingIndent	40
navigationTitle	On this page
selector	h2,h3
wrapNavigationText	true
navigationExpandOption	disable-expand-collapse

This section presents information about the drawing and how to use these features.

About the Draw area

When clicking the Draw button in the ProjectDesigner, the toolbars are changed to present the Drawing Tools.

The Draw area is where you create and edit the displays, create and modify symbols, and do the Display CodevBehind programming.

Some features available in the Drawing tool include:

Cross-Platform: Use the advanced WPF drawing features to create HTML5 pages.
Symbols are fully customizable and new symbols can be created from the green field.
The concept of open Dynamic properties brings the flexibility to deliver any UNI requirement.
Advanced components for Trending, Alarms, DataGrids, Gantt, Maps, BarCharts and many others.
Third-party components can be easily integrated, and new built-in components are frequently created.
<<<<.please review the content of this paragraph>>>>
Image files can be imported into the Project as Resources, so you do not need to keep the image file anymore.
The Image Resources can be applied as a painting Brush to any element.
Import XAML and AUTOCAD drawings into the system as a vector object.
Many Productivity tools, like Copy-Paste dynamic properties, edit multiple objects, search replace tags.
Select the objects in the display, or use the ObjectTree View.
Flexible Grid Snapping and zoom settings.

Key Concepts

Graphical Element

When drawing displays, any object placed on the screen is defined as a Graphical Element. It can be simple objects like a rectangle, or controls like a CheckBox or TrendChart.

Dynamics

In the context of the Drawing tool, Dynamics are real-time behaviors you can use on a Graphical Element. For instance, you can add the Dynamic of Color Change to Rectangle and define the real-time Tag that will drive the color change.

Image Resources

Image files imported to the Project. The Image Resources can be applied as background color, or even as a Dynamic color change, to any Graphical Element.

Smart Symbols

Smart Symbols — or Symbols for short — is a platform feature that combines graphical Elements with Dynamics properties and connection to the real-time Tags and templates.

The Symbols vastly expedite the creation of Operator Users Interfaces, and simplify the maintenance, as changes on the Symbols propagate automatically to the Displays using it.

Toolbars and Element Properties

Learn 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!

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

Top Toolbar — On the top, you have buttons to save the display, to select a new displays and other actions on the current display.
Vertical toolbar — On the left side of the Drawing tab. Use these buttons to draw shapes, add buttons, and create special windows.
Horizontal toolbar — Across the bottom of the Drawing tab. Use these buttons to group, combine, align, and lock the selected objects.
Element 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.

The Display Setting is always visible on the left side. The configuration fields of the Display, including if the Display is a Page, Dialog or Popup, were discussed in the section Displays and , Remote Clients.

Top Toolbar

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).
	Export Document	Exports content to an external file as .csv (Tables) or .jpg (Displays) file.
	Import Document	Imports an external file to the current table. See Copying and Pasting Rows for more details.
	Find Elements
	Next Reference
	Previous Reference
	New Tag
	Tag Properties
	Object Selection
	Open a New Window to the Selected Document
	Feedback
	Help

Vertical Toolbar

Image Removed

Icon	Command	Description
Image Added	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 Removed
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 Removed
Image Added	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	Image resource	Insert an image to be used in the project.
Image Modified	Components
Image Modified	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.

Icon	Command	Description
Image Modified	Undo	Undoes an operation/change. This button is available until you save changes.
Image Modified	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.

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

Alarm Tree

Image Modified

DataGrid

Creates a data grid window. Position the data grid window and double-click it to configure the data grid window settings.

Info
For more information, see Configuring a DataGrid Window.

Image Modified

TreeView

Charts

Image Modified

3DPipeViewer

Creates a 3D Pipe Viewer object.

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

Image Modified

BarChart

Creates a Bar Chart object.

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

Info
For more information, see Configuring the Trend Window.

Image Modified

PieChart

Creates a Pie Chart object.

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

Info
For more information, see Configuring the Trend Window.

XY Chart

CustomPieChart

Creates an Advanced Pie Chart object.

GanttChart

Timeline

Containers

Image Modified

ChildDisplay

HTML5 Control

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

CircularGauge

CircularGaugeArcPointer

Image Modified

CircularGaugeCompass

CircularGaugeFullCircle

CircularGaugeRanges

CircularGaugeSemiCircle

LinearGauge

CircularGaugeControl

CircularGaugeRangeControl

LinearGaugeControl

Input

Button

Image Modified

CheckBox

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

Image Modified

DatePicker

Image Modified

DateTimePicker

Image Modified

DateTimeTextBox

Image Modified

TimeTextBox

ColorPicker

MaskedTextBox

NumericTextBox

TextBox

TimePicker

Interaction

Image Modified

Calculator

Creates a Calculator object.

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

FileExplorer

Maps

ESRI Map

Image Modified

Google Map

Image Modified

Maps

Navigation

Image Modified

CircularPanel

Creates a Circular Panel object.

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

Image Modified

Menu

Creates a menu.

Image Modified

MenuItem

Creates a menu item.

Image Modified

PageSelector

Creates a Page Selector object.Creates a menu item.

Horizontal Toolbar

Icons	Commands	Description
	Grid definition
	Screen Zoom
	Group
	Ungroup
Image RemovedImage Added	Union
Image RemovedImage Added	Intersect
Image RemovedImage Added	Exclude
Image RemovedImage Added	Exclusive-Or
Image RemovedImage Added	AlignLeft
Image RemovedImage Added	AlignHorizontalCenter
Image RemovedImage Added	AlignRight
Image RemovedImage Added	AlignTop
Image RemovedImage Added	AlignVerticalCenter
Image RemovedImage Added	AlignBottom
Image RemovedImage Added	Move To The Front
Image RemovedImage Added	Move To The Back
Image RemovedImage Added	Change Z-Order
	Resize Width
	Resize Height
Image RemovedImage Added	SpaceEvenlyHorizontal
	SpaceEvenlyVertical
	FlipHorizontally
	Flip Vertically
	Lock element
	Unlock element
	Unlock All Elements
	Show All Elements
	Hide Selected Element