Interfaces

Interface Types

There are different types of interface available for you to choose from:

• Analog Clock

• Color Circle

• Color Field

• Color Slider

• Data Array

• Display bar

• Dropdown

• Fader

• Graph

  • Bar Graph

  • Line Graph

• Group

• Image

• Label

• Level Meter

• Number Input

• Pinpad

• Push and Hold Button

• Push Button

• Push Image Button

• QR

• Radio Buttons

• Range

• Rotary

• Shape

  • Connection Line

  • Ellipse

  • Line

  • Polygon

  • Rectangle

• Slider

• SVG

• Switch

• Text

• Textfield

• Widget Radio Buttons

• XY Panel

Adding Interface

To add any interface elements to your widget, click on the interface button at the top menu bar to open up the list of all available elements. Choose one of them to add to your widget. Another option is that you can right click on the empty area of the widget tree.

Once the list of interfaces appears, you can go through the list and choose what is there, or you can directly type and search for what you need.

Just like the project tree, you can also move objects under another and assign it to be the child of another object.

Layout Position and Resize

Similar to a widget, you can move and resize the interface elements around inside the widget editor.

By clicking and dragging at the bottom right corner of interface object in the editor, you can change the size of it.

By clicking and dragging inside the interface object, you can move it around.

Alternatively, you can enter the values directly into the inspector under the Layout tab.

To define the size, you can enter the values for the width and height.

To define the placement, you can enter the values for the respective margin. You can also change the constrain point or the anchor point from which you start defining your location.

The default setting is placing and defining the size of the interface at a fixed location based on a pixel unit.

Alternatively, there is the option to define both the size and the placement relative to the parent object's size. This means that as the parent object size changes, the interface can adjust along with it.

The first option is to define the numerical values as a percentage of its parent's size.

The other option is to contrain the width, the height or both relative to the parent.

If the constrain is enabled, you can define the margin of both sides of that axis.

Other settings that are availble in the inspector are: - visible: control whether the interface object is visible or not - interactable: whether the selected interface object is an object that can be interact with (ie clickable, swapable) - alpha: define how transparent the object is