Skip to main content

All Widgets

Widget: Native AR Viewer​

The native AR widget wil open the selected variant of its model in the native 3D viewer application of the device it's running on (quick look for iOS, scene viewer on Android).

The icon will only appear in the scene if it is being viewed on a device that supports either of these services (the icon will not render on desktop).

If you are using this widget in conjunction with a variant selector widget you need to connect the Output Variant service event to the Set Variant service on your AR widget as well as the Set Variant service on your model widget. A mismatch of models and variants will produce undefined behavior. The allow scaling in AR will enable users to modify the size of the model in the native app if it is supported.

Models with more than 100k polygons will not display in ios quick look.

Properties​

Label: string

Visible: boolean

Position: vector3

Rotation: vector3 Adjust the rotation of the widget in degrees.

Scale: vector3

Model: model

Model Variant: model-variant

Allow Scaling in AR: boolean

Marker Source: string

Widget: Text Box 2D​

A 2D textbox that is opened when the corresponding sprite is clicked.

Properties​

Label: string

Visible: boolean

Position: vector3

Rotation: vector3 Adjust the rotation of the widget in degrees.

Scale: vector3

Title: Multi Language Option Builder

Text Options: Multi Language Option Builder Add text for each language. Language options are added to the scene as a whole in the Language Options property.

Custom CSS: Multi Line String

Image Source: string

Pixel Offset X: number

Pixel Offset Y: number

Widget: Video​

Add a video to your scene. A video source can be set for every language in the scene. If there is not a source for the current language in the scene it will show the closed caption video for the default language in the scene (by default english[en]).

Properties​

Label: string

Visible: boolean

Position: vector3

Rotation: vector3 Adjust the rotation of the widget in degrees.

Scale: vector3

Video Sources: video

Subtitle Sources: Subtitle File (SRT)

Play on Load: boolean

Clickable: boolean

Play on Click: boolean

Pause When Leaving Hotspot: boolean If this is set to true the video will pause when the user exits any panorama. For complicated pausing logic you should probably use the node editor.

Loop: boolean

Opacity: number

Transparent: select

Chroma Key: string

Chroma Similarity: number

Chroma Smoothness: number

Chroma Spill: number

Face Camera Mode: select

Timeline Events: List Put time stamps in seconds. If the event is within a few seconds of the end of the video use the play finished event instead.

Subtitle Color: color

Subtitle Background Color: color

Subtitle Size: select

Widget: Panorama​

A panorama is a 360 degree image that will surround the camera. Generally these will be created during the import process. When imported they will generally consist of 6 square images. In other cases you can upload a single equirectangular image. If uploading your own you may need to adjust the rotation of the image with regrad to the scene using the Skybox Rotation property. To improve download performance you can also convert the imported 6 images into a single merged image using the Convert To Merged Skybox button. The rotation and scale values affect the hotspot sprite associated with the panorama but will not change the experience within the panorama. If you want a user to start inside a panorama connect the Flow Editor Entry point widget Scene Start event to the Enter service on your chosen panorama.

Properties​

Label: string

Visible: boolean

Position: vector3

Rotation: vector3 Adjust the rotation of the widget in degrees.

Scale: vector3

360 Image: 360 Image

Camera Y Offset: number Set the y-value of the camera's postion when viewing this panorama.

Show Exit Button: boolean If true an exit button will be present while in panorama that will return user to dollhouse view. Currently the camera will stay in the same position.

Skybox Rotation: vector3 Adjust this property to adjust how the skybox that the panorama is drawn to is rotated.

Camera Rotation On Start: vector3

Always Use Start Rotation: boolean

Panorama perspective Rotation: vector4

Skybox or Equirectangular: boolean Toggle this value to switch between using a single equirectangular image or 6 images for a skybox to construct the panorama.

Convert to Merged Skybox: button

Widget: Model​

Display a model in the scene.

Properties​

Label: string

Visible: boolean

Position: vector3

Rotation: vector3 Adjust the rotation of the widget in degrees.

Scale: vector3

Model: model

Model Variant: model-variant

Clickable: boolean

Transparent: boolean

Cast Shadow: boolean

Play Animation Automatically: boolean If there is an animation track associated with this model begin looping the animation once model loads. If there is no track, this option has no effect

Loop Animation: boolean

Select an animation track: select Choose which animation track should play, if an animation track exists on this model. These animation tracks must be created in an external program such as Blender or Cinema 4D

Animation End Behavior: select This property only takes effect if you are not looping your animation. Return will return the model to its resting state. Clamp will freeze at the last frame of the animation.

