Creating Canvas Displays How-to Guide

Design flexible, dynamic canvas-style displays.

How-to → Pillars → Operator → Displays → Canvas | Tutorial | How-To Guide | Reference

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)
    → FillColor (0=Gray, 1=Green, 2=Yellow, 3=Red)
    → Visibility (Tag.Visible)
    → Action (OpenPopup on click ("EquipmentDetails"))

Analog Value Display

TextBox (Values)
    → LinkedValue (Tag.ProcessValue)
    → Format (2 decimals)
    → Units (°C or PSI)

Trend Popup Button

Button "Show Trend"
    → Action (OpenDisplay)
    → Display ("TrendPopup")
    → Parameters (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.

In this section...