Skip to content

ARRenderer Widget

ARRenderer widget helps you to add virtual objects to a real- live video. ARRenderer widget helps you add Augmented Reality capabilities to your application.

Augmented reality helps in the following use cases:

  • Virtual meetings
  • Virtual designing
  • In healthcare, to view the body of the patient and perform medical procedures

Note: ARRenderer widget is supported on iPhone X and later versions iOS mobile devcies.
In Android devices you must use the getOpenGlESVersion API to check if your device supports augmented reality.

Widgets are normally added to your application by using Volt MX Iris, but they can also be added through code. For general information on using widgets in Volt MX Iris, refer Designing an Application in the Iris User Guide.

Note: To enable the ARRenderer widget in Android platform, you must enable the arEnabled property in the androidbuild.properties file. For more information about how to add a parameter in androidbuild.properties file, click here.

The ARRenderer widget capabilities can be broadly categorized into the following:

Layout

Events Description
doLayout Invoked for every widget when the widget position and dimensions are computed.
Properties Description
bottom Determines the bottom edge of the widget and is measured from the bottom bounds of the parent container.
centerX Determines the center of a widget measured from the left bounds of the parent container.
centerY Determines the center of a widget measured from the top bounds of the parent container.
contentAlignment Specifies the alignment of the text for a widget with respect to its boundaries.
height It determines the height of the widget and measured along the y-axis.
left Determines the lower left corner edge of the widget and is measured from the left bounds of the parent container.
maxHeight Specifies the maximum height of the widget and is applicable only when the height property is not specified.
maxWidth Specifies the maximum width of the widget and is applicable only when the width property is not specified.
minHeight Specifies the minimum height of the widget and is applicable only when the height property is not specified.
minWidth Specifies the minimum width of the widget and is applicable only when the width property is not specified.
right Determines the lower right corner of the widget and is measured from the right bounds of the parent container.
top Determines the top edge of the widget and measured from the top bounds of the parent container.
width Determines the width of the widget and is measured along the x-axis.
zIndex Specifies the stack order of a widget.

Capturing Features

Methods Description
add Used to add the model of an object to the area scanned using the ARRenderer widget.
remove Used to removed model of an object to the area scanned using the ARRenderer widget.
startARImageDetection Initiates the AR Image Detection and overlay the Image or Video using the ARRenderer widget.
startRendering Initiates the Augmented Reality session using the ARRenderer widget.
stopRendering Stops the Augmented Reality session using the ARRenderer widget.
stopARImageDetection Stops the AR Image Detection and rendering using the ARRenderer widget.
Properties Description
activatesCoachingOverlayAutomatically Provides a GUI to move the device camera, whenever SDK requires tracking information.
debugOptions Shows the area that has been already scanned on the device screen
overlay Sets a container for the UI controls that needs to be rendered on top of a scene
sceneConfig Sets the method of scanning an area

Storage Capabilities

Methods Description
clearExperience Used to delete the saved AR session in iOS 13 and later.
hostCloudAnchor Used to add or save the model of the object and host the anchor points on the Cloud for Android platform.
loadExperience used to retrieve the AR world mapping data from the local device storage in iOS 13 and later.
resolveCloudAnchor Used to retrieve the anchor points of the model from the Cloud for Android platform.
saveExperience Used to save the mapping data object (AR world) in the device local storage in iOS 13 and later.
Properties Description
canSaveExperienceCallback Used to determine when the session can be saved in iOS 13 and later.
enableCloudAnchors Used to manage the Cloud Anchor in Android platform.

Configurations common to all widgets

Methods Description
convertPointFromWidget Allows you to convert the coordinate system from a widget to a point (receiver's coordinate system).
convertPointToWidget Allows you to convert the coordinate system from a widget to a point (receiver's coordinate system).
removeFromParent Allows you to remove a child widget from a parent widget.
setEnabled Specifies the widget that must be enabled or disabled.
setFocus Specifies the widget on which there must be focus.
setVisibility Use this method to set the visibility of the widget.
Properties Description
accessibilityConfig Enables you to control accessibility behavior and alternative text for the widget.
id id is a unique identifier of the Camera Widget consisting of alphanumeric characters.
info A custom JSObject with the key-value pairs that a developer can use to store the context with the widget.
isVisible Controls the visibility of a widget on the form.
parent Helps you access the parent of the widget.

ARRenderer Widget Basics

ARRenderer widget is used implement Augment Reality in your application.

To implement a simple augmented reality in your application, follow these steps.

  1. Create an instance of ARRenderer widget using the constructor: voltmx.ui.ARRenderer. In this constructor you can provide the scene configurations and the model configurations while creating the widget instance. You can also add an overlay with UI (such as buttons) in the widget.
  2. After the widget has been created, use startRendering method to open the ARRenderer widget instance on the device camera.
  3. Once the widget has started rendering, when the user touches the screen to add the model, you can use the touch events to get the x and y coordinates. After you get the x and y coordinates, use the addGestureRecognizer method to add the model to the scene.
  4. Using the overlay specified in the first point, the user can stop the camera. To stop the ARRenderer widget from capturing use the stopRendering method.

Note: ARRenderer widget is not supported for SPA and Desktop Web platform.

Creating an ARRenderer widget Using the Constructor: voltmx.ui.ARRenderer


var myscene = new voltmx.ui.ARRenderer(arBasic, arLayout, arPsp);
  • arBasic is an object with basic properties.
  • arLayout is an object with layout properties.
  • arPsp is an object with platform specific properties.

Note: The configuration properties should be passed only in the respective configuration objects otherwise they are ignored.

Example

//Sample code for creating an ARRenderer widget. 

var myscene = new voltmx.ui.ARRenderer({
 "placeholderText": "Please wait while the camera loads..",
 "placeholderSkin": "mpiSknlblItemName",
 "height": "100%",
 "id": "arscene",
 "isVisible": true,
 "left": "0%",
 "top": "0%",
 "width": "100%",
 "zIndex": 1
}, {
 "contentAlignment": constants.CONTENT_ALIGN_CENTER,
 "displayText": true,
 "padding": [0, 0, 0, 0],
 "paddingInPixel": false
}, {
});