Views

Introduction

Every view inherits from ElementView, allowing each of them to possess some useful properties.

Class In Depth

Below are listed the attributes and methods of all views. You can modify them as you want. However, it is not advised to modify any field beginning with an underscore (e.g: _myField). You must also use setters if they exist, as they may do some preprocessing.

Object method

• listen(object, propertyId): whenever the view change (button pressed, slider has moved, ...) it will directly put its new value inside the object referenced by object, at the key propertyId. This allows to, just like dat.gui, modify directly and object without needing to bind callbacks, such as onChange.

Object attributes

• mesh: contains the inner element of the view. For instance, with an ImageButton, the inner element is the icon. With a TextView, the inner element is the text mesh.
• pressed: true when the view is pressed, false otherwise. You should read it, but not write it.

Examples

You can process the inner element of any view:

let button1 = new VRUI.view.ImageButton(texture, {
    height: 0.5,
    width: 0.5,
})
button1.mesh.position.x = 10.0; // Move the icon inside the ImageButton

You can also listen for changes:

let uiOptions = {
    isPressed: false
};

let button = new VRUI.view.ImageButton(texture, {
    height: 0.5,
    width: 0.5,
}).listen(uiOptions, 'isPressed');

The call to listen(uiOptions, 'isPressed') will make the button write its state change directly in the object.