# UI components

{% hint style="warning" %}
UI components is still part of our release but you should consider using the new [HMI components](https://doc.realvirtual.io/components-and-scripts/scene-interaction/hmi-components-pro) (only available in Professional), [Screen Overlay Buttons](https://doc.realvirtual.io/components-and-scripts/scene-interaction/screen-overlay-buttons) or [3DButtons](https://doc.realvirtual.io/components-and-scripts/scene-interaction/3d-buttons)
{% endhint %}

UI Components can be used to display PLC Signals on the screen or to control PLC Signals during simulation. Currently the UI Components contain these components:

| Component    | Description                                              |
| ------------ | -------------------------------------------------------- |
| UIPanel      | Empty sliding panel as a container for the UI components |
| UIButton     | A push or toggle button                                  |
| UILamp       | Lamp with different colors                               |
| UIMessageBox | Model window for displaying messages.                    |

The components can be arranged in a Panel (or multiple Panels) that can slide over the main view:

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

All UI Components should be arranged under the UI Gameobject in the Hierarchy:

<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-2099cc065b7b94b51947bb42b2dac8f2a0a0b783%2FrvUIcomp.png?alt=media" alt=""><figcaption></figcaption></figure></div>

### UIPanel <a href="#uipanel" id="uipanel"></a>

The UIPanel is an element used as a container for Buttons and Lamps. It is opened when it is selected in the bottom of the screen with a sliding animation. It can be closed by selecting the panel name or closing icon. You can place multiple panes on the screen but the naming of the second panel and the position of the animations must be changed manually.

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

### UIButton <a href="#uibutton" id="uibutton"></a>

The Button can be placed in a UI Panel. The Button can act as a switch (changes between on and off everytime you press it) or can act as a pushbutton (only stays at on if you press it). You can select the color and the text which is displayed under the button. The connection to PLC Inputs is made by dragging the PLC Input onto the Field *Button On* or by selecting under *Button On* the desired input.

<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-67e0d82cd5ae8cc177ea59ddfe53d273e5dc421d%2Fuicomponents-pushbutton.png?alt=media" alt=""><figcaption></figcaption></figure></div>

### UILamp <a href="#uilamp" id="uilamp"></a>

The lamp is used for displaying values. It can be connected to a PLC Output.

<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-6b96046456a34071860886c452017e9f52796ed3%2Fuicomponents-lamp.png?alt=media" alt=""><figcaption></figcaption></figure></div>

### UIMessageBox <a href="#uimessagebox" id="uimessagebox"></a>

The UIMessageBox is a modal message box that is opening as an overlay over all windows in the scene. It can be turned on by a PLC Output signal.

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

The message box can be closed automatically after a defined time in seconds if *Auto Close After Seconds* is a value greater zero. The message box can be connected to a Cinemachine Virtual Camera for automatically zooming to the position of the message. Also some objects in the scene, that are highlighted during the message, can be selected.

<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-c703ca78607f54de7fd32cc95a7980153bc3dd00%2Fuicomponents-messageboxinspector.png?alt=media" alt=""><figcaption></figcaption></figure></div>

Please check the [Realvirtual.io Class Reference](https://game4automation.com/documentation/current/apidoc/html/classgame4automation_1_1_u_i_message.html) for more information about the properties and methods of this component.\
\
\
\
\
\
© 2025 realvirtual GmbH [https://realvirtual.io](https://realvirtual.io/) - All rights reserved. No part of this publication may be reproduced, distributed, or transmitted in any form or by any means, including printing, saving, photocopying, recording, or other electronic or mechanical methods, without the prior written permission of the publisher.