Please ensure Javascript is enabled for purposes of website accessibility
Powered by Zoomin Software. For more details please contactZoomin

AVEVA™ XR Studio

ChargeButton2D

  • Last UpdatedFeb 24, 2026
  • 7 minute read

ChargeButton2D is a special type of shaped button designed for interactions that require a deliberate press-and-hold gesture, offering two configurable behaviors: Press and Hold, where the user must keep the button pressed until the charge completes, and Autofill, where the progress fills automatically without continuous user interaction.

This type of button inherits most of the functionality of the ButtonShape2D node. For image rendering, wrap alignment, and other features of the actual button, please refer to the documentation for ButtonShape2D.

For the ChargeButton2D, some additional features have been added, which makes this button useful in certain specific contexts.

Platform support

This element is fully supported on XR-Windows, XR-Portable Windows, XR-Portable iOS, XR-Portable Android, and XR-P WASM platforms.

XR-WIN

XR-P-WIN

XR-P-IOS

XR-P-AND

XR-P-WASM

Full support

Full support

Full support

Full support

Full support

Full support

Full support

Full support

Full support

Full support

Charge properties

The properties related to charging.

  • fillColor — Represents the color of the charging fill, and the user can select any color.

  • fillDirection — The user can choose between the four standard directions: right-to-left, left-to-right, bottom-to-top, and top-to-bottom. Additionally, a Center option is available, causing the fill to start from the center and expand outward until the entire internal area of the button is covered.

  • fillTime — The duration of the charging process, expressed in seconds.

  • fillMode

    • PressAndHold — The user must keep the button pressed until the fill is completed for the action to trigger.

    • AutoFill — The fill progresses automatically without requiring the user to hold the button, triggering the action when the fill completes.

  • startOnClick — Allows the user to decide whether the filling process should begin automatically when the button is clicked. If disabled, the filling will start only when the startFilling event is manually triggered. This gives full control over when the charging process begins.

Automated actions

In scenarios where automated actions are needed within the scene, the button can trigger a click automatically when the timer (charging) completes. This allows it to activate any desired functionality. When the charging process begins, the user also has the option to interrupt it and immediately trigger the click by pressing the button again while it is still charging.

ChargeButton2D fields

These are the fields specific to the ChargeButton2D node. Only node-level fields are listed; inherited fields are not included.

Field inheritance hierarchy: NodeBase > RectBase2D > ChargeButton2D

Fields

Type

Use

Default

Description

buttonDown

sbool

Optional

Read only

This field becomes true when the button is pressed.

changeOnUp

sbool

Optional

false

This field enables custom behavior of the buttonDown update for toggle and radio button modes. When set to false, buttonDown changes on mouse down. When set to true, it changes on mouse up.

clicked

sevent

Optional

Read only

Raised when a click is completed (mouseDown and mouseUp inside button area).

enabled

sbool

Optional

true

Enabled button interaction.

fillColor

svec4

 Optional

216, 216, 216

Defines the color of charging area.

fillDirection

senum

 Optional

RightToLeft

Defines the charging direction

fillMode

senum

 Optional

PressAndHold

Defines the charging mode.

fillTime

sfloat

 Optional

1

Defines the charging time expressed in seconds.

imageDisabled

sstring

Optional

 

The image shown when disabled.

imageDisabledColorFilter

svec4

Optional

127, 127, 127

A solid color that is blended to the imageDisabled, supports alpha channel.

For more information about different blend strategies, see Image color filter modes.

imageDisabledColorFilter Mode

senum

Optional

none

Defines the strategy used to blend the color selected in imageDisabledColorFilter to the displayed imageDisabled,

The following options are available: none, screen, multiply, color, invert.

See Image color filter modes section for details.

imageDown

sstring

Optional

 

The Clicked state image.

imageDownColorFilter

svec4

Optional

147, 56, 51

A solid color that is blended on the displayed imageDown, supports alpha channel.

For more information about different blend strategies, see Image color filter modes.

imageDownColorFilterMode

senum

Optional

none

Defines the strategy used to blend the color selected in imageDownColorFilter on the displayed imageDown.

The following options are available: none, screen, multiply, color, invert.

See Image color filter modes section for details.

imageNormal

sstring

Optional

 

The Normal state image.

imageNormalColorFilter

svec4

Optional

0, 175, 239

A solid color that is blended on the displayed imageNormal, supports alpha channel.

For more information about different blend strategies, see Image color filter modes.

imageNormalColorFilterMode

senum

Optional

none

Defines the strategy used to blend the color selected in imageNormalColorFilter on the displayed imageNormal, the following options are available: none, screen, multiply, color, invert. See Image color filter modes section for details.

imageOver

sstring

Optional

 

The Over state image.

imageOverColorFilter

svec4

Optional

0, 175, 79

A solid color that is blended on the displayed imageOver, supports alpha channel.

