Graphic Editor Graphic Page Tutorial
Help Contents
- Fernhill SCADA
- Help
- Graphic Editor
- Tutorials
- Graphic Page
Introduction
This tutorial will take you through the steps to create a simple
SCADA or
HMI graphic page similar to this:
The tutorial is structured in 8 parts:
- Create the folder to work in
- Create the tags
- Obtain the graphic symbols
- Add and configure the tank symbol
- Add and configure the valve symbols
- Add and configure the pump symbols
- Add dynamic text
- Test the graphic page
Part 1: Create the folder to work in
A. Create a new Folder:
- In the Tag Window select the root folder (or a suitable destination folder).
- Right-click and select Add new folder.
- Enter a suitable name, for example: Simple Process.
- 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:
- Select the folder Simple Process you created in part 1.
- Right-click and select Add new tag, followed by Random, followed by Random Analog Data Point Tag.
- Enter the name Tank Level, and press Return to confirm the change of name.
-
In the Properties Window, enter these properties:
Property | Value |
MaxScale | 8 |
HistoricEnable | True |
HistoricSignificantChange | 0.1 |
NominalRange | 4 |
NominalValue | 4 |
StepValue | 0.5 |
B. Add the pump state tags:
- Select the folder Simple Process you created in part 1.
- Right-click and select Add new tag, followed by Random, followed by Random Digital Data Point Tag.
- Enter the name Pump 1, and press Return to confirm the change of name.
-
In the Properties Window, enter these properties:
Property | Value |
EventSeverity | 200 |
TextState0 | Stopped |
TextState1 | Running |
ChangeProbability | 0.25 |
Setting EventSeverity to 200 ensures the digital state changes are recorded in the Event Log.
- Repeat steps 1 to 4 to create a second pump state tag called Pump 2.
C. Add a temperature tag:
- Select the folder Simple Process you created in part 1.
- Right-click and select Add new tag, followed by Random, followed by Random Analog Data Point Tag.
- Enter the name Temperature, and press Return to confirm the change of name.
-
In the Properties Window, enter these properties:
Property | Value |
MaxScale | 100 |
MinScale | 0 |
Units | °C |
HistoricEnable | True |
HistoricSignificantChange | 0.1 |
NominalRange | 5.0 |
NominalValue | 37.0 |
StepValue | 0.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:
- Select the folder Simple Process you created in part 1.
- Right-click and select Add new tag, followed by Core, followed by Graphic.
- Enter the name Process Page, and press Return to confirm the change of name.
At this stage the folder you created should look like:
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:
- In the Tag Window select the root folder.
- Right-click and select Import example....
- Select the file Tutorial Symbols.
- Click Open to complete the import.
Part 4: Add and configure the tank symbol
A. To add the tank symbol to the canvas:
- In the Tag Window, double-click the Process Page tag you created in part 2 to open the Graphic Editor.
- Locate the Tank Symbol in the Tag Window.
-
Drag the Tank Symbol onto the canvas:
Note: You can drag any tag onto the canvas.
The options available in the menu will depend on the type of tag being placed.
-
Select Embed Graphic to embed the tank symbol on the page:
-
Resize the embedded tank symbol vertically to see the text value:
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:
-
In the Properties Window select the VariableBindings property
and click the Browse button
to open
the Embedded Graphic Bindings Editor:
- Right-click the FillLevel variable and choose Select tag reference... to open the Browse Tag Reference dialog.
-
Select the
Tank Level entry that corresponds to the tank level tag added in part 2.
Make sure the Relative reference option is checked.
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.
- Click OK to close the Browser Tag Reference dialog.
-
Repeat steps 2 to 4 to configure these bindings:
Variable | Data Binding |
TagForced | %".Tank Level.IsForced" |
TagQuality | %".Tank Level.Quality" |
-
The data bindings should now look like:
- Click OK to close the Embedded Graphic Binding Editor.
-
In the Properties Window select the ActionButtonUp property and
click the Browse button
to
open the Operator Action Editor:
-
Enter this code:
StandardTagMenu( %".Tank Level.FullName", '' )
Note: The StandardTagMenu Function is used to display the standard tag menu.
- Click OK to close the Operator Action Editor.
- Click the Save button
to save your work.
D. Check the graphic page
- In the Tag Window, select the Tank Level tag created in part 2.
-
Select the 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
-
Click the tank to open the Standard Tag Menu:
Confirm a Plot Editor opens showing the history of the tag.
- Close the Plot Editor.
Part 5: Add and configure the valve symbols
A. Add the first valve:
- Locate the Valve Symbol in the Tag Window.
-
Drag the Valve Symbol onto the canvas:
Note: You can drag any tag onto the canvas.
The options available in the menu will depend on the type of tag being placed.
-
Select Embed Graphic to embed the valve symbol on the page:
-
Resize the embedded valve symbol so that:
- It is 20 canvas units high and 20 canvas units wide.
- The bottom of the valve symbol aligns with the bottom of the tank.
B. Data bind the first valve:
-
In the Properties Window select the VariableBindings property and click the Browse button
to open the Embedded Graphic Bindings Editor:
- Right-click the ValveOpen variable and choose Select tag reference... to open the Browse Tag Reference dialog.
-
Select the
Pump 1 entry that corresponds to the first pump tag added in part 2.
Make sure the Relative reference option is checked.
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.
- Click OK to close the Browser Tag Reference dialog.
-
Repeat steps 2 to 4 to configure this additional binding:
Variable | Data Binding |
ActuatorColor | %".Pump 1.Color" |
- Click OK to close the Embedded Graphic Binding Editor.
C. Add the second valve
- Copy and paste the first valve to create the second valve.
-
Reposition the second valve to be just above the first:
Note: At this stage, the second valve will be data bound to the tag Pump 1.
- In the Properties Window select the VariableBindings property and click the Browse button
to open the Embedded Graphic Bindings Editor. - Right-click the ActuatorColor variable and select Edit Data Binding... to open the Data Binding Editor.
-
Manually change the reference from Pump 1 to Pump 2:
- Click OK to close the Data Binding Editor.
-
Repeat steps 4 to 6 for the ValveOpen variable to change the reference from Pump 1 to Pump 2:
- Click OK to close the Embedded Graphic Binding Dialog.
D. Add static lines:
- Select the Add Line Tool
. -
Holding the shift key down, draw a horizontal line from right side of the tank to the left side of Valve 1:
-
Add additional lines to link up pump 2:
- Click the Save button
to save your work.
Part 6: Add and configure the Pump Symbols
A. Add the first pump:
- Select the Select Shape Tool

