Graphic Editor On-Off Button Tutorial

Help Contents

Introduction

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

On-Off symbol

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 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: 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 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. Drag left and down to draw a rectangle 75 x 25 canvas units:
    First 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.

  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 Add Text Tool Icon.
  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:
    Text outline

    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.
    PropertyValue
    TextLabel
    TextAlignmentCenter
    FontSize36

    After these property changes the symbol should look like:
    Text complete

Part 3 - Add Parameters

A. Setup the On-Off Button Parameters:

  1. Select the Canvas Properties Tool Canvas Properties Tool.
  2. Select the GlobalBindings property and then click on the Property Browse Button 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 Select shape tool icon
  2. Press Ctrl+Shift+A to make sure nothing is selected.
  3. Click on the top edge of the button to select only the rectangle:
    Select rectangle
  4. In the Properties Window select the DataBindFillColor property and click the Browse button Property 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 Property 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 on the text item to select it:
    Select text
  3. In the Properties Window select the DataBindTextColor property and click the Browse button Property 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 Property 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 behaviour because the text is now bound to the Label variable which is currently an empty string.

  5. Click the Save button Save button to save your work.

Part 5 - Test the final symbol

A. To test the on-off button:

  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 Label value and enter: Pump 1.
    Check the text string now shows Pump 1.
  4. Click on the State value FALSE to toggle it to TRUE.
    Check the button now shows white text on a green background.
  5. Click on 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 TypeTag NameDescription
    Graphic Page TagGraphicA temporary page used to test the symbol
    Internal Digital TagPump 1 StateA 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 on the On-Off Symbol you created in this tutorial.
  3. Drag the On-Off Symbol onto the canvas:
    Embed menu
  4. Select Embed Graphic to embed the pump symbol onto the graphics page:
    Embedded on-off symbol
  5. In the Properties Window select the VariableBindings property and click the Property Browse Button browse button to open the Embedded Graphics Bindings Editor:
    Variable Bindings
  6. Right click on the Label binding and select Edit data binding.... Enter "Pump 1" then click OK.
  7. Right click on the State binding and select Select tag reference.... Select the Pump 1 State tag then click OK.
  8. Right click on 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:
    Variable Bindings
  9. Click OK to close the variable binding editor. The button on the graphic page should now look like:
    Configured on-off button

C. Test the On-Off Button Symbol

  1. Select the Run Tool 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 on 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 on 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.