Graphic Editor Tank Symbol Tutorial

Help Contents

Introduction

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

Tank Symbol

The tutorial is structured in 8 parts:

  1. Create the graphic symbol tag
  2. Draw the tank outline
  3. Draw the tank cut-out
  4. Draw the fill level indicator
  5. Draw the fill level text
  6. Add Parameters
  7. Data Bind the Shapes
  8. 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: Tank 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 rectangle:

  1. Select the Add Rectangle Tool Add Rectangle 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. Draw a rectangle 45 x 60 canvas units:
    Initial rectangle

    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:

  1. Select the Pen Tool Pen Tool Icon.
  2. Use the Pen Tool to add two additional points to the top edge of the rectangle:
    Additional points
  3. Select the Select Point Tool Select point tool icon
  4. Move the two points to form an approximation of the dome:
    Approximate dome
  5. Select the Pen Tool Pen Tool Icon.
  6. Holding both the Shift and Alt keys down, drag the top right point to the right to convert the line to a curve:
    Top right curve
  7. Holding both the Shift and Alt keys down, drag the top left point to the right to convert the line to a curve:
    Top left curve

C. Add a 3D shading effect:

  1. Select the Select Shape Tool Select shape tool icon
  2. In the Properties Window select the FillColor property and click the Browse button Property Browse Button to open the Color Gradient Editor.
  3. Add two additional gradient stops at approximately 60% and 100%. For the center gradient stop, choose a lighter shade of gray:
    Set Color Gradient
  4. Click OK to change the fixed color to a color gradient:
    Completed tank outline
  5. Click the Save button Save button to save your work.

Part 3 - Add a cut-out

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

  1. Select the Pen Tool Pen Tool Icon.
  2. Keeping within the boundary of the tank, draw a sequence of points to form a jagged shape:
    Cut-out part 1
  3. Select the Select Shape Tool Select shape tool icon
  4. Holding the Shift key down, click on the tank outline to select both the tank and the jagged outline just created:
    Cut-out part 2
  5. Right click and select Make Compound Path. Press Ctrl+Shift+A to cancel the selection:
    Cut-out part 3
  6. Click the Save button Save button to save your work.

Part 4 - Add the fill level indicator

A. Add a rectangle to represent the fill level:

  1. Select the Add Rectangle Tool Add Rectangle Tool Icon.
  2. Draw a rectangle only covering the cut-out created in the previous step:
    Draw rectangle
  3. Select the Select Shape Tool Select shape tool icon
  4. Drag the transformation center Transformation Center, currently at the center of the new rectangle, to the bottom of the rectangle:
    Move transform center
  5. In the Properties Window select the FillColor property and change the value to DarkGreen.
    Set fill color
  6. Right click and select Arrange followed by Send to Back:
    Fill level moved to back
  7. Click the Save button Save button to save your work.

Part 5 - Add the fill level text

A. Draw text to show the fill level:

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

Part 6 - Add Parameters

A. Setup the tank 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
        (* 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:

  4. Click OK to close the Global Bindings Editor.

Part 7 - Data Bind the Shapes

A. Animate the fill level indicator:

  1. Select the Select Shape Tool Select shape tool icon
  2. Press Ctrl+Shift+A to make sure nothing is selected.
  3. Click on the fill level rectangle to select it.
  4. In the Properties Window select the DataBindScaleY property and click the Browse button Property Browse Button to open the Data Bindings Editor.
  5. 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.

  6. Click OK to close the Data Bindings Editor.

Using Color to Indicate Tag State:

  1. Keep the fill level rectangle selected.
  2. In the Properties Window select the DataBindFillColor property and click the Browse button Property Browse Button to open the Data Bindings Editor.
  3. Enter this code:
    (* Use the function declared in GlobalBindings *)
    GetStateColor()
  4. Click OK to close the Data Bindings Editor.

B. Show the fill level as text:

  1. Press Ctrl+Shift+A to make sure nothing is selected.
  2. Select the Text Item added in step 5.
  3. In the Properties Window select the DataBindText property and click the Browse button Property Browse Button to open the Data Bindings Editor.
  4. Enter this code:
    ROUNDSD( FillLevel, 4 )
                

    Note: The ROUNDSD Function is used to round the fill level to 4 significant digits.

  5. Click OK to close the Data Bindings Editor.

C. Apply the tag state color to the text:

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

  4. Click OK to close the Data Bindings Editor.

D. Move the text with the fill level:

  1. Press Ctrl+Shift+A to make sure nothing is selected.
  2. Select both the Text and Line added in step 5.
  3. In the Properties Window select the DataBindOffsetY property and click the Browse button Property Browse Button to open the Data Bindings Editor.
  4. Enter this code:
     - LIMIT( 0.0, FillLevel, FullScale ) * 50 / FullScale
                
  5. Click OK to close the Data Bindings Editor.
  6. Click the Save button Save button to save your work.

Part 8 - Test the final symbol

A. To test the tank:

  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 FillLevel value 4. Change the value to 7 and press Enter.
    Check the level indicator has changed.
  4. 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.