Skip to content

Interface Modules꞉ Cast

Zach Kinstner edited this page Nov 2, 2016 · 2 revisions

The Hovercast interface provides an arc-shaped, hierarchical menu structure that attaches to a cursor. By default, the interface follows the "Left Palm" cursor, and fades into view only when the cursor is facing the user's eyes.

The interface includes a button for opening and closing the menu, a button and gesture for navigating "back" in the menu hierarchy, and a non-interactive element for displaying the title of the active menu level. It displays one arc-shaped row of items at a time, and (upon item selections or other events) smoothly animates transitions between these rows.

Hovercast with Leap Motion 📷 Using the Hovercast interface with Leap Motion hands

Overview

Location

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

Installation

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

  1. Create an empty GameObject named Hovercast.
  2. Add the HovercastBuilder component to Hovercast.
    1. Modify the properties, if necessary.
    2. Click the "Build Interface" button.
  3. Modify the properties, if necessary, within the newly-generated components.
  4. Adjust the cursor capabilities based upon the desired input module.

Reference

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

Tutorials

Input Module: LeapMotion, LeapMotionOld

Hovercast with Leap Motion 📷 Using the Hovercast interface with Leap Motion hands

When using Leap Motion hands, Hovercast is designed to extend from the palm of the left hand, and to be controlled with a single cursor from the opposite hand (or the "Look" cursor, if desired). The recommended cursor setup:

Object Component Property Value
HoverKit/.../LeftPalm HoverCursorData Capability Transform Only
HoverKit/.../RightIndex HoverCursorData Capability Full
HoverKit/... (all others) HoverCursorData Capability None
CursorRenderers/LeftPalm Disable entire GameObject --- ---
Hovercast HoverCursorFollower Cursor Type Left Palm

Input Module: Vive

Hovercast with Vive 📷 Using the Hovercast interface with Vive controllers

When using Vive controllers, Hovercast is designed to extend from the inside edge of the left controller, and to be controlled with a single cursor from the opposite controller (or the "Look" cursor, if desired). The recommended cursor setup:

Object Component Property Value
HoverKit/.../LeftPinky HoverCursorData Capability Transform Only
HoverKit/.../RightMiddle HoverCursorData Capability Full
HoverKit/... (all others) HoverCursorData Capability None
CursorRenderers/LeftPinky Disable entire GameObject --- ---
Hovercast HoverCursorFollower Cursor Type Left Pinky

Active Row

The Hovercast interface has one active row (of type HoverLayoutArcRow) 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 HovercastInterface component (attached to the main Hovercast object).
    1. Set the "Active Row" property to the desired HoverLayoutArcRow 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 Hovercast 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 Hovercast/TransformAdjuster/Rows object.
  2. Add the HoverLayoutArcRow component to MyRow.
  3. Add the HovercastRowTitle component to MyRow (optional).
  4. Create items as children of MyRow (see Getting Started for instructions).
    1. Add the HoverShapeArc component to each item.

Navigation

Hovercast 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 Hovercast'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 HovercastRowSwitchingInfo component to the item.
    1. Choose the target row (a HoverLayoutArcRow 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 HovercastInterface.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 HovercastBuilder component will create example rows. These rows contain items that are configured for "back" and "forward" navigation.

Hand Switching

Switching sides requires a mirroring of the interface and its content, without mirroring the text. Occasionally, an app may give the user an option to switch hands. The Hovercast interface will follow the position and orientation of one cursor, which is typically the "Palm" cursor of either the left or right hand ("LeftPalm" or "RightPalm").

The following steps describe how to make the Hovercast interface follow a different cursor, mirror the interface orientation, and enable an opposite-hand interaction cursor:

  1. Find the HoverCursorFollower component (attached to the main Hovercast object).
    1. Set the "Cursor Type" property to the desired cursor.
  2. Find the HovercastBackCursorTrigger component (attached to the main Hovercast object).
    1. Recommended: keep the the "Use Followed Cursor Type" property enabled.
    2. Otherwise: set the "Cursor Type" property to use a cursor from the opposite hand.
  3. Find the HovercastMirrorSwitcher component (attached to the main Hovercast object).
    1. Select the "Use Mirror Layout" property for right-handed usage; deselect it for left-handed usage.
  4. Find the cursors within the HoverKit prefab.
    1. Ensure that the followed cursor is enabled, and set its "Capability" property to "Transform Only".
    2. For one (or more) cursors on the opposite hand as the followed cursor, set the "Capability" property to "Full".
    3. For all other cursors (especially those on on the same hand as the followed cursor), set the "Capability" property to "None".

The HovercastBuilder component has a property for selecting which hand the Hovercast interface will follow (specifically, the selection is between the "Left Palm" and "Right Palm" cursors). This configures the interface once, at creation-time, for left or right handedness.

Adjustments

The HovercastRowTransitioner component has properties that affect the interface's size and its row-switching animations.

The HovercastOpenTransitioner component has properties that affect the interface's open/close animations.

The HovercastActiveDirection component has properties that control how the interface fades in/out based upon the direction it is facing (typically, it should fade in when facing the user). These properties may require adjustment for use with certain input modules.

Clone this wiki locally