Vision Widget

The VisionWidget shows the current state of the vision system. There are two different vision systems that are used by different aircraft. Older aircraft have three states that indicate whether the system is enabled and working correctly. Newer aircraft such as the Mavic 2 and Mavic 2 Enterprise have an omnidirectional vision system, which means they use the statuses that begin with "OMNI" to indicate which directions are enabled and working correctly.

VisionSystemStatus states

Image	State	Description
	`NORMAL`	The vision system is functioning normally.
	`DISABLED`	The vision system is not available. This could be due to the flight mode, tap mode, tracking mode, draw status, or hardware failure.
	`CLOSED`	Obstacle avoidance is disabled by the user.
	`OMNI_ALL`	Product has omnidirectional obstacle avoidance sensors and all vision systems are available.
	`OMNI_FRONT_BACK`	Product has omnidirectional obstacle avoidance sensors and only forward and backward vision systems are available. Left and right vision systems are only available in ActiveTrack mode and Tripod mode.
	`OMNI_DISABLED`	Product has omnidirectional obstacle avoidance sensors and the vision system is not available. This could be due to the flight mode, tap mode, tracking mode, draw status, or hardware failure.
	`OMNI_CLOSED`	Product has omnidirectional obstacle avoidance sensors and obstacle avoidance is disabled by the user.

The icon is tinted gray when no product is connected:

Usage

<dji.ux.beta.core.widget.vision.VisionWidget
    android:id="@+id/widget_vision"
    android:layout_width="22dp"
    android:layout_height="wrap_content" />

The ideal dimension ratio for this widget is 1:1.

Customizations

The UI elements can be customized to match the style of the user's application. The customizations can be done using attributes in XML or programmatically using the APIs.

XML Example

<dji.ux.beta.core.widget.vision.VisionWidget
    android:id="@+id/widget_vision"
    android:layout_width="22dp"
    android:layout_height="wrap_content"
    app:uxsdk_normalVisionIcon="@drawable/ic_visibility_white_24dp"
    app:uxsdk_disabledVisionIcon="@drawable/ic_visibility_off_gray_24dp"
    app:uxsdk_closedVisionIcon="@drawable/ic_visibility_off_red_24dp"
    app:uxsdk_omniAllVisionIcon="@drawable/ic_visibility_green_24dp"
    app:uxsdk_onmiFrontBackVisionIcon="@drawable/ic_visibility_white_24dp"
    app:uxsdk_omniDisabledVisionIcon="@drawable/ic_visibility_off_gray_24dp"
    app:uxsdk_omniClosedVisionIcon="@drawable/ic_visibility_off_red_24dp" />

Attributes

List of the customizable XML attributes

uxsdk_normalVisionIcon - The icon that is displayed when the VisionSystemStatus is NORMAL.
uxsdk_disabledVisionIcon - The icon that is displayed when the VisionSystemStatus is DISABLED.
uxsdk_closedVisionIcon - The icon that is displayed when the VisionSystemStatus is CLOSED.
uxsdk_omniAllVisionIcon - The icon that is displayed when the VisionSystemStatus is OMNI_ALL.
uxsdk_omniFrontBackVisionIcon - The icon that is displayed when the VisionSystemStatus is OMNI_FRONT_BACK.
uxsdk_omniClosedVisionIcon - The icon that is displayed when the VisionSystemStatus is OMNI_CLOSED.
uxsdk_omniDisabledVisionIcon - The icon that is displayed when the VisionSystemStatus is OMNI_DISABLED.
uxsdk_visionIconBackground - The background of the vision icon.

Java Example

