Graphic Editor Graphic Page Tutorial

Help Contents
  1. Fernhill SCADA
  2. Help
  3. Graphic Editor
  4. Tutorials
  5. Graphic Page

Introduction

This tutorial will take you through the steps to create a simple SCADA or HMI graphic page similar to this:

Example graphic page

The tutorial is structured in 8 parts:

  1. Create the folder to work in
  2. Create the tags
  3. Obtain the graphic symbols
  4. Add and configure the tank symbol
  5. Add and configure the valve symbols
  6. Add and configure the pump symbols
  7. Add dynamic text
  8. Test the graphic page

Part 1: Create the folder to work in

A. Create a new Folder:

  1. In the Tag Window select the root folder (or a suitable destination folder).
  2. Right-click and select Add new folder.
  3. Enter a suitable name, for example: Simple Process.
  4. Press return to complete the rename of the folder from its default name to your chosen name.

Part 2: Create the tags

Add the tank level data source tag:

  1. Select the folder Simple Process you created in part 1.
  2. Right-click and select Add new tag, followed by Random, followed by Random Analog Data Point Tag.
  3. Enter the name Tank Level, and press Return to confirm the change of name.
  4. In the Properties Window, enter these properties:

    PropertyValue
    MaxScale8
    HistoricEnableTrue
    HistoricSignificantChange0.1
    NominalRange4
    NominalValue4
    StepValue0.5

B. Add the pump state tags:

  1. Select the folder Simple Process you created in part 1.
  2. Right-click and select Add new tag, followed by Random, followed by Random Digital Data Point Tag.
  3. Enter the name Pump 1, and press Return to confirm the change of name.
  4. In the Properties Window, enter these properties:

    PropertyValue
    EventSeverity200
    TextState0Stopped
    TextState1Running
    ChangeProbability0.25

    Setting EventSeverity to 200 ensures the digital state changes are recorded in the Event Log.

  5. Repeat steps 1 to 4 to create a second pump state tag called Pump 2.

C. Add a temperature tag:

  1. Select the folder Simple Process you created in part 1.
  2. Right-click and select Add new tag, followed by Random, followed by Random Analog Data Point Tag.
  3. Enter the name Temperature, and press Return to confirm the change of name.
  4. In the Properties Window, enter these properties:

    PropertyValue
    MaxScale100
    MinScale0
    Units°C
    HistoricEnableTrue
    HistoricSignificantChange0.1
    NominalRange5.0
    NominalValue37.0
    StepValue0.2

    Note: To enter the ° (degree) character in the Units field, hold the ALT key down and enter 248 on the numeric keypad. The ° (degree) character will appear when you release the ALT key.

D. Add the graphic page tag:

  1. Select the folder Simple Process you created in part 1.
  2. Right-click and select Add new tag, followed by Core, followed by Graphic.
  3. Enter the name Process Page, and press Return to confirm the change of name.

At this stage the folder you created should look like:

Tag list

Part 3: Obtain the graphic symbols

Parts 4, 5 and 6 of this tutorial use these three symbols to build most of the active content of the page:

You can follow the steps in the tutorial links to create these symbols. As an alternative you can import the symbols from the samples folder:

  1. In the Tag Window select the root folder.
  2. Right-click and select Import example....
  3. Select the file Tutorial Symbols.
  4. Click Open to complete the import.

Part 4: Add and configure the tank symbol

A. To add the tank symbol to the canvas:

  1. In the Tag Window, double-click the Process Page tag you created in part 2 to open the Graphic Editor.
  2. Locate the Tank Symbol in the Tag Window.
  3. Drag the Tank Symbol onto the canvas:
    Embed graphic menu

    Note: You can drag any tag onto the canvas. The options available in the menu will depend on the type of tag being placed.

  4. Select Embed Graphic to embed the tank symbol on the page:
    Embedded tank symbol
  5. Resize the embedded tank symbol vertically to see the text value:
    Embedded tank symbol resized

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

