# Screen Overlay Buttons

This documentation explains how to set up and use the overlay buttons whithin a scene. All elements are in the UIPrefabs folder.

## Overview

* **OverlayButtons Prefab**: A pre-designed canvas that serves as the central UI element for your set up
* **Button Prefabs**: Predefined button styles designed for different functionalities and use cases, such as camera position, group connection and signal trigger.

## Setup

### Adding the user canvas

1. Drag and drop the OverlayButtons-Prefab in the hierarchy. There are no further parameter needed.
2. the button placement area, named "Buttons," is positioned by default along the right margin.

### Button prefabs

All button prefabs include the `rvUIToolbarButton` component, where you can configure the following parameters:

* **Item Tooltip**: Defines the button's tooltip text.
* **Tooltip Position**: Sets the tooltip's display position relative to the button.

<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-2592ee19976e3f3f4237183edf3af8bbe92d539e%2FRVUIToolbarButtonOverlay.png?alt=media" alt=""><figcaption><p>rvUIToolbarButton</p></figcaption></figure></div>

Each button GameObject contains two child images where you can assign custom sprites

<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-929db8968ad1fde2b80869c028df30859a614b33%2FrcuitoolbarButtonImages.png?alt=media" alt=""><figcaption><p>Set button images</p></figcaption></figure></div>

#### Button Camera position

#### Within the component "StartCameraPosition" you can assign a Camera Pos.

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

A camera position is created in the following way:

* "Right Click" in your project and select "Create/realvirtual/Add Camera Position". This creates a scriptable object where you define the position of the camera.
* Assign the created camera position to the "StartCameraPosition" component.

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

#### Button Show Group

The `ButtonShowGroup` component provides a list of groups available to the user in Playmode. Select a group to control its visibility with the button.

<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-7532b661cbe609b50aafd6ba8879d8b94037582b%2FoverlayButtonShowGroup.png?alt=media" alt=""><figcaption></figcaption></figure></div>

To define these groups for Playmode, use the [`GroupManager`](https://doc.realvirtual.io/basics/runtime-ui/group-manager) in the RealVirtual prefab. Ensure the `GroupManager` used is also assigned in the `ButtonShowGroup` component.