VisionWidget visionWidget = findViewById(R.id.widget_vision);
visionWidget.setVisionIcon(VisionWidgetModel.VisionSystemStatus.NORMAL, R.drawable.ic_visibility_white_24dp);
visionWidget.setVisionIcon(VisionWidgetModel.VisionSystemStatus.DISABLED, R.drawable.ic_visibility_off_gray_24dp);
visionWidget.setVisionIcon(VisionWidgetModel.VisionSystemStatus.CLOSED, R.drawable.ic_visibility_off_red_24dp);
visionWidget.setVisionIcon(VisionWidgetModel.VisionSystemStatus.OMNI_ALL, R.drawable.ic_visibility_green_24dp);
visionWidget.setVisionIcon(VisionWidgetModel.VisionSystemStatus.OMNI_FRONT_BACK, R.drawable.ic_visibility_white_24dp);
visionWidget.setVisionIcon(VisionWidgetModel.VisionSystemStatus.OMNI_DISABLED, R.drawable.ic_visibility_off_gray_24dp);
visionWidget.setVisionIcon(VisionWidgetModel.VisionSystemStatus.OMNI_CLOSED, R.drawable.ic_visibility_off_red_24dp);

Kotlin Example

val visionWidget: VisionWidget = findViewById(R.id.widget_vision)
visionWidget.setVisionIcon(VisionWidgetModel.VisionSystemStatus.NORMAL, R.drawable.ic_visibility_white_24dp)
visionWidget.setVisionIcon(VisionWidgetModel.VisionSystemStatus.DISABLED, R.drawable.ic_visibility_off_gray_24dp)
visionWidget.setVisionIcon(VisionWidgetModel.VisionSystemStatus.CLOSED, R.drawable.ic_visibility_off_red_24dp)
visionWidget.setVisionIcon(VisionWidgetModel.VisionSystemStatus.OMNI_ALL, R.drawable.ic_visibility_green_24dp)
visionWidget.setVisionIcon(VisionWidgetModel.VisionSystemStatus.OMNI_FRONT_BACK, R.drawable.ic_visibility_white_24dp)
visionWidget.setVisionIcon(VisionWidgetModel.VisionSystemStatus.OMNI_DISABLED, R.drawable.ic_visibility_off_gray_24dp)
visionWidget.setVisionIcon(VisionWidgetModel.VisionSystemStatus.OMNI_CLOSED, R.drawable.ic_visibility_off_red_24dp)

APIs

List of the customization APIs

fun setVisionIcon(status: VisionWidgetModel.VisionSystemStatus, @DrawableRes resourceId: Int) - Set the icon to the given image when the VisionSystemStatus is the given value.
fun setVisionIcon(status: VisionWidgetModel.VisionSystemStatus, drawable: Drawable?) - Set the icon to the given image when the VisionSystemStatus is the given value.
fun getVisionIcon(status: VisionWidgetModel.VisionSystemStatus): Drawable? - Get the image that the icon will change to when the VisionSystemStatus is the given value.
fun setIconBackground(@DrawableRes resourceId: Int) - Set the background of the icon to the given image.
var iconBackground: Drawable? - The background of the icon to the given image.
var disconnectedStateIconColor: Int - The color of the vision icon when the product is disconnected.

Hooks

The widget provides hooks for users to add functionality based on state changes in the widget. The vision widget provides the following hooks

ModelState - Provides hooks in events received by the widget from the widget model.

data class ProductConnected(val isConnected: Boolean) : ModelState() - Event when product is connected or disconnected.
data class VisionSystemStatusUpdated(val visionSystemState: VisionWidgetModel.VisionSystemState) : ModelState() - Event when the VisionSystemState is updated
data class UserAvoidanceEnabledUpdated(val isUserAvoidanceEnabled: Boolean) : ModelState() - Event when user avoidance is enabled or disabled.

The user can subscribe to this using fun getWidgetStateUpdate(): Flowable<ModelState>.

UIState - Provides hooks in events related to user interaction with the widget.

object WidgetClicked : UIState() - Event when widget is clicked.
object VisibilityUpdated : UIState() - Event when visibility is updated based on product change.

The user can subscribe to this using fun getUIStateUpdates(): Flowable.

DJI UX SDK Version 5 Beta 5