This page concerns the Vuforia Engine API version 9.8 and earlier. It has been deprecated and will no longer be actively updated.
Virtual Buttons invokes interactivity for your Vuforia Targets moving on screen interactions to the real world. Learn from the Virtual Buttons sample on how to implement and configure Virtual Buttons and immerse your end users in to your AR application.
Virtual buttons provide a useful mechanism for making image-based targets interactive. Handle the events with OnButtonPressed and OnButtonReleased when the button is visually obstructed from the camera. When creating a Virtual Button, the size and placement must be considered carefully with respect to the user experience. There are several factors that will affect the responsiveness and usability of Virtual buttons.
- The length and width of the button.
- The area of the target that it covers.
- The placement of the button in relation to both the border of the image, and other buttons on the target.
- The underlying area of the button has a high contrast and detail so that events are easily activated.
Design and Placement
Sizing Buttons
The rectangle that you define for the area of a Virtual button should be equal to, or greater than, 10% of the overall target area. Button events are triggered when a significant proportion of the features underlying the area of the button are concealed from the camera. This can occur when the user covers the button or otherwise blocks it in the camera view. For this reason, the button should be sized appropriately for the source of the action it is intended to respond to. For example, a button that should be triggered by a user's finger needs to be smaller than one that will be triggered by their entire hand.
Sensitivity Setting
Virtual Buttons can be assigned multiple sensitivities, which define how readily the button's OnButtonPressed will fire.
Buttons with a HIGH sensitivity will fire more easily than those with a LOW sensitivity. The button's sensitivity is a reflection of the proportion of the button area that must be covered, and the coverage time. It's advisable to test the responsiveness of each of your buttons in a real-world setting to verify that they perform as expected.
Place Over Features
Virtual Buttons detect when underlying features of the target image are obscured from the camera view. You will need to place your button over an area of the image that is rich in features in order for it to reliably fire its OnButtonPressed event. To determine where these features are in your image, use the Show Features link on your image in the Target Manager. You will see the available features marked with yellow hatch marks as in the example image below.
Inset the Buttons
Virtual buttons should not be placed against the border of the target. Image based targets have a margin, equivalent to ~8% of the target area, at the edge of the target rectangle that is not used for recognition or tracking. For this reason, it is not possible to detect when a user covers this area. Be sure to inset your buttons so that you are able to detect OnButtonPressed events across their entire button area.
See: How To Use the Feature Exclusion Buffer
Avoid Stacking Buttons
It is recommended that you don't arrange buttons in a column in the direction that the user is facing the target. This is because the user will need to reach over lower buttons to press higher ones, which can result in the lower buttons firing their OnButtonPressed events.
If you do need to stack buttons in an arrangement that may result in this behavior, you should implement app logic that filters these results to determine which button was actually intended to be selected.
The image on the right shows the its features and its feature exclusion buffer area along the outer borders.
Virtual Button Attributes
Attributes of an ideal virtual button are listed in the following table.
Attribute |
Suggestions |
| Size | Choose areas in the images that have dimensions of approximately 10% of the image target’s size. |
| Shape | Make buttons easily identifiable to stand out from rest of image. Highlight active buttons in the augmentation layer to hint at active regions on the target. |
| Texture or contrast | Avoid defining buttons on low contrast areas of the targets. The underlying target area needs to have sufficient features to be evaluated. Choose a button design that is different in texture from the object that causes the occlusion. |
| Arrangement on the target | Arrange buttons around the target’s borders with enough space between to avoid losing tracking when the end user presses a button. |
Examples
Explore the Virtual Buttons sample from the Unity Asset Store or from Vuforia’s download page to see it in action and get yourself familiar with the feature. Print the Image Targets included in the sample and test the sample in either Unity’s play mode or by deploying the build to your device.
Virtual Buttons in Unity
In Unity, the Virtual Button functionality can be added to a mesh via the VirtualButtonBehaviour script or by copying the Virtual Button GameObjects from the sample. Choose the button’s sensitivity in the Inspector Window. Add as well, the VirtualButtonEventHandler to the image-based target that you intend to place the Virtual Button on.
Virtual Buttons in Native
Virtual buttons are created by defining them in the Dataset Configuration XML file as a property of image targets or by adding and destroying Virtual Buttons at application run time through a set of well-defined APIs. Virtual buttons are demonstrated in the Wood.xml target configuration in the native core samples.
For more information, see How To Modify the Dataset Configuration XML File Outside the Target Manager for instructions on creating virtual buttons in the Dataset Configuration .XML file.
Learn More
How to Create and Destroy Virtual Buttons at Runtime
How to Modify the Dataset Configuration XML File Outside the Target Manager