Component Library
vuer.schemas

vuer.schema contains the schemas for the various components of the Vuer system. These schemas are used to validate the data that is passed to the various components of the system.

For detailed view of how these components are implemented, please refer to the typescript source code at https://github.com/vuer-ai/vuer-ts/tree/master/src/schemas.

Example Usage:

from vuer import Vuer
from vuer.schemas import DefaultScene, Sphere

vuer = Vuer()
vuer.set @ DefaultScene(up=[0, 1, 0])
vuer.upsert @ Sphere(args=[0.1, 20, 20], position=[0, 0.1, 0], key="sphere")

class vuer.schemas.Element

Bases: object

Base class for all elements

tag: str = 'div'

serialize()

Serialize the element to a dictionary for sending over the websocket. :return: Dictionary representing the element.

class vuer.schemas.BlockElement

Bases: Element

serialize()

Serialize the element to a dictionary for sending over the websocket. :return: Dictionary representing the element.

class vuer.schemas.AutoScroll

Bases: BlockElement

tag: str = 'AutoScroll'

class vuer.schemas.Markdown

Bases: BlockElement

tag: str = 'Markdown'

class vuer.schemas.Page

Bases: BlockElement

A Page is an element that contains other elements. It is represented by a div element in the DOM.

tag: str = 'article'

class vuer.schemas.div

Bases: BlockElement

tag: str = 'Div'

class vuer.schemas.InputBox

Bases: Element

An InputBox is an element that allows the user to input text. It is represented by an input element in the DOM.

tag: str = 'Input'

class vuer.schemas.Header1

Bases: BlockElement

A Text element is an element that displays text. It is represented by a text, or p element in the DOM.

tag: str = 'h1'

vuer.schemas.Header

alias of Header1

class vuer.schemas.Header2

Bases: Header1

Header 2

tag: str = 'h2'

class vuer.schemas.Header3

Bases: Header1

Header 2

tag: str = 'h3'

class vuer.schemas.Paragraph

Bases: BlockElement

A Text element is an element that displays text. It is represented by a text, or p element in the DOM.

tag: str = 'p'

class vuer.schemas.Text

Bases: Element

A Text element is an element that displays text. It is represented by a text, or p element in the DOM.

tag: str = 'Text'

class vuer.schemas.Bold

Bases: Text

class vuer.schemas.Italic

Bases: Text

class vuer.schemas.Link

Bases: Text

tag: str = 'a'

class vuer.schemas.Button

Bases: Element

A Button element is an element that allows the user to click on it. It is represented by a button element in the DOM.

tag: str = 'Button'

class vuer.schemas.Slider

Bases: Element

A Slider element is an element that allows the user to slide a value. It is represented by a slider element in the DOM.

tag: str = 'Slider'

class vuer.schemas.Image

Bases: Element

An Image element is an element that displays an image. It is represented by an img element in the DOM.

tag: str = 'Img'

class vuer.schemas.ImageUpload

Bases: Element

A ImageUpload element is an element that allows the user to upload a file. It is represented by a file upload element in the DOM.

tag: str = 'ImageUpload'

class vuer.schemas.Scene

Bases: BlockElement

tag: str = 'Scene'

serialize()

Serialize the element to a dictionary for sending over the websocket. :return: Dictionary representing the element.

class vuer.schemas.SceneElement

Bases: BlockElement

class vuer.schemas.Frustum

Bases: SceneElement

tag: str = 'Frustum'

class vuer.schemas.CameraHelper

Bases: SceneElement

tag: str = 'CameraHelper'

class vuer.schemas.group

Bases: SceneElement

tag: str = 'group'

children = []

class vuer.schemas.mesh

Bases: SceneElement

tag: str = 'mesh'

children = []

class vuer.schemas.TriMesh

Bases: SceneElement

tag: str = 'TriMesh'

children = []

vertices: ndarray[Any, dtype[float16]] = None

faces: ndarray[Any, dtype[uint32]] = None

colors: ndarray[Any, dtype[uint8]] = None

class vuer.schemas.PointCloud

Bases: SceneElement

PointCould element, highly optimized for payload size and speed.

Parameters:

