Button - Basic Object

Description

The Button is a very complete object.  It not only allows configuring a C# script, but can behave as a push button, have animated background color, rotation, direct a command such as opening graphics, or be disabled, depending on the security permissions, and much more.  Please take a look at the following sections to learn more.

Properties and Functions

Info

  • Name
  • Size
  • Location
  • ZIndex
  • Draggable

Configuration

  • Angle
  • Text
  • Button Style
  • Source File (Enabled when Button Style has Image)
  • Actions
  • Font
  • Toggle Button
  • Tag (Enabled when Button is Toggle Button)
  • Text Wrapping
  • Corner Radius
  • Border Thickness
  • Pressed Border Thickness
  • Number of Decimals
  • HotKey
  • Is Enabled
  • Is Visible
  • ToolTip

Functions

  • .FontColor
  • .Text
  • .IsChecked
  • .changeBorderThickness()
  • .changeBorderThicknessPressed()
The above properties and functions can be configured using the Property Window when the object is selected but they can also be changed during runtime using a script.  The script must be on the same screen as the object is located and they can be accessed by the name of the object (i.e. objName.Angle = objName.Angle + 1; )

Inserting a Button

To create a new Button in the Graphics Document:

  1. Click the “Button” option in the Ribbon.
  2. Place the mouse pointer where you want to create the button.
  3. Click to create the new button.

Script Events

The Button Object provides several Script Events for the user.

  • Mouse Up
  • Mouse Down
  • Mouse While
  • Mouse Right Up
  • Mouse Right Down
  • Mouse Double Click

Button Style

The Button style allows an image to be added to the Button, keeping it a text only style and mixing image and text with different formats.

The Content Style selection Box contains the following options:

The image below shows the ButtonStyle set to “ImageAndTextVertical” option, but there are other Button Style options available.  You can also mix a button and an image and group them into 1 single object.  Or you can use a rectangle around a Label and an Image. 

Toggle Button

When the button’s property toggle button is set to true, it will have a different behavior.  It is going to be similar to a check box where it has 2 states (checked or unchecked) but keeping the button appearence. 

As you can see in the image above, you will configure a tag (boolean type) to receive the status of the button.  If it is pushed, the tag will receive true value and if it is released, the tag value will be set to false. 

Another interersting configuration that can be set in parallel and will give you a nice final result is the Background Pressed color.

After enabling the Toggle Button, setting a tag and specifying a green color when it is pressed, you can get the following behavior (image below)

Rounded Button and Shadows

It is also possible to customize a button by changing the border radius and border thickness 

  • Cornerr Radius

  • Border Thickness and Pressed Border Thickness

The button will have now the following visual

Actions

Another interesting Button feature is the action.  By default, the button will execute the scripts. 

But you can also change it to Open a specific Graphic screen, avoiding writing a script to open it.  It does help a lot to open a generic graphic screen that contains Screen Tags, as in the example below.

Number of decimals

Allows configuring the number of decimals which will be visible in the Button text.  Let’s say you configured the Text to show the value of a Float tag, in this case you can set the Button to show the default number of decimals which can be configured in the Ribbon -> Settings or a custom number of decimals configured for that button.

Hot Key

A Hot Key can be configured to execute the action of a button.  This is very useful while adding shortcuts to execute different buttons.  For example, when you want to execute the action of a button by pressing the ENTER key.

Security

Allows setting different privileges for the button.  The security system is very important in a SCADA application, since different user profiles may have different privileges.  The Security configuration can be found in the Property Window for all the objects and it is very easy to configure.  In the example below, there is only 1 profile “Administrator” created for the application and it can have a default permission or a customized permission.  The default permission can be found in the top Ribbon -> Settings -> Security