# Split element

The split gui element is used to add a clickable button to the machine gui. When clicked, all items present in one of the machine's input slots will be sorted to fill all slots.

{% hint style="info" %}
The behavior is very similar to Mekanism's machines auto-sort button
{% endhint %}

All split elements must have a unique string id (that you must specify in the elements properties).

Split elements are defined in json with : `"type": "custommachinery:split"`.

### Properties

The split gui element has 4 mandatory properties and 9 optional properties.

#### Mandatory properties

```json
"type": "custommachinery:button" //Mandatory to define a button element.
```

<details>

<summary>X</summary>

#### Name : `x`

#### Description :&#x20;

A positive integer value that define the x axis position of the element to be displayed on the Machine GUI.

#### Example :&#x20;

The element will be rendered 100px to the right from the top-left corner of the gui.

```json5
"x": 100
```

</details>

<details>

<summary>Y</summary>

#### Name : `y`

#### Description :&#x20;

A positive integer value that define the y axis position of the element to be displayed on the Machine GUI.

#### Example :&#x20;

The element will be rendered 100px to the bottom from the top-left corner of the gui.

```json5
"y": 100
```

</details>

<details>

<summary>Id</summary>

#### Name : `id`

#### Description :&#x20;

A string representing the id of the button, can be used in a Function requirement to check the state of the button, or in a [Button requirement](https://frinn.gitbook.io/custom-machinery-1.21/recipes/requirements/button) to make the recipe start only when the button is pressed.

#### Example :&#x20;

The id of the button will be `button1` :&#x20;

```json
"id": "button1"
```

</details>

#### Optional properties

<details>

<summary>Texture</summary>

#### Name : `texture`

#### Description :&#x20;

The location of the texture that will be rendered into the GUI.&#x20;

The location must be referenced by : `namespace:path/file.png` The texture loader will search for textures in the `assets/namespace` folder, the .png extension is required or the file will not be found.

The texture can be any size, if the texture size is different from the default size the width and height properties of the element will be automatically changed to fit the texture size if not provided.&#x20;

If the width and/or height properties of the element are provided, the texture will be stretched to fit the dimensions of the element (it can render weirdly in that case).

#### Default :&#x20;

```json
"texture": "custommachinery:textures/gui/base_split.png"
```

#### Example :&#x20;

The file `assets/textures/my_texture.png` will be used.

```json5
"texture": "namespace:textures/my_texture.png"
```

</details>

<details>

<summary>Texture toggle</summary>

#### Name : `texture_toggle`

#### Description :&#x20;

The location of the texture that will be rendered into the GUI when the button is toggled and pressed.&#x20;

The location must be referenced by : `namespace:path/file.png` The texture loader will search for textures in the `assets/namespace` folder, the .png extension is required or the file will not be found.

The texture can be any size, if the texture size is different from the default size the width and height properties of the element will be automatically changed to fit the texture size if not provided.&#x20;

If the width and/or height properties of the element are provided, the texture will be stretched to fit the dimensions of the element (it can render weirdly in that case).

#### Default :&#x20;

```json
"texture_toggle": "custommachinery:textures/gui/base_split_toogle.png"
```

#### Example :&#x20;

The file `assets/textures/my_texture.png` will be used.

```json5
"texture_toggle": "namespace:textures/my_texture.png"
```

</details>

<details>

<summary>Texture hovered</summary>

#### Name : `texture_hovered`

#### Description :&#x20;

The location of the texture that will be rendered into the GUI when the players mouse cursor is hovering the element.&#x20;

The location must be referenced by : `namespace:path/file.png` The texture loader will search for textures in the `assets/namespace` folder, the .png extension is required or the file will not be found.

The texture can be any size, if the texture size is different from the default size the width and height properties of the element will be automatically changed to fit the texture size if not provided.&#x20;

If the width and/or height properties of the element are provided, the texture will be stretched to fit the dimensions of the element (it can render weirdly in that case).

#### Default :&#x20;

```json
"texture_hovered": "custommachinery:textures/gui/base_split_hovered.png"
```

#### Example :&#x20;

The file `assets/textures/my_texture.png` will be used.

```json5
"texture_hovered": "namespace:textures/my_texture.png"
```

</details>

<details>

<summary>Texture toggle hovered</summary>

#### Name : `texture_toggle_hovered`

#### Description :&#x20;

The location of the texture that will be rendered into the GUI when the button is toggled and the player mouse cursor is hovering it.

The location must be referenced by : `namespace:path/file.png` The texture loader will search for textures in the `assets/namespace` folder, the .png extension is required or the file will not be found.

The texture can be any size, if the texture size is different from the default size the width and height properties of the element will be automatically changed to fit the texture size if not provided.&#x20;

If the width and/or height properties of the element are provided, the texture will be stretched to fit the dimensions of the element (it can render weirdly in that case).

#### Default :&#x20;

```json
"texture_toggle_hovered": "custommachinery:textures/gui/base_split_toogle_hovered.png"
```

Example :&#x20;

The file `assets/textures/my_texture.png` will be used.

```json5
"texture_toggle_hovered": "namespace:textures/my_texture.png"
```

</details>

<details>

<summary>Width</summary>

#### Name : `width`

#### Description :&#x20;

A positive integer value that define the width of the element on the Machine GUI.

#### Default :&#x20;

The same width as the texture specified in the `texture` property.

#### Example :&#x20;

The width of the element will be 100px.

```json5
"width": 100
```

</details>

<details>

<summary>Height</summary>

#### Name : `height`

#### Description :&#x20;

A positive integer value that define the height of the element on the Machine GUI.

#### Default :&#x20;

The same height as the texture specified in the `texture` property.

#### Example :&#x20;

The height of the element will be 100px.

```json5
"height": 100
```

</details>

<details>

<summary>Priority</summary>

#### Name : `priority`

#### Description :&#x20;

An integer property that define the priority of the Element to be rendered.&#x20;

Elements with higher priority will be rendered first. If 2 elements are at the same position the first to be rendered will be under and the last will be above.

#### Default : 0

#### Example :&#x20;

The element will be rendered under each element that have a priority lower than 1000.

```json5
"priority": 1000
```

</details>

<details>

<summary>Tooltips</summary>

#### Name : `tooltips`

#### Description :&#x20;

A list of [Text components](https://frinn.gitbook.io/custom-machinery-1.21/misc/text-component) that will be shown as tooltips when the player mouse cursor hover the element.

Each tooltips of the list will be a new line.

#### Example :&#x20;

Replace the default tooltips with a single line that say "Click me !" :&#x20;

```json
"tooltips": "Click me !"
```

</details>

<details>

<summary>Slots</summary>

#### Name : `slots`

#### Description :&#x20;

A list of slot ids which are the slots that will be sorted while this split button is active.

The slots ids must be the same as specified in the [Item component](https://frinn.gitbook.io/custom-machinery-1.21/creating-custom-machines/machine-components/item-component) and [Slot element ](https://frinn.gitbook.io/custom-machinery-1.21/creating-custom-machines/machine-gui/slot-element)`id`property.

If the list is empty then any normal slot (not fuel, upgrade, etc) in `input`mode will be sorted.

#### Default : `empty`

#### Example :&#x20;

While this split element is active, only slots with ids `input1`, `input2`, `input3` will be sorted.

```json
"slots": ["input1", "input2", "input3"]
```

</details>

### Example

A basic split element using the base texture provided by Custom Machinery :&#x20;

```json5
{
    "type": "custommachinery:split",
    "x": 20,
    "y": 20
}
```

<figure><img src="https://3380432015-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZznnGu8KvEhqjN3qmLqp%2Fuploads%2F9tGDAmrhHToHsZ6yQ35H%2Fsplit_element.png?alt=media&#x26;token=8eb361fe-9dbf-4e41-b680-5a0dcfe07ca2" alt=""><figcaption><p>Button element</p></figcaption></figure>