• vertices (NDArray[np.float16]) – An optional numpy array of shape (N, 3) containing the vertices of the pointcloud.

• colors – An optional numpy array of shape (N, 3) containing the colors of the point cloud.

• size (float) – An optional float that sets the size of the points.

• key (str) – str An optional string that sets the key of the element.

Usage:

sess.upsert @ PointCloud(
    vertices=np.random.rand(1000, 3),
    colors=np.random.rand(1000, 3),
    size=0.01,
    key="pointcloud",
)

tag: str = 'PointCloud'

vertices: ndarray[Any, dtype[float16]] = None

An optional numpy array of shape (N, 3) containing the vertices of the point cloud.

colors: ndarray[Any, dtype[uint8]] = None

An optional numpy array of shape (N, 3) containing the colors of the point cloud.

children = []

class vuer.schemas.Box

Bases: SceneElement

tag: str = 'Box'

class vuer.schemas.Capsule

Bases: SceneElement

tag: str = 'Capsule'

class vuer.schemas.Cone

Bases: SceneElement

tag: str = 'Cone'

class vuer.schemas.Circle

Bases: SceneElement

tag: str = 'Circle'

class vuer.schemas.Cylinder

Bases: SceneElement

tag: str = 'Cylinder'

class vuer.schemas.Dodecahedron

Bases: SceneElement

tag: str = 'Dodecahedron'

class vuer.schemas.Edges

Bases: SceneElement

tag: str = 'Edges'

class vuer.schemas.Extrude

Bases: SceneElement

tag: str = 'Extrude'

class vuer.schemas.Icosahedron

Bases: SceneElement

tag: str = 'Icosahedron'

class vuer.schemas.Lathe

Bases: SceneElement

tag: str = 'Lathe'

class vuer.schemas.Octahedron

Bases: SceneElement

tag: str = 'Octahedron'

class vuer.schemas.Plane

Bases: SceneElement

tag: str = 'Plane'

class vuer.schemas.Polyhedron

Bases: SceneElement

tag: str = 'Polyhedron'

class vuer.schemas.Ring

Bases: SceneElement

tag: str = 'Ring'

class vuer.schemas.Shape

Bases: SceneElement

tag: str = 'Shape'

class vuer.schemas.Sphere

Bases: SceneElement

tag: str = 'Sphere'

class vuer.schemas.Tetrahedron

Bases: SceneElement

tag: str = 'Tetrahedron'

class vuer.schemas.Torus

Bases: SceneElement

tag: str = 'Torus'

class vuer.schemas.TorusKnot

Bases: SceneElement

tag: str = 'TorusKnot'

class vuer.schemas.Tube

Bases: SceneElement

tag: str = 'Tube'

class vuer.schemas.Fog

Bases: SceneElement

Fog is a scene element that adds fog to the scene. This can be used to approximate depth.

Arguments:

args: color, near, far

Example Usage:

Fog(args=[0xcccccc, 10, 15])

tag: str = 'fog'

class vuer.schemas.Wireframe

Bases: SceneElement

tag: str = 'Wireframe'

class vuer.schemas.Splat

Bases: SceneElement

tag: str = 'Splat'

class vuer.schemas.LumaSplats

Bases: SceneElement

tag: str = 'Splats'

class vuer.schemas.Pcd

Bases: SceneElement

tag: str = 'Pcd'

class vuer.schemas.CameraView

Bases: SceneElement

tag: str = 'CameraView'

class vuer.schemas.SceneBackground

Bases: Image, SceneElement

Sets the background of the scene to a static image. Does not work well with high frame rates. For displaying movies, use the ImageBackground element.

tag: str = 'SceneBackground'

class vuer.schemas.ImageBackground

Bases: Image, SceneElement

Sets the background of the scene to an image, Supports high frame rates.

We use a plane that is always facing the camera to display the image.

tag: str = 'ImageBackground'

class vuer.schemas.Gamepads

Bases: SceneElement

tag: str = 'Gamepads'

class vuer.schemas.DirectionalLight

Bases: SceneElement

tag: str = 'DirectionalLight'

class vuer.schemas.PointLight

Bases: SceneElement

tag: str = 'PointLight'

