Interface Modules꞉ Panel

The Hoverpanel interface provides an rectangular-shaped, hierarchical menu structure that can be placed anywhere in the virtual world. It displays one rectangular-shaped row of items at a time, and (upon item selections or other events) smoothly animates transitions between these rows.

📷 Using the Hoverpanel interface with Leap Motion hands

Overview

Location

The "Panel" input module is contained in the /Assets/Hover/InterfaceModules/Panel folder.

Installation

Use a "builder" component to generate this interface in your scene:

1. Create an empty GameObject named Hoverpanel.
2. Add the HoverpanelBuilder component to Hoverpanel.
   1. Modify the properties, if necessary.
   2. Click the "Build Interface" button.
3. Modify the properties, if necessary, within the newly-generated components.

Reference

See the Hover.InputModules.Panel namespace for technical reference, and /Assets/HoverExamples/Scenes/InterfaceModules-Panel.unity for an example scene.

Tutorials

Active Row

The Hoverpanel interface has one active row (of type HoverLayoutRectRow) at a time, and switches between rows automatically during navigation events. Before starting a scene, the active row determines which row will be visible when the scene starts. To change the active row:

1. Find the HoverpanelInterface component (attached to the main Hoverpanel object).
   1. Set the "Active Row" property to the desired HoverLayoutRectRow component.
2. Disable the previously-active row's GameObject to hide it, so that it does not overlap the newly-active row.

New Rows

The Hoverpanel interface is most useful when there are several rows of items, and the user can navigate between those rows. To add a new row:

1. Create an empty GameObject named MyRow, as a child of the Hoverpanel/RowRoot object.
2. Add the HoverLayoutRectRow component to MyRow.
3. Create items as children of MyRow (see Getting Started for instructions).
   1. Add the HoverShapeRect component to each item.

Navigation

Hoverpanel is a hierarchical menu interface, where each level of the hierarchy is a row layout. Typically, an item selection is the trigger for a navigation action. When discussing navigation: a "back" action means moving toward the root row, and a "forward" action means moving deeper into the hierarchy.

The following steps describe how to connect an item's selection event to Hoverpanel's row-switching method, attach navigation information to the item, and adjust the item visually:

1. Select the item that will trigger the navigation.
2. Add the HoverpanelRowSwitchingInfo component to the item.
   1. Choose the target row (a HoverLayoutRectRow component) for the "Navigate To Row" property.
   2. Adjust the "Navigate Back" and "Row Entry Transition" properties, if desired.
3. Find the item's HoverItemDataX component, where X is the item type (for example, HoverItemDataSelector).
   1. Open the "Events" foldout section.
   2. Add an "On Selected Event" that points to HoverpanelInterface.OnRowSwitched().
   3. Adjust the "Action" property to make the item's "arrow" icon appear. Recommended: use "Navigate In" for "forward" actions, and "Navigate Out" option for "back" actions.
4. Find the item renderer's HoverCanvas component (attached to the Canvas object within the renderer).
   1. Adjust the "Alignment" property to set the position of the "arrow" icon. Recommended: use "Text Left And Icon Right" for "forward" actions, and "Left" for "back" actions.

By default, the HoverpanelBuilder component will create example rows. These rows contain items that are configured for "back" and "forward" navigation.

Adjustments

The HoverShapeRect component (attached to the main Hoverpanel object) has properties that control the interface's size.

The HoverpanelRowTransitioner component has properties that affect the interface's row-switching animations.