This site has been permanently archived. The content on this site was last updated in 2019.
Constellation menu
Stay organized with collections
Save and categorize content based on your preferences.
The constellation menu is a gesture-based interaction model that helps users
navigate deep information hierarchies in a simple, responsive way. When a user
triggers the constellation menu, options radiate out from the reticle to
indicate possible paths the user can take down the hierarchy. Upon hovering over
a category option, more options appear, and previously traversed rings of
options recede into the distance to make more room for more items.
This menu gives users the ability to easily explore available options and
ensures that upon triggering the menu, options are only one click away. As the
user pursues a particular path, a line is drawn to connect previously selected
nodes. This creates a unique visual path for each item that helps the user develop
muscle memory for frequently selected items.
Use cases for constellation menus include item inventories, simple file
directories, and enterprise applications. In this example, we use the
constellation menu to present categories of 3D objects that the user can place
in the surrounding environment.
Getting Started
Constellation Menu is available as part of Daydream Elements.
To Use the Constellation Menu, first add the ConstellationMenuRoot prefab to
your scene. The primary script in this prefab is ConstellationMenuRoot, which
creates and destroys the menu based on controller input.
Customization
The ConstellationMenuRoot script has the following fields which can be
customized according to your use case.
- MenuTree:
ConstellationMenuRoot uses the same hierarchical menu system
Daydream Elements uses in other demos. Create a
ConstellationMenuTreeData asset and populate it with the menu items you
want. See building a menu section for more
details.
- Laser Pointer: Typically, menus need to appear closer to the user than
the background elements in the scene. This means that the laser reticle may
need to adjust the distance from the controller when a menu is opened. Link
the active laser pointer here to allow the reticle to update its distance.
- Menu Activation Button: The input event that will allow the menu to
open. This is typically a press or release of the app or touchpad buttons.
- Menu Icon Prefab: A prefab used to spawn each menu icon.
- Line Shortening Distance: A line is drawn between each icon in the path
of the hovering icon. Setting Line Shortening Distance will trim the ends
of that line by the given distance.
- Menu Distance: The distance away from the controller in meters to spawn
the Constellation Menu.
- Close Angle: The menu will automatically close when you point away from
the center by more than this angle.
- Open FoV Angle: The menu will only open if the laser is within the
field of view by less than this angle. This prevents accidental menu openings.
- Expandable Icon Decoration (optional): This sprite will be used (along
with the icon background) for each icon which is in the selected path and
can be expanded.
- Icon Background (optional): This background will be used for each icon
in the selected path.
- Hover Delay: This only applies to icons not in the path of the
hovering icon. This is how long in seconds the laser has to point at them
before they become the new hover icon. This is to prevent accidentally
making icons hover as the user moves the laser pointer around.
- Create a ConstellationMenuTree by going to File > Assets > Create >
DaydreamElements > ConstellationMenu > Tree.
- Create a Constellation Menu Item for each menu icon you want to add by
going to File > Assets > Create > DaydreamElements > ConstellationMenu >
Item.
- Set the ConstellationMenuItem fields as desired:
- ID: (optional) You may use this field as an identifier. It isn't
used by the
ConstellationMenuCode.
- Icon: This is the foreground image for the button. Avoid text and
opt for recognizable icons.
- Prefab: (optional) You may use this to attach a serialized
GameObject to the Item.
- Tool Tip: (optional) This text is drawn beneath the icon if set and
the Tooltip Sprite is not set.
- Tooltip Sprite (optional): This sprite is drawn beneath the icon if
set.
- Each ConstellationMenuItem can then be added to the menu tree by dragging
them into the ConstellationMenuTree. Items can be nested as children or as
siblings to construct a hierarchy.
Listening for events
ConstellationMenuRoot provides the following events:
- OnMenuOpened
- OnMenuClosed
- OnItemSelected
- OnItemHovered
In order to listen to menu events, either AddListener to these events or add
listeners in the editor. OnItemSelected is invoked when the user clicks on
an icon. OnItemHovered is invoked when a user points the laser pointer at an
icon. Both of these will pass the ConstellationMenuItem attached to the icon
to the callback function.
Backgrounds and lines
Backgrounds for each icon fade in and out depending on the icons state and which
icon was most recently pointed at. The primary background is set via the
Icon Background variable on the RootMenu. A secondary decoration can also
be set there via Expandable Icon Decoration. This secondary icon can also
be offset to be behind the primary background or in front of it by changing the
transform saved in its prefab, `ConstellationMenuDecorationLabel.
All rights reserved. Java is a registered trademark of Oracle and/or its affiliates.
Last updated 2024-10-09 UTC.
[[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2024-10-09 UTC."],[[["\u003cp\u003eThe Constellation Menu is a gesture-based UI for navigating complex information hierarchies using radiating options triggered by the user's reticle.\u003c/p\u003e\n"],["\u003cp\u003eIt simplifies deep navigation, keeping options one click away, and uses a visual path to aid muscle memory for frequently accessed items.\u003c/p\u003e\n"],["\u003cp\u003eUse cases include inventories, file directories, and enterprise applications, as showcased with 3D object placement in the provided example.\u003c/p\u003e\n"],["\u003cp\u003eTo implement, add the \u003ccode\u003eConstellationMenuRoot\u003c/code\u003e prefab, customize its settings like the menu tree and laser pointer, and build your menu using \u003ccode\u003eConstellationMenuItem\u003c/code\u003e assets.\u003c/p\u003e\n"],["\u003cp\u003eThe menu provides events like \u003ccode\u003eOnItemSelected\u003c/code\u003e and \u003ccode\u003eOnItemHovered\u003c/code\u003e for developers to respond to user interactions and trigger actions accordingly.\u003c/p\u003e\n"]]],["The constellation menu, a gesture-based interface, allows users to navigate hierarchical data. Upon activation, options radiate from the reticle, with subsequent options appearing on hover, while previous layers recede. A line connects selected nodes, creating a visual path to build muscle memory. Users can customize menu features including the menu tree, laser pointer interaction, button activation, menu icon appearance, line trimming, and open/close angle settings. To create a menu, create a Tree and then Items with icons, tooltips, and optional prefabs, then add the Items to the Tree, organizing them into the desired hierarchy. The menu sends events for open/close and item selection/hover.\n"],null,["# Constellation menu\n\nThe constellation menu is a gesture-based interaction model that helps users\nnavigate deep information hierarchies in a simple, responsive way. When a user\ntriggers the constellation menu, options radiate out from the reticle to\nindicate possible paths the user can take down the hierarchy. Upon hovering over\na category option, more options appear, and previously traversed rings of\noptions recede into the distance to make more room for more items.\n\nThis menu gives users the ability to easily explore available options and\nensures that upon triggering the menu, options are only one click away. As the\nuser pursues a particular path, a line is drawn to connect previously selected\nnodes. This creates a unique visual path for each item that helps the user develop\nmuscle memory for frequently selected items.\n\nUse cases for constellation menus include item inventories, simple file\ndirectories, and enterprise applications. In this example, we use the\nconstellation menu to present categories of 3D objects that the user can place\nin the surrounding environment.\n\nGetting Started\n---------------\n\nConstellation Menu is available as part of Daydream Elements.\n\nTo Use the Constellation Menu, first add the `ConstellationMenuRoot` prefab to\nyour scene. The primary script in this prefab is `ConstellationMenuRoot`, which\ncreates and destroys the menu based on controller input.\n\nCustomization\n-------------\n\nThe `ConstellationMenuRoot` script has the following fields which can be\ncustomized according to your use case.\n\n- **MenuTree** : `ConstellationMenuRoot` uses the same hierarchical menu system Daydream Elements uses in other demos. Create a `ConstellationMenuTreeData` asset and populate it with the menu items you want. See [building a menu section](#Building_a_menu) for more details.\n- **Laser Pointer**: Typically, menus need to appear closer to the user than the background elements in the scene. This means that the laser reticle may need to adjust the distance from the controller when a menu is opened. Link the active laser pointer here to allow the reticle to update its distance.\n- **Menu Activation Button:** The input event that will allow the menu to open. This is typically a press or release of the app or touchpad buttons.\n- **Menu Icon Prefab:** A prefab used to spawn each menu icon.\n- **Line Shortening Distance**: A line is drawn between each icon in the path of the hovering icon. Setting Line Shortening Distance will trim the ends of that line by the given distance.\n- **Menu Distance:** The distance away from the controller in meters to spawn the Constellation Menu.\n- **Close Angle:** The menu will automatically close when you point away from the center by more than this angle.\n- **Open FoV Angle:** The menu will only open if the laser is within the field of view by less than this angle. This prevents accidental menu openings.\n- **Expandable Icon Decoration (optional)**: This sprite will be used (along with the icon background) for each icon which is in the selected path and can be expanded.\n- **Icon Background (optional)**: This background will be used for each icon in the selected path.\n- **Hover Delay**: This only applies to icons not in the path of the hovering icon. This is how long in seconds the laser has to point at them before they become the new hover icon. This is to prevent accidentally making icons hover as the user moves the laser pointer around.\n\nBuilding a menu\n---------------\n\n1. Create a ConstellationMenuTree by going to **File \\\u003e Assets \\\u003e Create \\\u003e\n DaydreamElements \\\u003e ConstellationMenu \\\u003e Tree**.\n2. Create a Constellation Menu Item for each menu icon you want to add by going to **File \\\u003e Assets \\\u003e Create \\\u003e DaydreamElements \\\u003e ConstellationMenu \\\u003e\n Item**.\n3. Set the ConstellationMenuItem fields as desired:\n - **ID** : (optional) You may use this field as an identifier. It isn't used by the `ConstellationMenuCode`.\n - **Icon**: This is the foreground image for the button. Avoid text and opt for recognizable icons.\n - **Prefab** : (optional) You may use this to attach a serialized `GameObject` to the Item.\n - **Tool Tip**: (optional) This text is drawn beneath the icon if set and the Tooltip Sprite is not set.\n - **Tooltip Sprite** (optional): This sprite is drawn beneath the icon if set.\n4. Each ConstellationMenuItem can then be added to the menu tree by dragging them into the ConstellationMenuTree. Items can be nested as children or as siblings to construct a hierarchy.\n\nListening for events\n--------------------\n\nConstellationMenuRoot provides the following events:\n\n- **OnMenuOpened**\n- **OnMenuClosed**\n- **OnItemSelected**\n- **OnItemHovered**\n\nIn order to listen to menu events, either `AddListener` to these events or add\nlisteners in the editor. **OnItemSelected** is invoked when the user clicks on\nan icon. **OnItemHovered** is invoked when a user points the laser pointer at an\nicon. Both of these will pass the `ConstellationMenuItem` attached to the icon\nto the callback function.\n\nBackgrounds and lines\n---------------------\n\nBackgrounds for each icon fade in and out depending on the icons state and which\nicon was most recently pointed at. The primary background is set via the\n**Icon Background** variable on the RootMenu. A secondary decoration can also\nbe set there via **Expandable Icon Decoration**. This secondary icon can also\nbe offset to be behind the primary background or in front of it by changing the\ntransform saved in its prefab, \\`ConstellationMenuDecorationLabel."]]