Opacity: number

Texture Encoding: select This property is still experimental. Default will not change anything but you may need to refresh to see the effect.

Widget: Group​

This widget does not add anything to the scene but can be useful to organize your scene hierarchy. Any scale, rotation, or position settings set on the group will be applied to all of its children.

Properties​

Label: string

Visible: boolean

Position: vector3

Rotation: vector3 Adjust the rotation of the widget in degrees.

Scale: vector3

Widget: Box Collider​

A box collider adds an invisible box to the scene that intercepts click events. Use it to hide widgets behind it or to block interactions with them.

Properties​

Label: string

Visible: boolean

Position: vector3

Rotation: vector3 Adjust the rotation of the widget in degrees.

Scale: vector3

Widget: Depth Model​

The depth model widget will block the view of items behind it from the perspective of the camera. If clickable is set to true then it will also intercept click and hover events. Setting clickable to true may hurt performance. Further, for some models, if clickable is set to true they will intercept events that do not appear to be blocking, breaking scene functionality.

Properties​

Label: string

Visible: boolean

Position: vector3

Rotation: vector3 Adjust the rotation of the widget in degrees.

Scale: vector3

Model: model

Clickable: boolean Some models may cause problems if they are set to clickable. If you need to block click and hover interactions, and your model is not working, use bounding boxes to intercept the click and hover events. You could also try re-exporting your model from blender as that sometimes helps.

Widget: Explode​

The explode widget can be applied to a model and when triggered by a flow event will expand all meshes in the selected model.

Properties​

Label: string

Visible: boolean

Position: vector3

Rotation: vector3 Adjust the rotation of the widget in degrees.

Scale: vector3

Model: model

Model Variant: model-variant

Explode Amount: number

Explode Speed: number

Explode on Click: boolean

Parts not to Explode: child-select

Widget: Text​

Generates 2D text in the scene, you can update the text at runtime using the Set Text service.

Properties​

Label: string

Visible: boolean

Position: vector3

Rotation: vector3 Adjust the rotation of the widget in degrees.

Scale: vector3

Text: string

Font: font

Font Size: number

Color: color

Widget: Image​

Add an image to the scene. Currently the source needs to be just the filename on proviz servers. This will be changing soon. If the source is a png and transparency is set to true, transparent parts of the image will be transparent can otherwise they will be white.

Properties​

Label: string

Visible: boolean

Position: vector3

Rotation: vector3 Adjust the rotation of the widget in degrees.

Scale: vector3

Override File Source: boolean Turn on to Override file source and supply your own url.

File IDs: image

Image File Name: Multi Language Option Builder

Clickable: boolean

Opacity: number

Transparent: boolean

Render Order: number

Texture Encoding: select

Widget: Sprite​

Sprites are 2D animated images. Use a PNG sheet to as their source and be sure to set the correct number of vertical, horizontal and total tiles in the sheet. They are useful as buttons, or navigation assists within scenes. PNG sheets can be generated from gifs, movs, mp4 files and others using tools like https://www.codeandweb.com/free-sprite-sheet-packer for large animations you may need to use ImageMagick

Properties​

Label: string

Visible: boolean

Position: vector3

Rotation: vector3 Adjust the rotation of the widget in degrees.

Scale: vector3

Sprite Source: sprite

Frames Per Second: number

AutoPlay: boolean

Animate On Hover: boolean

Render Order: number

Texture Encoding: select

Widget: ARCS Section​

Properties​

Label: string

Visible: boolean

Position: vector3

Rotation: vector3 Adjust the rotation of the widget in degrees.

Scale: vector3

World Anchor: World Anchor

Widget: ARCS Step​

Properties​

Label: string

Visible: boolean

Position: vector3

Rotation: vector3 Adjust the rotation of the widget in degrees.

Scale: vector3

Audio: string

Title: string

StepType: string

Description: Multi Line String

Widget: ARCS Sync Point​

Properties​

Label: string

Visible: boolean

Position: vector3

Rotation: vector3 Adjust the rotation of the widget in degrees.

Scale: vector3

Thumbnail: string

Widget: ARCS QR​

Properties​

Label: string

Visible: boolean

Position: vector3

Rotation: vector3 Adjust the rotation of the widget in degrees.

Scale: vector3

Scene: scene

Widget: 2D Button​

A 2D button that is placed in the bottom bar next to the full screen or language selector buttons.

Properties​

Label: string

Visible: boolean

Position: vector3

Rotation: vector3 Adjust the rotation of the widget in degrees.

Scale: vector3

Icon: image

