Working with Widgets > 3D > 3D Toggle Button
  
3D Toggle Button
* 
Available only in 3D Eyewear projects.
What Does This Widget Do?
The 3D Toggle Button widget allows you to present the state of items and data in a 3D Eyewear experience.
When Should I Use This Widget?
A 3D Toggle Button widget can be useful when you want to toggle other panels or widgets to avoid the experience becoming cluttered. For example, if you want to be able to show and hide a 3D image in an experience, you can use a 3D Toggle Button that allows the frontline user to choose when they want to display it.
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
JavaScript
Type
Description
Text
text
string
Text that appears next to the 3D Toggle Button.
Pressed
pressed
boolean
If selected, the toggle will be pressed by default in your experience.
Height
height
number
Height of the button in meters. The minimum value is 0.04 meters.
Width
width
number
Width of the button in meters. The minimum value is 0.04 meters.
Font Color
fontColor
color
Color of the font. Select a color from the color picker.
Button Color
color
color
Color of the button. Select a color from the color picker.
X Coordinate
x
number
Location of the model on the x-axis.
Y Coordinate
y
number
Location of the model on the y-axis.
Z Coordinate
z
number
Location of the model on the z-axis.
X Rotation
rx
number
Rotation of the model about the x-axis.
Y Rotation
ry
number
Rotation of the model about the y-axis.
Z Rotation
rz
number
Rotation of the model about the z-axis.
Disabled
disabled
boolean
When this checkbox is selected, the widget is not clickable.
Service
JavaScript
Description
Set
set
Puts the button into the pressed state. If the button is selected, the pressed event will fire.
Reset
reset
Puts the button into an unpressed state. If the button is selected, the unpressed event will fire.
Event
JavaScript
Description
Pressed
pressed
Triggered when the button is pressed. If the button is disabled, the event is not triggered.
Unpressed
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!
Instructions
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 Toggle 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. Also for this example, we added a 3D Label next to the 3D Toggle Button that says Show Instructional Video.
4. Drag and drop a 3D Video widget onto the canvas.
5. Add the following code to Home.js:
$scope.showVideo = function(){
$scope.view.wdg['3DVideo-1']['visible'] = true;
}

$scope.hideVideo = function(){
$scope.view.wdg['3DVideo-1']['visible'] = false;
}
6. Navigate back to the DETAILS pane of the 3D Toggle Button, an scroll down to EVENTS.
7. Click JS next to the Pressed event, and enter showVideo().
8. Click JS next to the Unpressed event, and enter hideVideo().
Now, when you toggle the Show Instructional Video button, the 3D Video appears.