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
arEnabledproperty in theandroidbuild.propertiesfile. For more information about how to add a parameter inandroidbuild.propertiesfile, 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.
- 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.
- After the widget has been created, use startRendering method to open the ARRenderer widget instance on the device camera.
- 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.
- 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
}, {
});