- Locate the Pump Symbol in the Tag Window.
-
Drag the Pump Symbol onto the canvas. When the pop-up menu opens select Embed Graphic to place the graphic symbol on the page:
-
Resize the embedded pump symbol so that:
- It is 20 canvas units high and 25 canvas units wide.
- The inlet is aligned with the pump.
B. Data bind the first pump:
-
In the Properties Window select the VariableBindings property and click the Browse button
to open the Embedded Graphic Bindings Editor:
-
Click the
plus symbol to expand the PumpState 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.
- Right-click the PumpState.Run variable and choose Select tag reference... to open the Browse Tag Reference dialog.
-
Select the
Pump 1 entry that corresponds to the first pump tag added in part 2.
Make sure the Relative reference option is checked.
- Click OK to close the Browser Tag Reference dialog.
-
Repeat steps 2 to 4 to configure these additional bindings:
Variable | Data Binding |
PumpState.Quality | %".Pump 1.Quality" |
PumpState.Forced | %".Pump 1.IsForced" |
- Click OK to close the Embedded Graphic Binding Editor.
C. Add the second pump
- Copy and paste the first pump to create the second pump.
-
Reposition the second pump to be just above the first:
Note: At this stage, the second pump will be data bound to the tag Pump 1.
- In the Properties Window select the VariableBindings property and click the Browse button
to open the Embedded Graphic Bindings Editor. - Right-click the PumpState.Run variable and select Edit Data Binding... to open the Data Binding Editor.
-
Manually change the reference from Pump 1 to Pump 2:
- Click OK to close the Data Binding Editor.
-
Repeat steps 4 to 6 for the PumpState.Quality and PumpState.Forced variables to change these references from Pump 1 to Pump 2:
- Click OK to close the Embedded Graphic Binding Dialog.
D. Draw static lines
- Select the Add Line Tool
. -
Holding the shift key down, draw a horizontal lines between each valve and pump:
- Click the Save button
to save your work.
Part 7: Add dynamic text
A. Add the tank temperature:
- Locate the Temperature tag you created in part 2 in the Tag Window.
-
Drag the temperature tag onto the graphic page near the top of the tank:
-
Select Current Value and Units to add Text and automatically bind it to the Temperature tag:
B. Add the pump states:
- Locate the Pump 1 tag you created in part 2 in the Tag Window.
-
Drag the pump 1 tag onto the graphic page just below the pump 1 symbol:
- Select Current State Description to add Text and automatically bind it to the Pump 1 tag.
-
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:
- Click the Save button
to save your work.
Part 8: Test the final graphic
- Select the Run Tool
. -
Click the Temperature value and select View Trend.
Confirm a trend of the temperature value opens. Close the trend. -
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. -
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.