Button Label: Multi Language Option Builder

Class Name: string This classname will be added to the classnames, reference with .proviz-button.button-2d.[your class name] custom css in a scene.

Widget: Toggle​

Properties​

Label: string

Visible: boolean

Position: vector3

Rotation: vector3 Adjust the rotation of the widget in degrees.

Scale: vector3

Initial Value: boolean

Widget: Closed Caption​

A closed caption widget takes a video and places it over the scene in conjunction with a video widget. If you connect the Close Caption play service to a video Play Started event it will sync with the current time of the video triggering it. A video source can be set for every language in the scene. If there is not a source for the current language in the scene it will show the closed caption video for the default language in the scene (by default english[en]).

Properties​

Label: string

Visible: boolean

Position: vector3

Rotation: vector3 Adjust the rotation of the widget in degrees.

Scale: vector3

Video Options: video

Widget: Model Viewer​

The Model Viewer widget will open a modal with the embedded model viewer when clicked. If the device has support for AR a button to open the native AR viewer will be visible in the bottom right corner. Setting the variant for this widget does not currently have an effect. Development on that front is underway.

Properties​

Label: string

Visible: boolean

Position: vector3

Rotation: vector3 Adjust the rotation of the widget in degrees.

Scale: vector3

Marker Source: string

Model Variant: model-variant

Model: model

Widget: Plane​

A two sided plane.

Properties​

Label: string

Visible: boolean

Position: vector3

Rotation: vector3 Adjust the rotation of the widget in degrees.

Scale: vector3

Color: color

Receive Shadow: boolean

Side to render: select Which side to render in the scene.

Opacity: number

Widget: Progress Bar​

The progress bar widget adds a rectangular progress bar to the scene where the progress fill is set to the ratio from the Set Progress event. Connect the Set Progress service to the Counter widget's Changed Ratio event to set the progress. Border width and border radius must be less than half of either height and width.

Properties​

Label: string

Visible: boolean

Position: vector3

Rotation: vector3 Adjust the rotation of the widget in degrees.

Scale: vector3

Primary Color: color

Background Color: color

Border Radius: number

Border Width: number

Height: number

Width: number

Widget: Entry Point​

Properties​

Label: string

Visible: boolean

Position: vector3

Rotation: vector3 Adjust the rotation of the widget in degrees.

Scale: vector3

Query Options: List

Widget: Counter​

Properties​

Label: string

Visible: boolean

Position: vector3

Rotation: vector3 Adjust the rotation of the widget in degrees.

Scale: vector3

Start: number

Max: number This is value will be the denominator of the changed-ratio value. Cannot be set to 0.

Integers Only: boolean

Widget: Counter​

Properties​

Label: string

Visible: boolean

Position: vector3

Rotation: vector3 Adjust the rotation of the widget in degrees.

Scale: vector3

Start: number

Max: number This is value will be the denominator of the changed-ratio value. Cannot be set to 0.

Integers Only: boolean

Widget: List​

Properties​

Label: string

Visible: boolean

Position: vector3

Rotation: vector3 Adjust the rotation of the widget in degrees.

Scale: vector3

List: List

Widget: Mobile Check​

Properties​

Label: string

Visible: boolean

Position: vector3

Rotation: vector3 Adjust the rotation of the widget in degrees.

Scale: vector3

Mobile Scale: vector3

Widget: Mobile Switch​

Properties​

Label: string

Visible: boolean

Position: vector3

Rotation: vector3 Adjust the rotation of the widget in degrees.

Scale: vector3

Widget: Random Value​

Emit a random value in the number range at the frequency set.

Properties​

Label: string

Visible: boolean

Position: vector3

Rotation: vector3 Adjust the rotation of the widget in degrees.

Scale: vector3

Min Range: number

Max Range: number

Frequency: number

Integers Only: boolean

Widget: REST​

Properties​

Label: string

Visible: boolean

Position: vector3

Rotation: vector3 Adjust the rotation of the widget in degrees.

Scale: vector3

URL: string

Method: string

Headers: string

Is JSON: boolean

Value Result: string

Frequency: number

Widget: Scene Change​

Properties​

Label: string

Visible: boolean

Position: vector3

Rotation: vector3 Adjust the rotation of the widget in degrees.

Scale: vector3

Scene: scene

Options: Key Value Pairs

Open in new window: boolean

Widget: Toggle​

Properties​

Label: string

Visible: boolean

Position: vector3

Rotation: vector3 Adjust the rotation of the widget in degrees.

Scale: vector3

Initial Value: boolean

Widget: URL​