class vuer.schemas.SpotLight

Bases: SceneElement

tag: str = 'SpotLight'

class vuer.schemas.AmbientLight

Bases: SceneElement

tag: str = 'AmbientLight'

class vuer.schemas.Html

Bases: SceneElement

as=’div’ // Wrapping element (default: ‘div’)

wrapperClass // The className of the wrapping element (default: undefined) prepend // Project content behind the canvas (default: false) center // Adds a -50%/-50% css transform (default: false) [ignored in transform mode] fullscreen // Aligns to the upper-left corner, fills the screen (default:false) [ignored in transform mode] distanceFactor={10} // If set (default: undefined), children will be scaled by this factor, and also by distance to a PerspectiveCamera / zoom by a OrthographicCamera. zIndexRange={[100, 0]} // Z-order range (default=[16777271, 0]) portal={domnodeRef} // Reference to target container (default=undefined) transform // If true, applies matrix3d transformations (default=false) sprite // Renders as sprite, but only in transform mode (default=false) calculatePosition={(el: Object3D, camera: Camera, size: { width: number; height: number }) => number[]} // Override default positioning function. (default=undefined) [ignored in transform mode] occlude={[ref]} // Can be true or a Ref<Object3D>[], true occludes the entire scene (default: undefined) onOcclude={(visible) => null} // Callback when the visibility changes (default: undefined) {…groupProps} // All THREE.Group props are valid {…divProps} // All HTMLDivElement props are valid

tag: str = 'Html'

class vuer.schemas.Pivot

Bases: SceneElement

tag: str = 'Pivot'

class vuer.schemas.Movable

Bases: SceneElement

tag: str = 'Movable'

class vuer.schemas.Obj

Bases: SceneElement

tag: str = 'Obj'

class vuer.schemas.CoordsMarker

Bases: SceneElement

tag: str = 'CoordsMarker'

class vuer.schemas.Ply

Bases: SceneElement

tag: str = 'Ply'

class vuer.schemas.Glb

Bases: SceneElement

tag: str = 'Glb'

class vuer.schemas.Urdf

Bases: SceneElement

tag: str = 'Urdf'

class vuer.schemas.Gripper

Bases: SceneElement

tag: str = 'Gripper'

class vuer.schemas.SkeletalGripper

Bases: SceneElement

tag: str = 'SkeletalGripper'

class vuer.schemas.Grid

Bases: SceneElement

tag: str = 'Grid'

class vuer.schemas.GrabRender

Bases: SceneElement

tag: str = 'GrabRender'

key = 'DEFAULT'

We do not want the client to set keys automatically since GrabRender is usually used a singleton component as default.

class vuer.schemas.TimelineControls

Bases: SceneElement

tag: str = 'TimelineControls'

class vuer.schemas.PointerControls

Bases: SceneElement

tag: str = 'PointerControls'

class vuer.schemas.DefaultScene

Bases: Scene

Default Scene that includes a basic setup of ambient lights.

Parameters:

• children (SceneElement, ...) – list of children elements to be rendered in the scene.

• rawChildren – list of children elements to be rendered in the scene.

• htmlChildren – list of children elements to be rendered in the scene.

• bgChildren – list of children elements to be rendered in the scene.

• show_helper – list of children elements to be rendered in the scene.

• startStep – list of children elements to be rendered in the scene.

• endStep – list of children elements to be rendered in the scene.

• up – list of children elements to be rendered in the scene.

• kwargs – list of children elements to be rendered in the scene.

Example Usage:

DefaultScene(
    # Ambient Light does not have helper because it is ambient.
    AmbientLight(intensity=1.0, key="default_ambient_light"),
    DirectionalLight(
        intensity=1, key="default_directional_light", helper=show_helper
    ),
    *children,
    rawChildren=rawChildren,
    htmlChildren=htmlChildren,
    bgChildren=[
        GrabRender(),
        *[
            # we use a key here so that we can replace the timeline controls via update
            TimelineControls(start=startStep, end=endStep, key="timeline")
            if endStep
            else None,
        ],
        PointerControls(),
        Grid(),
        *bgChildren,
    ],
    up=up,
    **kwargs,
)