Skip to main content

Dpad

The Dpad element adds a directional pad to the canvas, typically used for navigation or directional control in UI layouts. It includes up, down, left, right, and center inputs, and can be configured to trigger different types of actions depending on your use case.

Expanded Dpad settings panel

Dpad Friendly Name​

Click the pencil icon next to the default label to rename the element. This friendly name appears in the editor and helps distinguish the element from others on the canvas.

Dpad Dataset Source​

Use this option to choose how the dpad will receive or reference its data.

  • Static: This mode is used when the dpad’s data source is fixed and not expected to change dynamically. Use this when you want to manually assign values to each direction (e.g., Up = 1, Down = 2, etc.).
  • Dynamic: This mode is used when the values need to come from a live or computed source—such as a variable, parameter, or external signal.

Choose the mode that aligns best with how your control system or navigation logic is expected to behave.

Size​

This section allows you to define the dpad’s width and height. You can input fixed values or use expressions by clicking the fx button. The unit of measurement can be selected from the dropdown beside each input field (e.g., px, %, etc.).

  • Width: Sets the horizontal size of the dpad.
  • Height: Sets the vertical size of the dpad.

Mode Selector by Index or Name​

This setting lets you control which dpad mode is currently active. You can provide a numeric index or a string name, depending on how your dpad modes are configured. Use the fx button to set this dynamically based on logic or parameters.

Available Dpad Modes​

This list contains the modes that the dpad can switch between. By default, only one mode labeled Default is created. You can add more modes by clicking the + button. These modes allow you to define different dpad layouts or behavior presets that can be toggled at runtime.

Dpad CSS Classname​

This field is used to assign a custom CSS class to the dpad element. You can either manually input a classname or click the fx button to dynamically assign one. This is useful when applying specific styles or targeting the dpad through custom project CSS.

The default classname is dpadElement.

Design​

Expand the Design section to configure the following:

  • Default Color: Sets the base color of the Dpad.
  • Pressed Color: Sets the color shown when the Dpad is pressed.
  • Corners Radius: Defines the roundness of the Dpad edges.
  • Thickness: Adjusts the thickness of the Dpad border.
  • Hide central button: Toggle to show or hide the center button of the Dpad.

Reflect​

You can enable a reflection effect by toggling Reflect. Once enabled, the following options are available:

  • Align: Choose where the reflection appears (Bottom is the default).
  • Offset: Adjust the space between the element and its reflection.
  • Start Opacity: Controls the opacity at the top of the reflection.
  • End Opacity: Controls the opacity at the bottom of the reflection.

Controls​

The Controls section allows you to assign signal values to the Dpad's different directional and center buttons. These values can be used to trigger logic or actions when a button is pressed.

  • Center Signal: The signal value associated with the center button.
  • Top Signal: The signal value for the top directional input.
  • Right Signal: The signal value for the right directional input.
  • Left Signal: The signal value for the left directional input.
  • Bottom Signal: The signal value for the bottom directional input.

Each field accepts a dynamic or static signal.

Text​

The Text section lets you specify custom labels for the Dpad buttons.

  • Center Text: Label for the center button.
  • Top Text: Label for the top directional button.
  • Right Text: Label for the right directional button.
  • Left Text: Label for the left directional button.
  • Bottom Text: Label for the bottom directional button.

You can use dynamic values to update these labels based on other app conditions.

State​

The State section provides options for controlling the visibility and availability of the Dpad element based on signals.

  • Orientation Visibility: Choose to show the element on vertical screens, horizontal screens, or both.
  • Visibility Dynamic Value: Use expressions to conditionally display or hide the element.
  • Visibility Signal: Set a signal that controls visibility.
  • Reserve space when hidden: If enabled, the element will reserve layout space even when hidden.
  • Disabled Signal: Define a signal that disables the element.
  • Checked Status Signal: Not applicable for Dpad elements.