Graphic Editor On-Off Button Tutorial

1. Fernhill SCADA
2. Help
3. Graphic Editor
4. Tutorials
5. On-Off Button

Introduction

This tutorial will take you through the steps to create an animated SCADA or HMI On-Off Button similar to this:

Note: When a user clicks on the button, the button toggles the state of a digital tag. This in turn toggles the button between the two states shown.

The tutorial is structured in 6 parts:

1. Create the graphic symbol tag
2. Draw the On-Off symbol
3. Add Parameters
4. Data Bind the Shapes
5. Test the data bindings
6. Test the symbol on a graphic page

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:

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: On-Off 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 Symbol

A. Draw a Rectangle:

1. Select the Add Rectangle Tool .
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. Drag left and down to draw a rectangle 75 x 25 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.

4. In the Properties Window select the Style property and select Draw shape only.

B. Draw a Text Label:

1. Select the Add Text Tool .
2. Move the cursor to approximately the position X:80 and Y:55.
   
3. Drag left and down to draw a rectangle 75 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 rectangle.

4. In the Properties Window change these properties.

   Property	Value
   Text	Label
   TextAlignment	Center
   FontSize	36

   
   After these property changes the symbol should look like:
   

Part 3: Add Parameters

A. Configure the On-Off Button Parameters:

1. Select the Canvas Properties Tool .
2. Select the GlobalBindings property and then click the browse button to open the Global Bindings Editor.
3. Enter this code:
   

   VAR_GLOBAL
   	(* The full name of the tag associated with the button *)
   	TagName : WSTRING;
   
   	(* The text label to display *)
   	Label : WSTRING;
   	
   	(* The state of the button *)
   	State : BOOL;
   END_VAR
   

4. Click OK to close the Global Bindings Editor.

Part 4: Data Bind the Shapes

A. Animating the button color:

1. Select the Select Shape Tool
2. Press Ctrl+Shift+A to make sure nothing is selected.
3. Click the top edge of the button to select only the rectangle:
   
4. In the Properties Window select the DataBindFillColor property and click the Browse button to open the Data Bindings Editor.
5. Enter this code:
   

   SEL( State, 16#C0C0C0, 'Green' )

   Note: This binding uses the SEL Function to choose one of two values depending on the global variable State. In this case it is choosing a light gray color when State is False, and Green when State is True.

6. Click OK to close the Data Bindings Editor.

B. Adding a click action:

1. Keep the rectangle selected.
2. In the Properties Window select the ActionButtonUp property and click the Browse button to open the Operator Action Editor.
3. Enter this code:
   

   TagWriteValue( TagName, NOT State )

4. Click OK to close the Operator Action Editor.

C. Animating the label color

1. Press Ctrl+Shift+A to make sure nothing is selected.
2. Click the text to select it:
   
3. In the Properties Window select the DataBindTextColor property and click the Browse button to open the Data Binding Editor.
4. Enter this code:
   

   SEL( State, 'Black', 'White' )

   Note: This binding uses the SEL Function to choose one of two values depending on the global variable State. In this case it is choosing a text color to contrast well with the button color.

D. Animating the label text

1. Keep the text selected.
2. In the Properties Window select the DataBindText property and click the Browse button to open the Data Binding Editor.
3. Enter this code:
   

   Label

4. Click OK to close the Data Binding Editor.

   The "Label" text should no longer be visible. This is expected behavior because the text is now bound to the Label variable which is currently an empty string.

5. Click the Save button to save your work.

Part 5: Test the final symbol

A. To test the on-off button:

1. Select the Run Tool .
2. Right-click the graphic editor canvas and select Global Variables:
   
3. Click the Label value and enter: Pump 1.
   Check the text string now shows Pump 1.
4. Click the State value FALSE to toggle it to TRUE.
   Check the button now shows white text on a green background.
5. Click the State value TRUE to toggle it to FALSE.
   Check the button now shows back text on a light gray background.

Part 6: Test the symbol on a graphic page

A. Create the tags

1. Using the Tag Window create a new folder called Button Test
2. In the folder create two new tags:

   Tag Type	Tag Name	Description
   Graphic Page Tag	Graphic	A temporary page used to test the symbol
   Internal Digital Tag	Pump 1 State	A temporary digital tag that will be bound to the on-off symbol.

B. Embed the On-Off Button Symbol on the Graphic Page

1. In the Tag Window double-click the graphic page you created in the previous step.
2. Click the On-Off Symbol you created in this tutorial.
3. Drag the On-Off Symbol onto the canvas:
   
4. Select Embed Graphic to embed the pump symbol onto the graphics page:
   
5. In the Properties Window select the VariableBindings property and click the browse button to open the Embedded Graphics Bindings Editor:
   
6. Right-click the Label binding and select Edit data binding.... Enter "Pump 1" then click OK.
7. Right-click the State binding and select Select tag reference.... Select the Pump 1 State tag then click OK.
8. Right-click the TagName binding and select Select tag reference.... Expand the Pump 1 State folder, select the FullName property, then click OK. When completed the variable bindings should look like:
   
9. Click OK to close the variable binding editor. The button on the graphic page should now look like:
   

C. Test the On-Off Button Symbol

1. Select the Run Tool
2. In the Properties Window, select the Pump 1 State tag to display the tag's status in the Status Monitor Window.
3. Click the pump symbol.
   Check the status monitor window to confirm the tag's value has changed to True.
   Check the button now shows the running state (white text on green background).
   If the tag has not changed state there may be a configuration problem with the data bindings.
4. Click the pump symbol again.
   Check the status monitor window to confirm the tag's value has changed to False.
   Check the button now shows the inactive state (black text on light gray background).

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 3.95 (20230529.2). Copyright © 2012-2023 Fernhill Software Ltd: All rights reserved.