Push Button

Push Button

For interaction with the user we created a button component. This button component can be used in VR and in regular desktop mode.

The button emits an event on objects that have the button_listener component and where the button_channel is the same as that of the button. It emits events when it is pressed and when it is released. Use the button only in a empty a-entity as it will generate its own model.

To be able to use the button we require the AABB colider component. Include this using the following script before including the push_button script.

<script src="https://unpkg.com/aframe-aabb-collider-component@3.1.0/dist/aframe-aabb-collider-component.min.js"></script>

To let the mouse work with the button we also need the cursor component on the scene

<a-scene cursor="rayOrigin:mouse">
    ...
</a-scene>

To be able to push the button you need to add the "hand" class to the entity you want to be able to push the button.

<a-entity class="hand" id="leftcontrl" oculus-touch-controls="hand: left" thumbstick-logging ></a-entity>

Below we define a button with all possible settings, all of these are optional. See table 1 for the default values and description of the parameters.

<a-entity button="button_channel: channel_1; 
    event_start: button_1_pressed; 
    event_stop: button_1_released; 
    button_color: #FF0000; 
    base_color: #0000FF;">
</a-entity>

property	description	default
button_color	the color of the pushable part of the button	#FF0000
base_color	the color of the base of the button	#000000
event_start	the event that is emmited when the button is pressed	buttonpressed
event_stop	the event that is emmited when the button is released	buttonpressed
button_channel	the channel on wich the button emits its events	channel_1

To be able to receive an event we need to add the button_listener component to the entity we want to receive the events on. The events are emitted on the entity and not the component, so its easy to add components that listen to those events.

<a-entity some_controll_component button_listener="button_channel: channel_1"></a-entity>

property	description	default
button_channel	the channel on wich the button_listener listens	channel_1

If you want a button_listener to be able to listen to all button events on all channels. You can set the button_channel to "all" and all events will be emited on the entity.