Properties​

Label: string

Visible: boolean

Position: vector3

Rotation: vector3 Adjust the rotation of the widget in degrees.

Scale: vector3

URL: string

Open in new window: boolean

Widget: Variant Emitter​

Properties​

Label: string

Visible: boolean

Position: vector3

Rotation: vector3 Adjust the rotation of the widget in degrees.

Scale: vector3

Model Variant: model-variant

Model: model

Widget: Step Manager​

Properties​

Label: string

Visible: boolean

Position: vector3

Rotation: vector3 Adjust the rotation of the widget in degrees.

Scale: vector3

Total Steps: number This is value will be the total number of steps

Widget: Resource​

Properties​

Label: string

Visible: boolean

Position: vector3

Rotation: vector3 Adjust the rotation of the widget in degrees.

Scale: vector3

Resource: string This is value will be the resource id being set

Widget: Text Format​

Properties​

Label: string

Visible: boolean

Position: vector3

Rotation: vector3 Adjust the rotation of the widget in degrees.

Scale: vector3

Text Format: string This is the value that will be used to set the resource id being set

Input Options: Key Value Pairs

Widget: Custom​

This is a placeholder for widgets that are available in Unity Apps but not on the web.

Properties​

Label: string

Visible: boolean

Position: vector3

Rotation: vector3 Adjust the rotation of the widget in degrees.

Scale: vector3

Custom Type: string

Data: Multi Line String

Javascript: string

CSS: string

Editor Reference Model: model

Editor Reference Model Variant: model-variant

Custom Events: List

Custom Services: List

Widget: Radial Menu​

Custom widget solution that triggers different events depending on where the image is clicked.

Properties​

Label: string

Visible: boolean

Position: vector3

Rotation: vector3 Adjust the rotation of the widget in degrees.

Scale: vector3

Image Source: string

Number of Options: number

Widget: Transport Menu​

Properties​

Label: string

Visible: boolean

Position: vector3

Rotation: vector3 Adjust the rotation of the widget in degrees.

Scale: vector3

Title: language-option-builder

Mobile Title: string

Options: Multi Language List

Custom CSS: Multi Line String

Open in new window: boolean

Widget: Timeline Element​

Custom widget solution that shows an image with a border that when clicked enlarges in front of a background video with a larger version of that image above text in the foreground.

Properties​

Label: string

Visible: boolean

Position: vector3

Rotation: vector3 Adjust the rotation of the widget in degrees.

Scale: vector3

Title: language-option-builder

Content: language-option-builder-multi-line

Custom CSS: Multi Line String

Image Source: string

Background Video Src: string

Border Color: string

Border Highlight Color: string

Widget: Circle Image​

Custom button solution that emits a text value when clicked.

Properties​

Label: string

Visible: boolean

Position: vector3

Rotation: vector3 Adjust the rotation of the widget in degrees.

Scale: vector3

Image Source: string

Border Color: string

Border Highlight Color: string

Hover Text: Multi Language Option Builder

Video Sources: Key Value Pairs

Closed Caption Source: string

Widget: Ambient Light​

Light that reaches all points with the same intensity. No position, rotation or scale. This light does not cast shadows.

Properties​

Label: string

Visible: boolean

Position: vector3

Rotation: vector3 Adjust the rotation of the widget in degrees.

Scale: vector3

Color: color

Intensity: number

Widget: Directional Light​

The directional light widget shines a light in one direction

Properties​

Label: string

Visible: boolean

Position: vector3

Rotation: vector3 Adjust the rotation of the widget in degrees.

Scale: vector3

Color: color

Intensity: number

Cast Shadow: boolean

Show Light Helper: boolean

Shadow Map Size: select Use this to control the sharpness of cast shadows in the scene. Larger shadow map sizes will slow performance on low powered devices.

Shadow Bias: number Use this property to help objects feel grounded on a surface. It can remove shadow acne from surfaces facing the light source.

Widget: Hemisphere Light​

A light source positioned directly above the scene, with color fading from the sky color to the ground color. This light does not cast shadows.

Properties​

Label: string

Visible: boolean

Position: vector3

Rotation: vector3 Adjust the rotation of the widget in degrees.

Scale: vector3

Color: color The color projected by the upper half of this light.

Ground Color: color The color projected by the lower half of this light.

Intensity: number

Widget: Point Light​

A light that emanates from a single point like a light bulb. Can cast shadows.

Properties​

Label: string

Visible: boolean

Position: vector3

Rotation: vector3 Adjust the rotation of the widget in degrees.

Scale: vector3

Color: color

