Graphic Editor Pump Symbol Tutorial

Help Contents

Introduction

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

Pump Symbol

The tutorial is structured in 6 parts:

  1. Create the graphic symbol tag
  2. Draw the outline
  3. Draw the rotor blades
  4. Add Parameters
  5. Data Bind the Shapes
  6. Test the symbol

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

Part 1 - Create the Graphic Page Tag

A. Create a new Graphic Page Tag:

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

Part 2 - Draw the outline

A. Start by drawing a circle:

  1. Select the Add Ellipse Tool Add Ellipse Tool Icon.
  2. 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.

  3. Holding the Shift key down, draw a circle 70 canvas units high:
    Initial circle

    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:

  1. Select the Pan and Zoom Tool Pan and Zoom Icon.
  2. Move the cursor to the top right of the circle and roll the mouse wheel forwards a few clicks to zoom in.
    Zoomed in circle
  3. Select the Pen Tool Pen Tool Icon.
  4. Use the Pen Tool to add four additional points to the top right quadrant of the circle: Additional points
  5. Holding the Alt key down, convert points 1, 3 & 4 to straight lines.
    Convert curves to straight lines
  6. Select the Select Point Tool Select point tool icon
  7. Move point 4 so the top of the circle extends horizontally:
    Move point 4
  8. Move point 3 to complete the outflow:
    Move point 3

C. Adding a rectangle to represent the inlet:

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

Part 3 - Draw the rotor blades

A. Create the first blade using the Pen Tool:

  1. Select the Pen Tool Pen Tool Icon.
  2. Holding the shift key down, click on the top of the circle and drag right approximately 5 canvas units:
    Start curve using the pen tool

    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.

  3. Again holding the shift key down, click on the center of the circle and drag left approximately 3 - 4 canvas units:
    Draw the bottom of the blade using the pen tool
  4. Click on the first point drawn to close the shape:
    Finish the blade outline
  5. Select the Select Shape Tool Select Shape Tool Icon:
    Finished selected blade
  6. 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.

  7. Drag the transformation center Transformation Center, currently at the top of the shape, to the center of the circle:
    Move transformation center

    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°:

  1. With the first blade selected, press Ctrl-C then Ctrl-V to copy and paste the first blade.
    Created the second 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.

  2. 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 Top Right Rotation Cursor.
  3. Holding the shift key down, rotate the shape by 90° clockwise:
    Rotate the second blade
  4. Drag the outline of the second blade to move it into position:
    Move the second blade
  5. Repeat steps 1 to 4 two more times to add blades 3 and 4:
    Completed pump blades
  6. Click the Save button Save button to save your work.

Part 4 - Add Parameters

A. Setup the pump parameters:

  1. Select the Canvas Properties Tool Canvas Properties Tool.
  2. Select the GlobalBindings property and then click on the Property Browse Button button to open the Global Bindings Editor.
  3. 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.

  4. Click OK to close the Global Bindings Editor.

Part 5 - Data Bind the Shapes

A. Animating the pump blades:

  1. Holding the Shift key down, click on the outline of all four blades to select them:
    All 4 blades selected

    Note: If you make a mistake during the selection, release the Shift key and click outside of the pump to cancel the selection. Then try selecting the blades again.

  2. In the Properties Window select the DataBindRotationSpeed property and click the Browse button Property Browse Button to open the Data Bindings Editor.
  3. 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.

  4. Click OK to close the Data Bindings Editor.

B. Using Color to Indicate the Pump State:

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

    Note: If you make a mistake during the selection, release the Shift key and click outside of the pump to cancel the selection. Then try selecting the shapes again.

  3. In the Properties Window select the DataBindFillColor property and click the Browse button Property Browse Button to open the Data Bindings Editor.
  4. 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"
    )
  5. Click OK to close the Data Bindings Editor.
  6. Click the Save button Save button to save your work.

Part 6 - Test the final symbol

A. To test the pump:

  1. Select the Run Tool Run Tool.
  2. Right click on the graphic editor canvas and select Global Variables:
    Global Variables
  3. Click on the PumpRun plus sign Tree view plus icon to expand the branch: Global Variables

    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.

  4. Click on the PumpState.Run value FALSE to toggle it to TRUE.
    Check the pump rotor blades are spinning.
  5. Click on the PumpSpeed value 180. Change the value to 90 and press Enter.
    Check the pump rotation speed has slowed.
  6. Click on 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.