Versions Compared

Key

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

Create a Canvas Display.

Displays →  Tutorial | Concept | How-to Guide | Reference


This Tutorial Teaches you to

Build your first Canvas display with process graphics in 20 minutes.

What You'll Learn

:

  • Create a Canvas display
  • Add tank and pump symbols
  • Connect with piping
  • Add dynamic colors
  • Test your display
  • Test your display

Prerequisites:

Table of Contents
maxLevel2
minLevel2
indent10px
excludeTutorial
stylenone


1. Create

Step 1: Create

Display

  1. Navigate to Displays → Draw
  2. Click New a New Document
  3. Name: TankSystem
  4. Template: Page [Canvas]
  5. Click OK
Step

2

:

. Add Tank Symbol

  1. From Symbols → Tanks, drag a tank
  2. Position in center
  3. Double-click tank
  4. Bind Level to: Tag.Tank1.Level
Step

3

:

. Add Pump

  1. From Symbols → Pumps, drag pump
  2. Place below tank
  3. Double-click pump
  4. Bind State to: Tag.Pump1.Running
Step

4

: Connect with Piping
  1. Select Polyline tool
  2. Draw line from pump to tank
  3. Set line width: 3px
  4. Color: Gray

Step 5: Add Dynamic Colors

  1. Select pump
  2. Double-click → Dynamics tab
  3. Add FillColor dynamic:
    • Expression: Tag.Pump1.Running
    • True: Green, False: Gray

Step 6: Add Level Display

Drag Tag.Tank1

.

Level from tag tree
  • Position near tank
  • Format: Add "%" suffix
  • Step 7:

    Test Display

    1. Click Run (F5)Start solution runtime
    2. Open display in runtime
    3. Change tag values to see updates

    Success!

    You've created a dynamic Canvas display.

    Next Steps

  • [Creating Canvas Displays (How-to Guide)] - Complete reference
  • [Working with Symbols] - Custom symbols
  • [Adding Dynamic Animations] - Advanced dynamics
    1. See the created display and values changing (you can use property watch to change values if needed)

    In this section...

    Page Tree
    root@parent
    spaces93DRAF