Creating Canvas Displays (How-to Guide)

Creating Your First Canvas Display

Step 1: Create Display

1. Navigate to Displays → Draw
2. Click New Document button
3. Configure:
   • Name: ProcessOverview
   • Engine: Portable
   • Template: Select "Canvas" (not Dashboard)
4. Click OK

Step 2: Set Canvas Properties

In the right sidebar under Display Settings:

• Width: 1920 (typical for Full HD)
• Height: 1080
• Background: Theme or custom color
• OnResize: StretchUniform (maintains aspect ratio)

Adding Process Elements

Method 1: Drag Tags for Automatic Graphics

1. From right panel Tags tree, expand your tags
2. Drag a tag directly onto canvas
3. System creates appropriate visualization:
   • Digital tags → On/Off indicator
   • Integer/Double → Numeric display
   • Custom types → Symbol if mapped

Tip: Map tags to symbols first in UNS → Tags using "Map to Symbol" button for automatic symbol selection.

Method 2: Using Symbol Library

1. In left panel, expand Symbols folder
2. Browse categories:
   • Motors → Motor symbols with wizards
   • Pumps → Various pump types
   • Valves → Gate, ball, butterfly valves
   • Tanks → Storage vessels
3. Drag symbol onto canvas
4. Double-click to configure parameters

Method 3: Drawing Custom Graphics

Use the Drawing toolbar (left side):

Configuring Symbol Parameters

When you add a symbol with dynamic properties:

1. Double-click the symbol
2. In Symbol Configuration dialog:
   • Parameters section shows available bindings
   • Click ... to browse for tags
   • Or type tag name directly

Example for a motor symbol:

STATE: Tag.Motor1.Running
SPEED: Tag.Motor1.Speed
FAULT: Tag.Motor1.Fault

Adding Dynamic Behavior

Quick Dynamics Setup

1. Select any element
2. Double-click to open properties
3. Click Dynamics tab
4. Add dynamic properties:

Color Change by Value:

• Type: FillColor
• Expression: Tag.Temperature
• Change Color: UsingLimits
• Add limits: 0=Blue, 50=Green, 80=Yellow, 100=Red

Visibility Control:

• Type: Visibility
• Visible: Tag.SystemRunning
• Element shows only when tag > 0

Animation:

• Type: Rotate
• Expression: Tag.FanSpeed
• Range: 0-100 → Angle: 0-360

Creating Interactive Controls

Button for Commands:

1. Add button from toolbar
2. Double-click → Action dynamics
3. Configure:
   • Event: MouseLeftButtonDown
   • Action: SetValue
   • Object: Tag.Motor1.Start
   • Value: 1

Building a Complete Process Display

Typical P&ID Layout

[Header: Title and Status]
??? Main Process Area (Canvas)
?   ??? Equipment (Symbols)
?   ??? Piping (Polylines)
?   ??? Instrumentation (Gauges)
?   ??? Values (TextBoxes)
??? [Footer: Alarms Summary]

Step-by-Step Example: Simple Tank System

1. Add Storage Tank:
   • Drag Tank symbol
   • Bind Level: Tag.Tank1.Level
   • Bind Temperature: Tag.Tank1.Temp
2. Add Inlet Valve:
   • Position above tank
   • Bind State: Tag.Valve1.Open
   • Add color dynamics (Green=Open, Red=Closed)
3. Connect with Piping:
   • Use Polyline tool
   • Draw from valve to tank
   • Set line width: 3px
   • Add flow animation if needed
4. Add Level Indicator:
   • Place LinearGauge beside tank
   • Bind Value: Tag.Tank1.Level
   • Set Range: 0-100%
5. Add Control Button:
   • Place "Fill Tank" button
   • Action: Toggle Tag.Valve1.Open

Organizing Complex Displays

Using Groups

1. Select related elements (Ctrl+Click)
2. Click Group button in toolbar
3. Benefits:
   • Move together
   • Copy as unit
   • Apply dynamics to group

Layering (Z-Order)

Control what appears on top:

• Bring to Front: Pipes over equipment
• Send to Back: Background shapes
• Switch Z-Order: Fine control

Alignment Tools

Select multiple elements, then:

• Align Left/Right/Center
• Align Top/Bottom/Middle
• Space Evenly (horizontal/vertical)

Working with Templates

Creating Reusable Symbols

1. Draw your equipment representation
2. Add dynamics with parameters:

   Expression: #STATE:Tag.PlaceHolder

3. Select all elements
4. Click Make Symbol button
5. Name and save to library

Using Symbol Parameters

The # syntax creates parameters:

• #TagName:Tag.Default - Main tag parameter
• #Min:0 - Numeric parameter
• #Color:Red - Color parameter

When placing symbol, configure each parameter once.

Testing Your Display

Preview Mode

1. Click Preview button in toolbar
2. Limitations:
   • No CodeBehind execution
   • Basic animations only
   • No real tag values

Runtime Testing

Better approach:

1. Keep solution running (Development profile)
2. Save display (Ctrl+S)
3. Rich Client updates automatically
4. Or refresh Web Client

Performance Optimization

Element Count Guidelines

Optimization Tips

? Use symbols instead of individual elements ? Limit animations to essential items ? Optimize images before importing ? Group static elements together ? Avoid overlapping transparencies

Common Patterns

Equipment Status Indicator

Rectangle (equipment shape)
??? FillColor: Status (0=Gray, 1=Green, 2=Yellow, 3=Red)
??? Visibility: Tag.Visible
??? Action: OpenPopup("EquipmentDetails")

Analog Value Display

TextBox
??? LinkedValue: Tag.ProcessValue
??? Format: N2 (2 decimals)
??? Units: "°C" or "PSI"

Trend Popup Button

Button "Show Trend"
??? Action: OpenDisplay
    ??? Display: "TrendPopup"
    ??? Parameters: Pass tag name

Troubleshooting

Elements Not Aligned

• Use Grid: Show gridlines and snap to grid
• Use Alignment tools in toolbar

Symbol Not Updating

• Check parameter binding
• Verify tag name spelling
• Confirm tag has good quality

Display Too Slow

• Reduce element count
• Simplify animations
• Check CodeBehind for loops

Resize Issues

• Check OnResize setting
• Use StretchUniform for aspect ratio
• Test at different resolutions

Next Steps

• [Working with Symbols →] Create custom symbol library
• [Adding Dynamics →] Advanced animations
• [Display CodeBehind →] Add logic to displays

This child guide focuses specifically on Canvas displays while maintaining our standard structure. It provides practical, hands-on guidance without trying to cover every feature. To explore all features use the MASTER section.