B. To bind the tank symbol to its data source:

  1. In the Properties Window select the VariableBindings property and click the Browse button Property Browse Button to open the Embedded Graphic Bindings Editor:
    Tank bindings
  2. Right-click the FillLevel variable and choose Select tag reference... to open the Browse Tag Reference dialog.
  3. Select the Tag icon Tank Level entry that corresponds to the tank level tag added in part 2. Make sure the Relative reference option is checked.
    Select tag reference

    Note: A relative reference begins with a period (.) and indicates a reference to a tag in the same folder as the graphic page. Relative references help reduce maintenance overhead when you move folders from one location to another, rename folders, or copy folders.

  4. Click OK to close the Browser Tag Reference dialog.
  5. Repeat steps 2 to 4 to configure these bindings:

    VariableData Binding
    TagForced%".Tank Level.IsForced"
    TagQuality%".Tank Level.Quality"
  6. The data bindings should now look like:
    Configured bindings
  7. Click OK to close the Embedded Graphic Binding Editor.

C. Add the Standard Tag Menu to the tank:

  1. In the Properties Window select the ActionButtonUp property and click the Browse button Property Browse Button to open the Operator Action Editor:
  2. Enter this code:
    StandardTagMenu( %".Tank Level.FullName", '' )

    Note: The StandardTagMenu Function is used to display the standard tag menu.

  3. Click OK to close the Operator Action Editor.
  4. Click the Save button Save button to save your work.

D. Check the graphic page

  1. In the Tag Window, select the Tank Level tag created in part 2.
  2. Select the Run Tool Run Tool.

    Confirm the tank level updated in real time and matches the data shown in the Tag Status tab of the Status Monitor Window

  3. Click the tank to open the Standard Tag Menu:
    Standard tag menu

    Confirm a Plot Editor opens showing the history of the tag.

  4. Close the Plot Editor.

Part 5: Add and configure the valve symbols

A. Add the first valve:

  1. Locate the Valve Symbol in the Tag Window.
  2. Drag the Valve Symbol onto the canvas:
    Embed graphic menu

    Note: You can drag any tag onto the canvas. The options available in the menu will depend on the type of tag being placed.

  3. Select Embed Graphic to embed the valve symbol on the page:
    Embedded valve symbol
  4. Resize the embedded valve symbol so that: Embedded valve symbol resized

B. Data bind the first valve:

  1. In the Properties Window select the VariableBindings property and click the Browse button Property Browse Button to open the Embedded Graphic Bindings Editor:
    Valve bindings
  2. Right-click the ValveOpen variable and choose Select tag reference... to open the Browse Tag Reference dialog.
  3. Select the Tag icon Pump 1 entry that corresponds to the first pump tag added in part 2. Make sure the Relative reference option is checked.
    Select tag reference

    Note: We will be using the Pump 1 signal to animate both the valve and the associated pump. The pump will be added to the drawing canvas in part 6.

  4. Click OK to close the Browser Tag Reference dialog.
  5. Repeat steps 2 to 4 to configure this additional binding:

    VariableData Binding
    ActuatorColor%".Pump 1.Color"
  6. Click OK to close the Embedded Graphic Binding Editor.

C. Add the second valve

  1. Copy and paste the first valve to create the second valve.
  2. Reposition the second valve to be just above the first:
    Copy and paste the 2nd valve

    Note: At this stage, the second valve will be data bound to the tag Pump 1.

  3. In the Properties Window select the VariableBindings property and click the Browse button Property Browse Button to open the Embedded Graphic Bindings Editor.
  4. Right-click the ActuatorColor variable and select Edit Data Binding... to open the Data Binding Editor.
  5. Manually change the reference from Pump 1 to Pump 2:
    Manually edit the data binding
  6. Click OK to close the Data Binding Editor.
  7. Repeat steps 4 to 6 for the ValveOpen variable to change the reference from Pump 1 to Pump 2:
    Pump 2 data bindings
  8. Click OK to close the Embedded Graphic Binding Dialog.

D. Add static lines:

  1. Select the Add Line Tool Add Line Tool Icon.
  2. Holding the shift key down, draw a horizontal line from right side of the tank to the left side of Valve 1:
    First static line
  3. Add additional lines to link up pump 2:
    Completed static line
  4. Click the Save button Save button to save your work.

