Graphic Editor Pump Symbol Tutorial

Help Contents

Introduction

This tutorial will take you through the steps to create an animated SCADA or HMI pump symbol similar to this:

The tutorial is structured in 6 parts:

Create the graphic symbol tag
Draw the outline
Draw the rotor blades
Add Parameters
Data Bind the Shapes
Test the symbol

If you make a mistake at any point, you can undo the last action by pressing Ctrl-Z.

Part 1: Create the Graphic Page Tag

A. Create a new Graphic Page Tag:

In the Tag Window select a suitable destination folder.
Right-click and select Add new tag, followed by Core, followed by Graphic.
Enter a suitable name, for example: Pump Symbol.
Press return to complete the rename of the tag from its default name to your chosen name.
Double-click the selected tag to open the Graphic Editor.

Part 2: Draw the outline

A. Start by drawing a circle:

Select the Add Ellipse Tool .
Move the cursor to approximately the position X:80 and Y:50.

Note: The grid is turned on by default and will round your movements to a multiple of 5 grid units.
Holding the Shift key down, draw a circle 70 canvas units high:

Note: The Current Action Indicator displays the size of the shape as you draw it. Use the indicator as you draw to accurately set the size of the circle. The default grid spacing is set to 5 canvas units. The circle shown has a diameter of 14 grid units, which equals 70 canvas units.

B. Edit the top right quadrant of the circle to represent the outflow:

Select the Pan and Zoom Tool .
Move the cursor to the top right of the circle and roll the mouse wheel forwards a few clicks to zoom in.
Select the Pen Tool .
Use the Pen Tool to add four additional points to the top right quadrant of the circle:
- Point 1 should be on the circle outline 20 grid units vertically from the top
- Point 2 should be just below point 1
- Points 3 & 4 should be evenly spaced between Point 1 and the top of the circle
Holding the Alt key down, convert points 1, 3 & 4 to straight lines.
Select the Select Point Tool
Move point 4 so the top of the circle extends horizontally:
Move point 3 to complete the outflow:

C. Adding a rectangle to represent the inlet:

Right-click a free area of the canvas and select Zoom to 100%.
Select the Add Rectangle Tool .
Draw a rectangle, 20 grid units high, centrally over the left side of the circle:
Right-click the rectangle and select Arrange, followed by Send to Back.
Press Ctrl+Shift+A to cancel the current selection. The drawing should now look like this:
Click the Save button to save your work.

Part 3: Draw the rotor blades

A. Create the first blade using the Pen Tool:

Select the Pen Tool .
Holding the shift key down, click the top of the circle and drag right approximately 5 canvas units:

Note: The Current Action Indicator displays the offset of the drag operation. Use the indicator to accurately see how far you have moved the cursor during the drag operation.
Again holding the shift key down, click the center of the circle and drag left approximately 3 - 4 canvas units:
Click the first point drawn to close the shape:
Select the Select Shape Tool :
In the Properties Window change the Style to Draw Outline Only.
Note: This step is a style choice, you could for example set the Style to Draw Shape Only, and choose a contrasting FillColor.
Drag the transformation center , currently at the top of the shape, to the center of the circle:

Note: When the rotation of the blade is animated in a later step the blade will rotate around this point.

B. Create the additional blades by copying and rotating 90°:

With the first blade selected, press Ctrl-C then Ctrl-V to copy and paste the first blade.

Note: The new blade will be pasted at the center of the canvas. It will probably appear in a different location relative to the pump outline you drew earlier.
Move the cursor until it just lies outside the top right corner of the selection rectangle. When the cursor is correctly positioned it will show the rotation cursor .
Holding the shift key down, rotate the shape by 90° clockwise:
Drag the outline of the second blade to move it in to position:
Repeat steps 1 to 4 two more times to add blades 3 and 4:
Click the Save button to save your work.

Part 4: Add Parameters

A. Configure the pump parameters:

Select the Canvas Properties Tool .
Select the GlobalBindings property and then click the button to open the Global Bindings Editor.

Enter this code:

VAR_GLOBAL
    PumpState : STRUCT
        (* Whether the pump is running (TRUE) or stopped (FALSE) *)
        Run : BOOL;
    
        (* Whether the pump has a fault (TRUE) or is normal (FALSE) *)
        Failed : BOOL;

        (* The data quality of the source tag *)
        Quality : INT := 192;
        
        (* Whether the data source is forced (TRUE) or not (FALSE) *)
        Forced : BOOL;
    END_STRUCT;

    (* The rotation speed of the blades on the screen in degrees per second *)
    PumpSpeed : LREAL := 180.0;
    
END_VAR

Note: The comments are optional, but help to explain the intent of the variable bindings.

Click OK to close the Global Bindings Editor.

Part 5: Data Bind the Shapes

A. Animating the pump blades:

Holding the Shift key down, click the outline of all four blades to select them:

Note: If you make a mistake during the selection, release the Shift key and click outside the pump to cancel the selection. Then try selecting the blades again.
In the Properties Window select the DataBindRotationSpeed property and click the Browse button to open the Data Bindings Editor.

Enter this code:

(* If the pump is running and not failed, rotate the blades at PumpSpeed, otherwise no rotation *)
SEL( PumpState.Run AND NOT PumpState.Failed, 0, PumpSpeed )

Note: The SEL Function is used to choose whether the pump blades rotate.

Click OK to close the Data Bindings Editor.

B. Using Color to Indicate the Pump State:

Click outside the pump to cancel the previous selection.
Holding the Shift key down, click the outline of the modified circle and the rectangle to select both shapes:

Note: If you make a mistake during the selection, release the Shift key and click outside the pump to cancel the selection. Then try selecting the shapes again.
In the Properties Window select the DataBindFillColor property and click the Browse button to open the Data Bindings Editor.

Enter this code:

(* Test whether forced *)
SEL( PumpState.Forced,

    (* Not forced, test the data source quality... *)
    SEL( PumpState.Quality >= 192,
    
        (* Bad quality *)
        %"BadQualityColor",
    
        (* Good quality *) 
        SEL(
            (* Test the pump failed state  *)
            PumpState.Failed, 
            'Silver', 
            'Red' 
        )
    ),

    (* Forced *)
    %"ForcedColor"
)

Click OK to close the Data Bindings Editor.
Click the Save button to save your work.

Part 6: Test the final symbol

A. To test the pump:

Select the Run Tool .
Right-click the graphic editor canvas and select Global Variables:
Click the PumpRun plus sign to expand the branch:
Note: If the variable names are truncated, double-click the dividing line between the Variable and Test Value column headings. This will automatically resize the Variable column.
Click the PumpState.Run value FALSE to toggle it to TRUE.
Check the pump rotor blades are spinning.
Click the PumpSpeed value 180. Change the value to 90 and press Enter.
Check the pump rotation speed has slowed.
Click the PumpState.Failed value FALSE to toggle it to TRUE.
Check the pump background is now drawn in red and the pump rotor blades have stopped.

Further Information

Graphic Editor Tutorials

For a list of all Graphic Editor tutorials.

Graphic Editor

For information about editing graphic pages in Fernhill SCADA.

Glossary

For the meaning of terms used in Fernhill SCADA.