Draw vector graphics tutorial.

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

This Tutorial Teaches you to:

  • Draw vector graphics:
  • Create path animations
  • Animate properties
  • Build interactive animations

Prerequisites:

1. Vector Drawing Basics

  1. Open Displays → Draw
  2. Use drawing tools:

Basic Shapes:

  • Rectangle
  • Ellipse
  • Polygon
  • Polyline
  • GridLine
  • Spline

In the top horizontal toolbar → Combine Shapes:

  • Select multiple
  • Use union, subtract, intersect
  • See results


2. Create Animated Bargraph

  • Draw rectangle
  • Double click it and go to Dynamics
  • Choose Bargraph
  • In Expression, add the Tank Level tag
  • Change the Bar Color to Blue


3. Rotation Animation

  1. Draw a blower from the Symbol Library
  2. Double click it and go to Dynamics
  3. Add Rotate dynamic:
    • Expression: Client.UI.SimulationAnalog
    • Set result to: RPM


4. Color Animations

  1. Draw a square
  2. Double click it and go to Dynamics
  3. Add FillColor dynamic:
    1. Change Color: Using Limits
    2. Expression: Tag.TankFarm/Tank1/Level
    3. Set color and values like:
      1. Value: 0; Color: Green
      2. Value: 25; Color: Blue
      3. Value: 50; Color: Red


5. Visibility Animations

  1. Draw a square
  2. Double click it and go to Dynamics
  3. Add Visibility dynamic
  4. In Visible set:
    1. 1 = Visible
    2. 0 = Not Visible
    3. You can set an Expression to check the value an apply visibility, for example: @Tag.TankFarm/Tank1/Level > 25


In this section...