Intensity: number

Cast Shadow: boolean

Widget: Spot Light​

A spot light. This light gets emitted from a single point in one direction, along a cone that increases in size the further from the light it gets. Can cast shadows.

Properties​

Label: string

Visible: boolean

Position: vector3

Rotation: vector3 Adjust the rotation of the widget in degrees.

Scale: vector3

Color: color

Intensity: number

Cast Shadow: boolean

Widget: Switch​

Properties​

Label: string

Visible: boolean

Position: vector3

Rotation: vector3 Adjust the rotation of the widget in degrees.

Scale: vector3

Initial Value: boolean

Options: Key Value Pairs

Widget: Variant Switch Widget​

The variant switch widget can be used to let the user change the variant of a model used in a scene. When clicked it will open a menu with all of the variants for the selected model listed. When the user makes a selection it will emit an Output Variant event that if connected to a widget with a Set Variant service, will set that widget's variant. Be sure that any connected widgets have the same model selected, inconsistency here will break functionality.

Properties​

Label: string

Visible: boolean

Position: vector3

Rotation: vector3 Adjust the rotation of the widget in degrees.

Scale: vector3

Title Text: string

Menu Background: string

Text Color: color

Marker Source: string

Model Variant: model-variant

Model: model

Widget: Teleport​

Properties​

Label: string

Visible: boolean

Position: vector3

Rotation: vector3 Adjust the rotation of the widget in degrees.

Scale: vector3

Widget: Toolbelt​

Properties​

Label: string

Visible: boolean

Position: vector3

Rotation: vector3 Adjust the rotation of the widget in degrees.

Scale: vector3

Widget: Rotation Group​

A widget that works similar to the group view. It will provide a full 360 degree rotation over a set amount of time (in seconds) to all of the children in its heirarchy.

Properties​

Label: string

Visible: boolean

Position: vector3

Rotation: vector3 Adjust the rotation of the widget in degrees.

Scale: vector3

Start Rotating: boolean By clicking this, you are enabling the starting and stopping of the widget rotation on load.

Set Rotation Speed: vector3 Setting this number sets the number of times the widget spins a full 360 degrees on its axis.

Widget: Position Group​

A widget that works similar to the group view. It will provide a dynamic scale effect to all of the children in its heirarchy.

Properties​

Label: string

Visible: boolean

Position: vector3

Rotation: vector3 Adjust the rotation of the widget in degrees.

Scale: vector3

Start Moving: boolean By clicking this, you are enabling the starting and stopping of the widget position on load.

Set Move Direction: vector3 Setting this property sets how far the transition will go.

Set Move Speed: number Setting this property controls how long the translation will take in seconds before moving to the next destination.

Loop Movement: boolean

Widget: Annotation​

Properties​

Label: string

Visible: boolean

Position: vector3

Rotation: vector3 Adjust the rotation of the widget in degrees.

Scale: vector3

Text: string

Widget: Audio​

Add an audio clip to your scene.

Properties​

Label: string

Visible: boolean

Position: vector3

Rotation: vector3 Adjust the rotation of the widget in degrees.

Scale: vector3

Audio Sources: audio-options

Play on Load: boolean

Loop: boolean

Widget: Area Target​

Properties​

Label: string

Visible: boolean

Position: vector3

Rotation: vector3 Adjust the rotation of the widget in degrees.

Scale: vector3

Area Target: string

Widget: Face Target​

Properties​

Label: string

Visible: boolean

Position: vector3

Rotation: vector3 Adjust the rotation of the widget in degrees.

Scale: vector3

Widget: Image Target​

Properties​

Label: string

Visible: boolean

Position: vector3

Rotation: vector3 Adjust the rotation of the widget in degrees.

Scale: vector3

Image Target: string

Widget: Model Target​

Properties​

Label: string

Visible: boolean

Position: vector3

Rotation: vector3 Adjust the rotation of the widget in degrees.

Scale: vector3

Model Target: string

Load On Init: boolean

Widget: Plane Target​

Properties​

Label: string

Visible: boolean

Position: vector3

Rotation: vector3 Adjust the rotation of the widget in degrees.

Scale: vector3

Load On Init: boolean

Widget: Video Playlist 2D​

Properties​

Label: string

Visible: boolean

Position: vector3

Rotation: vector3 Adjust the rotation of the widget in degrees.

Scale: vector3

Widget: Web​

Properties​

Label: string

Visible: boolean

Position: vector3

Rotation: vector3 Adjust the rotation of the widget in degrees.

Scale: vector3

URL: string

Custom Events: List