Skip to content

Augmented Reality#

AR Icon

Overview#

The Augmented Reality widget enables the user to define a view of the multiple objects in the environment. Through the configuration of this widget, users are able to pick and interact with the desired objects.

General Steps#

To use the Augmented Reality widget in a UI Page, follow the steps below:

  1. In any UI Page in Build mode, select the Augmented Reality from the widgets list located on the left side of the page; drag and drop to the desired place in the UI Page.
  2. Enter the Settings section of the widget through the three vertical dots.
  3. In the General tab, provide a name and a description for the widget. Use the toggle buttons to specify whether the widget should be visible, display the header, or allow full screen mode. Additionally, determine if the widget can be opened as an image in a new tab or exported as an image. You can also select the navigation mode behavior: open a new page, replace the current page, or none.

Diagram showing an SVG element.

Widget Customization#

  1. Optionally, in the Style tab, you can define a Border Width and Color.

    Screenshot showing the AR widget customization settings with options for border width and color.

  2. In the Setup tab, define:

    • Alow Rotation - Specify whether to allow rotation. This option is set to true by default.
    • Allow Depth - Specify whether to allow depth. This option is set to true by default.
    • Zoom - Set the zoom factor. This value ranges from 0.5 to 1.5, with increments of 0.1. The zoom factor works as follows:

      • 0.5 - Reduces the size by half.
      • 1 - No zoom (default size).
      • 1.5 - Magnifies the size by half.

    Screenshot showing augmented reality widget settings.

  3. Optionally, define the Links between this widget and other elements of the UI Page.

    Screenshot showing widget augmented reality settings with links to other UI page elements.

  4. By saving and closing the settings, the widget will be changed accordingly.

Info

For more information, see the Augmented Reality tutorial.