Navigating Vuforia Studio > Widgets > 3D > 3D Image Button
  
3D Image Button
* 
This widget is only available in 3D Eyewear projects.
What Does This Widget Do?
The 3D Image Button widget is very similar to the 3D Checkbox and 3D Toggle Button, as it can be used to present the state of items and data that is bound to it, but you can select an image resource to display when it is pressed or not pressed.
When Should I Use This Widget?
A 3D Image Button widget can be useful when you want to display images for your buttons. For example, you could use a 3D Image Button to show the state of the animation sequence. Unpressed, a play icon is displayed, but once pressed, a pause icon could be displayed.
Are There Any Special Properties, Services, Events, or Actions?
To view a list of common widget properties, services, and events, see Common Widget Properties, Services, and Events.
The following table is a list of properties that are specific to this widget.
Property
Description
Text Pressed
Specifies the text when pressed.
Image Pressed
Specifies the image when pressed. To include an image, you can do one of the following:
• Click next to the field to add a new image file.
• Enter or copy and paste an image URL directly into the field.
• Select an image from the drop-down menu.
Supported file formats include:
• .png
• .jpg
Text Not Pressed
Specifies the text when not pressed.
Image Not Pressed
Specifies the image displayed when not pressed. To include an image, you can do one of the following:
• Click next to the field to add a new image file.
• Enter or copy and paste an image URL directly into the field.
• Select an image from the drop-down menu.
Supported file formats include:
• .png
• .jpg
Pressed
If selected, the button will be pressed by default in your Experience.
Height
Height of the button in meters. The minimum value is 4 cm.
Width
Width of the button in meters. The minimum value is 4 cm.
Font Color
Color of the font. Select a color from the color picker.
Button Color
Color of the button. Select a color from the color picker.
Service
Description
Set
Puts the button into the pressed state. If the button is selected, the pressed event will fire.
Reset
Puts the button into an unpressed state. If the button is selected, the unpressed event will fire.
Event
Description
Pressed
Triggered when the button is pressed. If the button is disabled, the event is not triggered.
Unpressed
Triggered when the button is not pressed. If the button is disabled, the event is not triggered.
The Widget in Action
Here’s an example of what your widget might look like!
Minimum Steps Required for Use
What It Looks Like
* 
This widget is best used with a 3D Panel.
1. Drag and drop a 3D Panel widget onto the canvas.
2. Drag and drop a 3D Image Button widget onto the canvas. Move the widget to position where you want it.
* 
After you drag and drop the widgets onto the canvas, you’ll need to nest them underneath the panel widget in the Views tree by dragging and dropping them under the panel widget.
3. Select the images you want displayed for Image Pressed and Image Not Pressed. For this example, we’ve only used an alert image for Image Pressed ().
4. Also for this example, we added a 3D Label next to the 3D Image Button that says Show Alert.
5. Drag and drop a 3D Image widget onto the canvas. This widget will be used to display the alert to the user.
6. Add the following code to Home.js:
$scope.showAlert = function(){
$scope.view.wdg['3DImage-2']['visible'] = true;
}

$scope.hideAlert = function(){
$scope.view.wdg['3DImage-2']['visible'] = false;
}
7. Navigate back to the Details pane of the 3D Image Button, an scroll down to Events.
8. Click JS next to the Pressed event, and enter showAlert().
9. Click JS next to the Unpressed event, and enter hideAlert().
Now, once you press the Show Alert image button, the alert is displayed.