Page History

Draw vector graphics tutorial.

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

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

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

Create rotating equipment:

Pump Impeller:

1. Draw a blower from the Symbol Library
2. Double click it and go to Dynamics
3. Add Rotate
4. Draw impeller shape
5. Add rotation dynamic:
   • Center: Object center
   • Angle expression:

csharp

   @Tag.Pump_Running ? @Tag.AnimationAngle : 0

1. In Scripts, increment angle:

csharp

   @Tag.AnimationAngle = (@Tag.AnimationAngle + 5) % 360;

Color Animations

Dynamic color changes:

State-based Color:

csharp

// Pipe color by material
Fill = @Tag.Material == "Water" ? "Blue" :
       @Tag.Material == "Oil" ? "Brown" :
       @Tag.Material == "Gas" ? "LightGray" : "White"

Gradient Animation:

• Create gradient fill
• Animate gradient stops
• Bind to temperature/pressure

Visibility Animations

Show/hide elements:

Blinking Alarm:

csharp

Visibility = @Tag.Alarm && @Tag.BlinkState ? 
    Visibility.Visible : Visibility.Hidden

Toggle blink state every 500ms

Progressive Disclosure:

• Show details on hover
• Hide when normal
• Smooth fade transition

Transform Animations

Scale Animation:

csharp

// Pulse effect for alarms
ScaleX = @Tag.Alarm ? 1.0 + (Math.Sin(@Tag.PulseAngle) * 0.1) : 1.0
ScaleY = ScaleX

Translation:

• Move objects based on position
• Slider controls
• Drag and drop

Complex Equipment

Build multi-part animation:

Conveyor Belt:

1. Belt graphic with pattern
2. Product objects
3. Animations:
   • Belt pattern scrolling
   • Products moving
   • Speed variable
   • Start/stop control

Centrifuge:

1. Outer casing (static)
2. Inner drum (rotating)
3. Material flow (path animation)
4. Speed indicator

Interactive Animations

Add user interaction:

Click Actions:

csharp

void OnValveClick()
{
    if (@Tag.Mode == "Manual")
    {
        @Tag.Valve_Position = @Tag.Valve_Position > 50 ? 0 : 100;
    }
}

Drag to Adjust:

• Implement slider behavior
• Update tag while dragging
• Show value tooltip

Performance Tips

Optimize Animations:

• Limit simultaneous animations
• Use appropriate frame rates
• Disable when not visible
• Simplify complex paths
• Cache static elements

Best Practices:

• Smooth transitions (ease-in/out)
• Consistent animation speeds
• Meaningful animations only
• Test on target hardware
• Provide animation on/off option

Advanced Techniques

Particle Effects:

csharp

// Bubbles in tank
for(int i = 0; i < 10; i++)
{
    CreateBubble(
        RandomX(), 
        TankBottom,
        RandomSize(),
        RandomSpeed()
    );
}

3D-like Effects:

• Perspective transforms
• Shadows and lighting
• Depth ordering

Next Steps

1. • 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...