> For the complete documentation index, see [llms.txt](https://doc.realvirtual.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://doc.realvirtual.io/components-and-scripts/scene-interaction/hmi-components-pro/start-your-own-hmi.md).

# Start your own HMI (Deprecated)

example to set up your own HMI

{% hint style="danger" %}
**Deprecated — no realvirtual WEB equivalent.** The Unity uGUI HMI panel/tab system is deprecated and is **not exported to realvirtual WEB**. The browser-based 3D-HMI is not built from these in-scene panels: [**realvirtual WEB**](/extensions/realvirtual-web.md) provides its own HMI framework (WebSensor, WebError, KPI and message panels, and a React overlay/plugin layer with configurable slots). Build browser HMIs there rather than porting this panel setup.
{% endhint %}

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](/components-and-scripts/scene-interaction/hmi-components-pro/hmi-dropdown.md) and a [Value Display](/components-and-scripts/scene-interaction/hmi-components-pro/hmi-value.md).

<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 ](/components-and-scripts/scene-interaction/hmi-components-pro/hmi-marker.md)and [HMI\_Text](/components-and-scripts/scene-interaction/hmi-components-pro/hmi-text.md). The HMI\_Text, as well as the [HMI\_Value](/components-and-scripts/scene-interaction/hmi-components-pro/hmi-value.md), 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](/components-and-scripts/scene-interaction/hmi-components-pro/hmi-marker.md) doesn't need a canvas because it is a 3D object.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://doc.realvirtual.io/components-and-scripts/scene-interaction/hmi-components-pro/start-your-own-hmi.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

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.