Page Tree
Software Knowledgebases
Displays are the graphic regions or windows that make up the overall layout of the FactoryStudio user interface. Symbols are the individual elements included in a display. The following sections describe how to work with the user interface:
| Table of Contents | ||||
|---|---|---|---|---|
|
Selecting and Creating Displays
Displays are components of the user interface for your application. A display can have multiple elements in it, including controls, data display areas, static areas that always display and more. Elements of the display can be static, that is, they always display, such as a menu bar, toolbar, or status bar. Displays can also change depending on what the user clicks or selects.
To select displays:
- Go to Edit > Displays > Displays.
- Select CardView or TableView.
See the list of available displays.
...
Column
...
Description
...
Name
...
Read-only. Name of the Display. Configured in Draw.
...
ClientType
...
Read-only. Shows the type of the client, either NET or HTML5.
...
Mode
...
Read-only. Shows whether the display is used as a Page, a Popup, or a Dialog. Configured in Draw.
...
Preview
...
Read-only. Shows a thumbnail of the display.
...
AllowSelection
...
Select to allow users to select the display from the PageSelector.
...
Width
...
Read-only. Display width in WPF units (one WPF unit = 1/96 inch). Configured in Draw
...
Height
...
Read-only. Display height in WPF units. Configured in Draw
...
Left
...
Read-only. Left margin, in WPF units, for Canvas layouts. Configured in Draw
...
Top
...
Read-only. Top margin, in WPF units, for Canvas layouts. Configured in Draw
...
Dimension
...
Read-only. Configured in Draw
...
Size
...
Read-only. Configured in Draw
...
EditSecurity
...
Select which categories of users have access to edit this display.
...
RunSecurity
...
Select which categories of users have access to this display at runtime.
...
Description
...
Enter a description for this display.
...
| In |
|---|
...
When you are in the Drawing environment you can also switch displays using the dropdown list on the top toolbar.
To create a new display:
- Go to Draw > Drawing.
- Click
Close Display and Create New One. (If you do not see this button in the toolbar, make your window wider.) The New Display window displays. - Enter information, as needed.
...
Column
...
Description
...
Display Name
...
Enter a name for the display.
...
Description
...
Enter a description for the display.
...
.NET Smart Client
...
Select this option if the display is designed to be presented natively on the host platform.
...
HTML5
...
If you plan to use this display as HTML5 on browsers, select this option when you create the display. You cannot change it later.
- Select to be able to use this display with any browser. When you select this option, display settings in other parts of the Draw area only show options that are compatible with the HTML5 feature.
...
iPad/iPhone iOS Target
...
If you plan to use this display for iPad and iPhone users, select this option when you create the display. You cannot change it later.
- Select to be able to use this display with iPads and iPhones. When you select this option, display settings in other parts of the Draw area only show options that are applicable to both Windows and iPads/iPhones.
- Select the default view for iPad and iPhone users: Landscape or Portrait.|
- Click OK.
- On the left side of the window in the DisplaySettings, enter or select information, as needed. If you selected the iPad/iPhone iOS Target or HTML5 option when you created the display, not all of the DisplaySettings are available.
...
Column
...
Description
...
Mode
...
Select the type of display you want to create:
- Page—Default. Opening a page automatically closes the last page on the current layout and displays in the area last in the list on Displays > Layouts page. Only pages display in the layout.
- Popup—A popup opens on the top of all other displays. When you open a new page, by default, all popup displays are closed. Controls on other displays are available.
Dialog—A dialog opens as a modal dialog, which disables the controls on all other open displays until you close the dialog. Clicking OK executes an appropriate method on the display CodeBehind.
...
Background
...
Select the background color for the display.
...
Width
...
Enter the width of the display, in WPF units (device-independent pixels; one WPF unit = 1/96 inch). Be sure to take into account the size of the layout.
...
Height
...
Enter the width of the display, in WPF units (device-independent pixels; one WPF unit = 1/96 inch). Be sure to take into account the size of the layout.
...
Border
...
Select the type of border.
...
CloseButton
...
Select to display Close button. Available only for Popups and Dialogs.
...
Animation
...
Select the type of animation to use when starting this display.
...
Show on PageSelector Object
...
Select to include this display in the page selector that lets users go directly to a different display in the application.
...
iPad/iPhone iOS target
...
Read-only. Shows whether you selected the iPad/iPhone iOS Target option when you created the display.
...
Placement
...
Select where on the layout you want to place the display. Available only for Popups and Dialogs.
...
Target
...
Select whether the display appears relative to the mouse position or relative to the whole window. Available only for Popups and Dialogs.
...
DialogButtons
...
Select the buttons you want on the dialog. Available only for Dialogs.
...
Title
...
Enter a title that appears at the top the display.
...
Title Background
...
Select a color for the title background.
...
Stays Open on Page Change
...
Leave the popup window open when the user clicks something that opens a different display. Available only for Popups.
...
Stays Open After Losing Focus
...
Leave the popup window open when the user clicks a different display. Available only for Popups.
...
Left
...
Enter how far from the left of the layout the display should appear, in WPF units. Available only for Canvas layouts.
...
Top
...
Enter how far from the top of the layout the display should appear, in WPF units). Available only for Canvas layouts.
- Use the drawing tools to create the display.
- Select a button in the vertical toolbar. Place the cursor on the display area, then click and hold the left mouse button while dragging the cursor across the display area.
- To see a menu of options, right-click the drawing object. The context menu provides actions that are specific to the selected object.
- To select multiple objects, press Shift + left mouse-click on each object.
- The horizontal toolbar (at the bottom of the Drawing tab) contains buttons to group, combine, align, and lock the selected objects. For more information about the drawing tools, see Designer Drawing Tools, below.
| Info |
|---|
When selecting multiple objects, the last object selected is the "master," whose properties are shown on the left. If you then align the objects, the alignment is based on the master. If you change other properties, the properties are changed for all selected objects. |
- Click Save Display.
- Continue with Creating Layouts.
Creating Layouts
A layout defines the size of the application window and the basic arrangement of display components in the runtime application. Be sure to plan how you want to use displays. For example, consider whether you want a menu bar, toolbar, or other elements to always display at the top of the application window.
You may need only one layout to handle the information in the application.
The last display listed in the Layout tab is the one that is replaced when you change the display. For example, new projects include a default layout called Startup. The MainPage display that is listed last is the default area that changes when you tell the application to open a display.
To create a layout:
- Go to Edit > Displays > Layouts.
- Click New.
- Enter or select information, as needed.
...
Column
...
Description
...
Layout name
...
Enter a name for the layout.
...
Layout
...
Select the layout type:
- DockPanel—Select to position displays relative to the layout and other displays.
- Canvas—Select to position displays in an absolute position by entering the position in WPF units (device-independent pixels; one WPF = 1/96 inch).
...
Description
...
Enter a description of this layout.
- Click OK.
- At the top right of the Layouts tab, enter or select information, as needed.
...
Column
...
Description
...
Width
...
Enter the width, in WPF units (device-independent pixels), of the layout. This is the width of the runtime application.
...
Height
...
Enter the height, in WPF units (device-independent pixels), of the layout. This is the height of the runtime application.
...
Background
...
Set the background color of the layout. This is the background color of the runtime application
- Click
Add Row to add a row for a display. The displays you add here are the first displays the layout uses. Enter or select information, as needed.
...
Column
...
Description
...
Page
...
Select a display you want to include in the layout. Only page displays are available for use in a layout.
...
Docking
...
| this |
|---|
...
- Left
- Top
- Right
- Bottom
...
HorizontalAlign
...
Select the horizontal alignment for this layout:
- Left
- Center
- Right
...
VerticalAlign
...
Select the vertical alignment for this layout:
- Top
- Center
- Bottom
...
Margins
...
Set the margin for this layout.
...
Left
...
Set the left position of the layout
...
Top
...
Set the top position of the layout
Designer Drawing Tools
The Drawing tab has the following controls to create, format, and configure displays:
- Vertical toolbar—On the left side of the Drawing tab. Use these buttons to draw shapes, add buttons, and create special windows. For more information, see Table 1.
- Horizontal toolbar—Across the bottom of the Drawing tab. Use these buttons to group, combine, align, and lock the selected objects. For more information, see Table 2.
- Appearance, DisplaySettings, and other settings—Below the main menu buttons, these settings vary based on the type of object selected.
To configure dynamic graphic displays, from the Main Menu, click on the "Draw" icon.
The Appearance parameters dictate the brush style used when drawing objects in the display, including colors. Clicking on the Fill option lets you specify Colors, gradients, or objects with which to fill the graphic.
The DisplaySettings dictate the attributes of the display. Displays can be configured as Pop Ups, Dialogs, or normal page displays.
Like with any graphical object, displays can have varying colors and patterns, borders, titles and more.
One special feature is that you can specify a transition animation to use when entering the display much like you have in PowerPoint presentations.
...
Vertical toolbar commands
...
...
Commands
...
Description
...
Selection Tool
...
- Click an object to select it.
- CTRL+click to select multiple objects (and object groups), one at a time. Hold down the CTRL key as you click each object.
- Shift+click to toggle selected object from among more than one selected objects.
- Click in an open area of the display then select a group of elements by highlighting the elements while holding down the left mouse button.
- Double-click an object to open the Dynamics Configuration window, which provides settings for dynamic object properties.
...
Direct Selection Tool
...
- Use this tool to select an object inside a group (and modify its properties). Click the object to select it.
- You can also add, remove, and modify the points in a Polyline with the Direct Selection Tool:
- To move the point select it by clicking the point and holding the left mouse button down. Drag the point to its new position.
- Double-click a point to add a new point adjacent to the selected point.
- Right-click a point to delete the selected point.
...
Hand Tool
...
Use the Hand Tool to modify the view window by clicking the display background and holding down the left mouse button then shift the display to the desired position.
...
Geometric objects tools
...
Right-click to end use of each tool.
To add, modify, and remove points after creating a polygon or polyline, use the Direct Selection Tool.
...
Rectangle
...
Creates a rectangle object.
...
Ellipse
...
Creates an ellipse object.
...
Polygon
...
Creates a polygon object.
...
Polyline
...
Creates a polyline object.
...
Button
...
Creates a button object.
...
LabelBox
...
Creates a label box.
...
Text Output
...
Creates a text output object.
...
Text Box
...
Creates a text input/output (I/O) object.
To link the text I/O object with a tag, double-click the text I/O object, under the Dynamic configuration window select the TextIO dynamic.
...
CheckBox
...
Creates a check box object. Right-click this button to access the following tools:
Creates a radio button object.
Creates a combo box.
Creates a list box.
Creates a password box.
Creates a menu item.
Creates a date picker.
Creates a date/time text box.
Creates a slider control.
After selecting a tool from this menu, it becomes the default tool for that button in the vertical toolbar.
...
Open Symbol Library
...
The symbol library includes both built-in and user-defined symbols.
...
Open Symbol Factory
...
The Symbol Factory is an external symbol library that contains a lot of symbols precreated to be used on the projects.
...
Insert Image Resource
...
Insert an image to be used on the entire project.
...
Web Browser
...
Alarm Window
...
Creates an alarm window. Position the alarm window and double-click to configure the alarm window settings. For more information, see Configuring an Alarm Window below.
...
Alarm Area
...
Creates an Alarm Area control, that allows to view the existing alarm tree.
...
Trend Window
...
Creates a trend window. Position the trend window and double-click to configure the trend window settings. For more information, see Configuring a Trend Window below.
...
Drilling Chart
...
Creates a drilling chart trend window. Position the trend window and double-click to configure the trend window settings. For more information, see Configuring a Trend Window below.
...
DataGrid Window
...
Creates a data grid window. Position the data grid window and double-click to configure the data grid window settings. For more information, see Configuring a DataGrid Window below.
...
Horizontal toolbar commands
...
...
Commands
...
Description
...
...
Grid definition
...
...
Screen Zoom
...
...
Group
...
...
Ungroup
...
...
Union
...
...
Intersect
...
...
Exclude
...
...
Exclusive-Or
...
...
AlignLeft
...
...
AlignHorizontalCenter
...
...
AlignRight
...
...
AlignTop
...
...
AlignVerticalCenter
...
...
AlignBottom
...
...
Move To The Front
...
...
Move To The Back
...
...
Change Z-Oder
...
...
Resize Width
...
...
Resize Height
...
...
SpaceEvenlyHorizontal
...
...
SpaceEvenlyVertical
...
...
FlipHorizontally
...
...
Flip Vertically
...
...
Lock element
...
...
Unlock element
...
...
Unlock All Elements
...
...
Show All Elements
...
...
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, rectangles.
Union and Intersect
...
- Lock element command. : Select both rectangles then click to lock. Now the rectangles can not be selected.
- To unlock only one rectangle:
- Click on Direct Selection Tool command on the vertical toolbar.
- Select the on the desired rectangle and click on Unlock Element .
- To Unlock all elements just click on Unlock All Elements command .
Dynamics and Animations
Dynamics let you configure real-time changes on the object look, position, size, colors, the value the object reflects, user action to take when a user clicks, and more. That dynamic behavior is configured by creating links from the object properties to tags or other project runtime properties.
In some systems, the name "animation" is used to refer to those dynamic runtime changes; in FactoryStudio we elected to use the term "Dynamics" to make a clear distinction with the WPF animations features; WPF animations also refers to changes in the graphics object properties when running the displays, but using timers and other objects status to guide the animation, not the real-time database values.
When you double click on an object, or press the Dynamics button, or select it on the right-click context menu, a list of compatible dynamics that can be applied to the selected object is presented.
...
Dynamics animations
...
...
Setting
...
Description
...
Action
...
Executes actions and commands triggered by the user interface.
...
Shine
...
Changes the object appearance dynamically.
...
TextIO
...
Text input and text output Dynamic.
...
HyperLink
...
Opens a hyperlink.
...
Security
...
Sets the object runtime permissions to execute actions.
...
FillColor
...
Changes the object fill color dynamically.
...
LineColor
...
Changes the object line color dynamically.
...
TextColor
...
Changes the object text color dynamically.
...
Bargraph
...
Bargraph dynamic.
...
Visibility
...
Changes the object visibility and opacity dynamically.
...
MoveDrag
...
Moves the object dynamically.
...
Scale
...
Changes the object size dynamically.
...
Rotate
...
Rotates the object dynamically.
...
Skew
...
Skews the object dynamically.
...
TextOutput
...
Text output dynamic.
Get, Apply, and Replace
After associating a dynamic with an object you can use the buttons Get and Apply to move dynamics settings configuration from one object to another. Select the object with the dynamics you want to use, and press Get. You can right click the dynamic name at the left panel, in order to enable or disable the ones that will be applied. Select one or more target objects and press Apply.
You can use the Replace button to change the Tags in the dynamics on the selected objects. The String button is used to change all strings at the selected objects.
Settings
The tables below present the detailed settings available for each type of dynamic.
...
Action Dynamic configuration
...
...
Setting
...
Description
...
Action
...
Executes an action triggered by the user interface:.
...
Event
...
Choose one of the Mouse events. More than one event can be selected for each action. For example, you can set one action for MouseLeftButtonDown and another action for MouseLeftButtonUp.
...
Action
...
Select an action for the given event:
- None—No action.
- SetValue—Sets the value of the object.
- Object—The object that will receive the value.
- Value—The value that will be passed to the object.
- Toggle—Toggles the object value. If the object current value is zero, the value will be 1. If the object current value is different from zero, the value will be 0.
- Object—The object that will be toggled.
- OpenDisplay—Opens a display.
- Display—The name of the display that will be opened.
- CloseDisplay—Closes a display.
- Display—The name of the display that will be closed.
- OpenLayout—Opens a layout.
- Layout—The name of the layout that will be opened.
- RunScript—Runs a script that is placed in the display CodeBehind tab. Do one of the following:
- Enter the new method name and click New.
- Select one of the existing methods in the comboBox.
- RunExpressions—Runs the given expression.
- Expression—Enter the expression. For example: Tag.a + 1, or Tag.a + Tag.b, or Math.Cos(Tag.angle) * Math.PI.
- Result (optional)—Enter the tag or the property that will receive the expression value.
| Info | ||
|---|---|---|
| ||
Run Expressions Examples:
Expression—Tag.quantity1 + Tag.quantity2.
Expression—tagCounter + 1.
Expression—If(tagCounter < 10,tagCounter + 1,0). |
For more information, see "Configuring Expressions" on page 118.
Shine Dynamic
...
Shine Dynamic configuration
...
...
Setting
...
Description
...
Shine
...
Changes the object appearance dynamically.
...
IsMouseOver
...
Enter a tag that will receive the OverValue or the NotOverValue.
...
OverValue
...
The IsMouseOver value when the mouse is over the object.
...
NotOverValue
...
The IsMouseOver value when the mouse is not over the object.
...
Mouse Over Appearance
...
The object appearance when the mouse is over it.
- Opacity—The object opacity (0 = transparent, 1 = opaque).
- Scale—The object size (0.5 = half, 1 = the same size, 1.5 = one and a half, 2 = double size).
- OuterGlow—Defines the OuterGlow color, the check box enables or disables it.
- TextColor—Defines the text color, the check box enables or disables it.
...
Mouse Not Over Appearance
...
The object appearance when the mouse is Not over it:
- Opacity—The object opacity (0 = transparent, 1 = opaque).
- Scale—The object size (0.5 = half, 1 = the same size, 1.5 = one and a half, 2 = double size).
...
Is Selected Appearance
...
The object appearance when it is selected:
- IsSelected—Defines whether the object is selected.
- Opacity—The object opacity (0 = transparent, 1 = opaque).
- Scale—The object size (0.5 = half, 1 = the same size, 1.5 = one and a half, 2 = double size).
...
Scale Reference
...
Center
Left
Up
Right
Down
...
ShowUid
...
Set to show the Uid of the object on hover
...
Tooltip
...
Set to show as a tooltip on hover
Text I/O dynamic
...
Text I/O Dynamic configuration
...
...
Setting
...
Description
...
TextIO
...
Text input and text output Dynamic. If text is a tag value or a property, it must be between curly brackets. For example: {Tag.analogInt1}
...
Binding Mode
...
Associate an object with a tag:
- TwoWay—Input and output allowed.
- InputOnly—Only input allowed (the current tag value is not shown, but new values can be entered).
- OutputOnly—Only output allowed.
...
Object or Expression
...
Object (input) or Expression (output only) connected with the Text Box.
...
DesignModeCaption
...
The value shown in design mode:
- ShowObjectNames—The content of the text field is shown exactly as it is.
- ShowPlaceHolders—The characters ### are shown, the number of characters is defined by the MaxLength field.
...
Input Range
...
Defines the numeric range for the entered value.
...
MaxLength
...
Defines the maximum number of characters.
...
Format
...
Defines the text format for the field
Hyperlink and Security dynamic
...
Hyperlink Dynamic configuration
...
...
Setting
...
Description
...
HyperLink
...
Opens a hyperlink.
...
HyperLinkType
...
Select the hyperlink type:
- http
- ftp
- file
- mailto
- telnet
...
Url
...
Set the URL to open.
...
Security Dynamic configuration
...
...
Setting
...
Description
...
Security
...
Set the object runtime permissions.
...
Disable
...
Enter a tag, a property, or an expression returning a value. If the resulting value is:
- Zero—Object will be enabled.
- Greater than zero—Object will be disabled.
For more information, see Configuring Expressions.
...
Verify Permissions
...
When selected, only the chosen permission groups can access the object.
...
Confirm Message
...
Shows a confirmation dialog before taking some action:
- textBox—Enter the message that will appear in the dialog.
- checkBox—Enables or Disables the Confirm Message.
...
ESign Required
...
Set if the Esign is required
Fill, Line and Text Color Dynamic
...
Fill, Line and Text Color Dynamic configuration
...
...
Setting
...
Description
...
FillColor
...
Changes the object fill color dynamically.
...
Expression
...
the value used for the FillColor dynamic.
...
Change Color
...
- UsingLimits—The resulting color is determined when the value is equal or higher than one of the limits.
- AbsoluteValue—The color will be the expression value. The value must be a valid color name or hexadecimal color. For example: "White" or "#FFFFFFFF"
Example
Limits:
1 - Red
10 - Blue
When the value is 0, the object will have its own color (fill color dynamic will not do anything)
When the value is 1 to 9, the object will have the red color.
When the value is greater than 10, the object will have the blue color.
...
Bad Quality
...
Select color when the related tag quality is bad
...
Undefined Quality
...
Select color when the related tag quality is undefined
...
LineColor
...
Changes the object line color dynamically:.
...
Expression
...
the value used for the LineColor dynamic.
...
Change Color
...
- UsingLimits—The resulting color is determined when the value is equal or higher than one of the limits.
- AbsoluteValue—The color will be the expression value. The value must be a valid color name or hexadecimal color. For example: "White" or "#FFFFFFFF"
Example
Limits:
1 - Red
10 - Blue
When the value is 0, the object will have its own color (fill color dynamic will not do anything)
When the value is 1 to 9, the object will have the red color.
When the value is greater than 10, the object will have the blue color.
...
TextColor
...
Changes the object text color dynamically:.
...
Expression
...
the value used for the TextColor dynamic.
...
Change Color
...
Bargraph Dynamic
...
Bargraph Dynamic configuration
...
...
Setting
...
Description
...
Bargraph
...
Bargraph dynamic.
...
Expression
...
the value used for the bargraph dynamic.
...
Value Range
...
The minimum and maximum values that will correspond to the minimum and maximum fill percentage.
...
Fill (%)
...
The minimum and maximum bargraph fill percentage.
...
Bar Color
...
The bar graph color.
...
Orientation
...
The bar graph orientation:
to up
horizontal center
to down
to right
vertical center
to left
Visibility Dynamic
...
Visibility Dynamic configuration
...
...
Setting
...
Description
...
Visibility
...
Changes the object visibility and opacity dynamically.
...
Visible
...
Enter a tag, a property, or an expression returning a value. If the resulting value is:
- Zero - Object will be visible.
- Greater than zero - Object will be hidden.
For more information, see Configuring Expressions.
...
Hide when security is enabled
...
Hides the component when security is enabled for the current user
...
Opacity
...
- Expression—The value used to set the opacity.
- Range—The minimum and maximum values that will correspond to the minimum and maximum opacity.
- Opacity—The minimum and maximum opacity (0 - invisible, 0.5 - a bit transparent, 1 - opaque).
MoveDrag Dynamics
...
MoveDrag Dynamic configuration
...
...
Setting
...
Description
...
MoveDrag
...
Moves the object dynamically.
...
BindingMode
...
- TwoWay—Input moving and output moving.
- InputOnly—Input moving only. The object does not move when the object value changes.
- OutputOnly—Output moving only. The object does not move with user interaction.
...
Horizontal Move
...
- Expression with the horizontal move reference.
- Range—The minimum and maximum values that will correspond to the minimum and maximum horizontal position.
- Position—The minimum and maximum horizontal position.
...
Vertical Move
...
- Expression with the vertical move range.
- Range—The minimum and maximum values that will correspond to the minimum and maximum vertical position.
- Position—The minimum and maximum vertical position.
...
Use previous object for position reference
...
Reference the current object position based on the directly previous object
Scale Dynamic
...
Scale Dynamic configuration
...
...
Setting
...
Description
...
Scale
...
Changes the object size dynamically.
...
Width Scale
...
- Object—the value used for the width scaling.
- Range—The minimum and maximum values that will correspond to the minimum and maximum width scale percentage.
- Scale (%)—The minimum and maximum width scaling percentage.
...
Height Scale
...
- Object—the value used for the height scaling.
- Range—The minimum and maximum values that will correspond to the minimum and maximum height scale percentage.
- Scale (%)—The minimum and maximum height scaling percentage.
...
Scale Reference:
...
Center
Left
Up
Right
Down
Rotate Dynamic
...
Rotate Dynamic configuration
...
...
Setting
...
Description
...
Rotate
...
Rotates the object dynamically.
...
Expression
...
the value used for the rotation.
...
Value Range
...
The minimum and maximum values that will correspond to the minimum and maximum angle. For example: 0 to 100
...
Angle
...
The minimum and maximum rotation angle. For example: 0 to 360
...
RPM
...
Number of rotations per minute, that value can be defined on Expression.
...
Center Reference
...
ON/OFF
...
Enter with the object property that will turn ON/OFF the Rotation Dynamic
Skew Dynamic
...
Skew Dynamic configuration
...
...
Setting
...
Description
...
Skew
...
Skews the object dynamically.
...
X-axis Skew
...
- ObjectValue— the value used for the X-axis skewing.
- Range—The minimum and maximum values that will correspond to the minimum and maximum X-axis skewing angle. For example: 0 to 100.
- Skew (º)— The minimum and maximum X-axis skewing angle. For example: 0 to 180º.
...
Y axis skew
...
- ObjectValue— the value used for the Y-axis skewing.
- Range—The minimum and maximum values that will correspond to the minimum and maximum Y-axis skewing angle. For example: 0 to 100.
- Skew (º)— The minimum and maximum Y-axis skewing angle. For example: 0 to 180º.
...
Skew Reference
...
Center
Left
Up
Right
Down
TextOutput Dynamic
...
Table 15: TextOuput Dynamic configuration
...
...
Setting
...
Description
...
TextOutput
...
Text output dynamic.
...
Expression
...
Indicates the text that will be shown in the object.
...
Localizable
...
Indicates whether the text must be translated when the dictionary changes.
...
DesignModeCaption
...
- The value shown in design mode:
- ShowObjectNames—The content of the text field is shown exactly as it is.
- ShowPlaceHolders—The characters ### are shown, the number of characters is defined by the MaxLength field.
...
MaxLength
...
Defines the maximum number of characters.
...
Format
...
Specify the format of the field
User Controls
...
| section |
|---|
...
| . |
|---|
...
Configuring a Circular Panel
Double-click any Circular Panel object in the display, or use the left panel PieChart to configure it.
...
Circular Panel configuration
...
...
Field
...
Description
...
Control Name
...
| . |
|---|
...
| . |
|---|
...
Selected Value
...
Select an object to represent the selected value
...
SelectedIndex
...
Select an object to represent the selected index
...
ImageSize
...
Size of the selected image
...
FontSize
...
Size of the font used on the component
...
Columns
...
For each value that you want to include, select a section and configure the settings to the right of the list (described below). The panel displays a section for each column.
...
FieldName
...
Name of the field to be used
...
Title
...
Name to be shown on the component
...
Image
...
Select a resource image to display.
...
Preview
...
Read-only display of selected image.
Configuring a PieChart
Double-click any PieChart object in the display to configure it.
...
Pie Chart configuration
...
...
Field
...
Description
...
Control Name
...
Defines a name for the control, so it can be accessed in the CodeBehind script. See Displays Code Behind
...
ChartType
...
Select the type of chart: Percent, Angles, or Section
...
Data Items
...
For each value that you want to include, select a section and configure the settings to the right of the list (described below). The chart displays a section for each data item.
...
FieldName
...
Enter a name for the data item.
...
LinkedValue
...
Enter a tag name as the data source for the data item.
...
Brush
...
Click to select the color for the data item.
Configuring a BarChart
Double-click any BarChart object in the display to configure it.
...
Bar Chart configuration
...
...
Field
...
Description
...
Control Name
...
Defines a name for the control, so it can be accessed in the CodeBehind script. See "Displays Code Behind" on page 129.
...
Type
...
Select the type of chart.
...
Data Source
...
Enter the dataset table or query to use for the chart.
...
Grid Lines
...
Click to select the color for the grid lines.
...
Window
...
Click to select the color for the window background.
...
Labels
...
Click to select the color for the labels.
...
Show Horizontal Labels 45°
...
Select to angle the labels below each bar at 45°.
...
Show value over bar
...
Select to display the bar value above the bar.
...
Hide all Zero Series
...
Set the series that has values 0 to be hidden
...
Show value labels 90°
...
Select to show the labels on each bar at 90°.
...
Y Axis Range
...
Set the range of the Y axis (from and to)
...
Y Axis Height
...
Set the Height of the Y axis
...
Y Axis Labels
...
Set the quantity of the labels to show on Y axis
...
Auto Scale Y Axis
...
Set to make the Y axis auto scalable
...
Format
...
Set the format of the Y axis values
...
Data Items
...
For each column in the data source that you want to include, select a bar and configure the settings to the right of the list (described below). The chart displays a bar for each row.
...
FieldTitle
...
Title to be show in the display to the current column
...
FieldValue
...
Name of the column in the database.
...
Min.
...
Enter a tag to define the minimum value.
...
Max.
...
Enter a tag to define the maximum value.
...
Brush
...
Click to select the color for the data item.
Configuring an Alarm Window
Double-click any Alarm window object in the display to configure it.
...
Alarm window configuration
...
...
Field
...
Description
...
Control Name
...
Defines a name for the control, so it can be accessed in the CodeBehind script. See Displays Code Behind.
...
MaxLines
...
Maximum number of lines to display in the window.
...
List
...
Select the type of alarms to display in the window:
- OnlineAlarms—Displays only active alarms. Alarms only display while the alarm is in the alarm state.
- AlarmHistory—Displays only past alarms.
- AuditTrail—Displays only the SystemEvents (Edit > Alarms > Groups).
- AlarmHistory+Events—Displays past alarms and SystemEvents.
...
Merge Hi and HiHi Lines
...
Combines alarms configured as Hi and HiHi into a single row.
...
History Interval/To
...
Enter the start and end dates for the alarms.
...
Show Column Titles
...
Select to display the column titles.
...
Ack by Page
...
Enter a tag name, which when triggered, acknowledges the alarms in the alarm window.
...
Show Header
...
Enter text to display above the column titles.
...
AllowSort
...
Select to let users sort the data by column.
...
Allow Column Reorder
...
Select to let users change the order of the columns.
...
Display value column as string
...
Set the format of the value column to string
...
Filter
...
Enter SQL statement to limit the alarms displayed.
...
Display Millisecond
...
Select to include milliseconds in the alarm time.
...
Ack Selected Line
...
Configure settings for acknowledging an alarm.
...
Columns
...
For each column in the list, select the column and configure the settings to the right of the list (described below).
...
Visible
...
Select for column to display in the alarm window.
...
Allow Filter
...
Select to let users filter the column.
...
Show in Column Chooser
...
Select to include the column in the column chooser, which lets users select the columns to display.
...
Title
...
Enter the text for the column title.
...
Width
...
Enter the initial column width, in WPF units (device-independent pixels).
...
Sort
...
Select how to initially sort the column.
Configuring the Trend Window
The drawing tool has two trend objects, the TrendChart and the TrendChartLegacy. The TrendChart is the newest that should be used by default, the other was kept to ensure compatibility with projects created in previous release, the iOS displays are using the previous object.
Double-click any Trend window object in the display to configure it.
...
Trend window settings
...
...
Field
...
Description
...
Control Name
...
Defines a name for the control, so it can be accessed in the CodeBehind script. See Displays Code Behind.
...
Bind to Tag
...
Enter with an object property where the Trend configuration will be saved.
...
Bind Pens to Tag
...
Enter with an object property where the Pen values will be saved.
...
Orientation
...
- Horizontal.
- Vertical, top to bottom.
- Vertical, bottom to top.
...
Window
...
Set the trend control background color.
...
Labels
...
Set the color of the trend control labels.
...
Grid Lines
...
Set the color of the Grid lines
...
Grid Lines Stroke
...
Set the Grid line settings.
...
Cursor
...
Enables (selected) or disables (deselected) the cursor settings.
...
Y Axis
...
- Y scale for each pen - Based on min and max of each pen.
- Y range - Defines the minimum and maximum values for the Y-axis
- The format of the values in the Y-axis. For valid numeric formats, see "Tag Formats" on page 66. For example, N1 (number with 1 decimal place).
- Stack Y scales - Check to stack similar Y scales.
- Merge similar Y Scales - Check to merge the similar Y scales.
...
X Axis
...
- Duration - Define the X-axis time span.
- XY Chart - Check to define a X axis range
- Labels - Define the quantity of horizontal grid lines.
- The X-axis format is defined by two fields: first line format and second line format. This is especially useful to define label marks that require two lines of information. For valid date and time formats, see Tag Formats. For example, T (Time) for the first line format, d (short date) for the second line format.
- Navigation Control - Check to make navigation controls visible
...
Legend
...
Defines the position of the legends in the Trend Window.
- None.
- Top Left.
- Top Right.
- Bottom Left.
- Right Panel.
- Bottom Panel.
...
Pens
...
...
Tag
...
Set tag that will provide the value for the pen.
...
Pen Settings
...
Set the configuration of the Line color, Line stroke, Fill area and the type of Marker.
...
MinValue
...
Linear scale reference for the tag value, according to the Y-axis range.
...
MaxValue
...
Linear scale reference for the tag value, according to the Y-axis range.
...
Auto
...
Set the value to auto, instead use MinValue and MaxValue
...
SPCEnable
...
Enable or disable the SPC settings.
...
SPCSettings
...
Click to open the SPC settings.
...
Show Value Area
...
Fill the pen area with the specified color
...
PenLabel
...
Set the pen name.
...
Filter level
...
An integer number that "group" points on XY axis, calculating the average between then.
...
LimitMinMaxValue
...
Remove the points less than Tag.Min and greater than Tag.Max.
...
Square
...
Fill the pen points with a square wave.
Double-click any Trend window legacy object in the display to configure it.
...
Trend window legacy settings
...
...
Field
...
Description
...
Control Name
...
Defines a name for the control, so it can be accessed in the CodeBehind script. See Displays Code Behind.
...
0(online) 1(history)
...
0 - the control shows the online data.
1 - the control shows the history data. For example: Tag.onLineHist.
...
OnlineTrigger
...
The refresh rate of the online trend control. For example, 00:00:01 or {Tag.trendTimeSpan}.
...
Time Before Now
...
...
HistoryDateTime
...
The initial point for the history trend control. For example, {Tag.initialTrendHistory}.
...
Grid Line
...
Set the color of the Grid lines
...
Window
...
Set the trend control background color.
...
Labels
...
Set the color of the trend control labels.
...
Off line Marker
...
Set the marker when the trend is in off line mode
...
Cursor Enable
...
Enables (selected) or disables (deselected) the vertical cursor.
...
Pens Legend
...
Defines the position of the pens legend in the trend control.
...
Y Axis
...
...
Range
...
Defines the minimum and maximum values for the Y-axis.
...
Labels
...
Defines the quantity of horizontal grid lines.
...
Format
...
The format of the values in the Y-axis. For valid numeric formats, see Tag Formats. For example, N1 (number with 1 decimal place).
...
X Axis
...
...
Interval
...
Defines the X-axis time span.
...
Labels
...
Defines the quantity of horizontal grid lines.
...
Format
...
The X-axis format is defined by two fields: first line format and second line format. This is especially useful to define label marks that require two lines of information. For valid date and time formats, see Tag Formats. For example, T (Time) for the first line format, d (short date) for the second line format.
...
Pens
...
...
Visible
...
Shows (1) or hides (0) the selected pen. Ex 1 or {showPen1}.
...
Tag
...
Set tag that will provide the value for the pen.
...
Min
...
Linear scale reference for the tag value, according to the Y-axis range.
...
Max
...
Linear scale reference for the tag value, according to the Y-axis range.
...
Pen
...
Choose the style, the color, and the thickness of the pen line.
...
CursorValue
...
Set the tag that will receive the real value of the Y-axis, according to the cursor position. For example: Tag.pen1CursorValue.
...
FieldName
...
Set the pen name.
...
SPC
...
Check to enable SPC
...
MouseActions
...
Check to enable mouse actions on trend
...
Tooltips
...
Check to enable tool tip on hover
...
Allow edit pens/labels
...
Check to enable allow the pens and labels to be edited
...
Y scale for each pen
...
Y scale for each pen based on min and max of each pen.
...
Merge same Y scale
...
Check to merge the similar Y scales.
Using Y Axis Scaling
Considering:
Y-axis Min = 0;
Y-axis Max = 100;
The trend control allows many pens to be displayed together. When your pens do not have the same range, you can use the tips below to fit your data in the same chart, for better visualization:
- If a pen has a lower range, 0 to 1 for example, you can set the Max property of the pen to 1, so when the real tag value is 1, the value 100 will be displayed in the chart. (100/1 scale).
- If a pen has a higher range, 0 to 1000 for example, you can set the Max property of the pen to 1000, so when the real tag value is 1000, the value 100 will be displayed in the chart. (1/10 scale).
...
Configuring a DataGrid Window
Double-click any DataGrid window object in the display to configure it.
...
Data Grid window configuration
...
...
Field
...
Description
...
Control Name
...
Defines a name for the control, so it can be accessed in the code-behind script. See Displays Code Behind
...
Data Source
...
Enter the dataset table or query to use for the window.
...
SelectedValues
...
Enter a string tag or array tag to receive the contents of the selected row.
...
SelectedIndex
...
Enter a tag to receive the number of the currently selected row. Row numbering starts with 0.
...
LinesCount
...
Select a tag to receive the number of lines in the window.
...
Pause
...
Set an object to defines if the datagrid will be updated or not when the data changes.
...
Theme
...
Select the theme for the window.
...
BindindMode
...
Select the binding mode to use. See http://msdn.microsoft.com/en-us/library/system.windows.data.bindingmode.aspx.
...
AllowInsert
...
Select to let users add rows.
...
Column Titles
...
Select to display column titles.
...
Transpose
...
Select to transpose columns to rows
...
OneClick Edit
...
Select to edit cells on first click
...
Allow Delete
...
Select to allow delete data from grid
...
AllowSort
...
Select to let users sort the data by column.
...
Auto Column
...
- Select to have the system automatically include all table or query columns in the window. If selected, you do not have to configure the columns below. To customize specific columns, add the column to the column list and configure the settings to the right (described below).
- Deselect to manually configure each column that you want to include using the Columns list and settings to the right (described below).
...
Multiple Selection
...
Check to make multiple selection possible
...
Edit SelectedValues
...
Check to make it possible to edit multiple selected values
...
Show Header
...
Check to show headers on grid
...
Filter
...
Enter SQL statement to limit the data displayed.
...
Columns
...
For each column you want to customize or include manually, add the column and configure the settings to the right of the list (described below).
...
Visible
...
Select to allow the column to display in the data grid window.
...
Editable
...
Select to let users edit the column.
...
Show in Column Chooser
...
Select to include the column in the column chooser, which lets users select the columns to display.
...
FieldName
...
Enter a name for the column.
...
Editor
...
Select the column data type.
...
Title
...
Enter the text for the column header.
...
Width
...
Enter the initial column width, in WPF units (device-independent pixels; one WPF = 1/96 inch).
...
Sort
...
Select how to initially sort the column.
Managing Images and Symbols
FactoryStudio has great features to improve the productivity on creating graphical displays to your application. The drawing tools allows you to easily manage symbols, image files, import objects from a 5000 objects gallery, create your own symbols with dynamic properties, and map tags and templates to its default graphical user interface.
There are three main repositories for reusable components, the Images, the Symbol Factory library, and the Local Symbols Gallery. Let's explore each one.
Images: Used to insert an external image file from your computer into the project configuration, like an icon, wallpaper, object, or background image. You can manage the imported images at Edit > Displays > Resources. After the image is imported, you no longer need the original file. Images can be used as color brushes for any drawing object, and they can even be used as "color" or the ColorFill dynamic attributes.
Symbol Factory: This is an extensive library of elements, with more than 5000 symbols, all using vector graphics, that you can use for creating your displays or use as a template to create your own custom symbols. Those objects can be applied statically, just as an image or icon, or you can add Dynamics and save them to the Local Symbols library.
Local Symbols: These are the most frequently used symbols. They include the symbols you create in the scope of a project. The symbols in this library can be kept synchronized with the library, in this way, when you change a symbol in this library, the change will be automatically applied to all displays using that symbol. Local Symbols also can have dynamics properties that you can easily map to tags in displays; they can also be defined to be the default graphical representation of tags.
Image Resources
You can import any image file at the Edit > Displays > Resources tab. This creates a repository of images for the application that is stored inside the project database file, so you don't need the original files anymore. These images can be used to be the fill of an object, such as rectangles, ellipses, LabelBoxes, paths, page background, or target color in runtime dynamics using colors.
If you need to update an image with a new version, you can replace it, and it will be updated throughout the application. Be sure to keep the resource name the same.
You can use any image file to fill or "paint" an object when creating displays from Draw > Drawing.
You can import the following file types:
- .bmp
- .gif
- .ico
- .jpg
- .png
- .tiff
- .wdp
To manage resources:
- Go to Edit > Displays > Resources.
- Click Import Images.
- Navigate to where the images are that you want to import.
- Select the image files and click Open.
- In each row, enter or select information, as needed.
...
Column
...
Description
...
Name
...
Edit the default name.
...
Description
...
Enter a description of this image.
...
Folder
...
Specify the folder where the resource is
...
ResourceType
...
Specify the type of the resource
...
Dimension
...
Read-only. Show the dimension of the resource file
...
Size
...
Read-only. Show the size of the resource file
Adding an image to a display
- Go to Draw Environment, and click on the Insert Image Resource.
- A new window will open. Now Click on Import file button.
- The new image becomes the fill for the rectangle. Click on Fill to change the image settings.
- You can change the Stretch to None, Fill, Uniform and UniformToFill. Also you can see all image files that are in the project and change between then using the Select Resource button or just click on the image in the top toolbar .
| Info |
|---|
Typically you should use UNIFORM or FILL for image stretching. The image (using the Appearance menu at the left, can be applied to any graphical shape at the display) |
The Symbol Factory
The symbols from the Symbol Factory are efficient and well designed vector graphics images. If you need an object like a pump, valve or others in your applications, just open the library and browse for the element or search by name. The difference between the symbols from the Symbol Factory and Local Symbols is that symbols from the Symbol Factory, once included in a display, become part of that display, and have no further connection with the library. In contrast, Local
Symbols can keep an active link with the library, and can also have dynamic properties.
- Go to the Draw Environment then click on the Symbol Factory Icon on the vertical toolbar.
- After clicking on the icon the Symbol Factory will open, to insert a symbol just choose one category and symbol then double-click on the symbol and click in any place on the screen.
Adding color change animation to Symbol Factory elements
If you want to insert a color change animation, without changing anything on the symbol, you can copy the symbol and overlay a transparent image on top of your image.
For example, suppose we have two pumps. To insert a simple animation that shows when the pump is ON or OFF follow these steps:
- First make a copy of the object, select the symbol and click Ctrl+D to duplicate it (you can also select the Symbol, hold the CTRL key and drag the object, or you can copy/paste it).
- Then select the second pump and click on the Union button
on the horizontal toolbar. - Now with this new pump, locate the OPACITY property at the left panel, select an Opacity from 0.2 to 0.5, according the desired visual effect, and select the color for your initial brush (red or green, for instance).
- Double click on the second pump and change the setting of the Fill Dynamic.
| Note |
|---|
Use the Client.SimulationDigital to simulate a controller changing between 0 and 1. |
- Select both pumps and click on the Align Horizontal Center button and Align Vertical Center button.
- If the pump with the Opacity changes stays behind the other pump, click on the Move to The Front button to bring it to the front.
- You can now click on the Display Preview button
on the top toolbar to see the new pump's animation.
Local symbols
The Local symbols library includes the most frequently used graphics. You can also create symbols and add them to the project local library. Symbols can just be a static image or they can have dynamic properties and tags links.
To view the symbols used by your project, do one of the following:
- To see only the symbols used in this project, go to Draw > Symbols. In that page you can export, import or delete symbols.
- To see all available symbols, go to Draw > Drawing, and click Open Symbol Library
Creating new Symbols
You can use the drawing tools and the COMBINE commands at the horizontal toolbar to draw your own symbols.
You can also bring symbols from Symbol Factory and click at the UNGROUP command at the horizontal toolbar to edit the imported symbols.
You can also use the "Direct Selection" cursor to edit internal elements without needing to ungroup.
If you want to save the new symbol to the Local Symbols Library, just select the object or objects that you want to be part of the symbol, then right-click and select "Make a new symbol".
- Enter the Name, Folder and the description of the Symbol.
- Now you can open the Symbol Library and choose the symbol to use at your displays.
The components in the Local Symbol library may have built-in dynamic properties and an easy way to map them to realtime tags in your application. This is explained in the following section.
If you have dynamic properties and tags being used in that symbol, the system will automatically create the symbol label parameters. After making the new symbol, double click it to verify its configuration parameters.
In order to Edit a symbol that is already in the Local Symbol library, insert the symbol in a display, right click on the symbol, and select "Edit Symbol", that will change the drawing tool, locking the other elements in the page, so you change the symbol. When you finish, right-click at any position to select Save to Library, Save Only to Local display, or Cancel your editing.
The objects from "Local Symbols" are composed of some default symbols from the file SymbolLibrary.tproj, added with the product installation, and the symbols you created for your specific project. If you change, delete or insert a symbol in the SymbolLibrary.Tproj, it will be accessible to all projects in that computer. The symbols you are using in your project are saved inside the PROJECT file; therefore they are completely independent of any external file.
Inserting a Local Symbol
- Go to the Draw Environment, right-click any place of the screen and select "Insert Symbol". Alternately, you can click on the "Local Symbol icon" on the vertical toolbar.
- After selecting the category and symbol, click on the symbol and then click on the screen to position the symbol. You can also drag-drop symbols to the screen. If you double-click on a symbol, that will close the Library window, allowing you to insert the selected object.
- Double-click on the symbol to see its runtime properties and map it to tags in your application.
| Note |
|---|
Some symbols do not have custom parameters. In this case, the double click will show the Dynamics dialog. |
Symbol Parameters
When you insert a symbol from the Symbol Library it may some parameters, like in the example the VerticalTank symbol has the parameters LevelValue, MaxScale and MinScale. To change the linked tags to those parameters, just edit the new tag names in the dialog.
Editing and modifying symbols
Right-click on the VerticalTank symbol and select Edit Symbol. Now you enter in the Edit mode, you can see all objects that are part of the Vertical Tank.
Click on the Black rectangle to see its Dynamics.
As you see we use #<PropertyName>:TagName
That syntax will create exposed label parameters for the symbol, making it easier to map the linked tags when using the symbol. In this examples, the symbol has the labels "Level","MinScale" and "MaxScale". When you insert this symbol, you will be able to set values for those parameters. After the ":" character, you have the default value.
| Info | ||
|---|---|---|
| ||
"#LevelValue:Client.SimulationAnalog", we are creating a property called "LevelValue" which has "Client.SimulationAnalog" as the default value. |
When creating symbols, it is useful to initially map the properties to client.SimulationDigital, Client.SimulationAnalog or Client.SimulationDouble, which are variables with values changing every second so you can see the result of your dynamic properties. You can use the internal variables Client.DigitalValue, Client.NumericValue and Client.TextValue, when you just want to put a placeholder value, with no built-in simulation.
In order to save the symbol, right-click on the symbol or on the display and press Save to Symbol Library, or click the Save icon on the top toolbar. Double-click on the symbol to verify its properties.
Linking Tags and Symbols
You can configure a symbol to be the default representation of a Tag Type. In this way, every time you paste a tag into the Draw Environment, a symbol will be automatically created mapping to the inserted tag.
The tags of type Digital, Integer, Double, Decimal, Text, DateTime and TimeSpan have a default visualization that is the name of tag and an input/output text box. If you select multiple lines at Edit>Tags>Objects (click in one line, shift click in another line to mark a range), right-click to copy those lines to the clipboard, and paste into the displays, the system will automatically create one object to each of those tags.
If you want to change the properties of the objects created, for instance change the TextIO dynamic from "TwoWay" to "OutputOnly", select all the TextBox objects (clicking with the mouse on the display, and keeping it pressed, select the area with the objects), and double-click at any selected object to open the "Edit Combined Dynamics" dialog.
| Info | ||
|---|---|---|
| ||
You can also copy the lines from Edit > Tags > Objects to Excel, add the columns Left and Top into the Excel table, then copy and paste that table, including the header column, back to the display; in this case the system will position the objects using the coordinates found in the table. |
| Note |
|---|
If you create a symbol with one dynamic parameter, and save it with the name "Integer", that will became the default visualization for the "Integer" tags. The same applies to any tag type. |
Mapping a Symbol to a Tag Template
You can also define a symbol to be the default view for a tag template.
- Go to Edit > Tags > Templates to create a new template.
Go to Edit > Tags > Objects and create Tags with Type: Demo.
- Back at the Draw environment insert some objects that you want to be part of the symbol. In the example we use a TextBlock and TextBox with the parameters #Tag: (Tag.Demo.Integer1) in their dynamic properties
- Now select the TextBox and the TextBlock and right-click and make it a New Symbol with the Name and Folder called "Demo".
- The parentheses () in the expression of the TextBox and TextBlock, defined the scope, on what should be replaced when you map the symbol. The hash tag syntax #Label: when you paste the Tags, it is the placeholder that will show where in the dynamic animations or expressions the name of tag should be replaced.
- Go to Edit>Tags and copy all tags with Type:Demo.
- Back to Draw environment and paste the tags.
When inserting tags of that template type, the system will look for a Symbol with the same name of Template. If a match is found, that symbol is created and linked to the Tag you were inserting at the display.
| Note |
|---|
If you create symbols using only Tag Elements, not expressions, you don't need to explicitly use the full syntax: #Label:(tag.Demo).Integer1 to define the label parameters. If you just use your tag at in the object dynamic properties and execute the Make Symbol command, the system will automatically search for tags in the symbol and create the related parameters. When using expressions, or when having multiple tags and templates in the same symbol, it is necessary to explicitly use the hash tag # and the parentheses in order to define the scope of your symbol's customizable parameters. |
Linking Tags and Symbols using Categories
If you want to map a Symbol with a group of Tags, but you don't want to make this symbol map all Tags with the same Type. you can use the Category column to link which symbols should be used as the default interface to each group of tags.
- Go to Run > Dictionaries > Categories and create new categories.
- Back to Draw Environment and insert one symbol.
- Go to Draw > Symbols Tab and on the Category Column chose the respective category for the symbol.
| Note |
|---|
If the Category column is not visible, right-click in any Column name and select the check columns you want to see. |
...
Go to Edit > Tags and define the category for the tags.
Select all Tags, copy then paste then into the Draw Environment. Each Tag will map to the respective symbol, according to the association defined in the Category column.
Displays Code Behind
Use the CodeBehind tab to define a set of functions connected with a display. You can write code in either standard VB.Net or CSharp. You can also switch between the two. If you change your language selection, the system automatically converts existing code to the selected language.
If you need references to your own assemblies, use Run > Build > References.
CodeBehind functions can be executed when opening or closing, or while the display is open, depending on how you configure the code. You can use CodeBehind to define mouse and input command handling methods to be executed on a specific display.
For Dialog displays, use the built-in DialogOnOK method, which is called when the built-in OK button on the dialog is pressed. If "True" is returned on that method, the dialog is closed; if "False" is returned, the dialog remains open. This method is commonly used to ensure data validation on the dialog (which prompts the user to correct incorrect entries before closing the dialog).
The Code Behind of the Displays has the following pre-defined methods:
- DisplayOpening()Executed when display is opening.
- DisplayIsOpen()Called in a regular intervals while the display is open.
- DisplayClosing()Executed when display is closing.
- DialogOnOK()Called when the OK button on a Dialog display is pressed. Returning 1 allows the dialog to close.Returning 0 prevents the dialog from closing.
You can add your own .NET variables and methods to this page.
| Info |
|---|
Because the client displays are designed to run on distributed and web environments, we recommend avoiding the use of functions that do not allow partial trust execution or that refer to physical file paths. |
|
Desktop and iOS Client Settings
The desktop client settings control how the application displays on client computers. You configure Windows clients separately from iOS clients.
To configure the desktop client settings:
- Go to Edit > Displays > Displays.
- If needed, configure the Desktop Settings for Windows client by clicking Clients.
- Enter or select information, as needed, and click OK.
...
Column
...
Description
...
Maximize When Open
...
Select to maximize the client window to fit the monitor.
...
Stretch
...
Select how the layout stretches when clients use the application:
- None—Layout does not resize; it displays the exact size you configured for the layout. We recommend selecting the Scrollbar option.
- Fill—Layout resizes to completely fill the available space on the client’s monitor., without regard to the layout’s aspect ratio.
- Uniform—Layout resizes proportionally to the client’s monitor size, maintaining the layout’s aspect ratio.
- UniformToFill—Layout resizes to both maintain the aspect ratio and to completely fill the available space on the client’s monitor. This can result in cutting off some parts of the layout.
...
Scrollbar
...
Select to have a scrollbar display in the client window.
...
Title
...
Enter a title for the client window.
...
MinimizeBox
...
Select to display the standard minimize button.
...
MaximizeBox
...
Select to display the standard maximize button.
...
CloseBox
...
Select to display the standard close button.
...
ResizeBox
...
Select to display the standard resize handle.
...
Menus
...
Select which menus to display:
- File
- Tools
- Security
...
Always shows titles and menus in Test Mode
...
Select to always show the Minimize, Maximize, Close and Resize buttons when running a project in Test Mode.
...
OnScreen KeyBoard
...
Select to display a virtual keyboard
...
When Mouse Is Over Command Areas
...
Select behavior when mouse is over:
- Show object edges— Creates edges on command objects
- Cursor—Select the type of cursor.
...
Mouse Cursor Visible
...
Select for the mouse pointer to be visible.
...
Verify Tag Quality on Client Displays
...
- Tag Security protection show—Select option and character to show in the place of the Tag value if the user does not have the necessary security level.
- On undefined quality show—Select option and character to show when PLC determines the data quality is undefined.
- On OPC Bad quality show—Select option and character to show when OPC server determines data quality is bad.
...
Disable Web Commands
...
Select to prohibit application users from sending commands to the PLC.
...
Multiple windows on same computer share user logon
...
Users can run multiple instances of the application on the same computer. The user may need to log in as a different user from time to time. Select this option to automatically change the logged in user in all running instances of the application on the same computer.
- If needed, configure the Desktop Settings for iOS client by clicking iOS devices.
- Enter or select information, as needed, and click OK.
...
Column
...
Description
...
Disable Commands
...
Select to prohibit application users from sending commands to the PLC.
...
iPad Initial Page
...
Select the display that iPad users see when they start the application.
...
iPhone Initial Page
...
Select the display that iPhone users see when they start the application.
...
Stretch Fill
...
Select to resize the application to fill the device screen.
...
iPad Landscape
...
Select if the alignment is landscape
...
iPhone Landscape
...
Select if the alignment is landscape
- If needed, configure the Desktop Settings for HTML5 client by clicking HTML5 page.
- Enter or select information, as needed, and click OK.
...
Column
...
Description
...
Disable Commands
...
Select to prohibit application users from sending commands to the PLC.
...
Desktop Initial Page
...
Select the display that Desktops users see when they start the application.
...
Mobile Initial Page
...
Select the display that Mobile users see when they start the application.
- Enter the Number of Monitors clients will use.
- Select the monitor and layout to show when the application starts.
The Display Namespace
The namespace Display lists all displays with their properties and open and close methods.
The namespace Layout lists all layouts with their properties and open and close methods.
The namespace Client has the properties of the environment on each connected client computer or mobile device.
...
Overview
Content Tools
Tasks