Graphic Editor Tank Symbol Tutorial

Help Contents

Introduction

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

The tutorial is structured in 8 parts:

Create the graphic symbol tag
Draw the tank outline
Draw the tank cut-out
Draw the fill level indicator
Draw the fill level text
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: Tank 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 rectangle:

Select the Add Rectangle 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.
Draw a rectangle 45 x 60 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 rectangle.

B. Edit the top of the tank to represent a dome:

Select the Pen Tool .
Use the Pen Tool to add two additional points to the top edge of the rectangle:
Select the Select Point Tool
Move the two points to form an approximation of the dome:
Select the Pen Tool .
Holding both the Shift and Alt keys down, drag the top right point to the right to convert the line to a curve:
Holding both the Shift and Alt keys down, drag the top left point to the right to convert the line to a curve:

C. Add a 3D shading effect:

Select the Select Shape Tool
In the Properties Window select the FillColor property and click the Browse button to open the Color Gradient Editor.
Add two additional gradient stops at approximately 60% and 100%. For the center gradient stop, choose a lighter shade of gray:
Click OK to change the fixed color to a color gradient:
Click the Save button to save your work.

Part 3: Add a cut-out

A. Create the cut-out using the Pen Tool:

Select the Pen Tool .
Keeping within the boundary of the tank, draw a sequence of points to form a jagged shape:
Select the Select Shape Tool
Holding the Shift key down, click the tank outline to select both the tank and the jagged outline just created:
Right-click and select Make Compound Path. Press Ctrl+Shift+A to cancel the selection:
Click the Save button to save your work.

Part 4: Add the fill level indicator

A. Add a rectangle to represent the fill level:

Select the Add Rectangle Tool .
Draw a rectangle only covering the cut-out created in the previous step:
Select the Select Shape Tool
Drag the transformation center , currently at the center of the new rectangle, to the bottom of the rectangle:
In the Properties Window select the FillColor property and change the value to DarkGreen.
Right-click and select Arrange followed by Send to Back:
Click the Save button to save your work.

Part 5: Add the fill level text

A. Draw text to show the fill level:

Select the Add Text Tool .
Draw a text outline 25 x 10 canvas units aligned with the bottom of the fill level indicator:
In the Properties Window select the Text property and change the value to Value.
Select the Add Line Tool .
Holding the shift key down, draw a horizontal line from right side of the text to the bottom of the fill level indicator:
Click the Save button to save your work.

Part 6: Add Parameters

A. Configure the tank 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
    (* The fill level of the tank.  Range: 0 - FullScale *)
    FillLevel : REAL := 4.0;
    
    (* The full scale of the tank *)
    FullScale : REAL := 10.0;
    
    (* Tag quality *)
    TagQuality : INT := 192;
    
    (* Whether the tag is forced or not *)
    TagForced : BOOL;
END_VAR

(* Common function used in multiple data bindings *)
FUNCTION GetStateColor : WSTRING
    
    IF TagForced THEN
        GetStateColor := %"ForcedColor";
    ELSEIF TagQuality < 192 THEN
        GetStateColor := %"BadQualityColor";
    ELSE
        GetStateColor := "DarkGreen";
    END_IF
END_FUNCTION

Notes:

The comments are optional, but help to explain the intent of the global data and code.
The function GetStateColor is declared globally because it will be used in multiple data bindings later on in this tutorial.
The tag references %"ForcedColor" and %"BadQualityColor" are properties in the Database Root Tag.

Click OK to close the Global Bindings Editor.

Part 7: Data Bind the Shapes

A. Animate the fill level indicator:

Select the Select Shape Tool
Press Ctrl+Shift+A to make sure nothing is selected.
Click the fill level rectangle to select it.
In the Properties Window select the DataBindScaleY property and click the Browse button to open the Data Bindings Editor.

Enter this code:

(* Scale and clamp the fill level to the range 0 - 1 *)
LIMIT( 0.0, FillLevel, FullScale ) / FullScale

Note: The LIMIT Function is used to clamp the value between 0 and FullScale.

Click OK to close the Data Bindings Editor.

Using Color to Indicate Tag State:

Keep the fill level rectangle selected.
In the Properties Window select the DataBindFillColor property and click the Browse button to open the Data Bindings Editor.

Enter this code:

(* Use the function declared in GlobalBindings *)
GetStateColor()

Click OK to close the Data Bindings Editor.

B. Show the fill level as text:

Press Ctrl+Shift+A to make sure nothing is selected.
Select the Text added in step 5.
In the Properties Window select the DataBindText property and click the Browse button to open the Data Bindings Editor.
Enter this code:
```
ROUNDSD( FillLevel, 4 )
            
```
Note: The ROUNDSD Function is used to round the fill level to 4 significant digits.
Click OK to close the Data Bindings Editor.

C. Apply the tag state color to the text:

Keep the Text selected.
In the Properties Window select the DataBindTextColor property and click the Browse button to open the Data Bindings Editor.
Enter this code:
```
(* Use the function declared in GlobalBindings *)
GetStateColor()
```
Note: The ROUNDSD Function is used to round the fill level to 4 significant digits.
Click OK to close the Data Bindings Editor.

D. Move the text with the fill level:

Press Ctrl+Shift+A to make sure nothing is selected.
Select both the Text and Line added in step 5.
In the Properties Window select the DataBindOffsetY property and click the Browse button to open the Data Bindings Editor.

Enter this code:

 - LIMIT( 0.0, FillLevel, FullScale ) * 50 / FullScale

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

Part 8: Test the final symbol

A. To test the tank:

Select the Run Tool .
Right-click the graphic editor canvas and select Global Variables:
Click the FillLevel value 4. Change the value to 7 and press Enter.
Check the level indicator has changed.
Try entering different values for each variable and observe the effect.

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.