# Start your own HMI

The scene `EmtySceneHMI`only consists of HMI components, demonstrating a standard HMI structure. This is also available as a Prefab HMI serving as a foundation for creating your own HMI. To incorporate the `HMI` prefab, insert it into your scene and customize it to fit your requirements by adding or removing elements under the appropriate content game object. To make these modifications, simply right-click on the game object in the hierarchy and select `Prefab/UnpackCompletly`.\
The example scene contains two HMI-Tabs.

<figure><img src="https://260262196-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FpYxFg97YnJX96UzNNTSd%2Fuploads%2Fgit-blob-08b221ed83d31a2f06117ed2e64f852f26d4928e%2FHMIemptyScene.png?alt=media" alt=""><figcaption><p>Hierarchy overview HMI</p></figcaption></figure>

They are activated and deactivated by Tab-Buttons which are organized in a separat panel. The panel is an overlay and always visible.

## HMI-Tab 1 - details

HMI-Tab1 shows how to set up a overlay panel. The game object "Panel" uses the component "VerticalLayoutGroup" to organize the buttons by setting the padding and the spacing in between elements.

<div align="left"><figure><img src="https://260262196-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FpYxFg97YnJX96UzNNTSd%2Fuploads%2Fgit-blob-1fa6026bc4526628ab5e849206dea6e603dd2798%2FHMIexTab1.png?alt=media" alt=""><figcaption></figcaption></figure></div>

To change the size of an element use the parameter "Width" and "Height" of the component "RectTransform". This is possible for all HMI elements.

<div align="left"><figure><img src="https://260262196-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FpYxFg97YnJX96UzNNTSd%2Fuploads%2Fgit-blob-4f5921b50b4b3ad8e4d0aac79b3316d05987b49a%2FHMIRectTrans.png?alt=media" alt=""><figcaption><p>RectTransform component</p></figcaption></figure></div>

## HMI-Tab 2 details

HMI-Tab 2 uses an overlay content and contains elements in world space. The gif below shows you how the different elements appear when you navigate through the scene:

<figure><img src="https://260262196-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FpYxFg97YnJX96UzNNTSd%2Fuploads%2Fgit-blob-4471ca49bc4f0de08a4c22c41872dc25fbafd39c%2FHMIworldSpaceEx.gif?alt=media" alt=""><figcaption><p>Behavior HMI-elements in render mode "Worldspace"</p></figcaption></figure>

The overlay content stays always at the same position. It contains an example how to use a [Drop-Down-Menu](https://doc.realvirtual.io/components-and-scripts/scene-interaction/hmi-components-pro/hmi-dropdown) and a [Value Display](https://doc.realvirtual.io/components-and-scripts/scene-interaction/hmi-components-pro/hmi-value).

<div align="left"><figure><img src="https://260262196-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FpYxFg97YnJX96UzNNTSd%2Fuploads%2Fgit-blob-ac2468a6ba75b850bf2dca99072d240bc125400f%2FHMIexTab2.png?alt=media" alt=""><figcaption></figcaption></figure></div>

The "WorldspaceContent" section contains two separate elements: [HMI\_Marker ](https://doc.realvirtual.io/components-and-scripts/scene-interaction/hmi-components-pro/hmi-marker)and [HMI\_Text](https://doc.realvirtual.io/components-and-scripts/scene-interaction/hmi-components-pro/hmi-text). The HMI\_Text, as well as the [HMI\_Value](https://doc.realvirtual.io/components-and-scripts/scene-interaction/hmi-components-pro/hmi-value), check if they're positioned beneath a canvas. If no canvas is found in the parent object, the "Canvas" component is automatically added and set to "Worldspace" render mode. This feature is currently only available for this HMI-elements. For the other HMI-elements you can use the `HMI_PanelWorldSpace` prefab, which already includes the canvas component. Just place this prefab under "WorldspaceContent." Subsequent HMI elements are added beneath the panel. This approach allows you to create a user panel within your scene. The [HMI Marker](https://doc.realvirtual.io/components-and-scripts/scene-interaction/hmi-components-pro/hmi-marker) doesn't need a canvas because it is a 3D object.