Page History

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

Vector Drawing Basics

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

Basic Shapes:

• Rectangle: Tank outline
• Ellipse: Pump body
• Line: Piping
• Polygon: Custom shapes
• Path: Complex curves

Combine Shapes:

• Select multiple
• Right-click → Combine
• Union, Subtract, Intersect

Create Animated Bargraph

Build tank with level animation:

1. Draw rectangle (tank)
2. Add inner rectangle (liquid)
3. Liquid properties:
   • Fill: Blue gradient
   • Height: Bind to expression

csharp

   @Tag.Tank_Level * TankHeight / 100

1. Clip to tank bounds

Rotation Animation

Create rotating equipment:

Pump Impeller:

1. Draw impeller shape
2. 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

• [Working with Symbols] - Reusable animations
• [Create Dashboards] - Animated KPIs
• [Vector Graphics Drawing] - Advanced drawing

In this section...