Part 6: Add and configure the Pump Symbols

A. Add the first pump:

  1. Select the Select Shape Tool Select Shape Tool Icon
  2. Locate the Pump Symbol in the Tag Window.
  3. Drag the Pump Symbol onto the canvas. When the pop-up menu opens select Embed Graphic to place the graphic symbol on the page:
    Embedded pump symbol
  4. Resize the embedded pump symbol so that: Embedded pump symbol resized

B. Data bind the first pump:

  1. In the Properties Window select the VariableBindings property and click the Browse button Property Browse Button to open the Embedded Graphic Bindings Editor:
    Pump bindings
  2. Click the Plus sign icon plus symbol to expand the PumpState bindings:
    Expanded pump bindings

    Note: If the variable names are truncated, double=click the dividing line between the Variable and Data Binding column headings. This will automatically resize the Variable column.

  3. Right-click the PumpState.Run variable and choose Select tag reference... to open the Browse Tag Reference dialog.
  4. Select the Tag icon Pump 1 entry that corresponds to the first pump tag added in part 2. Make sure the Relative reference option is checked.
    Select tag reference
  5. Click OK to close the Browser Tag Reference dialog.
  6. Repeat steps 2 to 4 to configure these additional bindings:

    VariableData Binding
    PumpState.Quality%".Pump 1.Quality"
    PumpState.Forced%".Pump 1.IsForced"
  7. Click OK to close the Embedded Graphic Binding Editor.

C. Add the second pump

  1. Copy and paste the first pump to create the second pump.
  2. Reposition the second pump to be just above the first:
    Copy and paste the 2nd pump

    Note: At this stage, the second pump will be data bound to the tag Pump 1.

  3. In the Properties Window select the VariableBindings property and click the Browse button Property Browse Button to open the Embedded Graphic Bindings Editor.
  4. Right-click the PumpState.Run variable and select Edit Data Binding... to open the Data Binding Editor.
  5. Manually change the reference from Pump 1 to Pump 2:
    Manually edit the data binding
  6. Click OK to close the Data Binding Editor.
  7. Repeat steps 4 to 6 for the PumpState.Quality and PumpState.Forced variables to change these references from Pump 1 to Pump 2:
    Valve 2 data bindings
  8. Click OK to close the Embedded Graphic Binding Dialog.

D. Draw static lines

  1. Select the Add Line Tool Add Line Tool Icon.
  2. Holding the shift key down, draw a horizontal lines between each valve and pump:
    Completed static lines
  3. Click the Save button Save button to save your work.

Part 7: Add dynamic text

A. Add the tank temperature:

  1. Locate the Temperature tag you created in part 2 in the Tag Window.
  2. Drag the temperature tag onto the graphic page near the top of the tank:
    Drag temperature tag
  3. Select Current Value and Units to add Text and automatically bind it to the Temperature tag:
    Drop temperature tag

B. Add the pump states:

  1. Locate the Pump 1 tag you created in part 2 in the Tag Window.
  2. Drag the pump 1 tag onto the graphic page just below the pump 1 symbol:
    Drag pump 1 tag
  3. Select Current State Description to add Text and automatically bind it to the Pump 1 tag.
  4. Repeat steps 1 to 3 to drag the Pump 2 tag onto the graphic page just above the pump 2 symbol. When complete the graphic page should now look like:
    Graphic page
  5. Click the Save button Save button to save your work.

Part 8: Test the final graphic

  1. Select the Run Tool Run Tool.
  2. Click the Temperature value and select View Trend.
    Confirm a trend of the temperature value opens. Close the trend.
  3. Click the Pump 2 Text and select Force value.... Check the Value field and click OK.
    Confirm pump 2 and valve 2 now show a forced indication.
  4. Click the Pump 2 Text and select Remove Force. Click OK to confirm the tag command.
    Confirm pump 2 and valve 2 are now showing normal.

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.

Fernhill SCADA Version 4.1 (20231126.1). Copyright © 2012-2023 Fernhill Software Ltd: All rights reserved.