Graphic Editor Valve Symbol Tutorial

Introduction

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

Valve symbol

The tutorial is structured in 6 parts:

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

A. Draw two triangles:

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

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.
Move the cursor to approximately the position X:80 and Y:80.
Drag right and down to draw another triangle 15 x 20 canvas units:

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:

Select the Add Ellipse Tool .
Move the cursor to a free area of the canvas and draw an ellipse 30 x 20 canvas units:
Select the Pen Tool .
Holding the Alt key down, convert the right point to have straight lines:
Holding the Alt key down, convert the left point to have straight lines:
Release the Alt key, and click the bottom point to delete it:
Select the Select Point Tool
Click the top point of the ellipse shape to select it:
Holding the shift key down, drag the right control point right:
Holding the shift key down, drag the left control point left:

B. Moving the actuator into position:

Select the Select Shape Tool
If not selected, select the modified ellipse by clicking it:
Drag the right resize handle 10 canvas units to the left:
Move the modified ellipse into position:

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

Select the Add Line Tool
Draw a line between the actuator and the valve:
Click the Save button to save your work.

Part 4: Add Parameters

A. Configure the valve 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
    (* 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'.
Click OK to close the Global Bindings Editor.

Part 5: Data Bind the Shapes

A. Animating the valve open state:

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

(* Draw a filled shape if the valve is open *)
ValveOpen
Click OK to close the Data Bindings Editor.

B. Animating the actuator

Click the actuator part of the symbol to select it:
In the Properties Window select the DataBindFillColor property and click the Browse button to open the Data Binding Editor.
Enter this code:
```
ActuatorColor
```
Click OK to close the Data Binding Editor.
Click the Save button to save your work.

Part 6: Test the final symbol

A. To test the valve:

Select the Run Tool .
Right-click the graphic editor canvas and select Global Variables:
Click the ValveOpen value FALSE to toggle it to TRUE.
Check the valve now shows open.
Click 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.

For information about editing graphic pages in Fernhill SCADA.

For the meaning of terms used in Fernhill SCADA.