Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Easy Heading Macro
headingIndent40
navigationTitleOn this page
selectorh2,h3
wrapNavigationTexttrue
navigationExpandOptiondisable-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 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 r — On the left side of the Drawing tab. Use these buttons to draw shapes, add buttons, and create special windows.
  • Horizontal toolbar—Across toolbar — Across the bottom of the Drawing tab. Use these buttons to group, combine, align, and lock the selected objects.
  • Element Properties—The 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 Clients

Top Toolbar

Info
titleAdd image link

`<<<<.ADD IMAGE LINK>>>>

\


Vertical Toolbar


Vertical toolbar commands 

Icon

Commands

Description

Image Modified

Selection

 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

 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

 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. 


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

 Rectangle

Creates a rectangle object.

Image Modified

Ellipse

 Ellipse

Creates an ellipse object.

Image Modified

Polygon

 Polygon

Creates a polygon object.

Image Modified

Polyline

 Polyline

Creates a polyline object.

Image Modified

Button

 Button

Creates a button object.

Image Modified

LabelBox

 LabelBox

Creates a label box.

Image Modified

Text

 Text Output

Creates a text output object.

Image Modified

Text

 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

CheckBox

 CheckBox

Creates a check box object. Right-click this button to access the following tools:
Image Modified Creates a radio button object.
Image Modified Creates a combo box.
Image Modified Creates a list box.
Image Modified Creates a password box.
Image Modified Creates a menu item.
Image Modified Creates a date picker.
Image Modified Creates a date/time text box.
Image Modified Creates a slider control.
After selecting a tool from this menu, it becomes the default tool for that button in the vertical toolbar.

Image Modified

Open

 Open Symbol Library

The symbol library includes both built-in and user-defined symbols.

Image Modified

Insert

 Insert Image Resource

Insert an image to be used in the project.

Image Modified

Web

 Web Browser

Creates a Web Browser object. Mouse over this button to access the following tools:
Image Modified Creates a Report Viewer object.
Image Modified Creates an XPS Viewer object.
Image Modified Creates a PDF Viewer object.
Image Modified Creates a Page Selector object.
Image Modified Creates an Assets component.
Image Modified Creates a Remote Assets component.
Image Modified Creates a Child Window object.
Image Modified Creates an external WPF component.

After you click the "Creates an external WPF component" option, the following components will be available:

Image Modified Creates a Pie Chart object. For more information, see the Pie Chart section in the User Interface Controls.
Image Modified Creates a Map Control object. For more information, see the Map Control section in the User Interface Controls.
Image Modified Creates a Report Preview object.
Image Modified Creates a Calculator object. For more information, see the Calculator section in the User Interface Controls.
Image Modified Creates a Bar Chart object. For more information, see the Bar Chart section in the User Interface Controls.
Image Modified Creates an Advanced Pie Chart object.
Image Modified Creates a 3D Pipe Viewer object. For more information, see the 3D Pipe Viewer section in the User Interface Controls.
Image Modified Creates a Circular Panel object. For more information, see the Circular Panel section in the User Interface Controls.
Image Modified Import external dlls.

After selecting a tool from this menu, it becomes the default tool for that button in the vertical toolbar.

Image Modified

Alarm

 Alarm Window

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

 Alarm Area

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

Image Modified

Trend

 Trend Window

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

Drilling

 Drilling Chart

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

DataGrid

 DataGrid Window

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.

Horizontal Toolbar


Horizontal toolbar commands

Icons

Commands

Description

Image Modified

Grid definition


Image Modified

Screen Zoom


Image Modified

Group


Image Modified

Ungroup


Image Modified

Union


Image Modified

Intersect


Image Modified

Exclude


Image Modified

Exclusive-Or


Image Modified

AlignLeft


Image Modified

AlignHorizontalCenter


Image Modified

AlignRight


Image Modified

AlignTop


Image Modified

AlignVerticalCenter


Image Modified

AlignBottom


Image Modified

Move To The Front


Image Modified

Move To The Back


Image Modified

Change Z-Order


Image Modified

Resize Width


Image Modified

Resize Height


Image Modified

SpaceEvenlyHorizontal


Image Modified

SpaceEvenlyVertical


Image Modified

FlipHorizontally


Image Modified

Flip Vertically


Image Modified

Lock element


Image Modified

Unlock element


Image Modified

Unlock All Elements


Image Modified

Show All Elements


Image Modified

Hide Selected Element




Examples

Here you will see examples showing the functionality of the commands of the horizontal toolbar.

The shapes used can be any object without dynamics, like polygons, ellipses, or rectangles.

 


 
Union  and Intersect  



Exclude  and Exclusive-Or  



Lock element command. : Select both rectangles then click it to lock. Now the rectangles can not be selected.

  • To unlock only one rectangle:
  • Click the Direct Selection Tool command  in the vertical toolbar.
  • Select the desired rectangle and click Unlock Element  . 
  • To Unlock all elements, click Unlock All Elements command  .

In this section...

Page Tree
root@self
spacesV10