For more information about different blend strategies, see Image color filter modes.

imageOverColorFilterMode

senum

Optional

none

Defines the strategy used to blend the color selected in imageOverColorFilteron the displayed imageOver.

The following options are available: none, screen, multiply, color, invert.

See Image color filter modes section for details.

imageWrapAlignment

senum

Optional,

center

Defines the alignment of the displayed image relative to the node rect when the image aspect ratio and the node aspect ratio do not match.

The following styles are supported: center, left, top, right, bottom, top_left, top_right, bottom_left, bottom_right.

Only used when an image field is set.

imageWrapMode

senum

Optional,

fit

Defines the wrap mode of the image in the node rect. The following styles are supported: fit, fill, fill_width, fill_height, original_size, stretch.

Any value, except for stretch, will make the displayed image keep its original aspect ratio relative to the grid or the screen (depending on imageWrapKeepProportions).

Only used when an image field is set

isOverGraphics

sbool

Read only

false

Reveals the over state of the pointer with a pixel-perfect check. This field is true if the pixel of the ButtonShape2D graphics underlying the pointer position is colored with an alpha>0, false otherwise.

joyInputEnable

sbool

Optional

true

Enabled joypad interaction.

keyInputEnable

sbool

Optional

true

Enabled keyboard interaction.

mouseDown

sevent

Optional

Read only

Raised when pressing mouse left button inside button area.

mouseUp

sevent

Optional

Read only

Raised when releasing mouse left button inside button area or exiting button area with mouse left button pressed.

shapeBorderThickness

sfloat

Optional

2

Defines the thickness of the border.

Only used when shapeStyle field is different from none.

shapeCustom

senum

Optional

{tension=0.1}

{points=0.5 0.1,0.9 0.9,0.1 0.9}

 

Allows the definition of a custom shape by using the following syntax:

{tension=(float)}{points=(float) (float), (float) (float), (float) (float), […]}

where

{points=…} is mandatory and shall contain a list of tuples, separated by ‘commas’, representing the points of the contour of the shape; x,y coordinates are expressed in unitary values where 0 represents 0% of the x/y axis and 1 represents 100% of the x,y axis

{tension=…} is optional (default=0) and shall contain a float number representing the tension to apply to the edges of the shape, values >0 will make the shape convex while values <0 will make the shape concave, values in the range [-1,1] are recommended, but numbers outside that range work as well

Example

{tension=0.1}{points=0.5 0.1,0.9 0.9,0.1 0.9}

This draws a triangle with vertexes in (x:0.5, y:0.1), (x:0.9, y:0.9) and (x:0.1, y:0.9) with slightly convex edges (according to the 0.1 tension)

This example is the default value for the shapeCustom field.

Only used when shapeStyle field is different from none.

shapeDisabledBorderColor

svec4

Optional

17, 17, 17, 1

Defines the border color of the shape for the Disabled state. It can be transparent. Only used when shapeStyle field is different from none.

shapeDisabledColor

svec4

Optional

63, 63, 63, 1

Defines the color of the shape for the Disabled state. It can be transparent. Only used when shapeStyle field is different from none.

shapeDownBorderColor

svec4

Optional

140, 140, 140, 1

Defines border color of the shape for the Down state. It can be transparent. Only used when shapeStyle field is different from none.

shapeDownColor

svec4

Optional

132, 219, 255, 1

Defines the color of the shape for the Down state. It can be transparent. Only used when shapeStyle field is different from none.

shapeNormalBorderColor

svec4

Optional

114, 114, 114, 1

Defines the border color of the shape for the Normal state. It can be transparent. Only used when shapeStyle field is different from none

shapeNormalColor

svec4

Optional

0, 175, 239, 1

Defines the color of the shape for the Normal state. It can be transparent. Only used when shapeStyle field is different from none.

shapeOverBorderColor

svec4

Optional

63, 63, 63, 1

Defines the border color of the shape for the Over state. It can be transparent. Only used when shapeStyle field is different from none.

shapeOverColor

svec4

Optional,

0, 158, 214, 1

Defines the color of the shape for the Over state. It can be transparent. Only used when shapeStyle field is different from none.

shapeRoundRectCorner

sfloat

Optional,

20

Defines the corners radius, in pixels, of the rounded_rectangle shape. Only used when shapeStyle field is rounded_rectangle.

shapeStyle

senum

Mandatory

none

Defines the style of the shape. The following styles are supported: rectangle, rounded_rectangle,circle, custom_shape, none.

startFilling

sevent

 Optional

Not set

Useful to trigger the start of the charging process.

stopFilling

sevent

 Optional

Not set

Useful to trigger the stop of the charging process.

startOnClick

sbool

 Optional

true

Allows the user to decide whether the filling process should begin automatically when the button is clicked.

In This Topic
Related Links
TitleResults for “How to create a CRG?”Also Available in