Apply Dynamics to Controls Tutorials

Tutorial: draw vector graphics, create path animations, and animate control properties using the Dynamics panel.

Home → Tutorials → User Interactions Tutorial → Displays Module Tutorial → Apply Dynamics to Controls Tutorials

Related: Concept | How-to Guide | Reference

1. Vector Drawing Basics

1. Open Displays → Draw.
2. Use the drawing tools in the top toolbar.

Basic Shapes:

• Rectangle
• Ellipse
• Polygon
• Polyline
• Line
• Spline

Combine Shapes (in the top horizontal toolbar):

• Select multiple shapes.
• Use union, subtract, or intersect.
• See the combined result.

2. Create Animated Bargraph

1. Draw a rectangle.
2. Double click it and go to Dynamics.
3. Choose Bargraph.
4. In Expression, add the Tank Level tag, for example @Tag.TankFarm/Tank1/Level.
5. 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 a Rotate dynamic:
   • Expression: @Client.UI.SimulationAnalog
   • Set the result range so the blower rotates at the desired RPM.

4. Color Animations

1. Draw a square.
2. Double click it and go to Dynamics.
3. Add a FillColor dynamic:
   1. Change Color: Using Limits.
   2. Expression: @Tag.TankFarm/Tank1/Level
   3. Set color and value pairs, for example:
      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 a Visibility dynamic.
4. In Visible set:
   1. 1 = Visible
   2. 0 = Not Visible
   3. You can set an Expression to evaluate visibility, for example: @Tag.TankFarm/Tank1/Level > 25

In this section...