Graphic Editor Valve Symbol Tutorial

Help Contents

Introduction

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

Valve symbol

The tutorial is structured in 6 parts:

  1. Create the graphic symbol tag
  2. Draw the valve symbol
  3. Draw the actuator
  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: Valve 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 valve symbol

A. Draw two triangles:

  1. Select the Add Horizontal Triangle Tool Add Horizontal Triangle 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. Drag left and down to draw a triangle 15 x 20 canvas units:
    First triangle

    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 triangle.

  4. Move the cursor to approximately the position X:80 and Y:80.
  5. Drag right and down to draw another triangle 15 x 20 canvas units:
    Second triangle

    Note: Dragging to the right creates a triangle facing in the opposite direction to the first triangle.

Part 3 - Draw the actuator

A. Drawing and modifying an ellipse to form the actuator:

  1. Select the Add Ellipse Tool Add Ellipse Tool Icon.
  2. Move the cursor to a free area of the canvas and draw an ellipse 30 x 20 canvas units:
    Initial ellipse
  3. Select the Pen Tool Pen Tool Icon.
  4. Holding the Alt key down, convert the right point to have straight lines:
    Convert right point
  5. Holding the Alt key down, convert the left point to have straight lines:
    Convert left point
  6. Release the Alt key, and click on the bottom point to delete it:
    Delete bottom point
  7. Select the Select Point Tool Select point tool icon
  8. Click on the top point of the ellipse shape to select it:
    Select top point
  9. Holding the shift key down, drag the right control point right:
    Drag right control point
  10. Holding the shift key down, drag the left control point left:
    Drag left control point

B. Moving the actuator into position:

  1. Select the Select Shape Tool Select shape tool icon
  2. If not selected, select the modified ellipse by clicking it:
    Selected actuator
  3. Drag the right resize handle 10 canvas units to the left:
    Resized actuator
  4. Move the modified ellipse into position:
    Moved actuator

C. Adding a link between the actuator and the valve:

  1. Select the Add Line Tool Add line tool icon
  2. Draw a line between the actuator and the valve:
    Link actuator
  3. Click the Save button Save button to save your work.

Part 4 - Add Parameters

A. Setup the valve 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
        (* Whether the valve is open (TRUE) or closed (FALSE) *)
        ValveOpen : BOOL;
    
        (* [ColorValue] The color of the actuator *)
        ActuatorColor : DWORD;
    END_VAR

    Note: The [ColorValue] attribute in the comment tells the data binder this variable represents a color value. If a string value is written to ActuatorColor, the data binder will interpret the string value as a color name. This allows you to bind a named color value, for example 'Red'.

  4. Click OK to close the Global Bindings Editor.

Part 5 - Data Bind the Shapes

A. Animating the valve open state:

  1. Select the Select Shape Tool Select shape tool icon
  2. Press Ctrl+Shift+A to make sure nothing is selected.
  3. Select both triangles by dragging a rectangle that intersects the bottom half of each triangle:
    Select both rectangles
  4. In the Properties Window select the DataBindFillVisible property and click the Browse button Property Browse Button to open the Data Bindings Editor.
  5. Enter this code:

    (* Draw a filled shape if the valve is open *)
    ValveOpen

  6. Click OK to close the Data Bindings Editor.

B. Animating the actuator

  1. Click on the actuator part of the symbol to select it:
    Select actuator
  2. In the Properties Window select the DataBindFillColor property and click the Browse button Property Browse Button to open the Data Binding Editor.
  3. Enter this code:
    ActuatorColor
  4. Click OK to close the Data Binding Editor.
  5. Click the Save button Save button to save your work.

Part 6 - Test the final symbol

A. To test the valve:

  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 ValveOpen value FALSE to toggle it to TRUE.
    Check the valve now shows open.
  4. Click on the ValveOpen value TRUE to toggle it to FALSE.
    Check the valve now shows closed.

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.