# Adding Interfaces 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. {% hint style="warning" %} Drawing order of the interfaces are from top to bottom. Meaning that the first item on the list will be drawn first sitting on the bottom and the last item on the list will be drawn last on the very top layer. {% endhint %}
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. {% hint style="info" %} Just like the project tree, you can also move objects under another and assign it to be the child of another object. {% endhint %} ### 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 ### Interface Types There are different types of interface available for you to choose from: * [Analog Clock](/grid/widget-creation/creating-your-own-widgets/adding-interfaces/analog-clock.md) * [Color Circle](/grid/widget-creation/creating-your-own-widgets/adding-interfaces/color-circle.md) * [Color Field](/grid/widget-creation/creating-your-own-widgets/adding-interfaces/color-field.md) * [Color Slider](/grid/widget-creation/creating-your-own-widgets/adding-interfaces/color-slider.md) * [Data Array](/grid/widget-creation/creating-your-own-widgets/adding-interfaces/data-array.md) * [Display bar](/grid/widget-creation/creating-your-own-widgets/adding-interfaces/display-bar.md) * [Dropdown](/grid/widget-creation/creating-your-own-widgets/adding-interfaces/dropdown.md) * [Fader](/grid/widget-creation/creating-your-own-widgets/adding-interfaces/fader.md) * [Graph](/grid/widget-creation/creating-your-own-widgets/adding-interfaces/graph.md) * [Bar Graph](/grid/widget-creation/creating-your-own-widgets/adding-interfaces/graph/graph.md) * [Line Graph](/grid/widget-creation/creating-your-own-widgets/adding-interfaces/graph/point-renderer.md) * [Group](/grid/widget-creation/creating-your-own-widgets/adding-interfaces/group.md) * [Image](/grid/widget-creation/creating-your-own-widgets/adding-interfaces/image.md) * [Label](/grid/widget-creation/creating-your-own-widgets/adding-interfaces/label.md) * [Level Meter](/grid/widget-creation/creating-your-own-widgets/adding-interfaces/level-meter.md) * [Number Input](/grid/widget-creation/creating-your-own-widgets/adding-interfaces/number-input.md) * [Pinpad](/grid/widget-creation/creating-your-own-widgets/adding-interfaces/pinpad.md) * [Push and Hold Button](/grid/widget-creation/creating-your-own-widgets/adding-interfaces/push-and-hold-button.md) * [Push Button](/grid/widget-creation/creating-your-own-widgets/adding-interfaces/push-button.md) * [Push Image Button](/grid/widget-creation/creating-your-own-widgets/adding-interfaces/push-image-button.md) * [QR](/grid/widget-creation/creating-your-own-widgets/adding-interfaces/qr.md) * [Radio Buttons](/grid/widget-creation/creating-your-own-widgets/adding-interfaces/radio-buttons.md) * [Range](/grid/widget-creation/creating-your-own-widgets/adding-interfaces/range.md) * [Rotary](/grid/widget-creation/creating-your-own-widgets/adding-interfaces/rotary.md) * [Shape](/grid/widget-creation/creating-your-own-widgets/adding-interfaces/shape.md) * [Connection Line](/grid/widget-creation/creating-your-own-widgets/adding-interfaces/shape/connection-line.md) * [Ellipse](/grid/widget-creation/creating-your-own-widgets/adding-interfaces/shape/ellipse.md) * [Line](/grid/widget-creation/creating-your-own-widgets/adding-interfaces/shape/line.md) * [Polygon](/grid/widget-creation/creating-your-own-widgets/adding-interfaces/shape/polygon.md) * [Rectangle](/grid/widget-creation/creating-your-own-widgets/adding-interfaces/shape/rectangle.md) * [Slider](/grid/widget-creation/creating-your-own-widgets/adding-interfaces/slider.md) * [SVG](/grid/widget-creation/creating-your-own-widgets/adding-interfaces/svg.md) * [Switch](/grid/widget-creation/creating-your-own-widgets/adding-interfaces/switch.md) * [Text](/grid/widget-creation/creating-your-own-widgets/adding-interfaces/text.md) * [Textfield](/grid/widget-creation/creating-your-own-widgets/adding-interfaces/textfield.md) * [Widget Radio Buttons](/grid/widget-creation/creating-your-own-widgets/adding-interfaces/widget-radio-buttons.md) * [XY Panel](/grid/widget-creation/creating-your-own-widgets/adding-interfaces/xy-panel.md) --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://stage-precision.gitbook.io/grid/widget-creation/creating-your-own-widgets/adding-interfaces.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.